mirror of
https://github.com/Fluffy-Bean/TastyBites.git
synced 2025-06-03 08:53:14 +00:00
Add Dropdowns
Rename folder from Components to Elements Clean up font sizing and weighting
This commit is contained in:
parent
1d4f6d5b70
commit
03aef063bc
19 changed files with 628 additions and 135 deletions
|
|
@ -2,8 +2,8 @@
|
|||
import Router from 'svelte-spa-router';
|
||||
import { replace } from 'svelte-spa-router';
|
||||
import routes from '%/routes.js';
|
||||
import NavigationBar from "%/pages/components/NavigationBar.svelte";
|
||||
import FooterBar from "%/pages/components/FooterBar.svelte";
|
||||
import NavigationBar from "%/pages/elements/NavigationBar.svelte";
|
||||
import FooterBar from "%/pages/elements/FooterBar.svelte";
|
||||
|
||||
let oldLocation = undefined;
|
||||
let showNavBar = false;
|
||||
|
|
|
|||
84
front/src/components/DropDown.svelte
Normal file
84
front/src/components/DropDown.svelte
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
<script>
|
||||
import { CaretDown } from "phosphor-svelte";
|
||||
|
||||
export let open = false;
|
||||
export let name;
|
||||
</script>
|
||||
|
||||
<div class="dropdown" class:open={open}>
|
||||
<div class="dropdown-header">
|
||||
<p>{name}</p>
|
||||
<button on:click={() => { open = !open }}>
|
||||
<CaretDown />
|
||||
</button>
|
||||
</div>
|
||||
<div class="dropdown-content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@import "%/styles/vars";
|
||||
|
||||
.dropdown {
|
||||
//padding: $spacing-normal;
|
||||
border-bottom: 1px solid transparent;
|
||||
|
||||
//background-color: $color-light;
|
||||
color: $color-on-light;
|
||||
|
||||
.dropdown-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
font-size: $font-size-h5;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
|
||||
button {
|
||||
height: 25px;
|
||||
width: 30px;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
text-decoration: none;
|
||||
font-size: $font-size-p;
|
||||
|
||||
border: 0 solid transparent;
|
||||
background-color: transparent;
|
||||
color: $color-on-light;
|
||||
|
||||
transition: transform 0.1s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
//padding-top: $spacing-small;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.open {
|
||||
.dropdown-header {
|
||||
padding-bottom: $spacing-small;
|
||||
//border-bottom: 1px solid rgba($color-dark, 0.1);
|
||||
|
||||
button {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
}
|
||||
.dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -9,15 +9,19 @@
|
|||
<p>Could not find resource you've searched for. <a href="/" use:link>Go Back</a></p>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
@import "%/styles/vars";
|
||||
|
||||
div {
|
||||
padding: 16px;
|
||||
padding: $spacing-large;
|
||||
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
h1 {
|
||||
font-size: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
p {
|
||||
|
|
@ -25,7 +29,7 @@
|
|||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #6A9343;
|
||||
color: $color-primary;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<script>
|
||||
import { link } from 'svelte-spa-router';
|
||||
import { ArrowUpRight } from "phosphor-svelte";
|
||||
import AnnouncementBanner from "%/pages/components/AnnouncementBanner.svelte";
|
||||
import MenuList from "%/pages/components/MenuList.svelte";
|
||||
import AnnouncementBanner from "%/pages/elements/AnnouncementBanner.svelte";
|
||||
import MenuList from "%/pages/elements/MenuList.svelte";
|
||||
|
||||
const items = [
|
||||
{
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
name: "GwaGwa",
|
||||
price: "Priceless",
|
||||
labels: ["nut"],
|
||||
// image: "/dab.jpg",
|
||||
image: "/dab.jpg",
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import LoadingBar from "%/pages/components/LoadingBar.svelte";
|
||||
import LoadingBar from "%/pages/elements/LoadingBar.svelte";
|
||||
|
||||
const FunnyMessages = [
|
||||
"*patiently waiting*",
|
||||
|
|
|
|||
|
|
@ -1,13 +1,14 @@
|
|||
<script>
|
||||
import { ArrowClockwise } from "phosphor-svelte";
|
||||
import MenuList from "%/pages/components/MenuList.svelte";
|
||||
import LoadingBar from "%/pages/components/LoadingBar.svelte";
|
||||
import MenuList from "%/pages/elements/MenuList.svelte";
|
||||
import LoadingBar from "%/pages/elements/LoadingBar.svelte";
|
||||
import DropDown from "%/components/DropDown.svelte";
|
||||
|
||||
const items = [
|
||||
{
|
||||
name: "Breakfast",
|
||||
price: 69.99,
|
||||
labels: ["vegan", "spicy",],
|
||||
labels: ["vegan", "spicy", "gluten"],
|
||||
},
|
||||
{
|
||||
name: "Dinner",
|
||||
|
|
@ -37,70 +38,148 @@
|
|||
name: "GwaGwa",
|
||||
price: "Priceless",
|
||||
labels: ["nut"],
|
||||
// image: "/dab.jpg",
|
||||
image: "/MenuItemLoading.svg",
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<div class="menu">
|
||||
<div class="menu-filter">
|
||||
<LoadingBar />
|
||||
|
||||
<!-- <LoadingBar />-->
|
||||
<div class="menu-filter-header">
|
||||
<h2>Filter</h2>
|
||||
<h2>Filters</h2>
|
||||
<button><ArrowClockwise /></button>
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
<div class="menu-filter-section">
|
||||
<DropDown name="Meal Prefrences" open={true}>
|
||||
<ul>
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox">
|
||||
Vegan
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox">
|
||||
Vegetarian
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox">
|
||||
Pescatarian
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</DropDown>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3>Meal Preferences</h3>
|
||||
<ul>
|
||||
<li>Vegan</li>
|
||||
<li>Vegetarian</li>
|
||||
<li>Pescatarian</li>
|
||||
</ul>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3>Allergies</h3>
|
||||
<ul>
|
||||
<li>Nut</li>
|
||||
<li>Sea</li>
|
||||
<li>Dairy</li>
|
||||
</ul>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3>Types</h3>
|
||||
<ul>
|
||||
<li>Breakfast</li>
|
||||
<li>Main</li>
|
||||
<li>Dinner</li>
|
||||
<li>
|
||||
Drinks
|
||||
<div class="menu-filter-section">
|
||||
<DropDown name="Allergies" open={true}>
|
||||
<ul>
|
||||
<li>Alcoholic</li>
|
||||
<li>Non-Alcoholic</li>
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox">
|
||||
Deez Nut
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox">
|
||||
Sea
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox">
|
||||
Dairy
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox">
|
||||
Gluten
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Sides</li>
|
||||
<li>Sweet</li>
|
||||
</ul>
|
||||
</DropDown>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<h3>Other</h3>
|
||||
<ul>
|
||||
<li>Hide Seasonal</li>
|
||||
<li>Hide Unavailable</li>
|
||||
</ul>
|
||||
|
||||
<div class="menu-filter-section">
|
||||
<DropDown name="Meal Types" open={true}>
|
||||
<ul>
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox">
|
||||
Breakfast
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox">
|
||||
Main
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox">
|
||||
Dinner
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox">
|
||||
Alcoholic Drinks
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox">
|
||||
Non-Alcoholic Drinks
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox">
|
||||
Sides
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox">
|
||||
Sweet
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</DropDown>
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
<label>
|
||||
Price
|
||||
<input type="range" min="0" max="999">
|
||||
</label>
|
||||
<div class="menu-filter-section">
|
||||
<DropDown name="Other">
|
||||
<ul>
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox">
|
||||
Hide Seasonal
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox">
|
||||
Hide Unavailable
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</DropDown>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="menu-list">
|
||||
|
|
@ -118,11 +197,13 @@
|
|||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
@import "%/styles/vars";
|
||||
|
||||
h2 {
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: $spacing-small;
|
||||
}
|
||||
.spacer {
|
||||
height: 32px;
|
||||
height: $spacing-large;
|
||||
}
|
||||
|
||||
.menu {
|
||||
|
|
@ -133,36 +214,36 @@
|
|||
}
|
||||
|
||||
.menu-list {
|
||||
//padding-left: 300px;
|
||||
padding-left: 16px;
|
||||
padding-left: $spacing-normal;
|
||||
}
|
||||
|
||||
.menu-filter {
|
||||
padding: 16px;
|
||||
padding: $spacing-normal;
|
||||
|
||||
width: 100%;
|
||||
max-width: calc(300px - 16px);
|
||||
max-width: calc(300px - $spacing-normal);
|
||||
|
||||
position: sticky;
|
||||
top: calc(55px + 16px);
|
||||
top: calc($sizing-navigation-height + $spacing-normal);
|
||||
|
||||
//position: absolute;
|
||||
//top: 16px;
|
||||
//left: 16px;
|
||||
|
||||
border-radius: 5px;
|
||||
background-color: #fffbf4;
|
||||
color: #33251a;
|
||||
border-radius: $border-radius-normal;
|
||||
background-image: url('/BackgroundTextureAlt.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: 200px 250px;
|
||||
background-position: 5px -43px;
|
||||
background-color: $color-light;
|
||||
color: $color-on-light;
|
||||
|
||||
h2 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 16px -16px;
|
||||
margin-left: -$spacing-normal;
|
||||
margin-right: -$spacing-normal;
|
||||
height: 1px;
|
||||
border: 0 transparent;
|
||||
background-color: rgba(#443023, 0.1);
|
||||
background-color: rgba($color-dark, 0.1);
|
||||
}
|
||||
|
||||
button {
|
||||
|
|
@ -173,29 +254,51 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
//position: absolute;
|
||||
//top: 12px;
|
||||
//right: 12px;
|
||||
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
font-size: $font-size-p;
|
||||
|
||||
border-radius: 99999px;
|
||||
border-radius: $border-radius-circle;
|
||||
border: 0 solid transparent;
|
||||
background-color: #443023;
|
||||
color: #e1dcd3;
|
||||
background-color: $color-dark;
|
||||
color: $color-on-dark;
|
||||
|
||||
&:hover {
|
||||
background-color: #6A9343;
|
||||
color: #fffbf4;
|
||||
background-color: $color-primary;
|
||||
color: $color-on-primary;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-filter-header {
|
||||
padding-bottom: $spacing-normal;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.menu-filter-section {
|
||||
padding-bottom: $spacing-small;
|
||||
padding-top: $spacing-small;
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: -$spacing-normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-filter-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@media only screen and (max-width: 670px) {
|
||||
.menu {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
padding-left: 0;
|
||||
padding-top: $spacing-normal;
|
||||
}
|
||||
|
||||
.menu-filter {
|
||||
max-width: unset;
|
||||
position: unset;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import LoadingBar from "%/pages/components/LoadingBar.svelte";
|
||||
import LoadingBar from "%/pages/elements/LoadingBar.svelte";
|
||||
import LoadingImage from '/BannerLoading.svg';
|
||||
</script>
|
||||
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<script>
|
||||
import { link } from 'svelte-spa-router';
|
||||
import {Acorn, Fish, Leaf, Flame, ArrowUpRight } from "phosphor-svelte"
|
||||
import { Acorn, Fish, Leaf, Pepper, ArrowUpRight, GrainsSlash } from "phosphor-svelte"
|
||||
import LoadingImage from '/MenuItemLoadingAlt.svg';
|
||||
|
||||
export let id;
|
||||
|
|
@ -29,8 +29,11 @@
|
|||
{#if label === "nut"}
|
||||
<li class="nut"><Acorn weight="fill" /></li>
|
||||
{/if}
|
||||
{#if label === "gluten"}
|
||||
<li class="gluten"><GrainsSlash weight="fill" /></li>
|
||||
{/if}
|
||||
{#if label === "spicy"}
|
||||
<li class="spicy"><Flame weight="fill" /></li>
|
||||
<li class="spicy"><Pepper weight="fill" /></li>
|
||||
{/if}
|
||||
{/each}
|
||||
</ul>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import MenuItem from "%/pages/components/MenuItem.svelte";
|
||||
import MenuItem from "%/pages/elements/MenuItem.svelte";
|
||||
|
||||
export let items = [];
|
||||
</script>
|
||||
|
|
@ -68,6 +68,9 @@
|
|||
&.nut {
|
||||
background-color: $color-nut;
|
||||
}
|
||||
&.gluten {
|
||||
background-color: $color-gluten;
|
||||
}
|
||||
&.spicy {
|
||||
background-color: $color-spicy;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
nav {
|
||||
padding: 1rem;
|
||||
padding: $spacing-normal;
|
||||
|
||||
width: 100%;
|
||||
height: $sizing-navigation-height;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
border-bottom: 2px solid $color-primary;
|
||||
background-color: $color-dark;
|
||||
|
|
@ -20,13 +20,21 @@ nav {
|
|||
z-index: 9999999;
|
||||
|
||||
ul {
|
||||
width: 300px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
width: 300px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
margin: 0 1rem;
|
||||
padding: 0 $spacing-small;
|
||||
|
||||
font-weight: $font-weight-normal;
|
||||
font-size: $font-size-h6;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
|
@ -40,12 +48,12 @@ nav {
|
|||
}
|
||||
|
||||
span {
|
||||
margin: 0 1rem;
|
||||
font-weight: bolder;
|
||||
font-size: 25px;
|
||||
padding: 0 $spacing-normal;
|
||||
font-weight: $font-weight-black;
|
||||
font-size: $font-size-h1;
|
||||
}
|
||||
|
||||
&.scrolled {
|
||||
//box-shadow: 0 0 10px 1px $color-dark;
|
||||
//box-shadow: 0 0 15px 1px $color-background;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,10 +1,14 @@
|
|||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
font-family: 'Erode', serif;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 100%;
|
||||
font-weight: $font-weight-normal;
|
||||
font-family: $font-family;
|
||||
}
|
||||
|
||||
body, #app {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
|
|
@ -16,6 +20,40 @@ body {
|
|||
color: $color-on-background;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: $font-size-h1;
|
||||
font-weight: $font-weight-bolder;
|
||||
}
|
||||
h2 {
|
||||
font-size: $font-size-h2;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
||||
h3 {
|
||||
font-size: $font-size-h3;
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
h4 {
|
||||
font-size: $font-size-h4;
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
h5 {
|
||||
font-size: $font-size-h5;
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
h6 {
|
||||
font-size: $font-size-h6;
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
p {
|
||||
font-size: $font-size-p;
|
||||
font-weight: $font-weight-normal;
|
||||
}
|
||||
small {
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-thin;
|
||||
}
|
||||
|
||||
|
||||
main {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
|
|
|||
|
|
@ -1,33 +1,4 @@
|
|||
// COLORS
|
||||
$color-background: #e8e1ce; // #ccc2ae;
|
||||
$color-on-background: #33251a;
|
||||
$color-dark: #443023;
|
||||
$color-on-dark: #e1dcd3;
|
||||
$color-light: #fffbf4;
|
||||
$color-on-light: #33251a;
|
||||
$color-primary: #6A9343;
|
||||
$color-on-primary: #fffbf4;
|
||||
|
||||
$color-vegan: #75a446;
|
||||
$color-fish: #487fa6;
|
||||
$color-nut: #5c4130;
|
||||
$color-spicy: #c75e32;
|
||||
|
||||
// BORDERS
|
||||
$border-radius-normal: 5px;
|
||||
$border-radius-large: 10px;
|
||||
$border-radius-circle: 99999px;
|
||||
|
||||
// SIZING
|
||||
$sizing-default-width: 1000px;
|
||||
$sizing-full-width: 1200px;
|
||||
$sizing-navigation-height: 55px;
|
||||
|
||||
// PADDING/MARGIN
|
||||
$spacing-small: 14px;
|
||||
$spacing-normal: 16px;
|
||||
$spacing-large: 24px;
|
||||
|
||||
@import "vars";
|
||||
|
||||
@import "reset";
|
||||
@import "loading_bar";
|
||||
|
|
|
|||
49
front/src/styles/vars.scss
Normal file
49
front/src/styles/vars.scss
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
// COLORS
|
||||
$color-background: #e8e1ce; // #ccc2ae;
|
||||
$color-on-background: #33251a;
|
||||
$color-dark: #443023;
|
||||
$color-on-dark: #e1dcd3;
|
||||
$color-light: #fffbf4;
|
||||
$color-on-light: #33251a;
|
||||
$color-primary: #6A9343;
|
||||
$color-on-primary: #fffbf4;
|
||||
|
||||
$color-vegan: #75a446;
|
||||
$color-fish: #487fa6;
|
||||
$color-nut: #5c4130;
|
||||
$color-spicy: #c75e32;
|
||||
$color-gluten: #8c6b49;
|
||||
|
||||
// BORDERS
|
||||
$border-radius-normal: 5px;
|
||||
$border-radius-large: 10px;
|
||||
$border-radius-circle: 99999px;
|
||||
|
||||
// GAP SIZING
|
||||
$sizing-default-width: 1000px;
|
||||
$sizing-full-width: 1200px;
|
||||
$sizing-navigation-height: 55px;
|
||||
|
||||
// PADDING/MARGIN
|
||||
$spacing-small: 14px;
|
||||
$spacing-normal: 16px;
|
||||
$spacing-large: 24px;
|
||||
|
||||
// FONT
|
||||
$font-family: 'Erode', serif;
|
||||
|
||||
$font-size-h1: 32.44px;
|
||||
$font-size-h2: 28.83px;
|
||||
$font-size-h3: 25.63px;
|
||||
$font-size-h4: 22.78px;
|
||||
$font-size-h5: 20.25px;
|
||||
$font-size-h6: 18px;
|
||||
$font-size-p: 16px;
|
||||
$font-size-small: 14.22px;
|
||||
$font-size-xsmall: 12.64px;
|
||||
|
||||
$font-weight-thin: 400;
|
||||
$font-weight-normal: 500;
|
||||
$font-weight-bold: 600;
|
||||
$font-weight-bolder: 700;
|
||||
$font-weight-black: 800;
|
||||
Loading…
Add table
Add a link
Reference in a new issue