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

improve navbar on widescreen

Browse source
This commit is contained in:
Ungol 2025-12-23 22:27:52 +01:00
parent 265bc173be
commit 5b81e2abc6
4 changed files with 74 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

2
sass/_theme.scss
View file

@ -28,7 +28,7 @@
--mantle: #{light.$mantle};
--crust: #{light.$crust};
--main-width: min(700px, 95%);
--main-width: min(1000px, 95%);
--standard-border-radius: .8rem;
--text-font: "Ubuntu Nerd Font", Helvetica, sans-serif;
--title-font: "Ubuntu Nerd Font", Helvetica, sans-serif;

118
sass/parts/_navbar.scss
View file

@ -1,93 +1,75 @@
@mixin header_link($color, $hover-color) {
a {
color: $color;
text-decoration: none;
&:visited {
color: $color;
}
&:hover {
color: $hover-color;
}
}
}
header {
background-color: var(--crust);
margin-bottom: 3rem;
;
}
nav {
max-width: var(--main-width);
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
flex-direction: row;
max-width: var(--main-width);
margin: 0 auto;
&>div {
vertical-align: middle;
a {
text-decoration: none;
}
ul {
list-style-type: none;
padding: 0;
margin-top: 0;
margin-bottom: 0;
display: flex;
align-items: center;
justify-content: space-around;
}
&.nav-title {
flex: 2 auto;
font-size: 2rem;
.home-title {
flex: 3 auto;
font-size: 2.5rem;
font-weight: 100;
text-transform: uppercase;
a {
color: var(--text);
&:visited {
color: var(--text);
@include header_link(var(--text), var(--text));
}
&:hover {
color: var(--text);
}
}
}
&.nav-menus {
flex: 4 auto;
a {
color: var(--text);
&:visited {
color: var(--text);
}
&:hover {
color: var(--subtext0);
}
}
&>ul {
display: flex;
flex-flow: row wrap;
align-items: center;
justify-content: space-around;
&>li {
.nav-bar {
flex: 1 auto;
@include header_link(var(--text), var(--subtext0));
ul {
padding: 0;
}
display: flex;
align-items: center;
list-style: none;
}
}
.nav-links {
margin-top: 0;
margin-bottom: 0;
font-size: 1.2rem;
text-transform: lowercase;
&.nav-widgets {
flex: 1 auto;
color: var(--text);
font-size: 1.5rem;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
li {
margin-left: .5rem;
margin-right: .5rem;
flex: 2 auto;
text-align: center;
}
.menu-icons-container {
flex: 1 auto;
}
.menu-icons-group {
color: var(--text);
justify-content: space-around;
}
}
}
}
}

8
sass/styles.scss
View file

@ -29,11 +29,17 @@ body {
}
article {
max-width: var(--main-width);
max-width: calc(var(--main-width) - 12rem);
margin-left: auto;
margin-right: auto;
}
@media only screen and (max-width: 600px) {
article {
max-width: var(--main-width);
}
}
h1 {
font-size: 2rem;
font-weight: medium;

20
templates/navbar.html
View file

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