From e376d9c21f04f3a976c86561591ae8bfa5ed78ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michael=20Czy=C5=BC?= Date: Thu, 18 May 2023 23:20:52 +0200 Subject: [PATCH] theme improvements --- README.md | 7 +- public/index.html | 173 ++++++++++++++++++++++++++-------------------- public/main.js | 50 ++++++++++++++ public/styles.css | 170 +++++++++++++++++++++++++++++++++++++++------ 4 files changed, 303 insertions(+), 97 deletions(-) create mode 100644 public/main.js diff --git a/README.md b/README.md index 2ff3d2b..72ad84c 100644 --- a/README.md +++ b/README.md @@ -2,4 +2,9 @@ There's so much bloat that I'm just too lazy to update it all the time and migrate old code. -This time I focus on simplicity. \ No newline at end of file +This time I focus on simplicity. + +Deploy command cuz I'm forgetting all the time: +`sudo npm install -g firebase-tools` +`firebae login` +`firebase deploy --only hosting:mike-czyz-website` \ No newline at end of file diff --git a/public/index.html b/public/index.html index a2c21ad..6dd79dd 100644 --- a/public/index.html +++ b/public/index.html @@ -1,89 +1,110 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + - - + + + + + + + + + + + + + + + + + + - + + - + - Michael Czyż - - -
-

Hi, I'm Mike 👋🏻 👨🏻‍💻

- -
-
-

I'm a student and a frontend developer creating websites in many technologies and frameworks. I also want to get closer to the metal 🔨 so I create software in C++, C# and Python. Electron is terrifying me ⚛.

-

I built a Web App using Angular Material framework, a simple Server Manager program for Windows and much more! I'm also a co-author of a Discord multipurpose bot written in JavaScript.

-

I'm having a lot of fun with the latest technologies, mainly Cryptocurrencies 💰 and Artificial Inteligence 👁️.

-
- -
- -

Find Mike around the web 🌎:

- + Michael Czyż + -

Psst! You can also take a look at my dotfiles and find my latest rice 🍚.

- -

[📎 resume] [📧 contact]

- -
-
- Copyright © 2023 All rights reserved -
-
- 🔑 - - 710D - 3407 - D37F - F123 - -
+ +
+

+ Hi, I'm Mike 👋🏻 👨🏻‍💻 +

+ +
+

I'm a student and a frontend developer creating websites in many technologies and frameworks. I also want to + get closer to the metal 🔨 so I create software in C++, C# and Python. Electron is terrifying me ⚛.

+

I built a Web App using Angular Material framework, a + simple Server Manager program for Windows and much + more! I'm also a co-author of a Discord multipurpose + bot written in JavaScript.

+

I'm having a lot of fun with the latest technologies, mainly Cryptocurrencies 💰 and Artificial Inteligence + 👁️.

+
+ +
+

Find Mike around the web 🌎:

+ + +

Psst! You can also take a look at my dotfiles
and find my + latest + rice 🍚.

+ +

[📎 resume] [📧 contact]

