minor formatting

add navbar
update banner
2025-10-10 22:42:05 -03:00 · 2025-10-10 22:36:38 -03:00 · 2025-10-10 20:17:07 -03:00 · 2025-10-10 19:45:29 -03:00 · 2025-10-10 19:30:14 -03:00 · 2025-10-10 19:17:41 -03:00
20 changed files with 89 additions and 31 deletions
--- a/_img/home_banner.xcf
+++ b/_img/home_banner.xcf
--- a/_includes/base.njk
+++ b/_includes/base.njk
@ -5,17 +5,18 @@
    </head>
    <body>
        <div class="main-page-wrapper">
-                <div class="header-wrapper">
-                    <img class="header-banner" src="/img/banner-alt.png" alt="yukinets">
+            <div class="header-wrapper">
+                <div class="header">
+                    <a href="/" alt="yukinets"><div class="header-banner"></div></a>
                </div>
-                <marquee class="motd" behavior="scroll" direction="left">
-                    <img src="/img/Witch-on-broom.gif" alt="">
-                    <p>{{ motd if motd else meta.motd }}</p>
-                </marquee>
-                <nav class="navbar-wrapper">
-                    <img class="nav-button" src="/img/hbutton.png" alt="Home">
-                </nav>
+                {% include "topmost_navbar.njk" %}
+            </div>
+
            {{ content | safe }}
+            
+            <marquee class="motd" behavior="scroll" direction="left">
+                <img src="/img/Witch-on-broom.gif" alt="">
+            </marquee>
        </div>
    </body>
 </html>
--- a/_includes/base_head.njk
+++ b/_includes/base_head.njk
@ -1,4 +1,4 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>{% if title %} {{ title }} | {{ meta.sitename }} {% else %} {{ meta.sitename }} {% endif %}</title>
-<link rel="stylesheet" href="/css/{{ style if style else "main" }}.css">
+<link rel="stylesheet" href="/css/{{ style if style else "main" }}.css">
--- a/_includes/fonts.scss
+++ b/_includes/fonts.scss
@ -0,0 +1,8 @@
+$ll: "Love LetterTW";
+
+@font-face {
+    font-family: $ll;
+    font-style: normal;
+    font-weight: normal;
+    src: local($ll), url('/css/fonts/Lovelt__.woff') format('woff');
+}
--- a/_includes/general.scss
+++ b/_includes/general.scss
@ -1,3 +1,5 @@
+@use "main-palette.scss" as mp;
+
 * {
    margin: 0;
    box-sizing: border-box;
@ -8,4 +10,5 @@
    min-width: 0;
    max-width: 802px;
    margin: 8px auto;
+    border: 1px solid mp.$border;
 }
