changed link look

src/css/main.css

@@ -9,7 +9,7 @@
     --font-weight: 400;
     --font-family: "Lucida Console";
 
-    --link-font-weight: 1000;
+     --link-font-weight: 700;
     --link-border-radius: 5px;
 
     --page-max-width: 800px;
@@ -24,19 +24,6 @@ body {
     overflow-x: hidden;
     margin: 20px;
 
-    & a {
-        color: var(--secondary-color);
-        text-decoration: underline solid var(--secondary-color2) 1px;
-        top: 0;
-        position: relative;
-    }
-
-    & a:hover {
-        text-decoration: underline solid var(--secondary-color) 1px;
-        filter: drop-shadow(0px 0px 5px var(--secondary-color2)) brightness(1.02);
-        top: -2px;
-    }
-
     & h1, p {
         margin: 0;
     }
@@ -73,9 +60,22 @@ header {
 }
 
 /* Links */
+
+.text-link {
+    color: var(--secondary-color);
+    text-decoration: underline solid var(--secondary-color2) 1px;
+    top: 0;
+    position: relative;
+    padding: 0 2px;
+}
+
+.text-link:hover {
+    text-decoration: underline solid var(--secondary-color) 1px;
+    filter: drop-shadow(0px 0px 5px var(--secondary-color2)) brightness(1.02);
+    top: -2px;
+}
+
 .linkGroup {
-    margin: auto;
-    box-sizing: border-box;
 
     /* if wide */
     @media only screen and (min-width: 480px) {
@@ -111,7 +111,7 @@ header {
     text-align: center;
     text-decoration: none;
 
-    color: rgb(0, 0, 0);
+    color: rgb(16, 16, 16);
     background-color: var(--secondary-color);
 
     display: block;
@@ -164,8 +164,4 @@ header {
 /* Footer */
 footer {
     text-align: center;
-
-    & a {
-        padding: 0 2px;
-    }
 }

src/index.html

@@ -34,20 +34,20 @@
     <script src="js/links.js"></script>
     <section class="links">
         <noscript>
-            <p>javascript is not available. You can still see a list of my links <a href="content/links.json">here</a>.</p>
+            <p>javascript is not available. You can still see a list of my links <a class="text-link" href="content/links.json">here</a>.</p>
         </noscript>
     </section>
     <br>
     <section class="timer">
         <p class="js-required">alive for <span id="timer-alive-since-s"></span><span id="timer-alive-since-ms"></span> seconds.</p>
         <p class="js-required">next birthday in <span id="timer-until-birthday-s"></span><span id="timer-until-birthday-ms"></span> seconds.</p>
-        <p class="js-required">employed at <a href="https://subshell.com/">subshell</a> for <span id="timer-employed-since-s"></span><span
+        <p class="js-required">employed at <a class="text-link" href="https://subshell.com/">subshell</a> for <span id="timer-employed-since-s"></span><span
                 id="timer-employed-since-ms"></span>
             seconds.
         </p>
         <noscript>
             <p>alive since <span>1999-07-20T00:00:00</span>.</p>
-            <p>working at <a href="https://subshell.com/">subshell</a> since <span>2024-05-02T09:00:00</span>.</p>
+            <p>working at <a class="text-link" href="https://subshell.com/">subshell</a> since <span>2024-05-02T09:00:00</span>.</p>
             <style>
                 .js-required {
                     display: none;
@@ -57,11 +57,11 @@
     </section>
     <br>
     <footer>
-        <a href="https://git.brulijam.com/brulijam/introduction-website" target="_blank">source code</a>
+        <a class="text-link" href="https://git.brulijam.com/brulijam/introduction-website" target="_blank">source code</a>
-        <a href="content/links.json" target="_blank">links.json</a>
+        <a class="text-link" href="content/links.json" target="_blank">links.json</a>
-        <a href="https://status.brulijam.com/status/brulijam">status</a>
+        <a class="text-link" href="https://status.brulijam.com/status/brulijam">status</a>
-        <a href="https://brulijam.com/files" target="_blank">files</a>
+        <a class="text-link" href="https://brulijam.com/files" target="_blank">files</a>
-        <a href="https://brulijam.com/music" target="_blank">music</a>
+        <a class="text-link" href="https://brulijam.com/music" target="_blank">music</a>
     </footer>
 </main>
 </body>

src/js/links.js

@@ -6,7 +6,8 @@ function createLinkDiv(link) {
     anchor.className = 'linkButton';
     anchor.href = link.href;
     anchor.target = '_blank';
-    anchor.innerHTML = link.icon ? `<img class="icon" src="${link.icon}" alt="${link.name} icon">${link.name}` : link.name;
+    const linkNameLower = link.name.toLowerCase();
+    anchor.innerHTML = link.icon ? `<img class="icon" src="${link.icon}" alt="${linkNameLower} icon">${linkNameLower}` : linkNameLower;
 
     linkDiv.appendChild(anchor);
     return linkDiv;