einundzwanzig/einundzwanzig.space
1
0
Fork 0
mirror of https://github.com/Einundzwanzig-Podcast/einundzwanzig.space.git synced 2025-12-14 08:46:49 +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; z-index: 10;
@nest body.topbar & { @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-self: flex-start;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-top: var(--space-l);
line-height: 1; line-height: 1;
font-size: 3.5vw;
@media (--up_to_M) { @media (--up_to_L) {
margin-bottom: var(--space-s); font-size: 5vw;
margin-top: var(--space-l);
font-size: var(--font-size-l);
} }
@media (--M_and_up) { @media (--L_and_up) {
margin-top: var(--space-l); font-size: var(--font-size-xxl);
font-size: var(--font-size-xl);
} }
& nav { & nav {
@@ -85,7 +82,7 @@
& .navItem { & .navItem {
position: relative; position: relative;
margin-right: var(--space-l); margin-right: var(--space-xl);
overflow: hidden; overflow: hidden;
text-transform: uppercase; text-transform: uppercase;
min-width: 3em; min-width: 3em;
@@ -109,12 +106,16 @@
left: calc(var(--space-l) * -1); left: calc(var(--space-l) * -1);
right: calc(var(--space-l) * -1); right: calc(var(--space-l) * -1);
opacity: 0; 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); background: var(--color-flyout-bg);
transition-property: background, position, opacity; transition-property: background, position, opacity;
transition-duration: var(--transition-duration-fast); transition-duration: var(--transition-duration-fast);
border-radius: var(--space-m); border-radius: var(--space-m);
@media (--up_to_M) {
padding-top: 1.4em;
}
& a { & a {
margin-top: var(--space-l); margin-top: var(--space-l);
} }
@@ -161,10 +162,6 @@
border: 0; border: 0;
outline: 0; outline: 0;
@media screen and (max-width: 370px) {
visibility: hidden;
}
&:hover { &:hover {
@media not all and (hover: none) { @media not all and (hover: none) {
color: var(--color-accent); color: var(--color-accent);

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

@@ -11,10 +11,10 @@
padding-bottom: var(--space-xxl); padding-bottom: var(--space-xxl);
@media (--up_to_M) { @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) { @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) { @media (--L_and_up) {
padding-top: var(--space-l); padding-top: var(--space-l);

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

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