From f5adf3bde1d628184f775c026fece76278e8dc93 Mon Sep 17 00:00:00 2001 From: Hazem Krimi Date: Fri, 26 Jan 2024 00:39:08 +0100 Subject: [PATCH] styles improvements --- assets/css/baseof.css | 22 ++++------------------ assets/css/index.css | 2 +- assets/css/partials.css | 8 ++++---- assets/js/baseof.js | 4 ++-- layouts/_default/baseof.html | 18 ++++++++++++++++++ 5 files changed, 29 insertions(+), 25 deletions(-) diff --git a/assets/css/baseof.css b/assets/css/baseof.css index d69f845..52bbb8c 100644 --- a/assets/css/baseof.css +++ b/assets/css/baseof.css @@ -1,20 +1,6 @@ -@font-face { - 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; -} - :root { --black: #131314; - --white: white; + --white: #dddddd; --crimson: #bd1839; --light-gray: #e7e7e7; --dark-background: #1d1b1b; @@ -52,7 +38,7 @@ } body { - font-family: 'Open Sans', sans-serif; + font-family: OpenSans, sans-serif; font-size: 16px; line-height: normal; -webkit-font-smoothing: antialiased; @@ -65,11 +51,11 @@ body { } body::-webkit-scrollbar { - width: 0.5rem !important; + width: 0.5rem; } body::-webkit-scrollbar-thumb { - background-color: var(--text) !important; + background-color: var(--text); } #links .linkedin, diff --git a/assets/css/index.css b/assets/css/index.css index 711daee..4d0385b 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -36,7 +36,7 @@ main #intro #action-buttons a { main #intro #action-buttons a:first-of-type { background-color: var(--first-action-background); - color: var(--white); + color: white; } main #intro #action-buttons a:last-of-type { diff --git a/assets/css/partials.css b/assets/css/partials.css index 0641d50..cab7255 100644 --- a/assets/css/partials.css +++ b/assets/css/partials.css @@ -108,14 +108,14 @@ .card .demo { background-color: #353535; - color: var(--white); + color: white; border-radius: 0.4375rem; text-decoration: none; padding: 0.5rem 1rem; } .card .demo .eye { - stroke: var(--white); + stroke: white; } input, @@ -243,8 +243,8 @@ footer #footer-face { header #header-face img, footer #footer-face img { - width: 32px; - height: 32px; + width: 2rem; + height: 2rem; } header #header-face span, diff --git a/assets/js/baseof.js b/assets/js/baseof.js index 537558a..b5ea86b 100644 --- a/assets/js/baseof.js +++ b/assets/js/baseof.js @@ -86,8 +86,8 @@ function loadTheme() { '--header-shadow', theme === 'light' ? 'var(--shadow)' : 'none' ); - root.style.setProperty('--text', theme === 'light' ? 'black' : 'white'); - root.style.setProperty('--color', theme === 'light' ? 'black' : 'white'); + root.style.setProperty('--text', theme === 'light' ? 'var(--black)' : 'var(--white)'); + root.style.setProperty('--color', theme === 'light' ? 'var(--black)' : 'var(--white)'); document.querySelector( theme === 'light' ? 'header .moon' : 'header .sun' diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 5313d26..98e05a8 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -10,6 +10,9 @@ {{ $favIcon16 := resources.Get "favicon-16x16.png" }} {{ $favIcon := resources.Get "favicon.ico" }} +{{ $normalFont := resources.Get "fonts/OpenSans.ttf" }} +{{ $italicFont := resources.Get "fonts/OpenSans-Italic.ttf" }} + {{ $faceImage := resources.Get "images/big-face.webp" }} @@ -51,6 +54,21 @@ + + + {{ block "styles" . }}{{ end }}