Added scss

This commit is contained in:
nikurasu 2022-10-18 09:20:54 +02:00
parent c5c5639043
commit 69a49f8df7
11 changed files with 86 additions and 10 deletions

View file

@ -1,5 +1,6 @@
name: "Nikurasu" # The name on the linktree
# profilePic: # uncomment and set this if your profile pic has a custom name
theme: 'simple-orange'
links:
- text: "YouTube" # text on the link
hyperlink: "Test" # the actual hyperlink

View file

@ -8,12 +8,15 @@
"license": "MIT",
"scripts": {
"start": "node src/index.js",
"dev": "nodemon src/index.js"
"dev": "nodemon src/index.js & sass --watch src/public/themes:src/dist/style",
"watch-css": "sass --watch src/public/themes:src/dist/style",
"build": "sass src/public/themes:src/dist/style"
},
"dependencies": {
"ejs": "^3.1.8",
"express": "^4.18.2",
"js-yaml": "^4.1.0"
"js-yaml": "^4.1.0",
"sass": "^1.55.0"
},
"devDependencies": {
"nodemon": "^2.0.20"

44
src/dist/style/simple-orange.css vendored Normal file
View file

@ -0,0 +1,44 @@
* {
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
}
.container {
padding-top: 3rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.headingbox > h1 {
font-size: 1.5rem;
font-weight: 800;
font-family: monospace;
}
.imgbox > img {
height: 10rem;
width: 10rem;
border-radius: 0.5rem;
}
.linkbox {
display: flex;
flex-direction: column;
gap: 1rem;
}
body {
background-image: linear-gradient(165deg, #c7a25c 0%, #ff9601 43%, #980d0d 100%);
}
.headingbox {
color: #FFFFFF;
}
/*# sourceMappingURL=simple-orange.css.map */

1
src/dist/style/simple-orange.css.map vendored Normal file
View file

@ -0,0 +1 @@
{"version":3,"sourceRoot":"","sources":["../../public/util/main.scss","../../public/util/simple-basic.scss","../../public/themes/simple-orange.scss"],"names":[],"mappings":"AAAA;EACI;EACA;;;ACFJ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;;;ACxBJ;EACI;;;AAGJ;EACI","file":"simple-orange.css"}

View file

@ -1,6 +1,6 @@
import express from 'express'
import yaml from 'js-yaml'
import fs, { cpSync } from 'node:fs'
import fs from 'node:fs'
console.log('🔧 Configuring socialtree...')
@ -10,7 +10,7 @@ const engine = 'ejs'
app.set('view engine', engine)
app.set('views', './src/views')
app.use(express.static('src/public'))
app.use(express.static('src/dist'))
app.use(express.static('src/assets'))
app.get('/', (req, res) => {
@ -18,7 +18,8 @@ app.get('/', (req, res) => {
res.render('index', {
name: config.name,
filenameProfilePic: config.profilePic ? config.profilePic : 'profilepic.jpg',
links: config.links
links: config.links,
theme: config.theme
})
})

View file

@ -1,3 +1,6 @@
@import '../util/main.scss';
@import '../util/simple-basic.scss';
body {
background-image: linear-gradient(165deg, #c7a25c 0%, #ff9601 43%, #980d0d 100%);
}

View file

@ -20,4 +20,10 @@ body {
height: 10rem;
width: 10rem;
border-radius: .5rem;
}
.linkbox {
display: flex;
flex-direction: column;
gap: 1rem;
}

View file

@ -9,7 +9,7 @@
</div>
<div class="linkbox">
<% links.forEach(link => { %>
<p>Hello World</p>
<button class="<%= `${link.brandcolor} ${link.color}` %>"><%= link.text %></button>
<% }) %>
</div>
</div>

View file

@ -2,7 +2,5 @@
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="simple-basic.css">
<link rel="stylesheet" href="simple-orange.css">
<link rel="stylesheet" href="style/<%= theme %>.css">
</head>

View file

@ -116,7 +116,7 @@ chalk@^4.0.2:
ansi-styles "^4.1.0"
supports-color "^7.1.0"
chokidar@^3.5.2:
"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.2:
version "3.5.3"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@ -366,6 +366,11 @@ ignore-by-default@^1.0.1:
resolved "https://registry.yarnpkg.com/ignore-by-default/-/ignore-by-default-1.0.1.tgz#48ca6d72f6c6a3af00a9ad4ae6876be3889e2b09"
integrity sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==
immutable@^4.0.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.1.0.tgz#f795787f0db780183307b9eb2091fcac1f6fafef"
integrity sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==
inherits@2.0.4:
version "2.0.4"
resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
@ -585,6 +590,15 @@ safe-buffer@5.2.1:
resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
sass@^1.55.0:
version "1.55.0"
resolved "https://registry.yarnpkg.com/sass/-/sass-1.55.0.tgz#0c4d3c293cfe8f8a2e8d3b666e1cf1bff8065d1c"
integrity sha512-Pk+PMy7OGLs9WaxZGJMn7S96dvlyVBwwtToX895WmCpAOr5YiJYEUJfiJidMuKb613z2xNWcXCHEuOvjZbqC6A==
dependencies:
chokidar ">=3.0.0 <4.0.0"
immutable "^4.0.0"
source-map-js ">=0.6.2 <2.0.0"
semver@^5.7.1:
version "5.7.1"
resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
@ -645,6 +659,11 @@ simple-update-notifier@^1.0.7:
dependencies:
semver "~7.0.0"
"source-map-js@>=0.6.2 <2.0.0":
version "1.0.2"
resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
statuses@2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.1.tgz#55cb000ccf1d48728bd23c685a063998cf1a1b63"