main.css

/*
                                       Table of Contents: main.css

  Notes: 
  - Component-specific CSS: Is in the "components" folder in the respective components.
  E. g. header-CSS is in "components/header".

  - Page-specific CSS: Is in the "pages" folder in the respective page folder.
  E. g. index.html-CSS is in "pages/index".

  - Precedence: It should always be main.css first and then page- or component-specific CSS.

  - The number of HTTP requests or page load time are not taken into account. 
  The page already loads quickly anyway. Therefore, optimization is classified as unimportant.
  Priority rather placed on readability / splitted CSS files.


  Table of Contents:
  Root
  Headings
  Pargraph
  Lists
  Links
  Code
  Sections
  Atomic CSS
  Animations
  Accessibility
  Mobile Responsiveness
*/




/* 
  ========================================================================
  =============================== Root ===================================
  ======================================================================== 
*/
html,
body {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 16px;

  /* 
    Declare automatic hyphenation. 
    Very tedious to use ­ everywhere.
    Decreases readability as well.
  */
  hyphens: auto;

  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);


  /* To let footer stick to the bottom */
  min-height: 100vh;

  /* 
    To avoid horizontal scrollbar at bottom 
    Note: With "overflow-x: hidden;", Scroll-Animations don't work anymore.
  */
  max-width: 100vw;


  /* Basic Reset for Consistency */
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}




/* 
  Note: 
  Use REM-Unit for remaining font size changes instead of fixed pixel values.

  Reason: 
  Better font responsiveness & maintenance as everything is 
  controlled via root element.
*/


/* 
  ========================================================================
  ============================== Headings ================================
  ======================================================================== 
*/
h3,
h4 {
  margin: 12px 0px 12px 0px;
  line-height: 1.1;
}

h3 {
  font-size: 3rem;
}

h4 {
  font-size: 2rem;
}



/* 
  ========================================================================
  =============================== Paragraph ==============================
  ======================================================================== 
*/
p {
  font-size: 1.3rem;
  line-height: 1.5;


  /* 
    Margin-bottom should be sufficient so that paragraphs are 
    clearly distinguishable from each other! For better readability.
  */
  margin: 12px 0px 32px 0px;


  /* 
    Set max width for better UI readability.
    Wide Paragraphs are difficult to read.
  */
  max-width: 50rem;
}



/* 
  ========================================================================
  =============================== Lists ==================================
  ======================================================================== 
*/
.two-columns-ul {
  columns: 2;
  padding: 0px 0px 0px 16px;
  font-size: 1.3rem;
}

.two-columns-ul li {
  margin: 0px 12px 12px 0px;
}

.two-columns-ul ul {
  padding: 0px 0px 12px 36px;
}

.two-columns-ul li ul li {
  margin: 6px 12px 6px 0px;
}


/* 
  ========================================================================
  =============================== Links ==================================
  ======================================================================== 
*/
a {
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
}



/* 
  ========================================================================
  ================================ Code ==================================
  ======================================================================== 
*/
code {
  background-color: var(--md-sys-color-outline);
}




/* 
  ========================================================================
  =============================== Sections ===============================
  ======================================================================== 
*/
/*
  Section itself is not affected by animations such as fade-in,
  as the background color is also animated. This looks unattractive.
  The box / background color should be visible from the beginning.
*/
.dark-section {
  background-color: var(--md-sys-color-on-secondary-container);
  color: var(--md-sys-color-secondary-container);
}

.dark-section a {
  color: var(--md-sys-color-custom-color-1-container);
}

#hero-section {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: center;
}

#hero-section-text {
  flex: 1;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: start;
}

#hero-section-text h3 {
  font-size: 2.5rem;
}

#hero-section-text p {
  font-size: 1.2rem;
}



/* 
  Note: Create separate class for each image / URL to simplify 
  reusability and interchangeability. 
*/
.background-statistics-3120x2336-img {
  position: relative;
  height: 60vh;
  background: url('/assets/images/statistics-3120x2336.jpg') no-repeat center center/cover;
}

.background-workplace-3120x2066-img {
  position: relative;
  height: 60vh;
  background: url('/assets/images/workplace-3120x2066.jpg') no-repeat center center/cover;
}

.background-letter-3120x2066-img {
  position: relative;
  height: 60vh;
  background: url('/assets/images/letter-3120x2066.jpg') no-repeat center center/cover;
}

.background-keyboard-1920x1081-img {
  position: relative;
  height: 60vh;
  background: url('/assets/images/keyboard-1920x1081.jpg') no-repeat center center/cover;
}

.background-temp-img {
  position: relative;
  height: 60vh;
  background: url('/assets/images/temp-img.jpg') no-repeat center center/cover;
}



