Made an initial attempt

11 files changed, 236 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;
+}
diff --git a/static/img/profile-pic.jpg b/static/img/profile-pic.jpg
new file mode 100644
index 0000000..9b2ea2a
--- /dev/null
+++ b/static/img/profile-pic.jpg
diff --git a/static/img/svg-bundle.svg b/static/img/svg-bundle.svg
new file mode 100644
index 0000000..dbb47aa
--- /dev/null
+++ b/static/img/svg-bundle.svg
@@ -0,0 +1,3 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none">
+<symbol viewBox="0 0 6.827 6.827" id="kaaba"><path fill-rule="nonzero" d="M1.039 1.48a.08.08 0 0 0 .04.155l2.334-.617 2.334.617a.08.08 0 0 0 .04-.155L3.44.86a.1.1 0 0 0-.046-.002L1.04 1.48z"/><path fill-rule="nonzero" d="M3.393 2.868a.08.08 0 0 0 .041-.155L1.139 2.1v-.437l2.254.604a.08.08 0 0 0 .041-.155l-2.35-.63a.08.08 0 0 0-.105.077v.6a.08.08 0 0 0 .06.08v-.001zm0 2.645a.08.08 0 0 0 .041-.154l-2.295-.615V2.736l2.254.604a.08.08 0 0 0 .041-.154l-2.35-.63a.08.08 0 0 0-.105.076v2.171a.08.08 0 0 0 .06.08z"/><path fill-rule="nonzero" d="M5.848 2.16a.08.08 0 0 0-.16 0v.472a.08.08 0 0 0 .16 0zm-4.869.472a.08.08 0 0 0 .16 0V2.16a.08.08 0 0 0-.16 0zm.1.544a.08.08 0 0 0-.04.155l.393.105a.08.08 0 0 0 .041-.154l-.393-.106zm1.02.273a.08.08 0 0 0-.042.155l1.336.358a.08.08 0 0 0 .041-.155L2.099 3.45z"/><path fill-rule="nonzero" d="m5.688 1.662-2.195.588v.437l2.195-.588zm-2.295.45 2.35-.63a.08.08 0 0 1 .105.076v.6a.08.08 0 0 1-.06.08v-.001l-2.35.63a.08.08 0 0 1-.105-.076V2.19a.08.08 0 0 1 .06-.079zm.1 1.212v2.008l2.195-.588V2.736zm-.16 2.112V3.264a.08.08 0 0 1 .06-.078l2.35-.63a.08.08 0 0 1 .105.076v2.171a.08.08 0 0 1-.06.08l-2.35.629a.08.08 0 0 1-.105-.076"/><path fill-rule="nonzero" d="m5.294 3.24-.465.124V4.41l.465-.124zm-.566-.014.621-.167a.08.08 0 0 1 .105.077v1.21a.08.08 0 0 1-.06.078l-.62.167a.08.08 0 0 1-.105-.076v-1.21a.08.08 0 0 1 .059-.08z"/><path fill-rule="nonzero" d="M5.788 3.33a.08.08 0 0 0-.041-.154l-.394.106a.08.08 0 0 0 .042.154zm-1.019.274a.08.08 0 0 0-.041-.155l-1.335.358a.08.08 0 0 0 .041.155zM.973 5.184a.08.08 0 0 0-.04.154l2.46.631a.1.1 0 0 0 .047-.002l2.453-.629a.08.08 0 0 0-.039-.154l-2.44.625z"/><path fill="none" d="M0 0h6.827v6.827H0z"/></symbol>
+</svg>
\ No newline at end of file
diff --git a/static/img/svgo/kaaba.svg b/static/img/svgo/kaaba.svg
new file mode 100644
index 0000000..739c48c
--- /dev/null
+++ b/static/img/svgo/kaaba.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="655.359" height="655.359" fill-rule="evenodd" clip-rule="evenodd" image-rendering="optimizeQuality" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" viewBox="0 0 6.827 6.827"><path fill-rule="nonzero" d="M1.039 1.48a.08.08 0 0 0 .04.155l2.334-.617 2.334.617a.08.08 0 0 0 .04-.155L3.44.86a.1.1 0 0 0-.046-.002L1.04 1.48z"/><path fill-rule="nonzero" d="M3.393 2.868a.08.08 0 0 0 .041-.155L1.139 2.1v-.437l2.254.604a.08.08 0 0 0 .041-.155l-2.35-.63a.08.08 0 0 0-.105.077v.6a.08.08 0 0 0 .06.08v-.001zm0 2.645a.08.08 0 0 0 .041-.154l-2.295-.615V2.736l2.254.604a.08.08 0 0 0 .041-.154l-2.35-.63a.08.08 0 0 0-.105.076v2.171a.08.08 0 0 0 .06.08z"/><path fill-rule="nonzero" d="M5.848 2.16a.08.08 0 0 0-.16 0v.472a.08.08 0 0 0 .16 0zm-4.869.472a.08.08 0 0 0 .16 0V2.16a.08.08 0 0 0-.16 0zm.1.544a.08.08 0 0 0-.04.155l.393.105a.08.08 0 0 0 .041-.154l-.393-.106zm1.02.273a.08.08 0 0 0-.042.155l1.336.358a.08.08 0 0 0 .041-.155L2.099 3.45z"/><path fill-rule="nonzero" d="m5.688 1.662-2.195.588v.437l2.195-.588zm-2.295.45 2.35-.63a.08.08 0 0 1 .105.076v.6a.08.08 0 0 1-.06.08v-.001l-2.35.63a.08.08 0 0 1-.105-.076V2.19a.08.08 0 0 1 .06-.079zm.1 1.212v2.008l2.195-.588V2.736zm-.16 2.112V3.264a.08.08 0 0 1 .06-.078l2.35-.63a.08.08 0 0 1 .105.076v2.171a.08.08 0 0 1-.06.08l-2.35.629a.08.08 0 0 1-.105-.076"/><path fill-rule="nonzero" d="m5.294 3.24-.465.124V4.41l.465-.124zm-.566-.014.621-.167a.08.08 0 0 1 .105.077v1.21a.08.08 0 0 1-.06.078l-.62.167a.08.08 0 0 1-.105-.076v-1.21a.08.08 0 0 1 .059-.08z"/><path fill-rule="nonzero" d="M5.788 3.33a.08.08 0 0 0-.041-.154l-.394.106a.08.08 0 0 0 .042.154zm-1.019.274a.08.08 0 0 0-.041-.155l-1.335.358a.08.08 0 0 0 .041.155zM.973 5.184a.08.08 0 0 0-.04.154l2.46.631a.1.1 0 0 0 .047-.002l2.453-.629a.08.08 0 0 0-.039-.154l-2.44.625z"/><path fill="none" d="M0 0h6.827v6.827H0z"/></svg>
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
new file mode 100644
index 0000000..056e259
--- /dev/null
+++ b/templates/base.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="auto">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width,initial-scale=1">
+		<link rel="stylesheet" href="/style.css">
+		<title>{% block title %} Farzat's website {% endblock %}</title>
+		<script defer src="/js/dark_theme.js"></script>
+		<link rel="icon" type="image/x-icon" href="/img/svgo/kaaba.svg">
+	</head>
+	<body>
+		<header class="header">
+			<a href="/" class="home-link">
+				<svg class="main_icon">
+					<use href="/img/svg-bundle.svg#kaaba"></use>
+				</svg>
+				Farzat
+			</a>
+		</header>
+		<section class="main">
+			<div class="main__container">
+				{% block content %} {% endblock %}
+			</div>
+		</section>
+	</body>
+</html>
+<!-- vim: set ft=htmldjango -->
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..3f4e205
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,19 @@
+{% extends "base.html" %}
+
+{% block title %} Farzat's profile {% endblock %}
+
+{% block content %}
+<div class="hero">
+	<div class="hero__title">
+		<h1>
+			<span class="--main">Hi! I am <span class="color-primary">Farzat</span>,</span>
+			<span class="--sub">a <span class="color-gradient">software developer</span></span>
+			<span class="--sub-sub">and <span class="text-stroke color-accent">computer enthusiast</span></span>
+		</h1>
+	</div>
+	<div class="hero__img">
+		<img src="/img/profile-pic.jpg" alt="Profile pic" class="profile-pic">
+	</div>
+</div>
+<p>Unfortunately my website is still incomplete. I hope nonetheless that you like it!</p>
+{% endblock content %}