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         : 40px;
    --base-font-size    : 20px;
    
    --text-color        : #4b3aba;
    --bg-color          : #fff;
    --alt-bg-color      : #a8f3f4;
    --bar-color         : #f0dcac;

    --burger_size       : 45px;
}

html {
    scroll-behavior: smooth;
}

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

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;
    @media (max-height: 700px) {
      font-size           : 1.5rem;
      margin              : 0.5rem 0;  
    }
}

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;
    @media (max-height: 700px) {
      margin              : (var(--base-grid) / 1.5) 0 0 0;
    }
}

aside nav footer ol li a {
    font-size           : 1.65rem;
    margin              : 1.2rem 0;
    @media (max-height: 700px) {
      font-size           : 1.2rem;
      margin              : 0.1rem 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;
}

.badge-icon {
  width: 75px;
  height: auto;
  svg{
    fill:#4b3aba;
    width: 100%;
    height: auto;
  }
}

.principles-list {
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  
  @media(max-width: 700px) {
    grid-template-columns: 100%;
  }
  
  align-items: center;
  gap: 20px;
  dt {
    vertical-align: top;
    align-self: start;
    font-weight: bold;
    img {
      display: inline-block;
      vertical-align: middle;
      margin-right: 10px;
    }
  }
  dd {
    line-height: 130%;
  }
}

dl.dl-services,
{
    display             : grid;
    column-gap          : 2rem;
    row-gap: 2rem;
    dt {
        grid-column-start   : 1;
        grid-column-end     : 2;
        font-weight         : bold;
    }
    dd {
        grid-column-start   : 2;
        grid-column-end     : 3;
    }
}

.badge-definitions,
.status-definitions,
{
    display             : grid;
    column-gap          : 2rem;
    .badge-icon {
        grid-column-start   : 1;
        grid-column-end     : 2;
    }
    .badge-name {
        grid-column-start   : 2;
        grid-column-end     : 3;
        font-weight         : bold;
        margin-top: 20px;
    }
    .badge-description {
        grid-column-start   : 3;
        grid-column-end     : 4;
        p {
          margin-top: 20px;
        }
    }
    
    .badge-status {
      margin-bottom: 40px;
    }
    @media(max-width: 700px) {
      grid-template-columns: min-content auto;
      .badge-icon {
          grid-column-start   : 1;
          grid-column-end     : 2;
      }
      .badge-name {
          grid-column-start   : 2;
          grid-column-end     : 3;
          
      }
      .badge-description {
          grid-column-start   : 1;
          grid-column-end     : 3;
      }
    }
    
   
}

.service-badges {
    display             : grid;
    column-gap          : 2rem;
    grid-template-columns: 1fr 1.5fr auto;
    .badge-icon {
      grid-column-start   : 1;
      grid-column-end     : 2;
    }
    .badge-name {
      grid-column-start   : 2;
      grid-column-end     : 3;
      font-weight         : bold;
      margin-top: 20px;
    }
    .badge-description {
      grid-column-start   : 3;
      grid-column-end     : 4;
      p {
        margin-top: 20px;
      }
    }
    @media(max-width: 700px) {
      grid-template-columns: min-content auto;
      .badge-icon {
          grid-column-start   : 1;
          grid-column-end     : 2;
      }
      .badge-name {
          grid-column-start   : 2;
          grid-column-end     : 3;
          
      }
      .badge-description {
          grid-column-start   : 1;
          grid-column-end     : 3;
      }
    }
}

.badge-status {
  width: 75px;
  height: 75px;
  border-radius: 75px;
}
.badge-status-positive {
  @extend .badge-status;
  border: 5px solid #4c4;
}

.badge-status-negative {
  @extend .badge-status;
  border: 5px solid #c44;
}

.badge-status-partial {
  @extend .badge-status;
  border: 5px solid #cc4;
}

.badge-status-none {
  @extend .badge-status;
  border: 5px solid #888;
}

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