Added the 98 theme from socialtree-jigsaw

This commit is contained in:
Nikurasu 2023-01-07 23:16:27 +01:00
parent 5ad1389583
commit 5834d5d657
5 changed files with 93 additions and 3 deletions

View file

@ -8,8 +8,11 @@
- [X] Dockerize - [X] Dockerize
### TODO until 1.0: ### TODO until 1.0:
- [ ] Import my styles from the old socialtree - [X] Import my styles from the old socialtree
- [X] Overwrite for round profile pictures - [X] Overwrite for round profile pictures
- [ ] Testing if everything works like expected
- [ ] Expand Documentation
- [ ] Rewrite README
## Setup ## Setup
A up to date docker image is provided at my gitea, but you can also build it yourself. A up to date docker image is provided at my gitea, but you can also build it yourself.

View file

@ -2,7 +2,7 @@ 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 # 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
roundPB: false roundPB: false
theme: 'simple-orange' theme: '98'
links: links:
- text: "YouTube" # text on the link - text: "YouTube" # text on the link
hyperlink: "Test" # the actual hyperlink hyperlink: "Test" # the actual hyperlink

View file

@ -11,7 +11,7 @@ const port = process.env.PORT || 3000
const engine = 'ejs' const engine = 'ejs'
const customMainTagThemes = [ const customMainTagThemes = [
'89' '98'
] ]
app.set('view engine', engine) app.set('view engine', engine)

40
src/public/themes/98.scss Normal file
View file

@ -0,0 +1,40 @@
@import '../util/main.scss';
body {
background-color: #008080;
}
.container {
margin: 2rem 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
.img-window {
width: 11rem;
img {
width: 10rem;
}
}
.link-window {
width: 750px;
max-width: 90vw;
.mainLinkbox {
margin: .5rem 0;
display: flex;
flex-direction: column;
align-items: center;
gap: .5rem
}
.smallLinkbox {
a {
text-decoration: none;
color: unset;
}
}
}
}

View file

@ -0,0 +1,47 @@
<div class="container">
<div class="window img-window">
<div class="title-bar">
<div class="title-bar-text">ImgViewer.exe</div>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Maximize"></button>
<button aria-label="Close"></button>
</div>
</div>
<div class="imgbox window-body">
<img src="img/<%= filenameProfilePic %> " alt="">
</div>
</div>
<div class="window link-window">
<div class="title-bar">
<div class="title-bar-text"><%= name %>.exe</div>
<div class="title-bar-controls">
<button aria-label="Minimize"></button>
<button aria-label="Maximize"></button>
<button aria-label="Close"></button>
</div>
</div>
<div class="mainLinkbox">
<% links.forEach(link => { %>
<a <% if(link.verify && link.verify.toLowerCase() === 'mastodon') { %> rel="me" <% } %> href="<%= link.hyperlink %>">
<button class="<%= `${link.brandcolor} ${link.color}` %>"><%= link.text %></button>
</a>
<% }) %>
</div>
<div class="status-bar">
<div class="smallLinkbox status-bar-field">
<% smallLinks.forEach(link => { %>
<a href="<%= link.hyperlink %>">
<i class="fa fa-<%= link.platform.toLowerCase() %>" aria-hidden="true"></i>
</a>
<% }) %>
</div>
<div class="status-bar-field">
<%= Intl.DateTimeFormat('en-US').format(Date.now()) %>
</div>
<div class="status-bar-field">
Powered by <a href="https://dev.cat-enby.club/Nikurasu/socialtree-js">Socialtree</a>
</div>
</div>
</div>
</div>