granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update variables

Browse source
This commit is contained in:
Justin Edmund 2022-02-02 23:34:38 -08:00
parent f9eba3d857
commit 061e510b44
2 changed files with 30 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
styles/globals.scss
View file

@ -1,42 +1,43 @@
@import '~meyer-reset-scss'; @import '~meyer-reset-scss';
html { html {
background: $grey-90; background: $background-color;
font-size: 62.5%; font-size: 62.5%;
padding: $unit * 2; padding: $unit * 2;
} }
body { body {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
font-family: system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif; font-family: system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 1.4rem; font-size: 1.4rem;
&.no-scroll { &.no-scroll {
overflow: hidden; overflow: hidden;
} }
} }
a { a {
text-decoration: none; text-decoration: none;
} }
button, input { button, input {
font-family: system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif; font-family: system-ui, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif;
} }
h1, h2, h3, p { h1, h2, h3, p {
color: $grey-00; color: $grey-00;
} }
h1 { h1 {
font-size: 2.1rem; font-size: 2.1rem;
font-weight: $medium; font-weight: $medium;
text-align: center; text-align: center;
} }
#Content { #Content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $unit * 3; gap: $unit * 3;
margin-top: $unit * 3; margin-top: $unit * 3;
} min-width: 752px;

13
styles/variables.scss
View file

@ -1,7 +1,8 @@
// @import 'include-media/dist/_include-media'; // @import 'include-media/dist/_include-media';
// Breakpoints // Breakpoints
$breakpoints: (small: 320px, medium: 768px, large: 1024px); $breakpoints: (small: 320px, medium: 800px, large: 1024px);
$medium-screen: 800px;
// Sizing // Sizing
$unit: 8px; $unit: 8px;
@ -12,6 +13,7 @@ $grey-10: #777;
$grey-50: #888; $grey-50: #888;
$grey-80: #E9E9E9; $grey-80: #E9E9E9;
$grey-90: #F5F5F5; $grey-90: #F5F5F5;
$background-color: $grey-90;
$blue: #61B3FF; $blue: #61B3FF;
$red: #FF6161; $red: #FF6161;
@ -23,10 +25,11 @@ $medium: 500;
$bold: 600; $bold: 600;
// Font size // Font size
$font-small: 12px; $font-small: 11px;
$font-regular: 14px; $font-button: 15px;
$font-large: 18px; $font-regular: 16px;
$font-xlarge: 21px; $font-large: 21px;
$font-xlarge: 24px;
// Scale factors // Scale factors
$scale-wide: scale(1.05, 1.05); $scale-wide: scale(1.05, 1.05);