1
0
mirror of https://github.com/Mayccoll/Gogh.git synced 2023-08-10 21:12:46 +03:00
Gogh/sass/_base.scss
2020-12-19 00:07:07 -05:00

251 lines
8.0 KiB
SCSS

/**
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
* ······· Colors
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
*/
:root {
--color-blue : #65d8ee;
--color-green : #A6E22E;
--color-yellow : #E6DB74;
--color-orange : #FD971F;
--color-red : #F92672;
--color-purple : #AE81FF;
--color-cyan : #0F94CF;
/* */
--color-grey-light : #E9E9E9;
--color-grey-medium: #7E868C;
--color-grey-dark : #333E47;
/* */
--color-black : #000000;
--color-white : #FFFFFF;
/* */
--color-primary : var(--color-blue);
--color-success : var(--color-green);
--color-info : var(--color-yellow);
--color-warning : var(--color-orange);
--color-danger : var(--color-red);
}
$color_blue : var(--color-blue);
$color_green : var(--color-green);
$color_yellow : var(--color-yellow);
$color_orange : var(--color-orange);
$color_red : var(--color-red);
$color_purple : var(--color-purple);
$color_cyan : var(--color-cyan);
/* */
$color_grey_light : var(--color-grey-light);
$color_grey_medium: var(--color-grey-medium);
$color_grey_dark : var(--color-grey-dark);
/* */
$color_black : var(--color-black);
$color_white : var(--color-white);
/* */
$color_primary : $color_blue;
$color_success : $color_green;
$color_info : $color_yellow;
$color_warning : $color_orange;
$color_danger : $color_red;
/**
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
* ······· Fonts
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
*/
$font_roboto_default: 'Roboto', sans-serif;
/* */
$font_default : $font_roboto_default;
$font_normal : $font_default;
/* */
$font_size_base: 1.6rem;
/**
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
* ······· General
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
*/
body,
html {
height : 100%;
font-size: 10px;
}
body {
color : $color_black;
font-size : $font_size_base;
font-family : $font_default;
-webkit-font-smoothing : antialiased;
-moz-osx-font-smoothing : grayscale;
-webkit-font-smoothing : antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust : 100%;
}
/**
* ::::::: Typography
*/
p {
color : $color_black;
font-weight : 400;
font-style : normal;
font-variant: normal;
font-size : $font_size_base;
line-height : 1.4;
}
h1 {
margin : 0;
color : $color_primary;
font-size : $font_size_base + 2.4;
line-height : 1;
}
h2 {
margin : 0;
font-size : $font_size_base + 1.5;
line-height : 1;
}
h3 {
margin : 0;
font-size : $font_size_base + .9;
line-height : 1;
}
h4 {
margin : 0;
font-size : $font_size_base + .6;
line-height : 1;
}
h5 {
margin : 0;
font-size : $font_size_base + .3;
line-height : 1;
}
h6 {
margin : 0;
font-size : $font_size_base;
line-height : 1;
}
strong {
font-weight: 900;
}
small {
font-size: $font_size_base - 3;
}
em {
font-style: italic;
}
blockquote > p {
margin : $font_size_base;
padding : 0;
border-color : #ccc;
border-color : rgba(0,0,0,0.2);
border-top : 2px solid;
border-bottom : 2px solid;
border-radius : 0.25em;
color : #888;
letter-spacing: 0.05em;
font-style : italic;
font-size : $font_size_base + 3;
}
ol {
padding: 0;
li {
margin-left: $font_size_base;
padding : 0;
}
}
ul {
padding: 0;
li {
margin-left: $font_size_base;
padding : 0;
}
}
/**
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
* ······· Media
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
*/
/**
* ::::::: Media Width
*/
@mixin m360 { @media (min-width: 360px) { @content; } }
@mixin m450 { @media (min-width: 450px) { @content; } }
@mixin m576 { @media (min-width: 576px) { @content; } }
@mixin m600 { @media (min-width: 600px) { @content; } }
@mixin m650 { @media (min-width: 650px) { @content; } }
@mixin m768 { @media (min-width: 768px) { @content; } }
@mixin m800 { @media (min-width: 800px) { @content; } }
@mixin m900 { @media (min-width: 900px) { @content; } }
@mixin m992 { @media (min-width: 992px) { @content; } }
@mixin m1200 { @media (min-width: 1200px) { @content; } }
@mixin m1400 { @media (min-width: 1400px) { @content; } }
@mixin m1800 { @media (min-width: 1800px) { @content; } }
@mixin m2200 { @media (min-width: 2200px) { @content; } }
/**
* ::::::: Media Height
*/
@mixin h360 { @media (min-height: 360px) { @content; } }
@mixin h450 { @media (min-height: 450px) { @content; } }
@mixin h576 { @media (min-height: 576px) { @content; } }
@mixin h600 { @media (min-height: 600px) { @content; } }
@mixin h650 { @media (min-height: 650px) { @content; } }
@mixin h768 { @media (min-height: 768px) { @content; } }
@mixin h800 { @media (min-height: 800px) { @content; } }
@mixin h900 { @media (min-height: 900px) { @content; } }
@mixin h992 { @media (min-height: 992px) { @content; } }
@mixin h1200 { @media (min-height: 1200px) { @content; } }
@mixin h1400 { @media (min-height: 1400px) { @content; } }
@mixin h1800 { @media (min-height: 1800px) { @content; } }
@mixin h2200 { @media (min-height: 2200px) { @content; } }
/**
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
* ······· Helpers
* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
*/
.center {text-align: center}
.black {color: $color_black}
.white {color: $color_white}
.red {color: $color_red}
.yellow {color: $color_yellow}
.green {color: $color_green}
.blue {color: $color_blue}
.purple {color: $color_purple}
.orange {color: $color_orange}
.cyan {color: $color_cyan}
.grey-light {color: $color_grey_light}
.grey-medium {color: $color_grey_medium}
.grey-dark {color: $color_grey_dark}
.bg-black {background-color: $color_black}
.bg-white {background-color: $color_white}
.bg-red {background-color: $color_red}
.bg-yellow {background-color: $color_yellow}
.bg-green {background-color: $color_green}
.bg-blue {background-color: $color_blue}
.bg-purple {background-color: $color_purple}
.bg-orange {background-color: $color_orange}
.bg-cyan {background-color: $color_cyan}
.bg-grey-light {background-color: $color_grey_light}
.bg-grey-medium {background-color: $color_grey_medium}
.bg-grey-dark {background-color: $color_grey_dark}