Introducing a summaryText and mobile optimizations

This commit is contained in:
nikurasu 2022-11-11 15:49:08 +01:00
parent 92f3e4168b
commit be7d591fe5
4 changed files with 34 additions and 8 deletions

View file

@ -1,4 +1,5 @@
name: "Nikurasu" # The name on the linktree 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 # profilePic: # uncomment and set this if your profile pic has a custom name
theme: 'simple-orange' theme: 'simple-orange'
links: links:

View file

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

View file

@ -1,6 +1,8 @@
@import "colors.scss"; @import "colors.scss";
body { body {
display: flex;
justify-content: center;
min-height: 100vh; min-height: 100vh;
} }
@ -12,10 +14,28 @@ body {
gap: .5rem; gap: .5rem;
} }
.headingbox>h1 { .headingbox{
font-size: 1.5rem;
font-weight: 800;
font-family: monospace; 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;
}
.summaryBox {
max-width: 90vw;
width: 750px;
.summaryText {
font-weight: 600;
font-size: 1rem;
text-align: center;
}
}
} }
.imgbox>img { .imgbox>img {
@ -35,20 +55,19 @@ body {
font-weight: 600; font-weight: 600;
border: 4px solid; border: 4px solid;
width: 750px; width: 750px;
max-width: 90vw;
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 {
background-position: 2rem;
}
} }
} }
} }
.smallLinkbox { .smallLinkbox {
margin: 1rem 0; margin: 1rem 0;
max-width: 500px; width: 500px;
max-width: 90vw;
justify-content: center;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 1rem; gap: 1rem;

View file

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