$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; } } } }