mystyleguide.md

Essential Stuff

HTML Import Links

Google Fonts

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap"
  rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
  rel="stylesheet"
/>

Colors

--very-dark-bkue: hsl(243, 87%, 12%);
--desaturated-blue: hsl(238, 22%, 44%);
--bright-blue: hsl(224, 93%, 58%);
--moderate-cyan: hsl(170, 45%, 43%);
--light-grayish-blue: hsl(240, 75%, 98%);
--light-gray: hsl(0, 0%, 75%);
--light-red: hsl(0, 100%, 63%);
--light-moderate-cyan: hsl(170, 34%, 60%);
--light-bright-blue: hsl(224, 94%, 75%);
--black: hsl(0, 56%, 2%);
--white: hsl(0, 0%, 100%);

Typography

--ff-Raleway: "Raleway", sans-serif;
--ff-OpenSans: "Open Sans", sans-serif;
--fw-400: 400;
--fw-700: 700;
--fs-1: 1rem;
--fs-2: 1.2rem;
--fs-3: 1.4rem;
--fs-4: 1.6rem;
--fs-5: 1.8rem;
--fs-6: 2rem;
--fs-7: 2.4rem;
--fs-8: 3rem;
--fs-9: 3.6rem;
--fs-10: 4.4rem;
--fs-11: 5.2rem;
--fs-12: 6.2rem;
--fs-13: 7.4rem;
--fs-14: 8.6rem;
--fs-15: 9.8rem;

Spacing

--spacing-1: 0.125em;
--spacing-2: 0.25em;
--spacing-3: 0.5em;
--spacing-4: 0.75em;
--spacing-5: 1em;
--spacing-6: 1.5em;
--spacing-7: 2em;
--spacing-8: 3em;
--spacing-9: 4em;
--spacing-10: 5em;
--spacing-11: 6em;
--spacing-12: 8em;

Transition

--transition: all 0.4s;

Shadows

--shadow-1: 7px 9px 10px hsla(0, 0%, 0%, 0.18);

ICONS Imports

Ionicons

<script
  type="module"
  src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
></script>
<script
  nomodule
  src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
></script>

Footer Icons

<ion-icon name="logo-facebook"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
<ion-icon name="logo-instagram"></ion-icon>