FEATURE: Added blurred white theme

This commit is contained in:
nikurasu 2022-11-25 15:31:29 +01:00
parent a7ff51028c
commit 86c9798526
8 changed files with 138 additions and 5 deletions

1
.gitignore vendored
View file

@ -2,3 +2,4 @@ node_modules
src/dist src/dist
dev/docker/stacks/main/assets dev/docker/stacks/main/assets
.env .env
.DS_Store

View file

@ -1,7 +1,7 @@
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 # 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: 'blurred-white'
links: links:
- text: "YouTube" # text on the link - text: "YouTube" # text on the link
hyperlink: "Test" # the actual hyperlink hyperlink: "Test" # the actual hyperlink

BIN
assets/fonts/OpenSans.ttf Normal file

Binary file not shown.

View file

@ -0,0 +1,27 @@
@import '../util/main.scss';
@import '../util/blurred-basic.scss';
@import '../util/colors.scss';
$gradient1: #e0f3ff;
$gradient2: #d5efff;
$gradient3: #a6d0ff;
$gradient4: #c1dbff;
body {
background-image: linear-gradient(120deg, $gradient1, $gradient2, $gradient3, $gradient4, $gradient3, $gradient2, $gradient1);
}
.mainLinkbox {
>a{
>button{
background-color: $white;
}
}
}
.smallLinkbox {
a {
color: $white;
}
}

View file

@ -0,0 +1,102 @@
@import './fonts/open-sans.scss';
@import './encodedImages/noise.scss';
body {
font-family: 'Open Sans', sans-serif;
display: flex;
justify-content: center;
min-height: 100vh;
&::before {
content: '';
background-image: url($noiseTexture);
opacity: 7.5%;
filter: blur(.5px);
position: absolute;
height: 100%;
width: 100%;
z-index: -1;
}
}
.container {
padding-top: 3rem;
display: flex;
flex-direction: column;
align-items: center;
gap: .5rem;
}
.headingbox{
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 {
height: 10rem;
width: 10rem;
border-radius: .5rem;
}
.mainLinkbox {
display: flex;
flex-direction: column;
gap: 1rem;
>a{
>button {
font-family: 'Open Sans', sans-serif;
font-size: 1rem;
font-weight: 600;
border: none;
border-radius: .25rem;
width: 750px;
max-width: 90vw;
height: 3rem;
cursor: pointer;
transition: transform .25s ease-in-out;
filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
&:hover {
transform: scale(1.05);
}
}
}
}
.smallLinkbox {
margin: 1rem 0;
width: 500px;
max-width: 90vw;
justify-content: center;
display: flex;
flex-wrap: wrap;
gap: 1rem;
a {
font-size: 2rem;
text-decoration: none;
filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4));
transition: transform .25s ease-in-out;
&:hover {
transform: scale(1.15);
}
}
}

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,4 @@
@font-face {
font-family: 'Open Sans';
src: url('fonts/OpenSans.ttf'), format('truetype');
}

View file

@ -1,6 +1,5 @@
@import "colors.scss";
body { body {
font-family: monospace;
display: flex; display: flex;
justify-content: center; justify-content: center;
min-height: 100vh; min-height: 100vh;
@ -15,7 +14,6 @@ body {
} }
.headingbox{ .headingbox{
font-family: monospace;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;