.overlay {
  /* 
    Relative position (image) + absolute position (overlay)
    so overlay fills whole background image 
  */
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;

  /* Add border-box so it possible to use padding */
  box-sizing: border-box;
  padding: 0px 320px 0px 320px;

  display: flex;
  flex-flow: row;
  align-items: center;

  background-color: rgba(0, 0, 0, 0.8);
  color: var(--md-sys-color-secondary-container);
}

.content-of-overlay {
  z-index: 1;
}



/* 
  ========================================================================
  ============================ Atomic CSS ================================
  ======================================================================== 
*/
/* Improve in future: Use more Atomic CSS & refactor old CSS code */
.text-align-center {
  text-align: center;
}

.margin-0px {
  margin: 0px;
}

.margin-top-120px {
  margin-top: 120px;
}

.margin-bottom-120px {
  margin-bottom: 120px;
}

.margin-top-12px {
  margin-top: 12px;
}

.margin-bottom-12px {
  margin-bottom: 12px;
}


.padding-0px {
  padding: 0px;
}

/*
  Padding top & buttom are used to place content correctly. S
  So that animation events 
  such as “animation-timeline: view();” 
  and “animation-range: entry;” have better UX 
  (e.g. earlier start/end of the animation).

  It must be noted that at the end of a section, 
  the next section is already slightly visible. 
  So that the user knows that there is more to come.
*/
.padding-top-240px {
  padding-top: 240px;
}

.padding-bottom-240px {
  padding-bottom: 240px;
}

.padding-top-80px {
  padding-top: 80px;
}

.padding-bottom-80px {
  padding-bottom: 80px;
}

.padding-left-320px {
  padding-left: 320px;
}

.padding-right-320px {
  padding-right: 320px;
}


.center-content {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}


/* 
  ========================================================================
  =============================== Animations =============================
  ======================================================================== 
*/
/* 
  NOTE: Add "@media (prefers-reduced-motion: no-preference) {...}" to all
  CSS animations.
  Opens possibility to switch off animations.
  --> If someone is susceptible to movements
*/

/*
  Prefers-reduced-motion --> Possibility to switch off animations.
  If someone is susceptible to movements.
*/
@media (prefers-reduced-motion: no-preference) {
  @keyframes wobble {

    0%,
    20%,
    80%,
    100% {
      transform: rotate(0deg);
    }

    40% {
      transform: rotate(15deg);
    }

    50% {
      transform: rotate(5deg);
    }

    60% {
      transform: rotate(15deg);
    }
  }

  .wobble {
    /* So it is able to animate e. g. a span-Tag. */
    display: inline-block;


    animation: wobble 3.2s ease infinite;
    transform-origin: right bottom;
  }



  @keyframes fade-in {
    70% {
      scale: 1;
      opacity: 1;
    }

    100% {
      scale: 1;
      opacity: 1;
    }
  }

  .fade-in {
    /*
    Not implemented in keyframes, but in class. 
    Otherwise the animation “flashes” at the beginning and end
    -> no smooth transition.

    IMPORTANT: 
    Because of that, we need to add animation-fill-mode: forwards.
    So that the object remains visible in the last frame.
    */
    scale: .8;
    opacity: 0;


    animation: fade-in linear forwards;

    /*
      NOTE: 
      animation-timeline & -range have limited browser
      compatibility (e.g. Chrome and Explorer work, but not Firefox and Safari).
    */
    animation-timeline: view();
    animation-range: entry;
  }



  /* 
    For the section after the hero section.
    So that the next section is reasonably 
    visible and the visitor knows: "Aha, there's more to come!"
  */
  @keyframes fade-in-short {
    50% {
      scale: 1;
      opacity: 1;
    }

    100% {
      scale: 1;
      opacity: 1;
    }
  }

  .fade-in-short {
    /*
    Not implemented in keyframes, but in class. 
    Otherwise the animation “flashes” at the beginning and end
    -> no smooth transition.

    IMPORTANT: 
    Because of that, we need to add animation-fill-mode: forwards.
    So that the object remains visible in the last frame.
    */
    scale: .8;
    opacity: 0;


    animation: fade-in-short linear forwards;

    /*
      NOTE: 
      animation-timeline & -range have limited browser
      compatibility (e.g. Chrome and Explorer work, but not Firefox and Safari).
    */
    animation-timeline: view();
    animation-range: entry;
  }



  @keyframes slide-in-from-left {
    0% {
      transform: translateX(-100%);
    }

    /* 
      Animation should stop earlier than 100%, as otherwise, for example, 
      large cards will not be visible in time. 
    */
    70% {
      transform: translateX(0);
      scale: 1;
      opacity: 1;
    }

    100% {
      transform: translateX(0);
      scale: 1;
      opacity: 1;
    }
  }

  .slide-in-from-left {
    animation: slide-in-from-left linear forwards;

    /*
    Not implemented in keyframes, but in class. 
    Otherwise the animation “flashes” at the beginning and end
    -> no smooth transition.

    IMPORTANT: 
    Because of that, we need to add animation-fill-mode: forwards.
    So that the object remains visible in the last frame.
    */
    scale: .8;
    opacity: 0;

    /*
      NOTE: 
      animation-timeline & -range have limited browser
      compatibility (e.g. Chrome and Explorer work, but not Firefox and Safari).
    */
    animation-timeline: view();
    animation-range: entry;
  }



  @keyframes slide-in-from-right {
    0% {
      transform: translateX(100%);
    }

    /* 
      Animation should stop earlier than 100%, as otherwise, for example, 
      large cards will not be visible in time. 
    */
    70% {
      transform: translateX(0);
      scale: 1;
      opacity: 1;
    }

    100% {
      transform: translateX(0);
      scale: 1;
      opacity: 1;
    }
  }

  .slide-in-from-right {
    animation: slide-in-from-right linear forwards;

    /*
    Not implemented in keyframes, but in class. 
    Otherwise the animation “flashes” at the beginning and end
    -> no smooth transition.

    IMPORTANT: 
    Because of that, we need to add animation-fill-mode: forwards.
    So that the object remains visible in the last frame.
    */
    scale: .8;
    opacity: 0;

    /*
      NOTE: 
      animation-timeline & -range have limited browser
      compatibility (e.g. Chrome and Explorer work, but not Firefox and Safari).
    */
    animation-timeline: view();
    animation-range: entry;
  }
}




