diff options
Diffstat (limited to 'sass')
| -rw-r--r-- | sass/_header.scss | 30 | ||||
| -rw-r--r-- | sass/_main.scss | 24 | ||||
| -rw-r--r-- | sass/_mixins.scss | 22 | ||||
| -rw-r--r-- | sass/_typography.scss | 51 | ||||
| -rw-r--r-- | sass/_variables.scss | 27 | ||||
| -rw-r--r-- | sass/style.scss | 32 |
6 files changed, 186 insertions, 0 deletions
diff --git a/sass/_header.scss b/sass/_header.scss new file mode 100644 index 0000000..6db9ffd --- /dev/null +++ b/sass/_header.scss @@ -0,0 +1,30 @@ +.header { + height: 60*$px; + max-width: 1200*$px; + padding: 0 20*$px; + margin: 0 auto; + display: flex; + justify-content: space-between; + border-bottom: 1*$px solid var(--color-secondary); +} +.home-link { + display: flex; + align-items: center; + justify-content: left; + height: 100%; + &:link, &:visited { + text-decoration: none; + font-size: 28*$px; + color: var(--color-text); + transition: transform .2s; + } + &:hover, &:active { + color: var(--color-primary); + transform: scale(1.05); + } +} +.main_icon { + height: 100%; + width: 40*$px; + fill: currentColor; +} diff --git a/sass/_main.scss b/sass/_main.scss new file mode 100644 index 0000000..518e28d --- /dev/null +++ b/sass/_main.scss @@ -0,0 +1,24 @@ +.main { + max-width: 1200*$px; + margin: 0 auto; + &__container { + padding: 20*$px; + } +} +.hero { + display: flex; + flex-wrap: wrap-reverse; + gap: 40*$px; + &__img { + flex: 1; + min-width: 320*$px; + max-height: 50vmax; + } +} +.profile-pic { + max-width: 100%; + max-height: 100%; + display: block; + margin: auto; + border-radius: 5*$px; +} diff --git a/sass/_mixins.scss b/sass/_mixins.scss new file mode 100644 index 0000000..62c52e3 --- /dev/null +++ b/sass/_mixins.scss @@ -0,0 +1,22 @@ +@use "sass:map"; +@mixin color-theme2($theme) { + @if $theme == dark { + --color-primary: #{$color-primary-dark}; + --color-secondary: #{$color-secondary-dark}; + --color-tertiary: #{$color-tertiary-dark}; + --color-accent: #{$color-accent-dark}; + } + @if $theme == light { + --color-primary: #{$color-primary-light}; + --color-secondary: #{$color-secondary-light}; + --color-tertiary: #{$color-tertiary-light}; + --color-accent: #{$color-accent-light}; + } +} +@mixin color-theme($theme) { + --color-text: #{map.get($themes, $theme, "text")}; + --color-background: #{map.get($themes, $theme, "background")}; + --color-primary: #{map.get($themes, $theme, "primary")}; + --color-secondary: #{map.get($themes, $theme, "secondary")}; + --color-accent: #{map.get($themes, $theme, "accent")}; +} diff --git a/sass/_typography.scss b/sass/_typography.scss new file mode 100644 index 0000000..244d2b5 --- /dev/null +++ b/sass/_typography.scss @@ -0,0 +1,51 @@ +h1, h2, h3, h4, h5 { + font-weight: bold; +} +h1 { + font-size: 4.210rem; /* 67.36px */ + margin: 0; + & > .--main { + display: block; + } + & > .--sub { + font-size: .75em; + display: block; + font-style: italic; + } + & > .--sub-sub { + display: block; + font-size: .6em; + } +} +h2 { + font-size: 3.158rem; /* 50.56px */ +} +h3 { + font-size: 2.369rem; /* 37.92px */ + margin: 0; +} +h4 { + font-size: 1.777rem; /* 28.48px */ +} +h5 { + font-size: 1.333rem; /* 21.28px */ +} +small { + font-size: 0.750rem; /* 12px */ +} +.color-primary { + color: var(--color-primary); +} +.color-accent { + color: var(--color-accent); +} +.color-gradient { + color: transparent; + background-image: linear-gradient(60deg, var(--color-primary), var(--color-accent)); + background-clip: text; +} +.text-stroke { + -webkit-text-stroke-width: 2*$px; + -webkit-text-stroke-color: currentColor; + -webkit-text-fill-color: transparent; +} diff --git a/sass/_variables.scss b/sass/_variables.scss new file mode 100644 index 0000000..7812349 --- /dev/null +++ b/sass/_variables.scss @@ -0,0 +1,27 @@ +@use "sass:math"; +$px: math.div(1rem, 16); +// Colours +$color-primary-light: hsl(120 50% 90%); +$color-secondary-light: darken($color-primary-light, 80%); +$color-tertiary-light: hsl(hue($color-primary-light)+60 80% 20%); +$color-accent-light: hsl(hue($color-primary-light)-60 80% 20%); +$color-primary-dark: darken($color-primary-light, 80%); +$color-secondary-dark: lighten($color-secondary-light, 80%); +$color-tertiary-dark: lighten($color-tertiary-light, 60%); +$color-accent-dark: lighten($color-accent-light, 60%); +$themes: ( + light: ( + text: #000000, + background: #e9eaed, + primary: #2fb65a, + secondary: #c5c9d3, + accent: #bbb11b, + ), + dark: ( + text: #FFFFFF, + background: #131417, + primary: #47CF73, + secondary: #2C303A, + accent: #E4D944, + ), +); diff --git a/sass/style.scss b/sass/style.scss new file mode 100644 index 0000000..5feebc0 --- /dev/null +++ b/sass/style.scss @@ -0,0 +1,32 @@ +@import "variables"; +@import "header"; +@import "main"; +@import "mixins"; +@import "typography"; +:root { + @include color-theme(dark); + &[data-theme="auto"] { + @include color-theme(light); + @media (prefers-color-scheme: dark) { + @include color-theme(dark); + } + } + &[data-theme="light"] { + @include color-theme(light); + } +} +html { + font-size: 100%; + @media only screen and (max-width: 37.5em) { + font-size: 2.8vw; + } +} +body { + background-color: var(--color-background); + color: var(--color-text); + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-weight: normal; + padding: 0; + margin: 0; + position: relative; +} |