website/themes/datacoop2020/assets/static/css/style.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         : 60px;
    --base-font-size    : 22px;
    
    --text-color        : #4b3aba;
    --bg-color          : #fff;
    --alt-bg-color      : #a8f3f4;
    --bar-color         : #f0dcac;

    --burger_size       : 56px;
}

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         : 165%;
    text-align          : left;

    border-right        : var(--base-grid) solid var(--bar-color);
}

a {
    color               : var(--text-color);
}

h1, h2, h3, h4, h5, h6, b, strong {
    font-weight         : 700;
}

main h1 {
    font-size           : 3rem;
    margin              : 0 0 3rem 0;
}

main h2 {
    font-size           : 2rem;
    margin              : 3.5rem 0 1.5rem 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);
}

aside nav ol {
    list-style-type     : none;
    padding             : 0;
    margin              : 0;
}

aside nav ol li a {
    display             : block;
    font-size           : 2rem;
    padding             : 0.5rem 0;  
    text-decoration     : none;
}

aside nav ol li a:hover {
    text-decoration     : underline;
}

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

aside header a img {
    width               : 100%;
    height              : 140px;
}

@media(max-width:1000px) {
    :root {
        --base-grid         : 40px;
        --base-font-size    : 30px;
    }

    body {
        flex-direction      : column;
        border              : 0;
    }

    aside {
        min-height          : auto;
        width               : 100%;
        border-right        : 0;
        border-bottom       : var(--base-grid) solid var(--bar-color);
    }

    aside header {
        display             : flex;
        flex-direction      : row;
        justify-content     : space-between;
    }

    aside header a {
        width               : 35%;
        max-width           : 35%;
    }

    aside nav {
        display             : none;
    }

    aside #menu-toggle {
        display             : initial;
        font-size           : 3em;
        font-weight         : bold;
    }

    aside nav ol li a {
        display             : block;
        padding             : 1.5rem 0;
        font-size           : 3rem;
    }

    header .nav-toggle {
        cursor : pointer;
        display : block;
        height : var(--burger_size);
        float : right;
        margin : 40px 20px;
    }

    header .nav-toggle span {
        display : block;
        height : calc( ( var(--burger_size) / 3 ) / 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.4s;
    }

    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) / 3 );
        
    }

    header .nav-toggle.display span#nav-toggle-c {
        transform : rotate(-45deg); 
        top : calc( ( var(--burger_size) / 3 ) * -1 );
    }
}