/* 
  ========================================================================
  ========================== Accessibility ===============================
  ======================================================================== 
*/
/*
  Class for hiding e.g. headings as they should not be visible in layout.
  But they should exist for accessibility reasons (Screen Readers)
*/
.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}




/* 
  ========================================================================
  ====================== Mobile Responsiveness ===========================
  ======================================================================== 
*/
/* 
  Media Query Breakpoints are based on the sizes of the devices 
  in Google developer tools. 
*/

/* 
  Note: 
  Media Query Breakpoints variables to control centrally don't work
  in vanilla CSS.

  Reason: 
  Media queries aren't conceptually attached to HTML elements at all.
  These declarations are processed while your CSS is being parsed, 
  so it won't know to look to the :root and pull in the variable values.
*/


/* For the big ladies and gentlemen */
@media (min-width: 1921px) {

  html,
  body {
    font-size: 28px;
  }

  .padding-top-240px {
    padding-top: 320px;
  }

  .padding-bottom-240px {
    padding-bottom: 320px;
  }

  .padding-left-320px {
    padding-left: 240px;
  }

  .padding-right-320px {
    padding-right: 240px;
  }
}


@media (max-width: 1024px) {

  html,
  body {
    font-size: 14px;
  }

  .padding-top-240px {
    padding-top: 180px;
  }

  .padding-bottom-240px {
    padding-bottom: 180px;
  }

  .padding-left-320px {
    padding-left: 100px;
  }

  .padding-right-320px {
    padding-right: 100px;
  }

  .overlay {
    padding: 0px 120px 0px 120px;
  }
}


@media (max-width: 768px) {

  .two-columns-ul {
    columns: 1;
    padding: 0px 0px 0px 12px;
  }

  .two-columns-ul ul {
    padding: 0px 0px 12px 24px;
  }

  .padding-left-320px {
    padding-left: 80px;
  }

  .padding-right-320px {
    padding-right: 80px;
  }

  .overlay {
    padding: 0px 60px 0px 60px;
  }
}



@media (max-width: 425px) {

  html,
  body {
    font-size: 12px;
  }

  .padding-top-240px {
    padding-top: 120px;
  }

  .padding-bottom-240px {
    padding-bottom: 120px;
  }

  .padding-left-320px {
    padding-left: 30px;
  }

  .padding-right-320px {
    padding-right: 30px;
  }

  .overlay {
    padding: 0px 30px 0px 30px;
  }
}



/* 
  Smallest width of smart phone is usually 320px. 
  Just to be sure, adjust it below 320px.
*/
@media (max-width: 312px) {

  html,
  body {
    font-size: 10px;
  }

  .padding-top-240px {
    padding-top: 80px;
  }

  .padding-bottom-240px {
    padding-bottom: 80px;
  }

  .padding-left-320px {
    padding-left: 20px;
  }

  .padding-right-320px {
    padding-right: 20px;
  }
}