The documentation for Plume.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

425 lines
6.6 KiB

$plume: #7765e3;
$plumedark: #6457a6;
$gray: #F4F4F4;
$black: invert($gray);
@import url('https://fonts.googleapis.com/css?family=Playfair+Display');
:root {
--lang-switcher-margin: 2vw;
--lang-switcher-width: 2em;
}
html, body {
padding: 0px;
margin: 0px;
color: $black;
}
h1, h2, h3 {
font-family: 'Playfair Display';
}
header {
grid-area: head;
margin: 0;
padding: 10vh 5vw;
background: linear-gradient(0deg, $plumedark, $plume);
color: white;
font-size: 1.5em;
.language-switcher {
position: absolute;
top: var(--lang-switcher-margin);
right: var(--lang-switcher-margin);
margin: 0;
padding: 0;
line-height: 1;
}
}
body {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: min-content 1fr min-content;
grid-template-areas:
"menu head head head head"
"menu cont cont cont cont"
"menu foot foot foot foot";
}
body > main > nav, body > main > nav ul {
padding: 0;
li {
padding: 0;
}
}
nav {
background: $gray;
img {
display: inline;
height: 2em;
width: 2em;
}
ul {
list-style: none;
padding: 0px;
margin: 0px;
display: grid;
grid: 1fr / auto-flow;
li {
a {
padding: 2em 0em;
transition: all ease-in 0.2s;
}
}
}
}
main nav li {
display: flex;
align-items: stretch;
justify-items: stretch;
a {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 2px solid transparent;
&:hover {
border-bottom-color: $plume;
}
img {
margin: 0px 20px;
}
}
}
a, a:visited {
text-decoration: none;
color: $plume;
}
footer {
padding: 5em 5vw;
background: $gray;
text-align: center;
grid-area: foot;
}
.highlight {
padding-top: 1em;
padding-bottom: 1em;
overflow-x: auto;
white-space: pre-line;
}
body > main {
grid-area: cont;
line-height: 1.7;
ul {
padding: 0 7.5vw;
li {
padding: 0.5em 0;
}
}
}
aside {
grid-area: menu;
background: $black;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
z-index: 2;
svg {
display: none;
}
nav {
padding: 0px;
height: 100%;
overflow-y: auto;
& > a {
font-weight: bold;
font-size: 1.2em;
padding: 2em;
display: flex;
justify-content: space-between;
align-items: center;
}
ul {
display: block;
text-transform: none;
font-weight: 400;
list-style: none;
padding: 0px;
margin: 0px;
li {
display: inline;
& > a, & > details {
display: block;
border-bottom: none;
}
& > a, & > details > summary {
margin: 2em;
}
& > details > summary {
display: flex;
justify-content: space-between;
align-items: center;
svg {
display: block;
transition: transform 0.1s ease-in;
}
}
& > details[open] > summary svg {
transform: rotate(-90deg);
}
& > a, & > details > summary > a {
opacity: 0.6;
padding: 0px;
&:hover {
opacity: 1;
}
}
}
}
& > ul {
text-transform: uppercase;
font-weight: 800;
}
& > ul > li > ul {
font-weight: 600;
& > li > a {
padding: 1.5em;
padding-left: 3em;
}
}
& > ul > li > ul > li > ul > li > a {
padding: 1em;
padding-left: 4em;
}
details > ul > li > * {
padding-left: 1em;
}
}
}
main > article {
padding: 3em 0em;
img {
max-width: 90%;
display: block;
margin: 2em auto;
}
hr {
margin: 4em auto;
border: none;
background: $black;
height: 1px;
max-width: 5em;
}
}
main > article > * {
padding: 0 5vw;
}
.choices {
display: flex;
flex-wrap: wrap;
justify-items: stretch;
list-style: none;
padding: 2em 5vw;
& > li {
flex: 1;
a {
text-align: center;
border-radius: 5px;
display: block;
padding: 2em;
transition: all ease-in 0.2s;
&:hover {
background: $gray;
}
}
}
}
.cards {
display: grid;
grid: auto-flow / 1fr 1fr;
grid-column-gap: 30px;
grid-row-gap: 30px;
margin-top: 60px;
article {
background: $gray;
min-height: 100px;
padding: 20px;
h2, svg {
display: block;
text-align: center;
margin: 20px auto;
max-width: 75%;
}
transition: all ease-in 0.2s;
&:hover {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
}
}
a.action {
text-align: center;
display: block;
padding: 20px;
max-width: 200px;
margin: 5em auto;
border-radius: 5px;
background: $plume;
color: white;
}
@media screen and (max-width: 1000px) {
main nav li a {
padding: 15px 0px;
}
aside > svg {
display: block;
position: relative;
top: 0;
left: 100%;
color: white;
padding: 0.5em;
margin: 0.5em;
background: $black;
border-radius: 5px;
}
body > main > article > * {
padding: 0 5vw;
}
header {
padding: 10vh 0vw;
text-align: center;
}
.cards, body > main > nav ul {
grid: auto-flow / 1fr;
}
aside {
position: fixed;
left: -100vw;
top: 0;
bottom: 0;
width: 100vw;
transition: all ease-in 0.2s;
}
aside.show {
left: 0;
svg {
left: 0;
}
}
body {
grid-template-areas:
"head head head head head"
"cont cont cont cont cont"
"foot foot foot foot foot";
}
}
.language-switcher {
position: relative;
font-size: 1rem;
[aria-haspopup] {
display: block;
width: var(--lang-switcher-width);
padding: 0;
line-height: 1;
border: none;
background: transparent;
&:hover {
opacity: 0.5;
}
&[aria-expanded="true"] {
opacity: 0.5;
}
img {
width: 100%;
height: auto;
}
}
[aria-hidden="true"] {
display: none;
}
.languages {
position: absolute;
right: 0;
list-style: none;
margin: 0;
padding: 0.5em 0;
max-height: calc(90vh - var(--lang-switcher-margin) - var(--lang-switcher-width));
overflow-y: scroll;
overscroll-behavior: contain;
border-radius: 0.1em;
background: #ffffff;
box-shadow: 0 0 16px -6px rgba(0, 0, 0, 0.6);
}
.language {
padding: 0;
a {
display: block;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 0.5em 1em;
border-left: solid 0.5em transparent;
&:hover, &:focus {
border-left-color: $plume;
}
}
}
}