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
# 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:

View file

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

View file

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

View file

@ -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 => { %>