diff --git a/_includes/base.njk b/_includes/base.njk index 9fe47c2..e12ea7d 100644 --- a/_includes/base.njk +++ b/_includes/base.njk @@ -5,10 +5,12 @@
-
-
+
+
+
{% include "topmost_navbar.njk" %} +
diff --git a/_includes/fonts.scss b/_includes/fonts.scss index bdc4114..63d0eaf 100644 --- a/_includes/fonts.scss +++ b/_includes/fonts.scss @@ -1,6 +1,8 @@ +$ll: "Love LetterTW"; + @font-face { - font-family: 'Love LetterTW'; + font-family: $ll; font-style: normal; font-weight: normal; - src: local('Love LetterTW'), url('/css/fonts/Lovelt__.woff') format('woff'); + src: local($ll), url('/css/fonts/Lovelt__.woff') format('woff'); } diff --git a/_includes/general.scss b/_includes/general.scss index e6185a2..50e679f 100644 --- 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; } diff --git a/_includes/main-palette.scss b/_includes/main-palette.scss index 820fe6e..12385e7 100644 --- a/_includes/main-palette.scss +++ b/_includes/main-palette.scss @@ -1,3 +1,4 @@ $bg: #000; $border: #761026; $link: #ad3040; +$text: #ffd2dd; diff --git a/_includes/topmost_navbar.njk b/_includes/topmost_navbar.njk index 595bfd1..ff7aefa 100644 --- a/_includes/topmost_navbar.njk +++ b/_includes/topmost_navbar.njk @@ -1,6 +1,8 @@ - + diff --git a/css/main.scss b/css/main.scss index 3b29c67..e3ac021 100644 --- a/css/main.scss +++ b/css/main.scss @@ -12,26 +12,54 @@ body { a { color: mp.$link; } a:hover { color: c.adjust($color: mp.$link, $saturation: 4%, $lightness: 10%); } } - .header-wrapper { - .header-banner { - background-image: url("/img/home_banner.jpg"); - width: 300px; - height: 140px; - border: 1px solid mp.$border; - border-radius: 0% 0% 20px 0%; + display: flex; + align-items: flex-start; + gap: 16px; + .header { + display: block; + .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"); } } - .header-banner:hover{ background-image: url("/img/home_banner_hover.jpg"); } -} -.navbar-wrapper { - ul li { - display: inline; + .navbar-wrapper { + display: flex; + align-items: flex-start; + margin-top: 8px; - a { - font-family: fonts.$ll; - font-weight: normal; - font-size: 1em; + 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; + + 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%); } + } } } -} +} \ No newline at end of file