Skip to content

style-guide.md

Latest commit

 

History

History
91 lines (71 loc) · 1.75 KB

style-guide.md

File metadata and controls

91 lines (71 loc) · 1.75 KB

Essential Stuff

Html import links

Google font

<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=Bangers&family=Carter+One&family=Nunito+Sans:wght@400;700&display=swap"
  rel="stylesheet">

Ionicon

<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>

Colors

--bright-yellow-crayola: hsl(36, 94%, 57%);
--portland-orange: hsl(15, 84%, 57%);
--battleship-gray: hsl(0, 0%, 53%);
--silver-chalice: hsl(0, 0%, 70%);
--spanish-gray: hsl(0, 0%, 60%);
--sonic-silver: hsl(208, 7%, 46%);
--raisin-black: hsl(228, 6%, 17%);
--eerie-black: hsl(210, 3%, 13%);
--bittersweet: hsl(9, 96%, 69%);
--light-gray: hsl(0, 0%, 80%);
--platinum: hsl(0, 0%, 91%);
--amber: hsl(45, 100%, 51%);
--white: hsl(0, 0%, 100%);
--black: hsl(0, 0%, 0%);
--onyx: hsl(220, 2%, 24%);

Typography

--ff-bangers: 'Bangers', cursive;
--ff-carter_one: 'Carter One', cursive;
--ff-nunito_sans: 'Nunito Sans', sans-serif;

--fs-1: 6.5rem;
--fs-2: 3.2rem;
--fs-3: 2.4rem;
--fs-4: 2rem;
--fs-5: 1.8rem;
--fs-6: 1.5rem;
--fs-7: 1.4rem;
--fs-8: 1rem;

--fw-400: 400;
--fw-700: 700;

Spacing

--section-padding: 40px;

Shadow

--shadow-1: 0 8px 16px hsla(0, 0%, 0%, 0.15);
--shadow-2: 0 8px 8px hsla(0, 0%, 0%, 0.2);

Border Radius

--radius-4: 4px;
--radius-10: 10px;

Transition

--transition-1: 0.25s ease;
--transition-2: 0.5s ease;
--cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
--cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);