Fediversity/website/presentation/style.css

223 lines
3.7 KiB
CSS
Raw Permalink Normal View History

:root {
/* XXX: maybe use light-dark() once it's more widely supported */
color-scheme: light dark;
--highlight: rgb(255, 110, 0);
--background: white;
--text-color: black;
--shadow: rgba(0,0,0,0.1);
scrollbar-gutter: stable;
}
@media (prefers-color-scheme: dark) {
:root {
--background: black;
--text-color: #f0f0f0;
--shadow: rgba(255,255,255,0.2);
}
}
2024-11-13 15:24:41 +01:00
body {
font-family: Heebo, sans-serif;
color: var(--text-color);
background-color: var(--background);
2024-11-13 15:24:41 +01:00
padding: 1em;
}
section {
2024-11-13 15:24:41 +01:00
max-width: 50em;
margin: auto;
2024-11-13 15:24:41 +01:00
margin-top: 1em;
2024-11-13 15:24:41 +01:00
}
h1, h2, h3, h4, h5, h6 {
font-family: Signika, sans-serif;
2024-11-13 15:24:41 +01:00
margin-top: 0;
}
h1 {
font-size: 2em;
}
header > nav {
2024-11-13 15:24:41 +01:00
font-family: Signika, sans-serif;
2024-11-13 15:24:41 +01:00
margin-bottom: 2em;
2024-11-13 15:24:41 +01:00
}
a:visited,
a
{
color: var(--highlight);
text-decoration: none;
}
header a:visited,
header a
{
color: var(--text-color);
}
header a {
text-decoration: none;
}
header a:hover,
2024-11-13 15:24:41 +01:00
header li:hover
{
color: var(--highlight);
}
header nav ul {
padding: 0;
}
header > nav ul li {
list-style-type: none;
}
header > nav > ul {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 60em;
margin: auto;
}
header > nav > ul > li:first-child a {
content: url('ngi-fediversity.svg');
display: inline-block;
height: 2em;
2024-11-13 15:24:41 +01:00
margin-right: 5vw;
}
header > nav > ul > li:last-child > a {
border: 1pt solid var(--text-color);
padding: 0.5em 1em 0.5em 1em;
border-radius: 3pt;
2024-11-13 15:24:41 +01:00
margin-left: 5vw;
}
header > nav > ul > li:last-child:hover > a {
color: var(--background);
background-color: var(--highlight);
border-color: var(--background);
}
2024-11-13 15:24:41 +01:00
header > nav > ul > li > details > nav {
position: absolute;
2024-11-13 15:24:41 +01:00
/*top: 2em;*/
background: var(--background);
min-width: max-content;
2024-11-13 15:24:41 +01:00
margin-top: 1em;
padding: 1em;
box-shadow: 0 0 1em var(--shadow);
2024-11-13 15:24:41 +01:00
z-index: 0;
}
2024-11-13 15:24:41 +01:00
header > nav > ul > li > details {
display: block;
2024-11-13 15:24:41 +01:00
/*padding: 1em 0;*/
cursor: pointer;
}
header > nav > ul > li > details[open] > summary {
color: var(--highlight);
}
2024-11-13 15:24:41 +01:00
header > nav > ul > li > details > nav ul li {
padding: 0.25em 0;
}
#menu-toggle,
#menu-toggle + label {
2024-11-13 15:24:41 +01:00
display: none;
appearance: none;
2024-11-13 15:24:41 +01:00
}
@media (max-width: 50em) {
#menu-toggle:checked ~ nav > ul > li {
display: block;
}
#menu-toggle ~ label {
position: absolute;
right: 0;
padding: 0.5em;
cursor: pointer;
2024-11-13 15:24:41 +01:00
display: block;
}
.menu-close,
.menu-open {
cursor: pointer;
2024-11-13 15:24:41 +01:00
}
.menu-close { display: none; }
#menu-toggle:checked + label .menu-close { display: block; }
#menu-toggle:checked + label .menu-open { display: none; }
2024-11-13 15:24:41 +01:00
header > nav {
margin-bottom: 1em;
};
header > nav > ul > li:not(:first-child) {
display: none;
}
header > nav > ul {
flex-direction: column;
}
header > nav > ul > li {
margin: 0;
padding: 0;
text-align: center;
font-size: 1.3em;
}
header > nav > ul > li > details{
/* compensate for collapse triangle */
margin-left: -1rem;
}
header > nav > ul > li > details > nav {
position: relative;
margin: 0;
padding: 0 0 0.5em 0;
box-shadow: none;
/* compensate back for container's collapse triangle compensation */
margin-left: 1rem;
}
header > nav > ul > li > details > nav ul li {
padding: 0;
font-size: 1.15rem;
}
header > nav > ul::before {
content: "";
display: flex;
justify-content: space-between;
align-items: center;
}
header > nav > ul > li:first-child {
display: block;
}
header > nav > ul > li:first-child a {
margin: 0 0 0.5em 0;
height: 2.5em;
}
header > nav > ul > li:last-child {
margin: 1em 0 0 0;
}
header > nav > ul > li:last-child a {
margin: 0;
}
header {
position: relative;
}
}