Finished and cleaned up first theme

2022-10-28 08:57:30 +02:00 · 2022-10-28 08:57:30 +02:00 · 0b82559f15
commit 0b82559f15
parent 5175cb3150
6 changed files with 54 additions and 8 deletions
--- a/config/config.yml
+++ b/config/config.yml
@ -8,4 +8,11 @@ links:
    color: "#0D0D0D"                            # or that if you want to set it to an exact color
  - text: "Twitter"
    hyperlink: "test"
-    brandcolor: "twitter"
+    brandcolor: "twitter"
+smallLinks:
+  - platform: "twitter"
+    hyperlink: "https://twitter.com"
+  - platform: "facebook"
+    hyperlink: "https://facebook.com"
+  - platform: "youtube"
+    hyperlink: "https://youtu.be"
--- a/src/index.js
+++ b/src/index.js
@ -19,6 +19,7 @@ app.get('/', (req, res) => {
        name: config.name,
        filenameProfilePic: config.profilePic ? config.profilePic : 'profilepic.jpg',
        links: config.links,
+        smallLinks: config.smallLinks,
        theme: config.theme
    })
 })
--- a/src/public/themes/simple-orange.scss
+++ b/src/public/themes/simple-orange.scss
@ -1,5 +1,6 @@
@import '../util/main.scss';
@import '../util/simple-basic.scss';
+@import '../util/colors.scss';

 body {
    background-image: linear-gradient(165deg, #c7a25c 0%, #ff9601 43%, #980d0d 100%);
@ -7,4 +8,25 @@ body {

 .headingbox {
    color: #FFFFFF;
+}
+
+.mainLinkbox {
+    >a {
+        >button {
+            background-color: $no_alpha;
+            color: $white;
+            border-color: $white;
+
+            &:hover {
+                background-color: $white;
+                color: #ff9601;
+            }
+        }
+    }
+}
+
+.smallLinkbox {
+    a {
+        color: $white;
+    }
 }
--- a/src/public/util/simple-basic.scss
+++ b/src/public/util/simple-basic.scss
@ -24,7 +24,7 @@ body {
    border-radius: .5rem;
 }

-.linkbox {
+.mainLinkbox {
    display: flex;
    flex-direction: column;
    gap: 1rem;
@ -33,19 +33,27 @@ body {
            font-family: monospace;
            font-size: 1rem;
            font-weight: 600;
-            background-color: $no_alpha;
-            color: $white;
-            border: 4px solid $white;
+            border: 4px solid;
            width: 750px;
            height: 3rem;
            cursor: pointer;
            transition: background-color .25s ease-in-out, color .25s ease-in-out;

            &:hover {
-                background-color: $white;
-                color: #ff9601;
                background-position: 2rem;
            }
        }
    }
+}
+
+.smallLinkbox {
+    margin: 1rem 0;
+    max-width: 500px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    a {
+        font-size: 2rem;
+        text-decoration: none;
+    }
 }
--- a/src/views/index.ejs
+++ b/src/views/index.ejs
@ -7,12 +7,19 @@
    <div class="headingbox">
        <h1><%= name %></h1>
    </div>
-    <div class="linkbox">
+    <div class="mainLinkbox">
        <% links.forEach(link => { %>
        <a href="<%= link.hyperlink %>"> 
            <button class="<%= `${link.brandcolor} ${link.color}` %>"><%= link.text %></button>
        </a>
        <% }) %>
    </div>
+    <div class="smallLinkbox">
+        <% smallLinks.forEach(link => { %>
+            <a href="<%= link.hyperlink %>">
+                <i class="fa fa-<%= link.platform.toLowerCase() %>" aria-hidden="true"></i>
+            </a>
+        <% }) %>
+    </div>
 </div>
 <%- include('partials/footer') %> 
--- a/src/views/partials/head.ejs
+++ b/src/views/partials/head.ejs
@ -2,5 +2,6 @@
 <html>
 <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.2.0/css/fork-awesome.min.css" integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" crossorigin="anonymous">
    <link rel="stylesheet" href="style/<%= theme %>.css">
 </head>