From 0b82559f15a092f0f3c8a3f7567636a4813c68bf Mon Sep 17 00:00:00 2001
From: nikurasu <publicmail@nikurasu.gay>
Date: Fri, 28 Oct 2022 08:57:30 +0200
Subject: [PATCH] Finished and cleaned up first theme

---
 config/config.yml                    |  9 ++++++++-
 src/index.js                         |  1 +
 src/public/themes/simple-orange.scss | 22 ++++++++++++++++++++++
 src/public/util/simple-basic.scss    | 20 ++++++++++++++------
 src/views/index.ejs                  |  9 ++++++++-
 src/views/partials/head.ejs          |  1 +
 6 files changed, 54 insertions(+), 8 deletions(-)

diff --git a/config/config.yml b/config/config.yml
index 9cf0d64..ea76dd6 100644
--- 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"
\ No newline at end of file
+    brandcolor: "twitter"
+smallLinks:
+  - platform: "twitter"
+    hyperlink: "https://twitter.com"
+  - platform: "facebook"
+    hyperlink: "https://facebook.com"
+  - platform: "youtube"
+    hyperlink: "https://youtu.be"
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index 717540a..441d37c 100644
--- 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
     })
 })
diff --git a/src/public/themes/simple-orange.scss b/src/public/themes/simple-orange.scss
index dd9be68..7766b17 100644
--- 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;
+    }
 }
\ No newline at end of file
diff --git a/src/public/util/simple-basic.scss b/src/public/util/simple-basic.scss
index 9ddcefd..1544639 100644
--- 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;
+    }
 }
\ No newline at end of file
diff --git a/src/views/index.ejs b/src/views/index.ejs
index 5963695..8000664 100644
--- 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') %> 
\ No newline at end of file
diff --git a/src/views/partials/head.ejs b/src/views/partials/head.ejs
index 4302063..a8ea2ab 100644
--- 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>