forked from data.coop/website
326 lines
7.3 KiB
SCSS
326 lines
7.3 KiB
SCSS
/* latin */
|
|
@font-face {
|
|
font-family: 'Space Grotesk';
|
|
font-style: normal;
|
|
font-display: swap;
|
|
src: local('Space Grotesk Regular'), local('SpaceGrotesk-Regular'), url(/static/fonts/spacegrotesk/webfont/SpaceGrotesk-Regular.woff2) format('woff2');
|
|
}
|
|
/* latin */
|
|
@font-face {
|
|
font-family: 'Space Grotesk';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
src: local('Space Grotesk Bold'), local('SpaceGrotesk-Bold'), url(/static/fonts/spacegrotesk/webfont/SpaceGrotesk-Bold.woff2) format('woff2');
|
|
}
|
|
|
|
/* latin */
|
|
@font-face {
|
|
font-family: 'Space Mono';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: local('Space Mono'), local('SpaceMono-Regular'), url(/static/fonts/spacemono/spacemono-regular.woff2) format('woff2');
|
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
}
|
|
/* latin */
|
|
@font-face {
|
|
font-family: 'Space Mono';
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
src: local('Space Mono Bold'), local('SpaceMono-Bold'), url(/static/fonts/spacemono/spacemono-bold.woff2) format('woff2');
|
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
|
}
|
|
|
|
|
|
*, *::before, *::after {
|
|
box-sizing : border-box;
|
|
}
|
|
|
|
* {
|
|
margin : 0;
|
|
}
|
|
|
|
/* Variables */
|
|
:root {
|
|
--base-grid : 40px;
|
|
--base-font-size : 20px;
|
|
|
|
--text-color : #4b3aba;
|
|
--bg-color : #fff;
|
|
--alt-bg-color : #a8f3f4;
|
|
--bar-color : #f0dcac;
|
|
|
|
--burger_size : 45px;
|
|
}
|
|
|
|
body {
|
|
display : flex;
|
|
flex-direction : row;
|
|
|
|
margin : 0;
|
|
padding : 0;
|
|
|
|
background : var(--bg-color);
|
|
color : var(--text-color);
|
|
|
|
font-family : "Space Grotesk";
|
|
font-size : var(--base-font-size);
|
|
line-height : 2.3rem;
|
|
text-align : left;
|
|
|
|
border-right : var(--base-grid) solid var(--bar-color);
|
|
}
|
|
|
|
a {
|
|
color : var(--text-color);
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-weight : 700;
|
|
line-height : 3.2rem;
|
|
}
|
|
|
|
main h1 {
|
|
font-size : 3rem;
|
|
margin : 0 0 2rem 0;
|
|
line-height : 4rem;
|
|
}
|
|
|
|
main h2 {
|
|
font-size : 2rem;
|
|
margin : 3rem 0 1rem 0;
|
|
}
|
|
|
|
main h3 {
|
|
font-size : 1.5rem;
|
|
margin : 2rem 0 1.5rem 0;
|
|
}
|
|
|
|
main p, main code {
|
|
margin : 1.5rem 0;
|
|
}
|
|
|
|
main ol, main ul {
|
|
margin : 1.5rem;
|
|
}
|
|
|
|
main ol li, main ul li {
|
|
margin : 0.5rem 0;
|
|
}
|
|
|
|
aside {
|
|
background : var(--alt-bg-color);
|
|
width : 420px;
|
|
|
|
border-right : var(--base-grid) solid var(--bar-color);
|
|
}
|
|
|
|
aside header, aside nav, aside footer {
|
|
margin : var(--base-grid);
|
|
}
|
|
|
|
main {
|
|
width : 100vw;
|
|
max-width : 900px;
|
|
}
|
|
|
|
main, aside {
|
|
min-height : 100vh;
|
|
}
|
|
|
|
main header, main article {
|
|
margin : var(--base-grid);
|
|
}
|
|
|
|
main article {
|
|
padding : calc(var(--base-grid) / 2) 0 0 0;
|
|
}
|
|
|
|
aside nav {
|
|
position : sticky;
|
|
top : var(--base-grid);
|
|
display : block;
|
|
min-width : 200px;
|
|
}
|
|
|
|
aside nav ol {
|
|
list-style-type : none;
|
|
padding : 0;
|
|
margin : 0;
|
|
}
|
|
|
|
aside nav ol li a {
|
|
display : block;
|
|
font-size : 2rem;
|
|
margin : 1.2rem 0;
|
|
text-decoration : none;
|
|
}
|
|
|
|
aside nav ol li a:hover {
|
|
text-decoration : underline;
|
|
}
|
|
|
|
aside nav ol li a.active {
|
|
font-weight : bold;
|
|
}
|
|
|
|
|
|
aside #menu-toggle {
|
|
display : none;
|
|
font-size : 2em;
|
|
color : var(--text-color);
|
|
background : transparent;
|
|
border : 0;
|
|
}
|
|
|
|
aside nav footer {
|
|
margin : var(--base-grid) 0 0 0;
|
|
}
|
|
|
|
aside nav footer ol li a {
|
|
font-size : 1.65rem;
|
|
margin : 1.2rem 0;
|
|
}
|
|
|
|
aside header a img {
|
|
display : block;
|
|
width : auto;
|
|
height : 140px;
|
|
}
|
|
|
|
aside > footer {
|
|
position : fixed;
|
|
bottom : 0;
|
|
}
|
|
|
|
aside > footer img {
|
|
margin-right : 5px;
|
|
opacity : 0.5;
|
|
}
|
|
|
|
aside > footer img:hover {
|
|
opacity : 1;
|
|
}
|
|
|
|
|
|
dl.dl-services {
|
|
display : grid;
|
|
column-gap : 2rem;
|
|
dt {
|
|
grid-column-start : 1;
|
|
grid-column-end : 2;
|
|
font-weight : bold;
|
|
}
|
|
dd {
|
|
grid-column-start : 2;
|
|
grid-column-end : 3;
|
|
}
|
|
}
|
|
|
|
@media(max-width:1000px) {
|
|
:root {
|
|
--base-grid : 40px;
|
|
--base-font-size : 20px;
|
|
}
|
|
|
|
body {
|
|
flex-direction : column;
|
|
border : 0;
|
|
line-height : 2rem;
|
|
}
|
|
|
|
aside {
|
|
min-height : auto;
|
|
width : 100%;
|
|
border-right : 0;
|
|
border-bottom : var(--base-grid) solid var(--bar-color);
|
|
}
|
|
|
|
aside header {
|
|
display : flex;
|
|
justify-content : space-between;
|
|
align-items : center;
|
|
margin : var(--base-grid) calc(var(--base-grid) / 2);
|
|
}
|
|
|
|
aside header a img {
|
|
height : 80px;
|
|
}
|
|
|
|
aside nav {
|
|
display : none;
|
|
}
|
|
|
|
aside.display nav {
|
|
display : inherit;
|
|
}
|
|
|
|
aside > footer {
|
|
display : none;
|
|
}
|
|
|
|
aside.display > footer {
|
|
display : inherit;
|
|
}
|
|
|
|
aside #menu-toggle {
|
|
display : initial;
|
|
font-size : 3em;
|
|
font-weight : bold;
|
|
}
|
|
|
|
aside nav ol li a {
|
|
display : block;
|
|
margin : 3rem 0;
|
|
font-size : 3rem;
|
|
}
|
|
|
|
aside > footer {
|
|
position : relative;
|
|
bottom : 0;
|
|
}
|
|
|
|
header .nav-toggle {
|
|
cursor : pointer;
|
|
display : block;
|
|
height : var(--burger_size);
|
|
margin-top : 10px;
|
|
}
|
|
|
|
header .nav-toggle span {
|
|
display : block;
|
|
height : calc( ( var(--burger_size) / 4 ) / 2 );
|
|
width : var(--burger_size);
|
|
background : var(--text-color);
|
|
margin-bottom : calc( ( var(--burger_size) / 3 ) / 2 );
|
|
}
|
|
|
|
header .nav-toggle span {
|
|
position : relative;
|
|
top : 0;
|
|
transition : all 0.3s;
|
|
}
|
|
|
|
header .nav-toggle.display span#nav-toggle-b {
|
|
opacity : 0;
|
|
}
|
|
|
|
header .nav-toggle.display span#nav-toggle-a {
|
|
transform : rotate(45deg);
|
|
top : calc( var(--burger_size) / 4 );
|
|
|
|
}
|
|
|
|
header .nav-toggle.display span#nav-toggle-c {
|
|
transform : rotate(-45deg);
|
|
top : calc( ( var(--burger_size) / 3 ) * -1 );
|
|
}
|
|
|
|
main article {
|
|
margin : calc(var(--base-grid) / 2);
|
|
}
|
|
}
|
|
|