anatolykopyl/warframe-center
1
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

scss variables

Browse Source
This commit is contained in:
Anatoly Kopyl
2022-03-13 22:49:28 +03:00
parent 773797757c
commit 6ce512cac4
13 changed files with 76 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/styles/_colors.scss Normal file
View File

@@ -0,0 +1 @@
$clr-text: #1f1f1f;

22
app/styles/_fonts.scss Normal file
View File

@@ -0,0 +1,22 @@
$text-font: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
sans-serif;
$font-h0: normal normal bold 56px/64px $text-font;
$font-h1: normal normal bold 48px/56px $text-font;
$font-h2: normal normal bold 40px/48px $text-font;
$font-h3: normal normal bold 36px/44px $text-font;
$font-h4: normal normal bold 32px/40px $text-font;
$font-h5: normal normal bold 28px/36px $text-font;
$font-h6: normal normal bold 24px/32px $text-font;
$font-h7: normal normal bold 20px/26px $text-font;
$font-h8: normal normal bold 18px/24px $text-font;
$font-h9: normal normal bold 16px/20px $text-font;
$font-r8: normal normal normal 24px/30px $text-font;
$font-r7: normal normal normal 22px/28px $text-font;
$font-r6: normal normal normal 20px/26px $text-font;
$font-r5: normal normal normal 18px/24px $text-font;
$font-r4: normal normal normal 16px/22px $text-font;
$font-r3: normal normal normal 14px/18px $text-font;
$font-r2: normal normal normal 12px/16px $text-font;

2
app/styles/_variables.scss Normal file
View File

@@ -0,0 +1,2 @@
@import './fonts';
@import './colors';

26
app/styles/global.scss
View File

@@ -1,12 +1,32 @@
@import './variables';
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
sans-serif;
font: $font-r4;
color: $clr-text;
}
* {
box-sizing: border-box;
}
h1 {
font: $font-h1;
}
h2 {
font: $font-h2;
}
h3 {
font: $font-h3;
}
h4 {
font: $font-h4;
}
h5 {
font: $font-h5;
}
h6 {
font: $font-h6;
}