Add visible links

gwllx · Oct 23, 2023 · 87d4382 · 87d4382
1 parent 5769589
commit 87d4382
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 5 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -12,6 +12,7 @@ module.exports = function(eleventyConfig) {
     });
 
     eleventyConfig.addPassthroughCopy("src/favicon.png");
+    eleventyConfig.addPassthroughCopy("src/img/*");
 
     return {
         dir: {

diff --git a/src/_includes/moon/base.css b/src/_includes/moon/base.css
@@ -1,18 +1,47 @@
 html {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+}
+
+body {
     align-items: center;
     background: linear-gradient(#01080c, #04293d);
     background-size: 200%;
     display: flex;
+    flex-direction: column;
     height: 100%;
     justify-content: center;
+    margin: 0;
+    padding: 0;
     width: 100%;
 }
 
 .content {
+    align-items: center;
     display: flex;
-    font-size: 96pt
+    flex-grow: 1;
+    font-size: 96pt;
 }
 
 .links {
-    display: none;
+    display: flex;
+    flex-direction: row;
+    justify-content: right;
+    margin-top: 20px;
+    margin-right: 50px;
+    width: 100%;
+}
+
+.links a {
+    margin-right: 25px;
+}
+
+.links a:last-child {
+    margin-right: 0px;
+}
+
+.links img {
+    width: 24px;
 }
diff --git a/src/_includes/moon/base.js b/src/_includes/moon/base.js
@@ -8,5 +8,12 @@ window.onload = function() {
     const phase_pc = phase_ms % lunarCycle_ms / lunarCycle_ms;
     const index = Math.round(elems.length * phase_pc) % elems.length;
 
-    document.getElementsByClassName("content")[0].innerHTML = elems[index];
+    const content = document.getElementsByClassName("content")[0];
+    content.innerHTML = elems[index];
+
+    var toggle = false;
+    content.onclick = function() {
+        toggle = !toggle;
+        content.innerHTML = toggle ? "👽" : elems[index];        
+    }
 };
diff --git a/src/_includes/moon/base.njk b/src/_includes/moon/base.njk
@@ -8,12 +8,14 @@
         <style>{% cssmin %}{% include "./base.css" %}{% endcssmin %}</style>
     </head>
     <body>
-        <div class="content"></div>
         <div class="links">
             {%- for link in links %}
-            <a rel="{{ link.rel }}" href="{{ link.href }}">{{ link.name }}</a>
+            <a rel="{{ link.rel }}" href="{{ link.href }}">
+                <img src="img/{{ link.img }}" alt="{{ link.name }}" />
+            </a>
             {%- endfor %}
         </div>
+        <div class="content"></div>
         <script>{% jsmin %}{% include "./base.js" %}{% endjsmin %}</script>
     </body>
 </html>
diff --git a/src/img/github.svg b/src/img/github.svg
diff --git a/src/img/mastodon.svg b/src/img/mastodon.svg
diff --git a/src/index.md b/src/index.md
@@ -2,7 +2,12 @@
 title: Gareth Williamson
 layout: moon/base
 links:
+  - name: GitHub
+    href: https://github.com/gwllx
+    rel: link
+    img: github.svg
   - name: Mastodon
     href: https://mastodon.social/@gwllx
     rel: me
+    img: mastodon.svg
 ---