Introducing a summaryText and mobile optimizations

assets/config/config.yml

@@ -1,4 +1,5 @@
 name: "Nikurasu"                                # The name on the linktree
+# summaryText: 'A simple sample text'           # A short summary for what you do, will appear under the name if uncommened
 # profilePic:                                   # uncomment and set this if your profile pic has a custom name
 theme: 'simple-orange'
 links:

src/index.js

@@ -20,6 +20,7 @@ app.get('/', (req, res) => {
     res.render('index', {
         name: config.name,
         filenameProfilePic: config.profilePic ? config.profilePic : 'profilepic.jpg',
+        summaryText: config.summaryText ? config.summaryText: '',
         links: config.links,
         smallLinks: config.smallLinks,
         theme: config.theme

src/public/util/simple-basic.scss

@@ -1,6 +1,8 @@
 @import "colors.scss";
 
 body {
+    display: flex;
+    justify-content: center;
     min-height: 100vh;
 }
 
@@ -12,10 +14,28 @@ body {
     gap: .5rem;
 }
 
-.headingbox>h1 {
+.headingbox{
+    font-family: monospace;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: .5rem;
+    margin-bottom: 1.5rem;
+
+    h1 {
         font-size: 1.5rem;
         font-weight: 800;
-    font-family: monospace;
+    }
+
+    .summaryBox {
+        max-width: 90vw;
+        width: 750px;
+        .summaryText {
+            font-weight: 600;
+            font-size: 1rem;
+            text-align: center;
+        }
+    }
 }
 
 .imgbox>img {
@@ -35,20 +55,19 @@ body {
             font-weight: 600;
             border: 4px solid;
             width: 750px;
+            max-width: 90vw;
             height: 3rem;
             cursor: pointer;
             transition: background-color .25s ease-in-out, color .25s ease-in-out;
-
-            &:hover {
-                background-position: 2rem;
-            }
         }
     }
 }
 
 .smallLinkbox {
     margin: 1rem 0;
-    max-width: 500px;
+    width: 500px;
+    max-width: 90vw;
+    justify-content: center;
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;

src/views/index.ejs

@@ -6,6 +6,11 @@
     </div>
     <div class="headingbox">
         <h1><%= name %></h1>
+        <% if(summaryText !== '') { %>
+            <div class="summaryBox">
+                <p class="summaryText"><%= summaryText %></p>
+            </div>
+        <% } %>
     </div>
     <div class="mainLinkbox">
         <% links.forEach(link => { %>