From 17478f87e5aa333f40ab70447bb11554a0c64ad6 Mon Sep 17 00:00:00 2001 From: A Farzat 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 ++++++++++++++++++++++++++++ static/img/profile-pic.jpg | Bin 0 -> 776087 bytes static/img/svg-bundle.svg | 3 +++ static/img/svgo/kaaba.svg | 1 + templates/base.html | 27 ++++++++++++++++++++++++ templates/index.html | 19 +++++++++++++++++ 11 files changed, 236 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 create mode 100644 static/img/profile-pic.jpg create mode 100644 static/img/svg-bundle.svg create mode 100644 static/img/svgo/kaaba.svg create mode 100644 templates/base.html create mode 100644 templates/index.html 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 Binary files /dev/null and b/static/img/profile-pic.jpg differ 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 @@ + + + \ 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 @@ + \ 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 @@ + + + + + + + {% block title %} Farzat's website {% endblock %} + + + + +
+ + + + + Farzat + +
+
+
+ {% block content %} {% endblock %} +
+
+ + + 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 %} +
+
+

+ Hi! I am Farzat, + a software developer + and computer enthusiast +

+
+
+ Profile pic +
+
+

Unfortunately my website is still incomplete. I hope nonetheless that you like it!

+{% endblock content %} -- cgit v1.2.3-70-g09d2