~mika/www.m1kadev.nl

c6127c07e00c83bcc088d3713ee9a87ab0b91d12 — m1ka 2 months ago ea1b870 
Change fonts, reimplement qoute system from old m1kadev
patch browse .tar.gz .zip 
18 files changed, 89 insertions(+), 69 deletions(-)

M bricks/base-header.thtml
M bricks/extended-footer.thtml
M bricks/navbar.thtml
M kethel/lib/bricks.ex
M kethel/package-lock.json
A pages/blog.fxg
M pages/colophon.fxg
M pages/index.fxg
A scripts/fetch-greet.js
D scripts/rotate-colon-three.js
A static/nowhere.html
M styles/base.css
A styles/colophon.css
M styles/index.css
M templates/base.thtml
M templates/pages/colophon.thtml
M templates/pages/index.thtml
M templates/thoughts.thtml

M bricks/base-header.thtml => bricks/base-header.thtml +5 -1
@@ 1,4 1,8 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/styles/base.css">
<script src="/scripts/dyn-codeberg-logo.js"></script>
\ No newline at end of file
<script src="/scripts/dyn-codeberg-logo.js"></script>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Geom:ital,wght@0,300..900;1,300..900&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap" rel="stylesheet">
\ No newline at end of file


M bricks/extended-footer.thtml => bricks/extended-footer.thtml +1 -2
@@ 2,6 2,5 @@
<div>
{{ &extended_build_info }} <br>
All content on this website is licensed under <a href="">CC-BY-SA-4.0</a>, unless otherwise noted. <br>
proudly not powered by wordpress.
</div>
proudly not powered by wordpress</div>
</footer>


M bricks/navbar.thtml => bricks/navbar.thtml +9 -5
@@ 1,18 1,22 @@
<header>
<div id="wordmark">
    <span><i>www.</i><span>m1kadev.nl</span></span>
    <span><span>www.</span><i>m1kadev.nl</i></span>
</div>
<nav>
    <h3>on this site</h3>
    <div class="link-group">
        <a href="/">home</a>
        <a href="/projects.html">projects</a>
	<a href="/now.html">now</a>
        <a href="/blog.html">blog</a>
    </div>
    <div class="link-group">
        <a href="/now.html">now</a>
        <a href="/thoughts/">thoughts</a>
        <a href="/colophon.html">colophon</a>
    </div>
    <!-- <h3>on this page</h3>
    <div class="link-group">
    </div> -->
        <a href="/colophon.html">colophon</a>
        <a href="/static/nowhere.html">nowhere</a>
    </div>

</nav>
</header>


