yuki/yuki.k4w411.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add navbar

Browse source
This commit is contained in:
yuki 2025-10-10 22:36:38 -03:00
parent 459e9565b3
commit f2fc399003
Signed by: yuki
GPG key ID: 0C98E6FF04EC3915
6 changed files with 61 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
_includes/base.njk
View file

@ -5,10 +5,12 @@
</head> </head>
<body> <body>
<div class="main-page-wrapper"> <div class="main-page-wrapper">
<div class="header-wrapper"> <div class="header-wrapper">
<a href="/"><div class="header-banner" alt="yukinets"></div></a> <div class="header">
<a href="/" alt="yukinets"><div class="header-banner"></div></a>
</div> </div>
{% include "topmost_navbar.njk" %} {% include "topmost_navbar.njk" %}
</div>
<marquee class="motd" behavior="scroll" direction="left"> <marquee class="motd" behavior="scroll" direction="left">
<img src="/img/Witch-on-broom.gif" alt=""> <img src="/img/Witch-on-broom.gif" alt="">
</marquee> </marquee>

6
_includes/fonts.scss
View file

@ -1,6 +1,8 @@
$ll: "Love LetterTW";
@font-face { @font-face {
font-family: 'Love LetterTW'; font-family: $ll;
font-style: normal; font-style: normal;
font-weight: 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');
} }

3
_includes/general.scss
View file

@ -1,3 +1,5 @@
@use "main-palette.scss" as mp;
* { * {
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
@ -8,4 +10,5 @@
min-width: 0; min-width: 0;
max-width: 802px; max-width: 802px;
margin: 8px auto; margin: 8px auto;
border: 1px solid mp.$border;
} }

1
_includes/main-palette.scss
View file

@ -1,3 +1,4 @@
$bg: #000; $bg: #000;
$border: #761026; $border: #761026;
$link: #ad3040; $link: #ad3040;
$text: #ffd2dd;

6
_includes/topmost_navbar.njk
View file

@ -1,6 +1,8 @@
<!-- <nav class="navbar-wrapper"> <nav class="navbar-wrapper">
<ul> <ul>
<li><a href="/">home</a></li> <li><a href="/">home</a></li>
<li><a href="/about">about</a></li>
<li><a href="/blog">blog</a></li> <li><a href="/blog">blog</a></li>
<li><a href="/contact">contact</a></li>
</ul> </ul>
</nav> --> </nav>

62
css/main.scss
View file

@ -12,26 +12,54 @@ body {
a { color: mp.$link; } a { color: mp.$link; }
a:hover { color: c.adjust($color: mp.$link, $saturation: 4%, $lightness: 10%); } a:hover { color: c.adjust($color: mp.$link, $saturation: 4%, $lightness: 10%); }
} }
.header-wrapper { .header-wrapper {
.header-banner { display: flex;
background-image: url("/img/home_banner.jpg"); align-items: flex-start;
width: 300px; gap: 16px;
height: 140px; .header {
border: 1px solid mp.$border; display: block;
border-radius: 0% 0% 20px 0%; .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 { .navbar-wrapper {
ul li { display: flex;
display: inline; align-items: flex-start;
margin-top: 8px;
a { ul {
font-family: fonts.$ll; display: flex;
font-weight: normal; flex-direction: row;
font-size: 1em; 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%); }
}
} }
} }
} }