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 0000000..6854054 Binary files /dev/null and b/assets/images/header-face.png differ 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

+
+ + +