Nikurasu/socialtree
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases 3 Wiki Activity

Finished and cleaned up first theme

Browse source
This commit is contained in:
nikurasu 2022-10-28 08:57:30 +02:00
parent 5175cb3150
commit 0b82559f15
6 changed files with 54 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
config/config.yml
View file

@ -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"

1
src/index.js
View file

@ -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
})
})

22
src/public/themes/simple-orange.scss
View file

@ -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;
}
}

20
src/public/util/simple-basic.scss
View file

@ -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;
}
}

9
src/views/index.ejs
View file

@ -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') %>

1
src/views/partials/head.ejs
View file

@ -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>