Ungol/blog
1
0
Fork 0
Code Issues Projects Releases Packages 1 Activity Actions

feat: add a navbar

Browse source
This commit is contained in:
Ungol 2025-12-23 22:27:52 +01:00
parent 88b009c1bb
commit 84a720c6d9
5 changed files with 129 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

2
sass/_theme.scss
View file

@ -1,5 +1,6 @@
@use 'colors/catppuccin-macchiato' as dark; @use 'colors/catppuccin-macchiato' as dark;
@use 'colors/catppuccin-latte' as light; @use 'colors/catppuccin-latte' as light;
@use 'fonts';
:root { :root {
--pink: #{light.$pink}; --pink: #{light.$pink};
@ -27,6 +28,7 @@
--mantle: #{light.$mantle}; --mantle: #{light.$mantle};
--crust: #{light.$crust}; --crust: #{light.$crust};
--main-width: min(700px, 95%);
--standard-border-radius: .8rem; --standard-border-radius: .8rem;
--text-font: "Ubuntu Nerd Font", Helvetica, sans-serif; --text-font: "Ubuntu Nerd Font", Helvetica, sans-serif;
--title-font: "Ubuntu Nerd Font", Helvetica, sans-serif; --title-font: "Ubuntu Nerd Font", Helvetica, sans-serif;

88
sass/parts/_navbar.scss Normal file
View file

@ -0,0 +1,88 @@
header {
background-color: var(--crust);
margin-bottom: 3rem;
;
}
nav {
display: flex;
max-width: var(--main-width);
margin-left: auto;
margin-right: auto;
align-items: center;
justify-content: space-between;
&>div {
vertical-align: middle;
a {
text-decoration: none;
}
ul {
list-style-type: none;
padding: 0;
margin-top: 0;
margin-bottom: 0;
}
&.nav-title,
&.nav-menus,
&.nav-widgets,
&>ul>li {
display: inline-block;
}
&.nav-title {
font-size: 2rem;
font-weight: 100;
text-transform: uppercase;
a {
color: var(--text);
&:visited {
color: var(--text);
}
&:hover {
color: var(--text);
}
}
}
&.nav-menus {
a {
color: var(--text);
&:visited {
color: var(--text);
}
&:hover {
color: var(--subtext0);
}
}
li {
list-style-type: none;
padding: 0;
margin-left: .5rem;
margin-right: .5rem;
}
}
&.nav-widgets {
color: var(--text);
font-size: 1.5rem;
li {
margin-left: .5rem;
margin-right: .5rem;
}
}
}
}

11
sass/styles.scss
View file

@ -4,6 +4,7 @@
@use 'parts/code'; @use 'parts/code';
@use 'parts/footnote'; @use 'parts/footnote';
@use 'parts/misc'; @use 'parts/misc';
@use 'parts/navbar';
@use 'parts/page_title'; @use 'parts/page_title';
@use 'parts/table'; @use 'parts/table';
@ -24,10 +25,11 @@ body {
background-color: var(--base); background-color: var(--base);
font-size: 1rem; font-size: 1rem;
line-height: 1.75; line-height: 1.75;
margin: 0;
} }
article { article {
max-width: min(700px, 95%); max-width: var(--main-width);
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
@ -88,13 +90,14 @@ a {
text-decoration-thickness: 0.01rem; text-decoration-thickness: 0.01rem;
text-underline-offset: 0.3rem; text-underline-offset: 0.3rem;
&:visited {
color: var(--lavender);
}
&:hover { &:hover {
color: var(--sky); color: var(--sky);
} }
&:visited {
color: var(--lavender);
}
} }
li { li {

3
templates/base.html
View file

@ -12,8 +12,7 @@
</head> </head>
<body> <body>
<header></header> {% include "navbar.html" %}
<nav></nav>
<main> <main>
{% block content %} {% endblock %} {% block content %} {% endblock %}
</main> </main>

31
templates/navbar.html Normal file
View file

@ -0,0 +1,31 @@
<header>
<nav>
<div class="nav-title">
<a class="home-title" href="{{ get_url(path='/') }}">{{ config.title }}</a>
</div>
<div class="nav-menus">
<ul>
<li>
<a href="/articles">Articles</a>
</li>
<li>
<a href="/a-propos">À propos</a>
</li>
</ul>
</div>
<div class="nav-widgets">
<ul>
<li>
<div role="button" id="search-button" class="search-button">
<span></span>
</div>
</li>
<li>
<div role="button" id="theme-switch-button" class="theme-switch-button">
<span>󰔎</span>
</div>
</li>
</ul>
</div>
</nav>
</header>