From 2ef7c0ec1ff976b807691fea23eaaf5ea1e93bc9 Mon Sep 17 00:00:00 2001 From: Jieiku Date: Sun, 27 Mar 2022 19:19:28 -0700 Subject: init --- sass/themes/_light.scss | 89 +++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 89 insertions(+) create mode 100644 sass/themes/_light.scss (limited to 'sass/themes/_light.scss') diff --git a/sass/themes/_light.scss b/sass/themes/_light.scss new file mode 100644 index 0000000..2538391 --- /dev/null +++ b/sass/themes/_light.scss @@ -0,0 +1,89 @@ +:root { + // Typography + --ff: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif; + --fm: Menlo, Consolas, "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace; + --lh: 1.5; //line-height + --fs: 1rem; //font-size + --fw: 400; //font-weight + --fh: 700; //font-weight h1-h6 + + // Colors + --f1: #555; //font color 1 bbb ccc + --f2: #333; //font color 2 fff eee + + --c1: #fff; //color 1 111 + --c2: #eee; //color 2 222 + --c3: #ddd; //color 3 333 + --c4: #777; //color 4 888 + + --a1: #f90; //accent color 1 link + --a2: #fb0; //accent color 2 hover,focus + --a3: #fb0; //accent color 3 h1-h2 hover,focus + + --cg: #483; //ins green + --cr: #d33; //del red + + // Spacings + --s1: .5rem; + --s2: 1rem; + --rc: .5rem; //radius corners + + // Borders + --br: 0.25rem; //border radius + --bw: 0.0625rem; //border width + --ow: 0.1875rem; //outline width + + // Responsive typography + @if $enable-responsive-typography { + @if map-get($breakpoints, "sm") { + @media (min-width: map-get($breakpoints, "sm")) { + --fs: 1rem; + } + } + @if map-get($breakpoints, "md") { + @media (min-width: map-get($breakpoints, "md")) { + --fs: 1.04rem; + } + } + @if map-get($breakpoints, "lg") { + @media (min-width: map-get($breakpoints, "lg")) { + --fs: 1.08rem; + } + } + @if map-get($breakpoints, "xl") { + @media (min-width: map-get($breakpoints, "xl")) { + --fs: 1.12rem; + } + } + } +} + +// Responsives spacings +@if $enable-responsive-spacings { + // Sectionning + body > header, + body > main, + body > footer, + section { + @if map-get($breakpoints, "sm") { + @media (min-width: map-get($breakpoints, "sm")) { + --s1: .5rem; + } + } + @if map-get($breakpoints, "md") { + @media (min-width: map-get($breakpoints, "md")) { + --s1: .6rem; + } + } + @if map-get($breakpoints, "lg") { + @media (min-width: map-get($breakpoints, "lg")) { + --s1: .7rem; + } + } + @if map-get($breakpoints, "xl") { + @media (min-width: map-get($breakpoints, "xl")) { + --s1: .8rem; + } + } + } +} -- cgit v1.3.1