Skip to content
Snippets Groups Projects
Select Git revision
  • 7cb34cd0e83e9645283ac49e98a9cc9ec89fec32
  • main default protected
  • 1.0.0
3 results

style.css

Blame
  • style.css 7.08 KiB
    :root {
      --default-top-padding: 1.5em;
      --default-body-bottom-margin: 2vmin;
      --default-min-font-size-px: 12px;
      --default-min-font-size: 12;
      --default-max-font-size-px: 18px;
      --default-max-font-size: 18;
    }
    
    /* *****************************************************************************
    
      personal header styling
    
    ***************************************************************************** */
    
    html {
      /* see: https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/#comment-1769978 - comment by MaxDesign */
      font-size:calc(var(--default-min-font-size-px) + (var(--default-max-font-size) - var(--default-min-font-size)) * ((100vw - 360px) / 1560));
      font-size: clamp(var(--default-min-font-size-px), calc(var(--default-min-font-size-px) + (var(--default-max-font-size) - var(--default-min-font-size)) * ((100vw - 360px) / 1560)), var(--default-max-font-size-px));
    }
    
    body {
      height: calc(100vh - 3vmin); /* minus margin-top - margin bottom is 0 */
      font-size: inherit;
      font-family: helvetica, Arial, sans-serif;
      background-color: #555;
      color: white;
      /* margin-bottom is calculated here to 0
      this margin must be set by the lowest elements,
      because they should go to the very bottom */
      margin: 3vmin 4vmin calc(var(--default-body-bottom-margin) - var(--default-body-bottom-margin)) 4vmin;
    }
    
    *:focus {
      outline: 2px solid white;
      outline-offset: 2px;
    }
    
    a {
      color: #ffffff;
    }
    
    header a {
      text-decoration: none;
    }
    
    /* kind of disabled link - text-decoration will be none automatically */
    a:not([href]) {
      color: #AAAAAA;
    }
    
    header {
      margin-bottom: 1.0em;
    }
    
    nav {
      display: flex;
      align-items: baseline;
      column-gap: 0.7em;
    }
    
    nav a {
      margin-top: auto;
      margin-bottom: auto;
    }
    
    h1 {
      font-size: 1.5em;
      margin: 0;
    }
    
    #github {
      margin-left: auto;
    }
    
    #github-cat {
      height: 1.5em;
    }
    
    /* *****************************************************************************
    
      reset user agent styles
      see: https://andy-bell.co.uk/a-modern-css-reset
    
    ***************************************************************************** */
    
    /* Box sizing rules */
    /* unset here makes select w/o round corners */
    *, *::before, *::after {
      /* box-sizing: border-box; */
      box-sizing: unset;
    }
    
    /* Remove default margin */
    body, h1, h2, h3, h4,
    p, figure, blockquote, dl, dd {
      margin-block-end: 0;
    }
    
    /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
    ul[role='list'], ol[role='list'] {
      list-style: none;
    }
    
    /* Set core root defaults */
    html:focus-within {
      scroll-behavior: smooth;
    }
    
    /* Set core body defaults */
    body {
      /* disable because of my personal header */
      /* min-height: 100vh; */
      text-rendering: optimizeSpeed;
      line-height: 1.5;
    }
    
    /* A elements that don't have a class get default styles */
    a:not([class]) {
      text-decoration-skip-ink: auto;
    }
    
    /* Make images easier to work with */
    img, picture {
      max-width: 100%;
      /* alt text should be very different */
      font-style: italic;
    }
    
    /* Inherit fonts for inputs and buttons */
    input, button, textarea, select {
      font: inherit;
    }
    
    /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
    @media (prefers-reduced-motion: reduce) {
      html:focus-within {
       scroll-behavior: auto;
      }
    
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }
    
    /* *****************************************************************************
    
      font
    
    ***************************************************************************** */
    
    /* Just for this special page */
    body {
      font-size: 2em;
    }
    
    #dialogText {
      font-size: 23vw;
      line-height: 0.8em;
    }
    
    /* *****************************************************************************
    
      colors
    
    ***************************************************************************** */
    
    #dialog-wrapper {
      background: rgba(85,85,85,0.97);
    }
    
    #dialogText {
      color: #fff;
      background-color: #555;
    }
    
    /* avoids blue default text color from select in iOS Safari */
    select {
      color: #000;
    }
    
    button, input {
      color: white;
      background-color: #333;
    }
    
    input[type=radio] {
      accent-color: #333;
    }
    
    th {
      background-color: #444444;
    }
    
    tr:nth-child(even) {
      background-color: #505050;
    }
    
    /* *****************************************************************************
    
      borders and outlines
    
    ***************************************************************************** */
    
    #dialogText {
      border: 1px solid white;
      border-radius: 10px;
    }
    
    button, input, select {
      border: 2px solid white;
    }
    
    button, input {
      -webkit-border-radius: 5px;
      border-radius: 5px;
    }
    
    select#channel {
      border-radius: 5px;
    }
    
    /* *****************************************************************************
    
      specials
    
    ***************************************************************************** */
    
    body {
      hyphens: auto;
    }
    
    button, input, select,
    details summary {
      cursor: pointer;
    }
    
    #dialog-wrapper {
      cursor: pointer;
    }
    
    #dialogText {
      cursor: pointer;
    }
    
    #copyIcon {
      text-decoration: none;
    }
    
    td:nth-child(even) {
      cursor: pointer;
    }
    
    /* *****************************************************************************
    
      all margins and paddings to have them together
    
    ***************************************************************************** */
    
    main .first-in-main {
      padding-top: calc(var(--default-top-padding) - 0.8em);
    }
    
    .horizontal {
      margin-top: 10px;
    }
    
    .horizontal label {
      margin-right: 10px;
    }
    
    #dialogText {
      padding: 0.25em;
    }
    
    th, td {
      padding: 0;
      padding-left: 10px;
      padding-right: 10px;
    }
    
    #copyIcon {
      margin-left: 10px;
    }
    
    .space {
      margin: 0.6em;
    }
    
    p.label {
      margin-right: 15px;
    }
    
    p {
      margin-block-start: 0;
    }
    
    ul {
      margin-block-start: 0;
    }
    
    p#source {
      margin-top: 2em;
      margin-left: auto;
    }
    /* *****************************************************************************
    
      positioning of elements
    
    ***************************************************************************** */
    
    body {
      display: flex;
      flex-direction: column;
      /* disabled here because my personal default body seen on top */
      /* height: 100%; */
    }
    
    main {
      display: flex;
      flex-direction: column;
      height: 100%
    }
    
    #logo img {
      width: 2em;
      height: auto;
    }
    
    #dialog-wrapper {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .horizontal {
      display: inline-flex;
    }
    
    th {
      text-align: left;
    }
    
    /* Safari adds nasty top and bottom paddings - this way to omit them */
    table, tr, td {
      overflow: hidden;
    }
    
    th:nth-child(1), td:nth-child(1) {
      width: 2ch;
    }
    
    th:nth-child(2), td:nth-child(2) {
      width: 13ch;
    }
    
    th:nth-child(3), td:nth-child(3){
      width: fit-content;
    }
    
    select#channel {
      width: fit-content;
      height: 1.3em;
    }
    
    p#source {
      width: fit-content;
    }
    
    /* *****************************************************************************
    
      media queries here
    
    ***************************************************************************** */
    
    /* iPhone 13 mini portrait (max-width: 375px) */
    /* @media (max-width: 600px) {
    } */