+
+ +
+
+ +
+ + Dark Mode
- - +
+ +
+
+ Copyright © 2023 All rights reserved +
+
+ 🔑 + + 710D + 3407 + D37F + F123 + +
+
+
+ + \ No newline at end of file diff --git a/public/main.js b/public/main.js new file mode 100644 index 0000000..1339a2c --- /dev/null +++ b/public/main.js @@ -0,0 +1,50 @@ +const root = document.documentElement; +const themeText = document.querySelector('.theme-text'); +const themeIcon = document.querySelector('.material-icons'); + +const isDarkMode = () => root.classList.contains('dark'); + +const setDarkMode = () => { + root.classList.add('dark'); + themeText.textContent = 'Dark Mode'; + themeIcon.innerHTML = ''; +}; + +const setLightMode = () => { + root.classList.remove('dark'); + themeText.textContent = 'Light Mode'; + themeIcon.innerHTML = ''; +}; + +const toggleTheme = () => { + if (isDarkMode()) { + setLightMode(); + localStorage.setItem('preferredTheme', 'light'); + } else { + setDarkMode(); + localStorage.setItem('preferredTheme', 'dark'); + } +}; + +const checkPreferredTheme = () => { + const preferredTheme = localStorage.getItem('preferredTheme'); + if (preferredTheme === 'dark') { + setDarkMode(); + } else if (preferredTheme === 'light') { + setLightMode(); + } else { + const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches; + if (prefersDarkScheme) { + setDarkMode(); + } else { + setLightMode(); + } + } +}; + +document.querySelector("#year").innerHTML = new Date().getFullYear(); + +checkPreferredTheme(); + +const themeButton = document.querySelector('.theme'); +themeButton.addEventListener('click', toggleTheme); diff --git a/public/styles.css b/public/styles.css index 822cab0..3dd77e9 100644 --- a/public/styles.css +++ b/public/styles.css @@ -1,7 +1,70 @@ @import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400;0,500;1,400&display=swap'); +@import url('https://fonts.googleapis.com/icon?family=Material+Icons'); + +* { + transition: background-color 0.2s ease-in-out; +} + +html { + --rosewater: #dc8a78; + --flamingo: #dd7878; + --pink: #ea76cb; + --mauve: #8839ef; + --red: #d20f39; + --maroon: #e64553; + --peach: #fe640b; + --yellow: #df8e1d; + --green: #40a02b; + --teal: #179299; + --sky: #04a5e5; + --sapphire: #209fb5; + --blue: #1e66f5; + --lavender: #7287fd; + --text: #434f69; + --subtext1: #5c5f77; + --subtext0: #6c6f85; + --overlay2: #7c7f93; + --overlay1: #8c8fa1; + --overlay0: #9ca0b0; + --surface2: #acb0be; + --surface1: #bcc0cc; + --surface0: #ccd0da; + --base: #eff1f5; + --mantle: #e6e9ef; + --crust: #dce0e8; +} + +.dark { + --rosewater: #f4dbd6; + --flamingo: #f0c6c6; + --pink: #f5bde6; + --mauve: #c6a0f6; + --red: #ed8796; + --maroon: #ee99a0; + --peach: #f5a97f; + --yellow: #eed49f; + --green: #a6da95; + --teal: #8bd5ca; + --sky: #91d7e3; + --sapphire: #7dc4e4; + --blue: #8aadf4; + --lavender: #b7bdf8; + --text: #cad3f5; + --subtext1: #b8c0e0; + --subtext0: #a5adcb; + --overlay2: #939ab7; + --overlay1: #8087a2; + --overlay0: #6e738d; + --surface2: #5b6078; + --surface1: #494d64; + --surface0: #363a4f; + --base: #24273a; + --mantle: #1e2030; + --crust: #181926; +} ::selection { - background-color: #6e738d; + background-color: var(--overlay0); } @keyframes fadein { @@ -9,17 +72,19 @@ opacity: 0; transform: scale(97.5%); } + 100% { opacity: 1; transform: scale(100%); } } -html, body { +html, +body { margin: 0; height: 100vh; - background-color: #24273a; - color: #cad3f5; + background-color: var(--base); + color: var(--text); display: grid; place-items: center; font-family: 'Schibsted Grotesk', sans-serif; @@ -30,30 +95,62 @@ html, body { box-sizing: border-box; width: 8.5in; height: 11in; - background-color: #363a4f; + background-color: var(--surface0); padding: 0.5in; position: relative; animation: 0.4s ease-out 0s 1 fadein; + display: grid; + grid-template-columns: 1fr 2.5in; + grid-template-rows: 0.85in 0.2fr 0.4fr auto; + gap: 0px 0px; + grid-template-areas: + "header header" + "bio aside" + "world aside" + "footer footer"; } a { - color: #7dc4e4; + color: var(--sapphire); transition: 0.1s color ease-in-out, 0.1s text-decoration ease-in-out; text-decoration: none; } -a:hover, a:active, a:focus { - color: #8aadf4; +a:hover, +a:active, +a:focus { + color: var(--blue); text-decoration: underline; } +.header { + grid-area: header; +} + +.bio { + grid-area: bio; + padding: 0 0.5in 0 0; + text-align: justify; +} + +.world { + grid-area: world; +} + +.aside { + grid-area: aside; + display: flex; + flex-direction: column; + justify-content: top; + align-items: center; +} + .footer { - position: absolute; - bottom: 0.5in; + grid-area: footer; display: grid; grid-template-columns: 1fr 1fr; column-gap: 0.5in; - width: calc(100% - 1in); + align-self: end; } .copyright { @@ -64,13 +161,6 @@ a:hover, a:active, a:focus { text-align: right; } -.bio { - text-align: justify; - display: grid; - grid-template-columns: 1fr 2.5in; - column-gap: 0.5in; -} - .avatar { width: 2.5in; height: 2.5in; @@ -78,17 +168,56 @@ a:hover, a:active, a:focus { pointer-events: none; } -.pgp-key:hover, .gpg-key:active, .gpg-key:focus { +.avatar-wrapper { + position: relative; +} + +.theme { + position: absolute; + bottom: 0.125in; + right: 0.125in; + background-color: var(--surface1); + border: 1px solid var(--overlay0); + border-radius: 10in; + margin: 0.125in 0 0; + padding: 0.125in; + max-width: 0.25in; + height: 0.25in; + cursor: pointer; + transition: max-width 0.5s ease; + overflow: hidden; + display: inline-flex; + align-items: center; +} + +.theme:hover { + max-width: 2.5in; +} + +.material-icons { + font-family: "Material Icons"; +} + +.theme-text { + white-space: nowrap; + padding: 0 0.125in; +} +.pgp-key:hover, +.gpg-key:active, +.gpg-key:focus { text-decoration: none; transition: 0.1s color ease-in-out, 0.1s text-decoration ease-in-out; } -.pgp-key:hover span, .gpg-key:active span, .gpg-key:focus span { +.pgp-key:hover span, +.gpg-key:active span, +.gpg-key:focus span { text-decoration: underline; transition: 0.1s color ease-in-out, 0.1s text-decoration ease-in-out; } @media only screen and (min-width: 768px) and (max-width: 900px) { + /* tablets and desktop */ .page { width: 100%; @@ -115,6 +244,7 @@ a:hover, a:active, a:focus { } @media only screen and (max-width: 767px) { + /* phones */ .page { width: 100%;