foundry/caws-world
4
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

make header sticky at the top and convert to nested css

Browse Source
This commit is contained in:
Sven Balzer 2024-12-10 08:13:57 +01:00
parent b3513f59ca
commit 2c8341cd1e
1 changed files with 44 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
website_main.css
View File

@ -12,55 +12,58 @@
/*BODY*/ /*BODY*/
body { body {
background: #292a2d;
color: #EEE;
margin: 0em; margin: 0em;
}
/*##########################################################*/ font-family: 'Inconsolata', 'Courier New';
/*HEADER*/ font-size: 16pt;
header {
z-index: 1;
display: flex;
position: fixed;
width: 100%;
line-height: 3.5em;
background: #151617;
box-shadow: 0em 0.16em 0.8em 0em rgba(0,0,0,0.55);
/*font*/
font-size: 1.2em;
}
header .title { color: #EEE;
margin-left: 3em; background: #292a2d;
font-weight: bold;
font-size: 1.6em;
text-shadow: 0em 0em 0.2em rgba(175, 175, 175, 0.5);
}
header .title a{ & a {
color: inherit; text-decoration: none;
text-decoration: none; }
}
header .menu { & > header {
margin-left: auto; position: sticky;
margin-right: 3em; z-index: 100;
} top: 0;
header .menu a{ margin-bottom: 1em;
color: inherit;
text-decoration: none;
margin-right: 2em;
}
header .menu a:last-child { background: #151617;
margin-right: 0; /* No margin for the last menu item */ font-size: 1.2em;
} line-height: 3.5em;
box-shadow: 0em 0.16em 0.8em 0em rgba(0,0,0,0.55);
header .menu a:hover { display: grid;
transform: scale(1.02); grid-template-columns: minmax(0, 3em) max-content auto max-content minmax(0, 3em);
text-shadow: 0em 0em 1em rgba(175, 175, 175, 0.9);
& a {
color: inherit;
&:hover {
transform: scale(1.02);
text-shadow: 0em 0em 1em rgba(175, 175, 175, 0.9);
}
}
& .title {
grid-column: 2;
font-size: 1.6em;
font-weight: bold;
text-shadow: 0em 0em 0.2em rgba(175, 175, 175, 0.5);
}
& .menu {
grid-column: 4;
display: flex;
gap: 2em
}
}
} }
/*##########################################################*/ /*##########################################################*/