Finished and cleaned up first theme
This commit is contained in:
parent
5175cb3150
commit
0b82559f15
6 changed files with 54 additions and 8 deletions
|
|
@ -8,4 +8,11 @@ links:
|
||||||
color: "#0D0D0D" # or that if you want to set it to an exact color
|
color: "#0D0D0D" # or that if you want to set it to an exact color
|
||||||
- text: "Twitter"
|
- text: "Twitter"
|
||||||
hyperlink: "test"
|
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"
|
||||||
|
|
@ -19,6 +19,7 @@ app.get('/', (req, res) => {
|
||||||
name: config.name,
|
name: config.name,
|
||||||
filenameProfilePic: config.profilePic ? config.profilePic : 'profilepic.jpg',
|
filenameProfilePic: config.profilePic ? config.profilePic : 'profilepic.jpg',
|
||||||
links: config.links,
|
links: config.links,
|
||||||
|
smallLinks: config.smallLinks,
|
||||||
theme: config.theme
|
theme: config.theme
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
@import '../util/main.scss';
|
@import '../util/main.scss';
|
||||||
@import '../util/simple-basic.scss';
|
@import '../util/simple-basic.scss';
|
||||||
|
@import '../util/colors.scss';
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-image: linear-gradient(165deg, #c7a25c 0%, #ff9601 43%, #980d0d 100%);
|
background-image: linear-gradient(165deg, #c7a25c 0%, #ff9601 43%, #980d0d 100%);
|
||||||
|
|
@ -7,4 +8,25 @@ body {
|
||||||
|
|
||||||
.headingbox {
|
.headingbox {
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mainLinkbox {
|
||||||
|
>a {
|
||||||
|
>button {
|
||||||
|
background-color: $no_alpha;
|
||||||
|
color: $white;
|
||||||
|
border-color: $white;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: $white;
|
||||||
|
color: #ff9601;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.smallLinkbox {
|
||||||
|
a {
|
||||||
|
color: $white;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -24,7 +24,7 @@ body {
|
||||||
border-radius: .5rem;
|
border-radius: .5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.linkbox {
|
.mainLinkbox {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
|
|
@ -33,19 +33,27 @@ body {
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
background-color: $no_alpha;
|
border: 4px solid;
|
||||||
color: $white;
|
|
||||||
border: 4px solid $white;
|
|
||||||
width: 750px;
|
width: 750px;
|
||||||
height: 3rem;
|
height: 3rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background-color .25s ease-in-out, color .25s ease-in-out;
|
transition: background-color .25s ease-in-out, color .25s ease-in-out;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: $white;
|
|
||||||
color: #ff9601;
|
|
||||||
background-position: 2rem;
|
background-position: 2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.smallLinkbox {
|
||||||
|
margin: 1rem 0;
|
||||||
|
max-width: 500px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 1rem;
|
||||||
|
a {
|
||||||
|
font-size: 2rem;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -7,12 +7,19 @@
|
||||||
<div class="headingbox">
|
<div class="headingbox">
|
||||||
<h1><%= name %></h1>
|
<h1><%= name %></h1>
|
||||||
</div>
|
</div>
|
||||||
<div class="linkbox">
|
<div class="mainLinkbox">
|
||||||
<% links.forEach(link => { %>
|
<% links.forEach(link => { %>
|
||||||
<a href="<%= link.hyperlink %>">
|
<a href="<%= link.hyperlink %>">
|
||||||
<button class="<%= `${link.brandcolor} ${link.color}` %>"><%= link.text %></button>
|
<button class="<%= `${link.brandcolor} ${link.color}` %>"><%= link.text %></button>
|
||||||
</a>
|
</a>
|
||||||
<% }) %>
|
<% }) %>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
<%- include('partials/footer') %>
|
<%- include('partials/footer') %>
|
||||||
|
|
@ -2,5 +2,6 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<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">
|
<link rel="stylesheet" href="style/<%= theme %>.css">
|
||||||
</head>
|
</head>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue