einundzwanzig/einundzwanzig.space
1
0
Fork 0
mirror of https://github.com/Einundzwanzig-Podcast/einundzwanzig.space.git synced 2025-12-13 16:26:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve nav

Browse Source
This commit is contained in:
Dennis Reimann
2021-10-01 11:10:38 +02:00
parent bade2c8f79
commit 616642847f
3 changed files with 15 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/css/base/header.css
View File

@@ -24,7 +24,7 @@
z-index: 10;
@nest body.topbar & {
box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1);
box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.125);
}
}
@@ -66,17 +66,14 @@
align-self: flex-start;
align-items: center;
justify-content: space-between;
margin-top: var(--space-l);
line-height: 1;
font-size: 3.5vw;
@media (--up_to_M) {
margin-bottom: var(--space-s);
margin-top: var(--space-l);
font-size: var(--font-size-l);
@media (--up_to_L) {
font-size: 5vw;
}
@media (--M_and_up) {
margin-top: var(--space-l);
font-size: var(--font-size-xl);
@media (--L_and_up) {
font-size: var(--font-size-xxl);
}
& nav {
@@ -85,7 +82,7 @@
& .navItem {
position: relative;
margin-right: var(--space-l);
margin-right: var(--space-xl);
overflow: hidden;
text-transform: uppercase;
min-width: 3em;
@@ -109,12 +106,16 @@
left: calc(var(--space-l) * -1);
right: calc(var(--space-l) * -1);
opacity: 0;
padding: 1.5em var(--space-l) var(--space-m);
padding: 1.25em var(--space-l) var(--space-m);
background: var(--color-flyout-bg);
transition-property: background, position, opacity;
transition-duration: var(--transition-duration-fast);
border-radius: var(--space-m);
@media (--up_to_M) {
padding-top: 1.4em;
}
& a {
margin-top: var(--space-l);
}
@@ -161,10 +162,6 @@
border: 0;
outline: 0;
@media screen and (max-width: 370px) {
visibility: hidden;
}
&:hover {
@media not all and (hover: none) {
color: var(--color-accent);

4
src/css/base/layout.css
View File

@@ -11,10 +11,10 @@
padding-bottom: var(--space-xxl);
@media (--up_to_M) {
padding-top: calc(var(--logo-height) + var(--space-xxl) * 1.525);
padding-top: calc(var(--logo-height) + var(--space-xxl) * 1.65);
}
@media (--M_to_L) {
padding-top: calc(var(--logo-height) + var(--space-xxl) * 1.825);
padding-top: calc(var(--logo-height) + var(--space-xxl) * 2);
}
@media (--L_and_up) {
padding-top: var(--space-l);

2
src/css/base/variables.css
View File

@@ -52,7 +52,7 @@
--font-size-m: 1rem;
--font-size-l: 1.25rem;
--font-size-xl: 1.75rem;
--font-size-xxl: 2.5rem;
--font-size-xxl: 2.25rem;
@media (--up_to_M) {
--wrap-padding-horizontal: var(--space-l);