From 018d91b0dc3b0e2fa2df39c829ea1b0953332aef Mon Sep 17 00:00:00 2001 From: TheRealOne78 Date: Wed, 14 Aug 2024 15:11:23 +0300 Subject: [PATCH] use kebab-case for css --- homepage.html | 32 ++++----- resources/css/main.css | 137 ++++++++++++++----------------------- resources/script/script.js | 4 +- 3 files changed, 71 insertions(+), 102 deletions(-) diff --git a/homepage.html b/homepage.html index aac2907..e28fdac 100755 --- a/homepage.html +++ b/homepage.html @@ -1,7 +1,7 @@ +
+
+
DuckDuckGo Search Engine™
-
Quick access:
+
Quick access:
* TheRealOne78: therealone78.ddns.net
- * Youtube: youtube.com
- * Odysee: odysee.com
- * GitHub: github.com | gist.github.com
- * ChatGPT: chat.openai.com
+ * Youtube: youtube.com
+ * Odysee: odysee.com
+ * GitHub: github.com | gist.github.com
+ * ChatGPT: chat.openai.com
* Gentoo Linux: www.gentoo.org | wiki.gentoo.org
- * Arch Linux: archlinux.org | wiki.archlinux.org
+ * Arch Linux: archlinux.org | wiki.archlinux.org
-
Fun fact:
-
+
Fun fact:
+
Did you know each insect is a host to ten bacterial species?

There are around 2 billion species on Earth—with 6.8 million likely to be species of insects. And up to 10 types of bacteria lives inside of each of these insects!

-
+
-
Irasshaimase Guest! ‎
+
Irasshaimase Guest! ‎
diff --git a/resources/css/main.css b/resources/css/main.css index 1f349bf..284e7c9 100755 --- a/resources/css/main.css +++ b/resources/css/main.css @@ -1,5 +1,5 @@ /* - * Copyright (C) 2023 TheRealOne78 + * Copyright (C) 2023-2024 TheRealOne78 * * This file is part of the 'TheRealOne78's Browser Homepage' project * @@ -17,110 +17,79 @@ */ html, body { - background-color: black; - width: 100%; - height: 100%; - margin: 0; - padding: 0; - font-family: "VT323"; - color: white; + background-color: #000; + color: #fff; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + font-family: "VT323"; } a { - text-decoration-style: dashed; - color: white; - background: transparent; -} -a:hover { - text-decoration: underline; + background: transparent; + color: #fff; + text-decoration-style: dashed; } +a:hover { text-decoration: underline; } .container { - display: flex; - flex-direction: row; - justify-content: center; + display: flex; + flex-direction: row; + justify-content: center; } -.contentContainer { - display: flex; - flex-direction: row; - justify-content: center; - font-size: 27px; - padding: 0 3%; - width: 66vw; +.content-container { + display: flex; + flex-direction: row; + justify-content: center; + font-size: 27px; + padding: 0 3%; + width: 66vw; } -.itemTextContainer { - max-width: 680px; -} +.item-text-container { max-width: 680px; } -.imgContainer { - display: flex; - flex-direction: column; - max-width: 34vw; - align-items: center; - text-align: center; +.img-container { + display: flex; + flex-direction: column; + max-width: 34vw; + align-items: center; + text-align: center; } @media screen and (max-width: 1200px) { - .imgContainer { - display: none; - } + .img-container { display: none; } } -#img { - padding: 15px 0; -} +#img { padding: 15px 0; } -#funfact { - text-align: justify; -} +#fun-fact { text-align: justify; } -.itemTitle { - font-family: 'VT323', monospace; - font-size: 40px; - padding: 15px 0; +.item-title { + font-family: 'VT323', monospace; + font-size: 40px; + padding: 15px 0; } -.welcome-msg { - text-align: center; -} +.welcome-msg { text-align: center; } -.infinite-cursor { - animation: infinite-cursor 1.75s infinite; -} +.infinite-cursor { animation: infinite-cursor 1.75s infinite; } @keyframes infinite-cursor { - 0% { - background-color: black; - } - 50% { - background-color: black; - } - 51% { - background-color: currentColor; - } - 100% { - background-color: currentColor; - } -} - -.noscript { - color: black !important; - text-align: center; - font-size: 27px; - animation: noscript 3s infinite; + 0% { background-color: #000; } + 50% { background-color: #000; } + 51% { background-color: currentColor; } + 100% { background-color: currentColor; } } -@keyframes noscript { - 0% { - background-color: #C19C00; - } - 50% { - background-color: #C19C00; - } - 51% { - background-color: #C50F1F; - } - 100% { - background-color: #C50F1F; - } +.no-script-notice { + color: black !important; + text-align: center; + font-size: 27px; + animation: no-script-notice 3s infinite; +} +@keyframes no-script-notice { + 0% { background-color: #C19C00; } + 50% { background-color: #C19C00; } + 51% { background-color: #C50F1F; } + 100% { background-color: #C50F1F; } } diff --git a/resources/script/script.js b/resources/script/script.js index fc23111..8b15221 100755 --- a/resources/script/script.js +++ b/resources/script/script.js @@ -1,5 +1,5 @@ /* - * Copyright (C) 2023 TheRealOne78 + * Copyright (C) 2023-2024 TheRealOne78 * * This file is part of the 'TheRealOne78's Browser Homepage' project * @@ -150,7 +150,7 @@ document.getElementById("img").src = randImgPath; /* Get a random path from fortuneArr and set it in HTML */ const randFortune = fortuneArr[Math.floor(Math.random() * fortuneArr.length)] -document.getElementById("funfact").innerHTML = randFortune; +document.getElementById("fun-fact").innerHTML = randFortune; /* Pre-defined terminal-like HEX colors */ const textColorArr = [ "#ffffff", "#0037DA", "#3A96DD", "#13A10E", "#881798", "#C50F1F", "#C19C00" ]