M kethel/lib/bricks.ex => kethel/lib/bricks.ex +2 -2
@@ 29,8 29,8 @@ defmodule Bricks do
    """

    extended_footer = """
      Built from commit <a href="https://codeberg.org/m1ka/www.m1kadev.nl/commit/#{git_commit}">#{git_commit |> String.trim()}</a>, using lightningcss #{lcss_version |> String.trim()},
      html-minifier-next version #{hmn_version |> String.trim()}, uglifyjs version #{ujs_version |> String.trim()}, on #{e_build_date |> String.trim()}.
      Built from commit <a href="https://codeberg.org/m1ka/www.m1kadev.nl/commit/#{git_commit}">#{git_commit |> String.trim()}</a>, using #{lcss_version |> String.trim()},
      html-minifier-next version #{hmn_version |> String.trim()}, #{ujs_version |> String.trim()}, on #{e_build_date |> String.trim()}.
    """

    Map.merge(%{build_info: footer, extended_build_info: extended_footer}, from_files)


M kethel/package-lock.json => kethel/package-lock.json +1 -1
@@ 7,7 7,7 @@
    "": {
      "name": "kethel",
      "version": "0.1.0",
      "license": "MIT",
      "license": "AGPL-3.0-or-later",
      "dependencies": {
        "html-minifier-next": "^4.17.0",
        "lightningcss-cli": "^1.30.2",


A pages/blog.fxg => pages/blog.fxg +3 -0
@@ 0,0 1,3 @@
===== blog =====

comic son :)


M pages/colophon.fxg => pages/colophon.fxg +1 -1
@@ 4,7 4,7 @@ you're looking at a <#https://en.wiktionary.org/wiki/beautiful#English beautiful

===== fonts =====

this website is intended to be set in //New York//, an <#https://developer.apple.com/fonts/ Apple system font>, with Georgia, and then the CSS standard serif fonts, as fallback fonts for sans-serif fonts, i use //SF Pro//, also an Apple system font, with //Tahoma//, and then the CSS sans-serif as fallback fonts.
this website's main text is set in //Merriweather//, a serif font optimised for screens. All headers and other sans-serif elements are set in //Geom//.

===== technical =====



M pages/index.fxg => pages/index.fxg +2 -2
@@ 1,6 1,6 @@
====== haii :3 i'm mika !! ======
====== haii !! i'm mika! ======

haii! i'm mika (also //m1ka//, //m1kadev//). i'm a (mostly backend) developer from <#https://wikipedia.org/wiki/The_Netherlands The Netherlands>. besides programming, i also like to play music and cook.
haii! i'm mika (also sometimes //m1ka//, //m1kadev//). i'm a (mostly backend) developer from <#https://wikipedia.org/wiki/The_Netherlands The Netherlands>. besides programming, i also like to play music and cook.

===== about me =====



A scripts/fetch-greet.js => scripts/fetch-greet.js +7 -0
@@ 0,0 1,7 @@
// TOOD: proper CORS-ing on api.m1kadev.bl
addEventListener("DOMContentLoaded", async ev => {
    const greetElement = document.getElementById("greet");
    const request = await fetch("https://api.m1kadev.nl/greet");
    const repsonse = await request.json();
    greetElement.innerHTML = repsonse.qoute; // this is misspelled in the prod api LMAAO
});
\ No newline at end of file


D scripts/rotate-colon-three.js => scripts/rotate-colon-three.js +0 -4
@@ 1,4 0,0 @@
addEventListener("DOMContentLoaded", _ => {
    const header = document.getElementsByTagName("main").item(0).children[0];
    header.innerHTML = "haii <span id=\"colon-three\">3</span> i'm mika !!";
});
\ No newline at end of file


A static/nowhere.html => static/nowhere.html +16 -0
@@ 0,0 1,16 @@
<html>

<head>
    <title>404 Not Found</title>
</head>

<body>
    <center>
        <h1>404 Not Found</h1>
    </center>
    <hr>
    <center>nginx/1.28.3</center>
    <h3><a href="/" style="position: absolute;top: 1em;left: 1em;">&lt;- return</a></h3>
</body>

</html>
\ No newline at end of file


M styles/base.css => styles/base.css +23 -12
@@ 1,9 1,9 @@
:root {
    --serif-font: "New York", "Georgia", serif;
    --sans-serif-font: "SF Pro", "Tahoma", sans-serif;
    --serif-font: "Merriweather", serif;
    --sans-serif-font: "Geom", sans-serif;
    color-scheme: light dark;
    --fg-color: light-dark(#0A0A0A, #FFFFFF);
    --bg-color: light-dark(#e9e9e9, #1c1c1d);
    --fg-color: light-dark(#0A0A0A, #eee);
    --bg-color: light-dark(#e9e9e9, #212121);
    --accent-color: #ee41b4;
}



@@ 25,8 25,9 @@ h6 {
    margin: 0;
    border-bottom: .1rem solid var(--fg-color);
    padding: .5rem;
    font-weight: normal;
    font-weight: 500;
    font-style: italic;
    font-stretch: condensed;
}

a {


@@ 53,12 54,12 @@ header {
    margin-left: auto;
}

#wordmark>span>i {
#wordmark>span>span {
    text-align: left;
    display: block;
}

#wordmark>span>span {
#wordmark>span>i {
    text-align: left;
    display: block;
    font-family: var(--sans-serif-font);


@@ 129,6 130,10 @@ img#codeberg {

@media (min-width: 900px) {

    footer>#build-info {
        padding: 0;
    }

    .link-group {
        flex-direction: column;
        padding: .5rem;


@@ 174,17 179,23 @@ img#codeberg {

    footer {
        padding: .5rem;
        border-bottom: .1rem solid var(--fg-color);
        display: flex;
    }

    footer>#build-info {
        display: inline;
	padding-right: calc(-450px + 100%);
        width: 450px;
        display: inline-block;
    }

    footer>#links {
        border-top: 0 solid transparent;
        display: inline;
        float: right;
        display: inline-block;
        padding: 0;
        margin-top: auto;
        margin-bottom: auto;
        margin-left: auto;
        padding-right: .5em;
    }

}
}
\ No newline at end of file


A styles/colophon.css => styles/colophon.css +11 -0
@@ 0,0 1,11 @@
@keyframes blink {
    50% {
        opacity: 0;
    }
}

footer>div::after {
    content: "_";
    font-family: var(--sans-serif-font);
    animation: blink 1s steps(1) infinite;
}
\ No newline at end of file


M styles/index.css => styles/index.css +4 -31
@@ 1,32 1,5 @@
@keyframes rotate {
    0% {
        transform: rotate(90deg) scaleY(-1);
    }

    50% {
        transform: rotate(90deg) scaleY(1);
    }

    100% {
        transform: rotate(90deg) scaleY(-1);
    }
}

#colon-three {
    display: inline-block;
    font-style: normal;
    font-family: "Comic Sans MS", "Comic Sans", "Comic Neue", sans-serif;

    animation-name: rotate;
    animation-duration: 90s;
    animation-iteration-count: infinite;
    animation-timing-function: steps(1);
}

#colon-three::before {
    content: ":";
}

#colon-three:hover::before {
    content: ";";
#greet {
    writing-mode: vertical-rl;
    border-bottom: 0;
    border-left: .1rem solid var(--fg-color);
}
\ No newline at end of file


M templates/base.thtml => templates/base.thtml +0 -1
@@ 3,7 3,6 @@

<head>
    {{ &base_header }}
    <script src="/scripts/dyn-codeberg-logo.js"></script>
    <title>{{ location }} - m1kadev</title>
    {{ &ogp }}
</head>


M templates/pages/colophon.thtml => templates/pages/colophon.thtml +1 -2
@@ 5,8 5,7 @@
    {{ &base_header }}
    <title>{{ location }} - m1kadev</title>
    {{ &ogp }}

    <script src="/scripts/dyn-codeberg-logo.js"></script>
    <link rel="stylesheet" href="/styles/colophon.css">
</head>

<body>


M templates/pages/index.thtml => templates/pages/index.thtml +2 -2
@@ 3,14 3,13 @@

<head>
    {{ &base_header }}
    <script src="/scripts/dyn-codeberg-logo.js"></script>
    <script src="/scripts/rotate-colon-three.js"></script>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap" rel="stylesheet">
    <link href="/styles/index.css" rel="stylesheet">

    <script src="/scripts/fetch-greet.js"></script>

    <title>{{ location }} - m1kadev</title>
    {{ &ogp }}


@@ 22,5 21,6 @@
        {{ &fxg_content }}
        {{ &footer }}
    </main>
    <h1 id="greet">placehoders are nice :)</h1>
</body>
</html>
\ No newline at end of file


M templates/thoughts.thtml => templates/thoughts.thtml +1 -3
@@ 14,9 14,7 @@
    <main>
        <h1>my thoughts :3</h1>
        {{ &fxg_content }}
        <footer>
            {{ &footer }}
        </footer>
        {{ &footer }}
    </main>
</body>
</html>
\ No newline at end of file