Made an initial attempt

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;
+}