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>
<body>
<div class="main-page-wrapper">
<div class="header-wrapper">
<a href="/"><div class="header-banner" alt="yukinets"></div></a>
<div class="header-wrapper">
<div class="header">
<a href="/" alt="yukinets"><div class="header-banner"></div></a>
</div>
{% include "topmost_navbar.njk" %}
</div>
<marquee class="motd" behavior="scroll" direction="left">
<img src="/img/Witch-on-broom.gif" alt="">
</marquee>

6
_includes/fonts.scss
View file

@ -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');
}

3
_includes/general.scss
View file

@ -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;
}

1
_includes/main-palette.scss
View file

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

6
_includes/topmost_navbar.njk
View file

@ -1,6 +1,8 @@
<!-- <nav class="navbar-wrapper">
<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> -->
</nav>

62
css/main.scss
View file

@ -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%); }
}
}
}
}
}