From 4e31b2877b0396985d8eb57a2e827352e6b19d6c Mon Sep 17 00:00:00 2001 From: Hazem Krimi Date: Tue, 31 Oct 2023 00:10:41 +0100 Subject: [PATCH] Header partial wip --- assets/css/baseof.css | 101 ++++++++++++++++++++++--------- assets/css/partials/header.css | 50 +++++++++++++++ assets/icons/arrow.svg | 4 ++ assets/icons/burger.svg | 5 ++ assets/icons/close.svg | 4 ++ assets/icons/cv.svg | 7 +++ assets/icons/double-chevrons.svg | 4 ++ assets/icons/eye.svg | 4 ++ assets/icons/github.svg | 10 +++ assets/icons/linkedin.svg | 5 ++ assets/icons/mail.svg | 4 ++ assets/icons/moon.svg | 3 + assets/icons/rss.svg | 3 + assets/icons/sun.svg | 11 ++++ assets/icons/twitter.svg | 10 +++ assets/images/header-face.png | Bin 0 -> 2294 bytes assets/js/baseof.js | 13 +++- content/_index.md | 2 - layouts/_default/baseof.html | 1 + layouts/index.html | 1 - layouts/partials/header.html | 28 +++++++++ 21 files changed, 239 insertions(+), 31 deletions(-) create mode 100644 assets/css/partials/header.css create mode 100644 assets/icons/arrow.svg create mode 100644 assets/icons/burger.svg create mode 100644 assets/icons/close.svg create mode 100644 assets/icons/cv.svg create mode 100644 assets/icons/double-chevrons.svg create mode 100644 assets/icons/eye.svg create mode 100644 assets/icons/github.svg create mode 100644 assets/icons/linkedin.svg create mode 100644 assets/icons/mail.svg create mode 100644 assets/icons/moon.svg create mode 100644 assets/icons/rss.svg create mode 100644 assets/icons/sun.svg create mode 100644 assets/icons/twitter.svg create mode 100644 assets/images/header-face.png create mode 100644 layouts/partials/header.html diff --git a/assets/css/baseof.css b/assets/css/baseof.css index 2b09541..f032ac6 100644 --- a/assets/css/baseof.css +++ b/assets/css/baseof.css @@ -1,42 +1,89 @@ @font-face { - font-family: 'Open Sans'; - src: url('/fonts/OpenSans.ttf') format('ttf'); - font-weight: normal; - font-style: normal; + font-family: 'Open Sans'; + src: url('/fonts/OpenSans.ttf') format('ttf'); + font-weight: normal; + font-style: normal; } @font-face { - font-family: 'Open Sans'; - src: url('/fonts/OpenSans-Italic.ttf') format('ttf'); - font-weight: normal; - font-style: italic; + font-family: 'Open Sans'; + src: url('/fonts/OpenSans-Italic.ttf') format('ttf'); + font-weight: normal; + font-style: italic; } :root { - /* Colors */ - --black: #131314; - --white: #FFFFFF; - --crimson: #BD1839; - --light-gray: #E7E7E7; + /* Colors */ + --black: #131314; + --white: #ffffff; + --crimson: #bd1839; + --light-gray: #e7e7e7; - /* Background colors */ - --dark-background: #1D1B1B; - --light-background: #FBFBFB; + /* Background colors */ + --dark-background: #1d1b1b; + --light-background: #fbfbfb; - /* Radiuses */ - --card-radius: 30px; - --form-radius: 9px; + /* Radiuses */ + --card-radius: 1.875rem; + --form-radius: 0.563rem; + + /* Shadows */ + --shadow: 0px 4px 8px rgba(0, 0, 0, 0.04); +} + +*, +*::before, +*::after { + box-sizing: border-box; } * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; } body { - font-size: 16px; - font-family: 'Open Sans', sans-serif; - background-color: var(--background); - color: var(--text); -} \ No newline at end of file + font-family: 'Open Sans', sans-serif; + font-size: 16px; + line-height: 1.5; + -webkit-font-smoothing: antialiased; + + background-color: var(--background); + color: var(--text); + + isolation: isolate; +} + +img, +picture, +video, +canvas, +svg { + display: block; + max-width: 100%; +} + +input, +button, +textarea, +select { + font: inherit; +} + +p, +h1, +h2, +h3, +h4, +h5, +h6 { + overflow-wrap: break-word; +} + +a { + color: var(--text); +} + +.vertical-separator { + border-left: 1px solid rgba(0, 0, 0, .25); + height: 24px; +} diff --git a/assets/css/partials/header.css b/assets/css/partials/header.css new file mode 100644 index 0000000..f25039b --- /dev/null +++ b/assets/css/partials/header.css @@ -0,0 +1,50 @@ +:root { + --header-light-background: var(--white); + --header-dark-background: #676666; +} + +header { + width: 85%; + margin: 3.125rem auto; + padding: 0.938rem 2.188rem; + + border-radius: 0.75rem; + box-shadow: var(--header-shadow); + + background-color: var(--header-background); + color: var(--text); + + text-transform: uppercase; + + display: flex; + align-items: center; + justify-content: space-between; +} + +header #header-face { + display: flex; + align-items: center; + column-gap: 0.625rem; +} + +header #header-face h3 { + font-weight: 600; +} + +header #menus { + display: flex; + align-items: center; + column-gap: 1.563rem; +} + +header #menus a { + text-decoration: none; + font-weight: 600; + font-size: 15px; +} + +header #links { + display: flex; + align-items: center; + column-gap: 1.5rem; +} \ No newline at end of file diff --git a/assets/icons/arrow.svg b/assets/icons/arrow.svg new file mode 100644 index 0000000..0c17470 --- /dev/null +++ b/assets/icons/arrow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/icons/burger.svg b/assets/icons/burger.svg new file mode 100644 index 0000000..0bcaad5 --- /dev/null +++ b/assets/icons/burger.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/icons/close.svg b/assets/icons/close.svg new file mode 100644 index 0000000..7f0b0b0 --- /dev/null +++ b/assets/icons/close.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/icons/cv.svg b/assets/icons/cv.svg new file mode 100644 index 0000000..75f7935 --- /dev/null +++ b/assets/icons/cv.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/assets/icons/double-chevrons.svg b/assets/icons/double-chevrons.svg new file mode 100644 index 0000000..74fdfc8 --- /dev/null +++ b/assets/icons/double-chevrons.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/icons/eye.svg b/assets/icons/eye.svg new file mode 100644 index 0000000..d1d2ed5 --- /dev/null +++ b/assets/icons/eye.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/icons/github.svg b/assets/icons/github.svg new file mode 100644 index 0000000..7ace097 --- /dev/null +++ b/assets/icons/github.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/assets/icons/linkedin.svg b/assets/icons/linkedin.svg new file mode 100644 index 0000000..cd6bfdc --- /dev/null +++ b/assets/icons/linkedin.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/icons/mail.svg b/assets/icons/mail.svg new file mode 100644 index 0000000..641501c --- /dev/null +++ b/assets/icons/mail.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/icons/moon.svg b/assets/icons/moon.svg new file mode 100644 index 0000000..8153079 --- /dev/null +++ b/assets/icons/moon.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/rss.svg b/assets/icons/rss.svg new file mode 100644 index 0000000..8cac502 --- /dev/null +++ b/assets/icons/rss.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/sun.svg b/assets/icons/sun.svg new file mode 100644 index 0000000..dff001a --- /dev/null +++ b/assets/icons/sun.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/icons/twitter.svg b/assets/icons/twitter.svg new file mode 100644 index 0000000..a8e5115 --- /dev/null +++ b/assets/icons/twitter.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/assets/images/header-face.png b/assets/images/header-face.png new file mode 100644 index 0000000000000000000000000000000000000000..6854054b0b2401233fd4e8832197c4dc249859ea GIT binary patch literal 2294 zcmV&@}I4(%8<7pEI7BJNJF~&UH-O#P+!DAH}|pbIpzSixts zzm;An>p*$^UW8%&m4)}G@fl6o=|H(~0_qP1#8@OS$}jURHG;1K`9OvGc)}?mqBEYN zoPM=>v9i4h;3%7g&MQv|qW1W=R+1y8}=P{)_T1V;P>wDpe# zPJ4=Yb0>hd1oBRPET2!h6WsmJ)}PHAA%2-&!HQ!e2tw%b3<|<9f~IL)7wF;j&(;0d z6KES(Ii+^2ljHTN`lkXS!(c)=hYdM!KI7nm*~YcSML<=!z8Zh-xjrHh!O-;>6hntT z%fe5>5{4sdEAqFoa>~&bL>>$u-NCqQ0{wkaMLMC!Pc$?W)>|!yuy{hCWPHAZe)RNhYwnCx>D-g+eBU z3_+TzN+28?uK7WR>bht@Ii(EWD64UDhJ$d!D zkYECvm?jihs>YZr7#|tLYa?ak=n2b8K}+TknF)jubH#Jf>CNCsDTB+E8T@Cqfq&kd zi!10(V8;tQ?H1&@_>XusiN~Q)#x?^YU#g)@zzDtR6jI!wOh(3ti`x)R8;a{d^_fE) zS4<}HmGVA3yT8P8RvDTIwaAm1gH7jGl%Jj>U&Yt|*nRv2Hpz`O?*TbFP17ta)>}}7 z%oKyJV$vFEs5)8HOmY?rdLqMnK4+fvCQazfC0#e-s@WXInpc8^GrG2EZH>COvcr0o zWf@{)$ahvcxVhxuVM~R}Bpu=SFrX(>CcoOclW=p= z5i#&*#Wp~`e((UU*Btca)36E12^8F#tCCBaI6PPa^AaE4et;Qr*Mqrb9O*Bx%7B9d zeYjOy!MBEopxnfE_O%#@SnH%)S~^tm;?N)p*$jNgf!%T;SL(^+SS{>1f_!4BIJ{>7 z8B%@Lh+t-Wpldpw|H1%{7G%X#x167(T#kXrc8+b#pSSVS@k3nOK`xcWo^laKJZ_%} zY?9nU?!*Y{*rkQoe{dMG_026WVwLQBwA_zO&BwMT*49_i#X^>%(uu%uv#(f4Co|Yp z>_bXpLXt;JdL|G)(x#5Im4M7nVnc)NKsG|{K^;3WQX#sIw9npy&uoZDa6;Cv&eqRg z>^ShasL3jF2_T?G@k#YQ2eNcL?^^fjG++(qHG(U=zbkRqZhX6LHBKPiyAk- z&+A`hMdFZD0VV4?#mx~gy=lg#EEXB)sNc{hl}u}24P6%@7K7P z39s#A)@uTNCi(`8aJjh0s_LtH*og@hQ!x;oBA4O)b+-?+drh=gY$P)}Oj3DoxqzU> z>glMg7*c=QfK5$eyB=(MZ+NDASYiM|oQ^j-&h96bcef7|ws)5mR9jxgYP$`Kc~LCw zLW$kDMDj|o0WPo&T)ACAaBZHchpxsUQ{x-EZwPTx-Ji{(6E7}%!6Jl-6{+mEjw+1b+ZbL&S2X$_uPLPKMMM#$0i_7@9C zA1mU(ZuSsL!OGkm8{sM(kLBulq<)T%6t;pK3jbO_f1@jo%FESv53Jwl>lZ;7ys2vX zpyxMu1_KZ6cAx@V@;R9FQELf= zOGzBjl2l#^DD1k5x<2V6?k0On zvA37v%SWrz!M%S!#9Ltc$MFZqA~`;xehytcaXLl_o=?Y3j6=uwMP(!iCCaK(;-EpZMPElaAv|$OF^d z%mXxe$jXl#z|i-O{_kg$D!B8(5^1QU20->X%*8Cs;D&@uo*s| zO)p?(1$nEkR2zR$wCFqa)y`>ju^szDafAHKN>!+r6CPqGwOb8A{*td< QH2?qr07*qoM6N<$f_PSC9{>OV literal 0 HcmV?d00001 diff --git a/assets/js/baseof.js b/assets/js/baseof.js index e26d59a..2ded2cc 100644 --- a/assets/js/baseof.js +++ b/assets/js/baseof.js @@ -22,7 +22,18 @@ function updateTheme(theme) { '--background', theme === 'light' ? 'var(--light-background)' : 'var(--dark-background)' ); + root.style.setProperty( + '--header-background', + theme === 'light' + ? 'var(--header-light-background)' + : 'var(--header-dark-background)' + ); + root.style.setProperty( + '--header-shadow', + theme === 'light' ? 'var(--shadow)' : 'none' + ); root.style.setProperty('--text', theme === 'light' ? 'black' : 'white'); + root.style.setProperty('--color', theme === 'light' ? 'black' : 'white'); } const root = document.documentElement; @@ -32,7 +43,7 @@ document.addEventListener('DOMContentLoaded', () => { updateTheme(theme); }); -document.querySelector('#switch-theme').addEventListener('click', () => { +document.querySelector('#theme-toggle').addEventListener('click', () => { theme = theme === 'light' ? 'dark' : 'light'; window.localStorage.setItem('theme', theme); updateTheme(theme); diff --git a/content/_index.md b/content/_index.md index 7ae040f..212df70 100644 --- a/content/_index.md +++ b/content/_index.md @@ -3,7 +3,5 @@ title: "Hazem Krimi" date: 2023-10-18T20:03:43+01:00 --- -# Hazem Krimi - *Hi!* diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 73dc785..4ee2a05 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -14,6 +14,7 @@ + {{ partial "header.html" . }}
{{ block "main" . }}{{ end }}
diff --git a/layouts/index.html b/layouts/index.html index 42487e8..cdb4a08 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,4 +1,3 @@ {{ define "main" }} - {{ partial "theme-switch.html" . }} {{ .Content }} {{ end }} \ No newline at end of file diff --git a/layouts/partials/header.html b/layouts/partials/header.html new file mode 100644 index 0000000..79d8cea --- /dev/null +++ b/layouts/partials/header.html @@ -0,0 +1,28 @@ +{{ $styles := resources.Get "css/partials/header.css" | toCSS | minify | +fingerprint }} {{ $headerFaceImage := resources.Get "images/header-face.png" }} + +
+ +
+ Hazem Krimi +

Hazem Krimi

+
+ + +