defiance-ng/static/css/style.css

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #1f2023;
        color: #E7DBDA;
    }
    a {
        text-decoration: none;
        color: #FF535D;
    }
    pre, code {
        background-color: #3B3C43;
        color: #E7DBDA;
    }
    .author-name {
        background-color: #B5ADAD;
        border-radius: 4px;
        padding: 5px 10px;
        font-family: 'Liberation Mono', monospace;
    }
    
    .author-name:hover {
        background-color: #CEC4C4;
    }
    .tag {
        background-color: #34353B;
        border-radius: 4px;
        padding: 5px 10px;
        font-family: 'Liberation Mono', monospace;
    }
    
    .tag:hover {
        background-color: #2D2E33;
    }
}
/* Light Mode */
@media (prefers-color-scheme: light) {
    body {
        background-color: #E7DBDA;
    }
    a {
        text-decoration: none;
        color: #FF535D;
    }
    pre, code {
        background-color: #A9A2A2;
        color: #1f2023;
    }
    .author-name {
        background-color: #34353B;
        border-radius: 4px;
        padding: 5px 10px;
        font-family: 'Liberation Mono', monospace;
    }
    .author-name:hover {
        background-color: #2D2E33;
    }
    .tag {
        background-color: #B5ADAD;
        border-radius: 4px;
        padding: 5px 10px;
        font-family: 'Liberation Mono', monospace;
    }
    .tag:hover {
        background-color: #CEC4C4;
    }
}

.iframecontainer {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

/* Universal */
body {
    justify-content: center;
}

img {
    height: 500px;
    max-width: 100%;
    max-height: 100%;
}

header h1 {
    text-align: center;
}

code {
    border-radius: 5px;
    padding: 1pt;
}

footer {
    text-align: center;
    clear: both;
}

#content {
  margin: 25px 50px 75px;
}

/* For header.html */
#nav {
    background-color: #F14B25;
    font-family: 'Remingtoned Type';
}

#nav-button {
    color: #E7DBDA;
    padding: 0px 25px;
    text-decoration: none;
}

#nav-button:hover {
    background-color: #DB691A;
}

/* For author.html */
#avatar {
    border-radius: 8px;
    max-width: 200px;
    height: auto;
}
#pronouns {
    color: #FF535D;
}

/* For meta.html */
.meta {
    text-align: center;
    clear: both;
}
#meta-avatar {
    border-radius: 8px;
    max-width: 60px;
    height: auto;
}

/* Fonts */
/* Remingtoned Type - latin */
@font-face {
    font-family: 'Remingtoned Type';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local(''),
         url('fonts/remingtonedtype.ttf');
  }
  /* Liberation Sans - latin */
  @font-face {
    font-family: 'Liberation Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local(''),
         url('fonts/LiberationSans-Regular.ttf');
  }
  /* Liberation Mono - latin */
  @font-face {
    font-family: 'Liberation Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local(''),
         url('fonts/LiberationMono-Regular.ttf');
  }
  /* OpenDyslexic - latin */
  @font-face {
    font-family: 'OpenDyslexic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local(''),
         url('fonts/OpenDyslexic-Regular.otf') format('opentype');
  }
  
  h1, h2, h3 {
    font-family: 'Remingtoned Type';
  }
  
  body, p, h4, h5, tr, td {
    font-family: 'Liberation Sans';
  }
  
  p {
    font-size: 16pt;
  }

  body {
    font-size: 14pt;
  }

  nav {
    font-size: 20pt;
  }
  
  pre, code {
    font-family: 'Liberation Mono', monospace;
  }
  
  /* For Content Warnings */
  label {
    display: none;
  }

  #cw:checked + label {
    display: block;
  }