site/content/assets/css/theme.css

/*****************************
* Theme
* Base CSS file
------------------------------
* COLOURS
*****************************/

/* Colour variables */
:root {
     --background-color: #FAFAFA;
     --dark-grey: #343434;
     --darker-grey: #666666;
     --light-grey: #C9C9C9;
     --medium-grey: #979797;
     --neutral-grey: #FAFAFA;
}

/* Adjust Zensical colours */
[data-md-color-accent=custom] {
     --md-accent-bg-color: var(--neutral-grey);
     --md-default-bg-color: var(--neutral-grey);
     --md-footer-bg-color: var(--neutral-grey);
     --md-primary-bg-color: var(--neutral-grey);
     --md-primary-fg-color: var(--dark-grey);
     --md-primary-fg-color--dark: var(--dark-grey);
     --md-primary-fg-color--light: var(--light-grey);
}

/*****************************
* FONTS
*****************************/

/* General */
@font-face {
     font-display: swap;
     font-family: 'Source Code';
     font-style: normal;
     font-weight: 100 700;
     src: url('../fonts/source-code.ttf') format('truetype');
}

@font-face {
     font-display: swap;
     font-family: 'Source Sans';
     font-style: normal;
     font-weight: 100 700;
     src: url('../fonts/source-sans.ttf') format('truetype');
}

@font-face {
     font-display: swap;
     font-family: 'Source Serif';
     font-style: normal;
     font-weight: 100 700;
     src: url('../fonts/source-serif.ttf') format('truetype');
}

/* Technical */
@font-face {
     font-display: swap;
     font-family: 'DM Mono';
     font-style: normal;
     font-weight: 100 700;
     src: url('../fonts/dm-mono.ttf') format('truetype');
}

@font-face {
     font-display: swap;
     font-family: 'DM Sans';
     font-style: normal;
     font-weight: 100 700;
     src: url('../fonts/dm-sans.ttf') format('truetype');
}

@font-face {
     font-display: swap;
     font-family: 'Tiny5';
     font-style: normal;
     font-weight: 900;
     src: url('../fonts/tiny5.ttf') format('truetype');
}

/* Visual */
@font-face {
     font-display: swap;
     font-family: 'Plaster';
     font-style: normal;
     font-weight: 900;
     src: url('../fonts/plaster.ttf') format('truetype');
}

@font-face {
     font-display: swap;
     font-family: 'Rubik';
     font-style: normal;
     font-weight: 100 700;
     src: url('../fonts/rubik.ttf') format('truetype');
}

/* Words */
@font-face {
     font-display: swap;
     font-family: 'EB Garamond';
     font-style: italic;
     font-weight: 100 700;
     src: url('../fonts/eb-garamond-italics.ttf') format('truetype');
}

@font-face {
     font-display: swap;
     font-family: 'EB Garamond';
     font-style: normal;
     font-weight: 100 700;
     src: url('../fonts/eb-garamond.ttf') format('truetype');
}

@font-face {
     font-display: swap;
     font-family: 'Playfair Display SC';
     font-style: normal;
     font-weight: 900;
     src: url('../fonts/playfair-display-sc.ttf') format('truetype');
}

/* Variables */
:root {
     --general-sans: 'Source Sans', sans-serif;
     --general-serif: 'Source Serif', serif;
     --general-code: 'Source Code', monospace;
     --technical-code: 'DM Mono', monospace;
     --technical-text: 'DM Sans', monospace;
     --technical-title: 'Tiny5', 'DM Mono', monospace;
     --visuals-text: 'Rubik', sans-serif;
     --visuals-title: 'Plaster', 'Rubik', sans-serif;
     --words-text: 'EB Garamond', serif;
     --words-title: 'Playfair Display SC', 'EB Garamond', serif;
}

/* Colours and weights */
.md-typeset {

     a,
     figcaption {
          color: var(--medium-grey);
          max-width: none;
          text-decoration: none;
     }

     a:hover {
          color: var(--medium-grey);
     }

     h1,
     h2,
     h3,
     h4,
     h5,
     h6 {
          color: var(--darker-grey);
          font-weight: bold;
     }

     p {
          color: var(--dark-grey);
     }
}

/* Sizes */

p {
     font-size: 1rem;
}

/*****************************
* RULES
*****************************/

body {
     /* align-items: center; */
     background-color: var(--neutral-grey);
     /* display: flex; */
     /* justify-content: center;
     min-height: 100vh;
     width: 100%; */
}

/* Footer */
footer {
     .logo {
          text-align: center;

          img {
               height: 25px;
          }
     }

     .tcs {
          align-items: center;
          display: flex;
          flex-direction: row;
          justify-content: center;
          margin-bottom: 5px;
          padding-bottom: 0;

          &>*:not(:last-child)::after {
               content: " | ";
               margin: 0 8px;
          }
     }
}