diff options
Diffstat (limited to 'examples/portfolio-svelte/src/styles')
-rw-r--r-- | examples/portfolio-svelte/src/styles/global.scss | 163 |
1 files changed, 0 insertions, 163 deletions
diff --git a/examples/portfolio-svelte/src/styles/global.scss b/examples/portfolio-svelte/src/styles/global.scss deleted file mode 100644 index 453adadbe..000000000 --- a/examples/portfolio-svelte/src/styles/global.scss +++ /dev/null @@ -1,163 +0,0 @@ -// Tokens -:root { - // (c)olor - --c-black: #05091e; - --c-blue: #46b4ff; - --c-gray: #90aab7; - --c-green: #9ef2cb; - --c-pink: #ffb8d9; - --c-orange: #ffb7a3; - --c-yellow: #ffdace; - --c-white: #fff; - - // (f)ont - --f-u18: 11.390625em; - --f-u17: 9.950627481136905em; - --f-u16: 8.692673779389363em; - --f-u15: 7.59375em; - --f-u14: 6.63375165409127em; - --f-u13: 5.795115852926242em; - --f-u12: 5.0625em; - --f-u11: 4.422501102727513em; - --f-u10: 3.8634105686174953em; - --f-u9: 3.375em; - --f-u8: 2.9483340684850083em; - --f-u7: 2.575607045744997em; - --f-u6: 2.25em; - --f-u5: 1.9655560456566725em; - --f-u4: 1.7170713638299977em; - --f-u3: 1.5em; - --f-u2: 1.3103706971044482em; - --f-u1: 1.1447142425533319em; - --f-d1: 0.8735804647362989em; - --f-d2: 0.7631428283688879em; - --f-d3: 0.6666666666666666em; - --f-d4: 0.5823869764908659em; - --f-d5: 0.5087618855792586em; - --f-d6: 0.4444444444444444em; - --f-d7: 0.3882579843272439em; - --f-d8: 0.3391745903861724em; - --f-d9: 0.2962962962962963em; - --f-d10: 0.2588386562181626em; - --f-d11: 0.22611639359078162em; - --f-d12: 0.19753086419753085em; - --f-d13: 0.17255910414544176em; - --f-d14: 0.15074426239385438em; - --f-d15: 0.13168724279835392em; - --f-d16: 0.11503940276362785em; - --f-d17: 0.10049617492923625em; - --f-d18: 0.0877914951989026em; - - // (t)heme - --t-fg: var(--c-black); - --t-bg: var(--c-white); - --t-subdue: var(--c-gray); - --t-active: var(--c-blue); -} - -// Base - -body { - margin: 0; - color: var(--t-fg); - font-family: 'Inter', 'system-ui', sans-serif; -} - -* { - box-sizing: content-box; -} - -img { - max-width: 100%; - height: auto; -} - -a { - color: var(--t-active); -} - -h1 { - font-size: var(--f-u8); -} - -// Utils - -// color -$colors: 'black', 'blue', 'white'; -@each $color in $colors { - // text color - .tc-#{$color} { - color: var(--c-#{color}); - } - // background color - .bg-#{$color} { - background-color: var(--c-#{color}); - } -} - -// font size -@for $i from 0 through 18 { - .f-u#{$i} { - font-size: var(--f-u#{$i}); - } - .f-d#{$i} { - font-size: var(--f-d#{$i}); - } -} - -// margin & padding -@for $i from 0 through 36 { - .ma#{$i} { - margin: #{0.5 * $i}rem; - } - .mt#{$i} { - margin-top: #{0.5 * $i}rem; - } - .mr#{$i} { - margin-right: #{0.5 * $i}rem; - } - .mb#{$i} { - margin-bottom: #{0.5 * $i}rem; - } - .ml#{$i} { - margin-left: #{0.5 * $i}rem; - } - .pa#{$i} { - padding: #{0.5 * $i}rem; - } - .pt#{$i} { - padding-top: #{0.5 * $i}rem; - } - .pr#{$i} { - padding-right: #{0.5 * $i}rem; - } - .pb#{$i} { - padding-bottom: #{0.5 * $i}rem; - } - .pl#{$i} { - padding-left: #{0.5 * $i}rem; - } -} - -// text align -.tac { - text-align: center; -} -.tal { - text-align: left; -} -.tar { - text-align: right; -} - -// wrapper -.wrapper { - max-width: 80em; - margin-left: auto; - margin-right: auto; - padding-left: 2rem; - padding-right: 2rem; -} -.wrapper__readable { - max-width: 50em; -} |