This commit is contained in:
Veselov
30
assets/scss/main.scss
Normal file
30
assets/scss/main.scss
Normal file
@@ -0,0 +1,30 @@
|
||||
@use 'typography' as *;
|
||||
@use 'utils' as *;
|
||||
|
||||
// Typography
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
line-height: 100%;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@include h1('h1');
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include h2('h2');
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include h3('h3');
|
||||
}
|
||||
|
||||
// Buttons
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
121
assets/scss/typography.scss
Normal file
121
assets/scss/typography.scss
Normal file
@@ -0,0 +1,121 @@
|
||||
@use 'utils' as *;
|
||||
|
||||
// Font Face Declarations
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src:
|
||||
url('/fonts/Inter-Regular.woff2') format('woff2'),
|
||||
url('/fonts/Inter-Regular.woff') format('woff');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src:
|
||||
url('/fonts/Inter-Medium.woff2') format('woff2'),
|
||||
url('/fonts/Inter-Medium.woff') format('woff');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src:
|
||||
url('/fonts/Inter-SemiBold.woff2') format('woff2'),
|
||||
url('/fonts/Inter-SemiBold.woff') format('woff');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
// Font Variables
|
||||
$font-family-base:
|
||||
'Inter',
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
Roboto,
|
||||
sans-serif;
|
||||
|
||||
// Font Weights
|
||||
$font-weight-regular: 400;
|
||||
$font-weight-medium: 500;
|
||||
$font-weight-semibold: 600;
|
||||
|
||||
// Custom type
|
||||
@mixin font($size, $weight, $lineHeight, $namespace: null, $onlyVars: false) {
|
||||
@if ($namespace) {
|
||||
@if ($onlyVars) {
|
||||
--#{$namespace}-font-size: #{$size};
|
||||
--#{$namespace}-font-weight: #{$weight};
|
||||
--#{$namespace}-line-height: #{$lineHeight};
|
||||
} @else {
|
||||
font-size: var(--#{$namespace}-font-size, $size);
|
||||
font-weight: var(--#{$namespace}-font-weight, $weight);
|
||||
line-height: var(--#{$namespace}-line-height, $lineHeight);
|
||||
}
|
||||
} @else {
|
||||
font-size: $size;
|
||||
font-weight: $weight;
|
||||
line-height: $lineHeight;
|
||||
}
|
||||
}
|
||||
|
||||
/* Headline */
|
||||
@mixin h1($namespace: null, $onlyVars: false) {
|
||||
@include font(32px, $font-weight-semibold, 100%, $namespace, $onlyVars);
|
||||
@include mobile {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
@mixin h2($namespace: null, $onlyVars: false) {
|
||||
@include font(24px, $font-weight-semibold, 100%, $namespace, $onlyVars);
|
||||
@include mobile {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
@mixin h3($namespace: null, $onlyVars: false) {
|
||||
@include font(16px, $font-weight-semibold, 140%, $namespace, $onlyVars);
|
||||
}
|
||||
|
||||
/* Text */
|
||||
// 16 medium-(medium/bold)
|
||||
@mixin txt-m($namespace: null, $onlyVars: false) {
|
||||
@include font(16px, $font-weight-regular, 100%, $namespace, $onlyVars);
|
||||
}
|
||||
@mixin txt-m-m($namespace: null, $onlyVars: false) {
|
||||
@include font(16px, $font-weight-medium, 100%, $namespace, $onlyVars);
|
||||
}
|
||||
@mixin txt-m-b($namespace: null, $onlyVars: false) {
|
||||
@include font(16px, $font-weight-semibold, 100%, $namespace, $onlyVars);
|
||||
}
|
||||
|
||||
// 14 regular-(medium/bold)
|
||||
@mixin txt-r($namespace: null, $onlyVars: false) {
|
||||
@include font(14px, $font-weight-regular, 20px, $namespace, $onlyVars);
|
||||
}
|
||||
@mixin txt-r-m($namespace: null, $onlyVars: false) {
|
||||
@include font(14px, $font-weight-medium, 20px, $namespace, $onlyVars);
|
||||
}
|
||||
@mixin txt-r-b($namespace: null, $onlyVars: false) {
|
||||
@include font(14px, $font-weight-semibold, 20px, $namespace, $onlyVars);
|
||||
}
|
||||
|
||||
// 12 text small-(medium/bold)
|
||||
@mixin txt-s($namespace: null, $onlyVars: false) {
|
||||
@include font(12px, $font-weight-regular, 18px, $namespace, $onlyVars);
|
||||
}
|
||||
@mixin txt-s-m($namespace: null, $onlyVars: false) {
|
||||
@include font(12px, $font-weight-medium, 18px, $namespace, $onlyVars);
|
||||
}
|
||||
@mixin txt-s-b($namespace: null, $onlyVars: false) {
|
||||
@include font(12px, $font-weight-semibold, 18px, $namespace, $onlyVars);
|
||||
}
|
||||
|
||||
// 10 text-tiny
|
||||
@mixin txt-t($namespace: null, $onlyVars: false) {
|
||||
@include font(10px, $font-weight-medium, 15px, $namespace, $onlyVars);
|
||||
}
|
||||
144
assets/scss/utils.scss
Normal file
144
assets/scss/utils.scss
Normal file
@@ -0,0 +1,144 @@
|
||||
@use 'sass:color';
|
||||
|
||||
@mixin mobile {
|
||||
@media (max-width: 768px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
$indents: 0 2 4 5 6 8 10 12 15 16 18 20 24 25 28 30 32 36 40 48 50 52 60 64;
|
||||
|
||||
@each $i in $indents {
|
||||
.m#{$i} {
|
||||
margin: #{$i}px;
|
||||
}
|
||||
|
||||
.mx#{$i} {
|
||||
margin-left: #{$i}px;
|
||||
margin-right: #{$i}px;
|
||||
}
|
||||
|
||||
.my#{$i} {
|
||||
margin-top: #{$i}px;
|
||||
margin-bottom: #{$i}px;
|
||||
}
|
||||
|
||||
.mt#{$i} {
|
||||
margin-top: #{$i}px;
|
||||
}
|
||||
|
||||
.mb#{$i} {
|
||||
margin-bottom: #{$i}px;
|
||||
}
|
||||
|
||||
.ml#{$i} {
|
||||
margin-left: #{$i}px;
|
||||
}
|
||||
|
||||
.mr#{$i} {
|
||||
margin-right: #{$i}px;
|
||||
}
|
||||
|
||||
.p#{$i} {
|
||||
padding: #{$i}px;
|
||||
}
|
||||
|
||||
.px#{$i} {
|
||||
padding-left: #{$i}px;
|
||||
padding-right: #{$i}px;
|
||||
}
|
||||
|
||||
.py#{$i} {
|
||||
padding-top: #{$i}px;
|
||||
padding-bottom: #{$i}px;
|
||||
}
|
||||
|
||||
.pt#{$i} {
|
||||
padding-top: #{$i}px;
|
||||
}
|
||||
|
||||
.pb#{$i} {
|
||||
padding-bottom: #{$i}px;
|
||||
}
|
||||
|
||||
.pl#{$i} {
|
||||
padding-left: #{$i}px;
|
||||
}
|
||||
|
||||
.pr#{$i} {
|
||||
padding-right: #{$i}px;
|
||||
}
|
||||
}
|
||||
|
||||
.mla {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.mra {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
@each $align in ('left', 'right', 'center') {
|
||||
.text-align-#{$align} {
|
||||
text-align: #{$align};
|
||||
}
|
||||
}
|
||||
|
||||
.w-25 { width: 25% !important; }
|
||||
.w-50 { width: 50% !important; }
|
||||
.w-75 { width: 75% !important; }
|
||||
.w-100 { width: 100% !important; }
|
||||
|
||||
.d-none { display: none !important; }
|
||||
.d-inline { display: inline !important; }
|
||||
.d-inline-block { display: inline-block !important; }
|
||||
.d-block { display: block !important; }
|
||||
.d-table { display: table !important; }
|
||||
.d-table-row { display: table-row !important; }
|
||||
.d-table-cell { display: table-cell !important; }
|
||||
.d-flex { display: flex !important; }
|
||||
.d-inline-flex { display: inline-flex !important; }
|
||||
|
||||
.flex-row { flex-direction: row !important; }
|
||||
.flex-column { flex-direction: column !important; }
|
||||
.flex-row-reverse { flex-direction: row-reverse !important; }
|
||||
.flex-column-reverse { flex-direction: column-reverse !important; }
|
||||
|
||||
.flex-wrap { flex-wrap: wrap !important; }
|
||||
.flex-nowrap { flex-wrap: nowrap !important; }
|
||||
.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }
|
||||
|
||||
.justify-content-start { justify-content: flex-start !important; }
|
||||
.justify-content-end { justify-content: flex-end !important; }
|
||||
.justify-content-center { justify-content: center !important; }
|
||||
.justify-content-between { justify-content: space-between !important; }
|
||||
.justify-content-around { justify-content: space-around !important; }
|
||||
|
||||
.align-items-start { align-items: flex-start !important; }
|
||||
.align-items-end { align-items: flex-end !important; }
|
||||
.align-items-center { align-items: center !important; }
|
||||
.align-items-baseline { align-items: baseline !important; }
|
||||
.align-items-stretch { align-items: stretch !important; }
|
||||
|
||||
.align-content-start { align-content: flex-start !important; }
|
||||
.align-content-end { align-content: flex-end !important; }
|
||||
.align-content-center { align-content: center !important; }
|
||||
.align-content-between { align-content: space-between !important; }
|
||||
.align-content-around { align-content: space-around !important; }
|
||||
.align-content-stretch { align-content: stretch !important; }
|
||||
|
||||
.align-self-auto { align-self: auto !important; }
|
||||
.align-self-start { align-self: flex-start !important; }
|
||||
.align-self-end { align-self: flex-end !important; }
|
||||
.align-self-center { align-self: center !important; }
|
||||
.align-self-baseline { align-self: baseline !important; }
|
||||
.align-self-stretch { align-self: stretch !important; }
|
||||
|
||||
.text-align-center { text-align: center !important; }
|
||||
.text-align-left { text-align: left !important; }
|
||||
.text-align-right { text-align: right !important; }
|
||||
Reference in New Issue
Block a user