hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Skip to content link

Browse Source
This commit is contained in:
daudix
2024-02-04 00:32:33 +03:00
parent 2d5a0f0c7b
commit e4246c69b8
6 changed files with 74 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
sass/_main-content.scss Normal file
View File

@ -0,0 +1,9 @@
.main-content {
position: absolute;
transform: translateY(-200%);
transition: var(--transition);
&:focus {
transform: translateY(0);
}
}

2
sass/_main.scss
View File

@ -44,7 +44,7 @@ body {
// Make focused anchor not get covered by nav, // Make focused anchor not get covered by nav,
// and flash it with primary color when jumping to it // and flash it with primary color when jumping to it
:target { :target:not(#main) {
scroll-margin-top: 15vh; scroll-margin-top: 15vh;
animation: var(--transition-long) 1s highlight-in-out; animation: var(--transition-long) 1s highlight-in-out;
color: var(--primary-color); color: var(--primary-color);

120
sass/_nav.scss
View File

@ -1,89 +1,87 @@
#site-nav { #site-nav {
-webkit-backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px);
align-items: center;
backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px);
background-color: var(--nav-bg); background-color: var(--nav-bg);
border-radius: 26px; border-radius: 26px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
0px 12px 24px -16px rgba(0, 0, 0, 0.5); 0px 12px 24px -16px rgba(0, 0, 0, 0.5);
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 1rem auto; margin: 1rem auto;
max-width: min(calc(var(--content-width) + 10rem), 90%);
padding: 0.5rem;
position: sticky; position: sticky;
top: 1rem; top: 1rem;
max-width: min(calc(var(--content-width) + 10rem), 90%);
z-index: 999; z-index: 999;
width: fit-content;
nav { ul {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.25rem;
justify-content: center; justify-content: center;
align-items: center; margin: 0;
padding: 0.5rem; padding: 0;
}
ul { li {
display: flex; list-style: none;
flex-wrap: wrap; display: inline-flex;
gap: 0.25rem; }
justify-content: center;
margin: 0; a {
padding: 0; border-radius: 999px;
color: var(--fg-muted-4);
padding: 0.325rem 0.75rem;
text-decoration: none;
transition: var(--transition);
&:hover {
background-color: var(--fg-muted-1);
color: var(--primary-color);
text-decoration: none;
} }
li { &:active {
list-style: none; transform: scale(var(--active));
display: inline-flex; }
}
#home {
position: relative;
margin-right: 0.625rem;
&::after {
background-color: var(--fg-muted-2);
content: "";
height: 110%;
position: absolute;
right: -0.5rem;
top: 0;
width: 1px;
} }
a { a {
border-radius: 999px; font-weight: 800;
color: var(--fg-muted-4); color: var(--fg-muted-5);
padding: 0.325rem 0.75rem;
text-decoration: none;
transition: var(--transition);
&:hover { &:hover {
background-color: var(--fg-muted-1);
color: var(--primary-color); color: var(--primary-color);
text-decoration: none;
}
&:active {
transform: scale(var(--active));
}
}
#home {
position: relative;
margin-right: 0.625rem;
&::after {
background-color: var(--fg-muted-2);
content: "";
height: 110%;
position: absolute;
right: -0.5rem;
top: 0;
width: 1px;
}
a {
font-weight: 800;
color: var(--fg-muted-5);
&:hover {
color: var(--primary-color);
}
}
}
#feed a {
padding: 0.325rem 0.625rem;
svg {
vertical-align: -0.125em;
}
span {
display: none;
} }
} }
} }
#feed a {
padding: 0.325rem 0.625rem;
svg {
vertical-align: -0.125em;
}
span {
display: none;
}
}
} }

1
sass/style.scss
View File

@ -18,6 +18,7 @@
@use "footer"; @use "footer";
@use "johnvertisement"; @use "johnvertisement";
@use "links"; @use "links";
@use "main-content";
@use "media"; @use "media";
@use "nav"; @use "nav";
@use "not-found"; @use "not-found";

2
templates/base.html
View File

@ -3,7 +3,7 @@
{% include "includes/head.html" ignore missing -%} {% include "includes/head.html" ignore missing -%}
<body> <body>
{% include "includes/nav.html" ignore missing -%} {% include "includes/nav.html" ignore missing -%}
<div class="container"> <div id="main" class="container">
{% block custom %}{%- endblock -%} {% block custom %}{%- endblock -%}
{% block content %}{%- endblock -%} {% block content %}{%- endblock -%}
</div> </div>

5
templates/includes/nav.html
View File

@ -1,5 +1,6 @@
<header id="site-nav"> <header>
<nav> <a href="#main" class="main-content" tabindex="0">Skip to main content</a>
<nav id="site-nav">
<ul> <ul>
<li id="home"> <li id="home">
<a href="{{ get_url(path='') }}">{{ config.title }}</a> <a href="{{ get_url(path='') }}">{{ config.title }}</a>