--- a/_includes/main-palette.scss
+++ b/_includes/main-palette.scss
@ -1,2 +1,4 @@
-$bg: #e4ffdc;
-$border: #000;
+$bg: #000;
+$border: #761026;
+$link: #ad3040;
+$text: #ffd2dd;
--- a/_includes/topmost_navbar.njk
+++ b/_includes/topmost_navbar.njk
@ -0,0 +1,8 @@
+<nav class="navbar-wrapper">
+    <ul>
+        <li><a href="/">home</a></li>
+        <li><a href="/about">about</a></li>
+        <li><a href="/blog">blog</a></li>
+        <li><a href="/contact">contact</a></li>
+    </ul>
+</nav>
--- a/css/fonts/Lovelt__.woff
+++ b/css/fonts/Lovelt__.woff
--- a/css/main.scss
+++ b/css/main.scss
@ -1,32 +1,68 @@
+@use "sass:color" as c;
+
@use "general";
+@use "fonts";
@use "main-palette" as mp;

 body {
    background-color: mp.$bg;
-    background-image: url("/img/bgpat.png");
-    background-repeat: repeat;
+    /*background-image: url("/img/bgpat.png");
+    background-repeat: repeat;*/
+
+    a { color: mp.$link; }
+    a:hover { color: c.adjust($color: mp.$link, $saturation: 4%, $lightness: 10%); }
+
+    p { color: mp.$text }
 }

 .header-wrapper {
-    width: 100%;
-
-    img {
-        border: 1px solid mp.$border;
+    display: flex;
+    align-items: flex-start;
+    gap: 16px;
+    .header {
        display: block;
-        margin-bottom: 8px;
+        .header-banner {
+            background-image: url("/img/home_banner.jpg");
+            width: 298px;
+            height: 140px;
+            border-right: 1px solid mp.$border;
+            border-bottom: 1px solid mp.$border;
+            border-radius: 0% 0% 20px 0%;
+        }
+        .header-banner:hover{ background-image: url("/img/home_banner_hover.jpg"); }
    }
-}

-.motd {
-    img { display: inline; }
-    p { display: inline; }
-}
+    .navbar-wrapper {
+        display: flex;
+        align-items: flex-start;
+        margin-top: 8px;

-.navbar-wrapper {
-    margin: 0;
-    padding: 0;
+        ul {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            list-style: none;
+            padding: 0;
+            li {
+                display: flex;
+                margin: 2px;
+                a {
+                    padding: 0.2em 0.5em;
+                    border: 1px solid mp.$border;

-    .nav-button {
-        border: 1px solid mp.$border;
+                    background: mp.$bg;
+                    background: linear-gradient(0deg,rgba(0, 0, 0, 1) 10%, c.adjust($color: mp.$link, $saturation: 4%, $lightness: -20%) 100%);
+
+                    color: mp.$text;
+                    font-family: fonts.$ll;
+                    font-weight: normal;
+                    font-size: 1em;
+                    text-decoration: none;
+                    /*text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;*/
+                }
+
+                a:hover { background: linear-gradient(0deg,rgba(0, 0, 0, 1) 0%, c.adjust($color: mp.$link, $saturation: 4%, $lightness: -10%) 100%); }
+            }
+        }
    }
-}
+}
--- a/eleventy.config.js
+++ b/eleventy.config.js
@ -3,6 +3,7 @@ const eleventySass = require("eleventy-sass");
 module.exports = function (eleventyConfig) {
 	eleventyConfig.addPlugin(eleventySass);
 	eleventyConfig.addPassthroughCopy("img");
+	eleventyConfig.addPassthroughCopy("css/fonts");

 	return {
 		markdownTemplateEngine: "njk",
--- a/img/banner-alt.png
+++ b/img/banner-alt.png
--- a/img/banner.png
+++ b/img/banner.png
--- a/img/bgpat.png
+++ b/img/bgpat.png
--- a/img/btnbg.png
+++ b/img/btnbg.png
--- a/img/button.png
+++ b/img/button.png
--- a/img/hbutton.png
+++ b/img/hbutton.png
--- a/img/home_banner.jpg
+++ b/img/home_banner.jpg
--- a/img/home_banner_hover.jpg
+++ b/img/home_banner_hover.jpg
--- a/img/homeb.png
+++ b/img/homeb.png
--- a/index.md
+++ b/index.md
@ -1,5 +1,4 @@
 ---
 layout: base
-title: home
 ---
 goodbye...
Author	SHA1	Message	Date
yuki	58bca24259	minor formatting	2025-10-10 22:42:05 -03:00
yuki	f2fc399003	add navbar	2025-10-10 22:36:38 -03:00
yuki	459e9565b3	update banner	2025-10-10 20:17:07 -03:00
yuki	db3fef4809	add fonts passthrough	2025-10-10 19:45:29 -03:00
yuki	a3d083c5de	fix banner	2025-10-10 19:30:14 -03:00
yuki	d0771dbcfa	add love letter tw font	2025-10-10 19:17:41 -03:00
yuki	928df49eb8	add home banner	2025-10-10 18:58:06 -03:00
yuki	d1d6790784	start from scratch	2025-10-10 06:52:09 -03:00