Nikurasu/socialtree-jigsaw
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Switched to scss

Browse source
This commit is contained in:
Nikurasu 2022-04-30 23:21:31 +02:00
parent 2af64685d7
commit be6deda6a7
5 changed files with 76 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
source/_assets/sass/global-colors.sass
View file

@ -1,6 +0,0 @@
//Some Basic colors
$g_white: #FFFFFF
$g_black: #000000
$g_blue: #0000ff
$g_green: #00ff00
$g_red: #ff0000

6
source/_assets/sass/global-colors.scss Normal file
View file

@ -0,0 +1,6 @@
//Some Basic colors
$g_white: #FFFFFF;
$g_black: #000000;
$g_blue: #0000ff;
$g_green: #00ff00;
$g_red: #ff0000;

64
source/_assets/sass/main.sass
View file

@ -1,64 +0,0 @@
// Colors
@import "global-colors"
$gradient1: #c7a25c
$gradient2: #ff9601
$gradient3: #980d0d
body
margin: 0
padding: 0
display: flex
justify-content: center
background-image: linear-gradient(165deg, $gradient1 0%, $gradient2 43%, $gradient3 100%)
min-height: 100vh
font-family: monospace
.mainContainer
margin-top: 3rem
width: 95%
display: flex
flex-direction: column
align-items: center
h1
text-align: center
font-weight: 800
font-size: 1.5rem
color: $g_white
img
height: 8rem
width: 8rem
border-radius: 50%
object-fit: cover
.linkBox
display: flex
flex-direction: column
width: 750px
max-width: 90%
align-items: center
a
$height: 3rem
$transitionDuration: 0.25s
margin-top: 0.5rem
margin-bottom: 0.5rem
width: 100%
height: $height
line-height: $height
text-align: center
border-style: solid
border-color: $g_white
border-width: 4px
color: $g_white
text-decoration: none
font-size: 1rem
font-weight: 600
transition: background-color $transitionDuration ease-in-out, color $transitionDuration ease-in-out
&:hover
background-color: $g_white
color: $gradient2
//@TODO Add colors for different Platforms

69
source/_assets/sass/main.scss Normal file
View file

@ -0,0 +1,69 @@
// Colors
@import "global-colors";
$gradient1: #c7a25c;
$gradient2: #ff9601;
$gradient3: #980d0d;
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
background-image: linear-gradient(165deg, $gradient1 0%, $gradient2 43%, $gradient3 100%);
min-height: 100vh;
font-family: monospace;
}
.mainContainer {
margin-top: 3rem;
width: 95%;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
text-align: center;
font-weight: 800;
font-size: 1.5rem;
color: $g_white;
}
img {
height: 8rem;
width: 8rem;
border-radius: 50%;
object-fit: cover;
}
.linkBox {
display: flex;
flex-direction: column;
width: 750px;
max-width: 90%;
align-items: center;
}
a {
$height: 3rem;
$transitionDuration: 0.25s;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
width: 100%;
height: $height;
line-height: $height;
text-align: center;
border-style: solid;
border-color: $g_white;
border-width: 4px;
color: $g_white;
text-decoration: none;
font-size: 1rem;
font-weight: 600;
transition: background-color $transitionDuration ease-in-out, color $transitionDuration ease-in-out;
&:hover {
background-color: $g_white;
color: $gradient2;
}
}
//@TODO Add colors for different Platforms

2
webpack.mix.js
View file

@ -5,7 +5,7 @@ mix.disableSuccessNotifications();
mix.setPublicPath('source/assets/build');
mix.jigsaw()
.sass('source/_assets/sass/main.sass', 'css')
.sass('source/_assets/sass/main.scss', 'css')
.options({
processCssUrls: false,
})