From 17478f87e5aa333f40ab70447bb11554a0c64ad6 Mon Sep 17 00:00:00 2001
From: A Farzat <a@farzat.xyz>
Date: Thu, 21 Nov 2024 17:15:56 +0900
Subject: Made an initial attempt
---
sass/_header.scss | 30 ++++++++++++++++++++++++++++++
sass/_main.scss | 24 ++++++++++++++++++++++++
sass/_mixins.scss | 22 ++++++++++++++++++++++
sass/_typography.scss | 51 +++++++++++++++++++++++++++++++++++++++++++++++++++
sass/_variables.scss | 27 +++++++++++++++++++++++++++
sass/style.scss | 32 ++++++++++++++++++++++++++++++++
6 files changed, 186 insertions(+)
create mode 100644 sass/_header.scss
create mode 100644 sass/_main.scss
create mode 100644 sass/_mixins.scss
create mode 100644 sass/_typography.scss
create mode 100644 sass/_variables.scss
create mode 100644 sass/style.scss
(limited to 'sass')
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;
+}
--
cgit v1.2.3-70-g09d2