mirror of
https://github.com/lavafroth/lavafroth.github.io.git
synced 2026-05-30 11:21:16 -03:00
feat: semantic nav and header
This commit is contained in:
Himadri Bhattacharjee
@@ -31,7 +31,7 @@
|
||||
|
||||
.site-name>svg {
|
||||
width: 18rem;
|
||||
fill: var(--dark)
|
||||
fill: var(--dark);
|
||||
}
|
||||
|
||||
.math {
|
||||
@@ -58,16 +58,14 @@ html {
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.pagefind-ui__search-clear {
|
||||
height: calc(60px * var(--pagefind-ui-scale) - 1px) !important;
|
||||
}
|
||||
|
||||
.pagefind-ui * {
|
||||
transition: background 0.4s ease-out !important;
|
||||
}
|
||||
|
||||
.pagefind-ui__search-input::placeholder {
|
||||
opacity: .5 !important;
|
||||
#search {
|
||||
margin-bottom: var(--gap);
|
||||
button {
|
||||
background: transparent;
|
||||
}
|
||||
input::placeholder {
|
||||
opacity: .5;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -97,7 +95,6 @@ body {
|
||||
color: var(--pro);
|
||||
word-break: break-word;
|
||||
background: var(--white);
|
||||
transition: background 0.4s ease-out;
|
||||
}
|
||||
|
||||
body>* {
|
||||
@@ -112,10 +109,6 @@ body>* {
|
||||
}
|
||||
}
|
||||
|
||||
#search {
|
||||
margin-bottom: var(--gap);
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: var(--narrow-separator) dotted;
|
||||
text-decoration: none;
|
||||
@@ -269,7 +262,7 @@ img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.header {
|
||||
header {
|
||||
max-width: var(--wide);
|
||||
margin-top: var(--gap);
|
||||
display: flex;
|
||||
@@ -280,30 +273,32 @@ img {
|
||||
padding: var(--small-gap);
|
||||
gap: 1rem;
|
||||
|
||||
.push {
|
||||
margin-left: auto
|
||||
}
|
||||
nav {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-left: auto;
|
||||
|
||||
&>a {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
position: relative;
|
||||
a {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
top: .5rem;
|
||||
left: .5rem;
|
||||
&:after {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
top: .5rem;
|
||||
left: .5rem;
|
||||
|
||||
background: var(--black);
|
||||
mask-image: var(--url);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: cover;
|
||||
background: var(--black);
|
||||
mask-image: var(--url);
|
||||
mask-repeat: no-repeat;
|
||||
mask-size: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* background mask */
|
||||
&>a:after,
|
||||
nav a:after,
|
||||
&:after {
|
||||
z-index: -100;
|
||||
content: "";
|
||||
@@ -318,15 +313,15 @@ img {
|
||||
mask-image: url('header.svg');
|
||||
mask-size: 24rem;
|
||||
}
|
||||
}
|
||||
|
||||
.header a.active {
|
||||
outline: 2px solid var(--air);
|
||||
border-radius: 50%;
|
||||
a.active {
|
||||
outline: 2px solid var(--air);
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.header {
|
||||
header {
|
||||
justify-content: space-evenly;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@@ -707,4 +702,4 @@ img {
|
||||
font-family: LatinModern;
|
||||
src: url(latinmodern-math.otf);
|
||||
font-display: swap;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
<header class="header">
|
||||
<h1>
|
||||
<a class="site-name" href="{{ `` | absURL }}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8790 2400"><path d="M80 1935V465h216v1270h286v200ZM933 1935l222-1470h264l222 1470h-210l-40-300h-208l-40 300Zm280-528h148l-62-494-6-78h-12l-6 78ZM2238 1935 2014 465h210l108 868 8 142h12l8-142 108-868h210l-224 1470ZM3051 1935l222-1470h264l222 1470h-210l-40-300h-208l-40 300Zm280-528h148l-62-494-6-78h-12l-6 78ZM4182 1935V465h514v222h-298v386h200v222h-200v640ZM5092 1935V465h216q194 0 286 108 92 107 92 316 0 124-43 215-44 90-106 132l147 699h-216l-122-620h-38v620Zm216-820q60 0 95-26 35-27 50-76t15-116q0-105-34-161-35-57-126-57ZM6392 1951q-90 0-154-42-65-42-99-114-35-72-35-162V767q0-91 35-162 34-72 99-114 64-42 154-42t155 42q64 42 99 114 34 72 34 162v866q0 90-34 162-35 72-99 114-65 42-155 42Zm0-210q40 0 56-33 16-34 16-75V767q0-41-17-74-17-34-55-34-37 0-54 34-18 33-18 74v866q0 41 17 75 17 33 55 33ZM7282 1935V687h-204V465h624v222h-204v1248ZM8110 1935V465h216v608h168V465h216v1470h-216v-640h-168v640Z"/></svg>
|
||||
</a>
|
||||
</h1>
|
||||
<div class="push"></div>
|
||||
<header>
|
||||
<a class="site-name" href="{{ `` | absURL }}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8790 2400"><path d="M80 1935V465h216v1270h286v200ZM933 1935l222-1470h264l222 1470h-210l-40-300h-208l-40 300Zm280-528h148l-62-494-6-78h-12l-6 78ZM2238 1935 2014 465h210l108 868 8 142h12l8-142 108-868h210l-224 1470ZM3051 1935l222-1470h264l222 1470h-210l-40-300h-208l-40 300Zm280-528h148l-62-494-6-78h-12l-6 78ZM4182 1935V465h514v222h-298v386h200v222h-200v640ZM5092 1935V465h216q194 0 286 108 92 107 92 316 0 124-43 215-44 90-106 132l147 699h-216l-122-620h-38v620Zm216-820q60 0 95-26 35-27 50-76t15-116q0-105-34-161-35-57-126-57ZM6392 1951q-90 0-154-42-65-42-99-114-35-72-35-162V767q0-91 35-162 34-72 99-114 64-42 154-42t155 42q64 42 99 114 34 72 34 162v866q0 90-34 162-35 72-99 114-65 42-155 42Zm0-210q40 0 56-33 16-34 16-75V767q0-41-17-74-17-34-55-34-37 0-54 34-18 33-18 74v866q0 41 17 75 17 33 55 33ZM7282 1935V687h-204V465h624v222h-204v1248ZM8110 1935V465h216v608h168V465h216v1470h-216v-640h-168v640Z"/></svg>
|
||||
</a>
|
||||
<nav>
|
||||
{{ range .Site.Params.socials }}
|
||||
<a
|
||||
style="--url: url(./{{ .platform }}.svg)"
|
||||
@@ -24,4 +22,5 @@
|
||||
style="--url: url(./{{ .Name }}.svg)"
|
||||
></a>
|
||||
{{ end }}
|
||||
<nav>
|
||||
</header>
|
||||
|
||||
Reference in New Issue
Block a user