use kebab-case for css

TheRealOne78 · Aug 14, 2024 · 018d91b · 018d91b
1 parent 6ad9ca3
commit 018d91b
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 102 deletions.
diff --git a/homepage.html b/homepage.html
@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 
 <!--
-  Copyright (C) 2023 TheRealOne78 <[email protected]>
+  Copyright (C) 2023-2024 TheRealOne78 <[email protected]>
 
   This file is part of the 'TheRealOne78's Browser Homepage' project
 
@@ -27,47 +27,47 @@
 
     <style>
       @font-face {
-         font-family: "VT323";
+        font-family: "VT323";
         src: url('./resources/fonts/VT323-Regular.ttf');
       }
     </style>
   </head>
 
   <body>
-    <div class="noscript"><noscript class="noscript">Note: You must enable JavaScript to achieve full functionality</noscript></div>
+    <div class="no-script-notice"><noscript class="no-script-notice">Note: You must enable JavaScript to achieve full functionality</noscript></div>
     <br><br>
     <div class="container">
-      <div class="contentContainer">
-        <div class="itemTextContainer">
-          <div class="itemTitle">DuckDuckGo Search Engine&trade;</div><!-- DuckDuckGo Search Engine -->
+      <div class="content-container">
+        <div class="item-text-container">
+          <div class="item-title">DuckDuckGo Search Engine&trade;</div><!-- DuckDuckGo Search Engine -->
           <form method="get" id="search" action="https://duckduckgo.com/">
             <input type="hidden" name="k8" value="#444444">
             <input type="hidden" name="k9" value="#D51920">
             <input type="hidden" name="kt" value="h">
             <input type="text" name="q" maxlength="255" placeholder=" Search&hellip;" style="background-color: #111111; color: #ffffff; width: 100%; border: 1px solid gray; height: 40px; font-family: VT323; font-size: 20px">
             <input type="submit" value="DuckDuckGo Search" style="visibility: hidden;" >
           </form>
-          <div class="itemTitle">Quick access:</div><!-- Quick access -->
+          <div class="item-title">Quick access:</div><!-- Quick access -->
           <div>
             * TheRealOne78: <a href="https://therealone78.ddns.net">therealone78.ddns.net</a><br>
-            * Youtube: <a href="https://youtube.com">youtube.com</a><br>
-            * Odysee: <a href="https://odysee.com/">odysee.com</a><br>
-            * GitHub: <a href="https://github.com">github.com</a> | <a href="https://gist.github.com">gist.github.com</a><br>
-            * ChatGPT: <a href="https://chat.openai.com">chat.openai.com</a><br>
+            * Youtube:      <a href="https://youtube.com">youtube.com</a><br>
+            * Odysee:       <a href="https://odysee.com/">odysee.com</a><br>
+            * GitHub:       <a href="https://github.com">github.com</a> | <a href="https://gist.github.com">gist.github.com</a><br>
+            * ChatGPT:      <a href="https://chat.openai.com">chat.openai.com</a><br>
             * Gentoo Linux: <a href="https://www.gentoo.org">www.gentoo.org</a> | <a href="https://wiki.gentoo.org">wiki.gentoo.org</a><br>
-            * Arch Linux: <a href="https://archlinux.org/">archlinux.org</a> | <a href="https://wiki.archlinux.org/">wiki.archlinux.org</a><br>
+            * Arch Linux:   <a href="https://archlinux.org/">archlinux.org</a> | <a href="https://wiki.archlinux.org/">wiki.archlinux.org</a><br>
           </div>
-          <div class="itemTitle">Fun fact:</div><!-- Fun fact -->
-          <div id="funfact">
+          <div class="item-title">Fun fact:</div><!-- Fun fact -->
+          <div id="fun-fact">
             Did you know each insect is a host to ten bacterial species?
             <p>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!</p>
             <!--https://www.rd.com/list/did-you-know-facts-most-people-dont-know/ - fair use -->
           </div>
         </div>
       </div>
-      <div class="imgContainer">
+      <div class="img-container">
         <img id="img" src="./resources/img/loading.svg" class="itemImg" width="80%" height="auto">
-        <div class="itemTitle welcome-msg">Irasshaimase <b>Guest</b>!<span class="infinite-cursor"> ‎</span></div>
+        <div class="item-title welcome-msg">Irasshaimase <b>Guest</b>!<span class="infinite-cursor"> ‎</span></div>
       </div>
     </div>
     <script src="./resources/script/script.js"></script>

diff --git a/resources/css/main.css b/resources/css/main.css
@@ -1,5 +1,5 @@
 /*
- *  Copyright (C) 2023 TheRealOne78 <[email protected]>
+ *  Copyright (C) 2023-2024 TheRealOne78 <[email protected]>
  *
  *  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
@@ -1,5 +1,5 @@
 /*
- *  Copyright (C) 2023 TheRealOne78 <[email protected]>
+ *  Copyright (C) 2023-2024 TheRealOne78 <[email protected]>
  *
  *  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" ]