boredgame/src/styles/global.scss

/* Setup */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

:root {
  --color-brand: hsl(204 88% 53%);
  --color-text-primary: hsl(0 0% 98%);
  --color-text-muted: hsl(210 34% 80%);
  --color-bg-primary: hsl(210 34% 13%);
  --color-bg-secondary: hsl(209, 35%, 15%);
  --color-btn-primary-active: var(--color-brand);
  --color-btn-primary-active-hover: hsl(204 88% 60%);
  --color-btn-primary-inactive: hsl(205 70% 33%);
  --color-btn-secondary: hsl(192 19% 95%);
  --color-border-primary: hsl(0, 0%, 34%);
  --color-link-hover: hsl(209 22% 19%);
  --color-placeholder: hsl(210 34% 80%);

  --red: #990000;
  --redBrown: #633539;
  --blue: #336699;
  --black: #1f273a;
  --white: #fff;
  --grey: #efefef;
  --greyBlue: #888e9c;
  --lighterGreyBlue: #6a707e;
  --yellow: #ffc600;
  --light: #ffffff;
  --dark: #000000;
  --lightGrey: #C5C5C5;
  --lightGray: var(--lightGrey);
  --imGoingToFaint: #fbfbfb;
  --redBrown: #633539;
  --maxWidth: 1200px;

  /* Define Colors intentions */
  --primary: var(--greyBlue);
  --secondary: var(--redBrown);
  --background: var(--white);
  --textColor: var(--lighterGreyBlue);
  --buttonTextColor: var(--black);
  --lineColor: var(--grey);
  --cardBg: var(--darkGrey);
  --headerBackground: var(--greyBlue);
  --footerBackground: var(--darkGrey);
  --linkHover: var(--white);
  --lightHairLine: #C5C5C5;

  --radius-base: 1rem;

  /* Type */
  --headingFont: 'Merriweather Sans', sans-serif;
  --bodyFont: 'Work Sans', sans-serif;
  --baseFontSize: 100%;
  --h1: 3.052rem;
  --h2: 2.441rem;
  --h3: 1.953rem;
  --h4: 1.563rem;
  --h5: 1.25rem;
  --h6: 1.8rem;
  --bodyTextSize: 1.8rem;
  --smallText: 1.44rem;
  --lineHeight: 2.25rem;
  --font-serif: 'Inter', sans-serif;
  --font-16: 1.6rem;
  --font-18: 1.8rem;
  --font-24: 2.4rem;
  --font-32: 3.2rem;
  --font-80: 8rem;

  --spacing-4: 0.4rem;
  --spacing-8: 0.5rem;
  --spacing-16: 1.6rem;
  --spacing-20: 2rem;
  --spacing-24: 2.4rem;
  --spacing-32: 3.2rem;

  /* Elevation */
  --level-0: none;
  --level-1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --level-2: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --level-3: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --level-4: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Z Indexes */
  --zBase: 1;

  /* Positioning */
  --containerPadding: 2.5%;
  --headerHeight: 8rem;
  --borderRadius: 4px;
  --borderRadiusLarge: 10px;
  --maxWidth: 1200px;

  /* Font */
  --font-sans: 'Poppins', sans-serif;
  --font-serif: 'Arsenica', serif;
  --font-mono: Source Code Pro, monospace;
  --font-dyslexic: OpenDyslexic, sans-serif;
  --font-dyslexic-mono: OpenDyslexic Mono, monospace;

  --font-16: 1.6rem;
  --font-24: 2.4rem;
  --font-32: 3.2rem;
  --font-48: 4.8rem;
  --font-96: 9.6rem;

  /* Spacing */
  --spacing-4: 0.4rem;
  --spacing-8: 0.8rem;
  --spacing-16: 1.6rem;
  --spacing-24: 2.4rem;
  --spacing-32: 3.2rem;
  --spacing-64: 6.4rem;
  --spacing-128: 12.8rem;

  /* Scrollbar */
  --clr-scrollbar-thumb: hsl(173 10% 20%);

  /* Shadows */
  --shadow-sm: 0px 0px 4px 4px hsl(0 0% 0% / 4%);
  --shadow-md: 0px 0px 10px 4px hsl(0 0% 0% / 10%);
  --shadow-lg: 0px 0px 20px 8px hsl(0 0% 0% / 20%);

  /* Border radius */
  --rounded-4: 4px;
  --rounded-20: 20px;

  /* Media Queryies - Not yet supported in CSS */
  /* 
      --xsmall: 340px;
      --small: 500px;
      --large: 960px;
      --wide: 1200px;
    */
}

html {
  /* background-image: url(${floatingCogs}); */
  /* background-color: var(--background); */
  /* background-size: 450px; */
  /* background-attachment: fixed; */
  font-size: 62.5%;
  box-sizing: border-box;
  scrollbar-width: thin;
}

html,
body {
  height: 100%;
}


::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: var(--color-brand);
  border-radius: var(--radius-base);
}

::selection {
  background: var(--primary);
  color: var(--white);
}

body {
  font-family: var(--font-serif);
  font-size: var(--font-18);
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
}

a {
  text-decoration: none;
  color: var(--color-text-primary);
}

label {
  display: block;
  margin: var(--spacing-8) 0;
  font-size: var(--font-24);
  color: var(--color-text-muted);
}

input {
  padding: var(--spacing-8);
  font-size: var(--font-16);
  border-radius: var(--radius-base);
  border: none;
}

.btn {
  padding: var(--spacing-16) var(--spacing-32);
  font-size: var(--font-18);
  font-weight: bold;
  color: var(--color-text-primary);
  background-color: var(--color-btn-primary-active);
  border-radius: var(--radius-base);
  border: none;
  cursor: pointer;
}

.btn:hover {
  background-color: var(--color-btn-primary-active-hover);
}

.btn:disabled {
  color: var(--color-text-muted);
  background-color: var(--color-btn-primary-inactive);
  cursor: not-allowed;
}

ul,
ol {
  list-style: none;
}

/* Utils */

.responsive {
  resize: both;
  overflow: scroll;
  border: 1px solid hsl(0 0% 0%);
}

.placeholder {
  padding: var(--spacing-20) 0;
  background-color: var(--color-placeholder);
  border-radius: var(--radius-base);
}