diff options
| -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 | ||||
| -rw-r--r-- | static/img/profile-pic.jpg | bin | 0 -> 776087 bytes | |||
| -rw-r--r-- | static/img/svg-bundle.svg | 3 | ||||
| -rw-r--r-- | static/img/svgo/kaaba.svg | 1 | ||||
| -rw-r--r-- | templates/base.html | 27 | ||||
| -rw-r--r-- | templates/index.html | 19 |
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 Binary files differnew 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 %} |
