jonasled2/website
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

get scss to build

Browse source
This commit is contained in:
Jonas Leder 2022-01-29 00:05:02 +01:00
parent 3e1d74dd10
commit 81c4d8cdb6
20 changed files with 120 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/scss/error.scss
View file

@ -1,7 +1,7 @@
@import "lib/_var";
@use "lib/var" as var;
body {
background: $back-color;
background: var.$back-color;
overflow: hidden;
}

9
src/scss/lib/_colorMixer.scss
View file

@ -1,5 +1,6 @@
@use "lib/_var";
@use "var";
@use "sass:color";
$back-color-2: darken($back-color, $darker-color);
$back-color-3: darken($back-color, $darker-color-2);
$accent-color-2: darken($accent-color, $darker-color);
$back-color-2: color.adjust(var.$back-color, $lightness: - var.$darker-color);
$back-color-3: color.adjust(var.$back-color, $lightness: - var.$darker-color-2);
$accent-color-2: color.adjust(var.$accent-color, $lightness: - var.$darker-color);

20
src/scss/lib/_comments.scss
View file

@ -1,13 +1,13 @@
@use "lib/_var";
@use "lib/_colorMixer";
@use "var";
@use "colorMixer";
#newComment {
form {
input, textarea{
width: 100%;
background-color: $back-color;
color: $text-color;
border: solid $back-color-2;
background-color: var.$back-color;
color: var.$text-color;
border: solid colorMixer.$back-color-2;
border-radius: 5px;
padding: 5px;
}
@ -21,7 +21,7 @@
}
input[type=submit]{
background-color: $accent-color;
background-color: var.$accent-color;
color: #000;
text-transform: uppercase;
padding: 15px;
@ -29,10 +29,10 @@
cursor: pointer;
outline: 0;
border: 0;
transition: background-color $link-hover-animation-time linear;
transition: background-color var.$link-hover-animation-time linear;
&:HOVER{
background-color: $accent-color-2;
background-color: colorMixer.$accent-color-2;
}
}
}
@ -69,7 +69,7 @@
}
.bigButton {
background-color: $accent-color;
background-color: var.$accent-color;
color: #000;
text-transform: uppercase;
padding: 15px;
@ -77,7 +77,7 @@
cursor: pointer;
outline: 0;
border: 0;
transition: background-color $link-hover-animation-time linear;
transition: background-color var.$link-hover-animation-time linear;
width: 100%;
margin-top: 10px;
}

16
src/scss/lib/_content.scss
View file

@ -1,8 +1,8 @@
@use "lib/_var";
@use "lib/_colorMixer";
@use "var";
@use "colorMixer";
#content{
background-color: $back-color;
background-color: var.$back-color;
padding: 20px 20%;
img {
max-width: 40%;
@ -10,7 +10,7 @@
}
article{
border: 2px solid $accent-color;
border: 2px solid var.$accent-color;
border-radius: 20px;
padding: 10px;
margin-right: 10px;
@ -42,13 +42,13 @@ article{
}
.clickSpan{
color: $accent-color;
color: var.$accent-color;
text-decoration: underline;
transition: background-color $link-hover-animation-time linear;
transition: background-color var.$link-hover-animation-time linear;
cursor: pointer;
&:hover{
color: $accent-color-2;
color: colorMixer.$accent-color-2;
}
}
@ -56,5 +56,5 @@ article{
border: 0;
height: 200px;
width: 600px;
background-color: $text-color;
background-color: var.$text-color;
}

18
src/scss/lib/_cookieinfo.scss
View file

@ -1,5 +1,5 @@
@use "lib/_var";
@use "lib/_colorMixer";
@use "var";
@use "colorMixer";
.cookieinfo{
position: fixed;
@ -15,9 +15,9 @@
text-align: center;
bottom: 0;
opacity: 1;
background-color: $back-color-3;
color: $text-color;
border: 1px solid $accent-color;
background-color: colorMixer.$back-color-3;
color: var.$text-color;
border: 1px solid var.$accent-color;
}
@ -29,12 +29,12 @@
margin-left: 5px;
border-radius: 5px;
cursor: pointer;
background-color: $accent-color;
background-color: var.$accent-color;
color: #000;
text-align: center;
&:HOVER{
background-color: $accent-color-2;
background-color: colorMixer.$accent-color-2;
}
}
@ -45,9 +45,9 @@
.cookieinfo-link{
text-decoration: none;
color: $accent-color;
color: var.$accent-color;
&:HOVER{
color: $accent-color-2;
color: colorMixer.$accent-color-2;
}
}

18
src/scss/lib/_footer.scss
View file

@ -1,5 +1,5 @@
@use "lib/_var";
@use "lib/_colorMixer";
@use "var";
@use "colorMixer";
footer{
display: flex;
@ -31,23 +31,23 @@ footer{
}
a{
color: $text-color;
transition: color $link-hover-animation-time;
color: var.$text-color;
transition: color var.$link-hover-animation-time;
&:hover{
color: $accent-color;
color: var.$accent-color;
}
}
a svg {
fill: $text-color;
fill: var.$text-color;
max-width: 30px;
transition: fill $link-hover-animation-time;
transition: fill var.$link-hover-animation-time;
margin-left: 10px;
display: inline;
&:hover{
fill: $accent-color;
fill: var.$accent-color;
}
}
}
@ -56,7 +56,7 @@ footer{
#blueBar{
height: 5px;
width: 100%;
background-color: $content-footer-div-color;
background-color: var.$content-footer-div-color;
}
#newestPost{

24
src/scss/lib/_general.scss
View file

@ -1,5 +1,5 @@
@use "lib/_var";
@use "lib/_colorMixer";
@use "var";
@use "colorMixer";
html {
scroll-behavior: smooth;
@ -7,26 +7,26 @@ html {
body {
margin: 0;
background-color: $back-color-2;
color: $text-color;
background-color: colorMixer.$back-color-2;
color: var.$text-color;
font-family: 'Source Sans Pro', sans-serif;
width: calc(100% - 1px);
height: 100%;
}
button {
background-color: $accent-color;
background-color: var.$accent-color;
color: #000;
text-transform: uppercase;
border: 0;
padding: 5px;
cursor: pointer;
border-radius: 5px;
transition: background-color $link-hover-animation-time linear;
transition: background-color var.$link-hover-animation-time linear;
&:hover,
&:active,
&:focus {
background-color: $accent-color-2;
background-color: colorMixer.$accent-color-2;
outline: none;
}
}
@ -37,11 +37,11 @@ button {
a {
padding: 0;
color: $accent-color;
color: var.$accent-color;
text-decoration: underline;
transition: color $link-hover-animation-time;
transition: color var.$link-hover-animation-time;
&:HOVER {
color: $accent-color-2;
color: colorMixer.$accent-color-2;
}
}
@ -50,7 +50,7 @@ a {
}
h1 {
color: $title-color;
color: var.$title-color;
text-transform: uppercase;
}
@ -79,7 +79,7 @@ h1 {
}
img {
border-radius: $border-radius-image;
border-radius: var.$border-radius-image;
&.no-corner {
border-radius: 0;
}

8
src/scss/lib/_header.scss
View file

@ -1,11 +1,11 @@
@use "lib/_var";
@use "lib/_colorMixer";
@use "var";
@use "colorMixer";
.header-wrapper *:before {
box-sizing: border-box;
}
.header-homepage {
background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6)), url(/API/getFile.php?filename=img/bannerHomeCrop.webp);
background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6)), url("../assets/img/bannerHomeCrop.webp");
background-size: cover;
position: relative;
color: #fff;
@ -29,7 +29,7 @@
svg { display: block;
width: calc(100% + 1.3px);
height: 90px;
fill: $back-color;
fill: var.$back-color;
}
}

6
src/scss/lib/_home.scss
View file

@ -1,5 +1,5 @@
@use "lib/_var";
@use "lib/_colorMixer";
@use "var";
@use "colorMixer";
.abuseIpImg{
width: 391px;
@ -14,5 +14,5 @@
#homeImage{
float: left;
margin-right: 20px;
box-shadow: 7px 7px $back-color-2;
box-shadow: 7px 7px colorMixer.$back-color-2;
}

22
src/scss/lib/_menu.scss
View file

@ -1,5 +1,5 @@
@use "lib/_var";
@use "lib/_colorMixer";
@use "var";
@use "colorMixer";
#mainmenu {
position: absolute;
@ -30,22 +30,22 @@
left: 50%;
transform: translateX(-50%);
a {
background-color: $back-color-3;
border-bottom: $back-color-2 solid 2px;
background-color: colorMixer.$back-color-3;
border-bottom: colorMixer.$back-color-2 solid 2px;
width: 100%;
color: $text-color;
transition: background-color $link-hover-animation-time linear;
color: var.$text-color;
transition: background-color var.$link-hover-animation-time linear;
&:first-of-type {
border-top-left-radius: $border-radius-sub-nav;
border-top-right-radius: $border-radius-sub-nav;
border-top-left-radius: var.$border-radius-sub-nav;
border-top-right-radius: var.$border-radius-sub-nav;
}
&:last-of-type {
border-bottom: none;
border-bottom-left-radius: $border-radius-sub-nav;
border-bottom-right-radius: $border-radius-sub-nav;
border-bottom-left-radius: var.$border-radius-sub-nav;
border-bottom-right-radius: var.$border-radius-sub-nav;
}
&:hover {
background-color: $back-color-2;
background-color: colorMixer.$back-color-2;
}
}
}

10
src/scss/lib/_menuMobile.scss
View file

@ -1,5 +1,5 @@
@use "lib/_var";
@use "lib/_colorMixer";
@use "var";
@use "colorMixer";
#burgermenu {
position: absolute;
@ -11,7 +11,7 @@
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: $text-color;
background-color: var.$text-color;
margin: 6px 0;
transition: 0.4s;
}
@ -28,7 +28,7 @@
}
}
@media only screen and (max-width: $mobile-max-width) {
@media only screen and (max-width: var.$mobile-max-width) {
#burgermenu{
display: inline-block;
}
@ -41,7 +41,7 @@
display: none;
text-align: left !important;
background-color: $back-color-3;
background-color: colorMixer.$back-color-3;
width: 100% !important;
a {

6
src/scss/lib/_mobile.scss
View file

@ -1,7 +1,7 @@
@use "lib/_var";
@use "lib/_colorMixer";
@use "var";
@use "colorMixer";
@media only screen and (max-width: $mobile-max-width) {
@media only screen and (max-width: var.$mobile-max-width) {
#homeImage{
float: none;
}

6
src/scss/lib/_mobileSmall.scss
View file

@ -1,7 +1,7 @@
@use "lib/_var";
@use "lib/_colorMixer";
@use "var";
@use "colorMixer";
@media only screen and (max-width: $small-mobile-max-width) {
@media only screen and (max-width: var.$small-mobile-max-width) {
#footerContent{
flex-direction: column;
div {

8
src/scss/lib/_ntp.scss
View file

@ -1,5 +1,5 @@
@use "lib/_var";
@use "lib/_colorMixer";
@use "var";
@use "colorMixer";
.js-plotly-plot {
margin-bottom: 10px;
@ -10,7 +10,7 @@
display: block;
width: 100%;
padding: 10px;
background-color: $back-color-3;
background-color: colorMixer.$back-color-3;
cursor: pointer;
}
@ -18,7 +18,7 @@
width: 100%;
padding: 10px;
display: none;
background-color: $back-color-3;
background-color: colorMixer.$back-color-3;
}
.visible {

5
src/scss/lib/_prism.scss
View file

@ -1,3 +1,6 @@
@use "var";
@use "colorMixer";
/* PrismJS 1.24.1
https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+apacheconf+arduino+aspnet+bash+batch+c+csharp+cpp+cmake+docker+gcode+git+go+ignore+java+json+json5+makefile+markdown+markup-templating+php+powershell+properties+python+jsx+tsx+sas+sass+scss+sql+typescript+typoscript+yaml&plugins=line-numbers+autolinker */
/**
@ -9,7 +12,7 @@ https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+cli
code[class*="language-"],
pre[class*="language-"] {
color: #ccc;
background: $back-color-2;
background: colorMixer.$back-color-2;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 1em;
text-align: left;

4
src/scss/lib/_pwgen.scss
View file

@ -1,5 +1,5 @@
@use "lib/_var";
@use "lib/_colorMixer";
@use "var";
@use "colorMixer";
jl-pwgen {
input[type="text"] {

6
src/scss/lib/_sellingTable.scss
View file

@ -1,5 +1,5 @@
@use "lib/_var";
@use "lib/_colorMixer";
@use "var";
@use "colorMixer";
jl-selling-table {
table {
@ -13,6 +13,6 @@ jl-selling-table {
}
tr:nth-child(even) {
background-color: $back-color-2;
background-color: colorMixer.$back-color-2;
}
}

4
src/scss/lib/_skills.scss
View file

@ -1,5 +1,5 @@
@use "lib/_var";
@use "lib/_colorMixer";
@use "var";
@use "colorMixer";
.skills {
max-height: 80px;

4
src/scss/lib/_var.scss
View file

@ -4,8 +4,8 @@ $title-color: #fff;
$accent-color: #20c5ad;
$content-footer-div-color: #03A8F4;
$darker-color: 5;
$darker-color-2: 2;
$darker-color: 5%;
$darker-color-2: 2%;
$border-radius-sub-nav: 10px;
$border-radius-image: 5px;

38
src/scss/style.scss
View file

@ -1,20 +1,20 @@
@use "lib/_var";
@use "lib/_colorMixer";
@use "lib/_general";
@use "lib/_menu";
@use "lib/_normalize";
@use "lib/_ntp";
@use "lib/_header";
@use "lib/_cookieinfo";
@use "lib/_comments";
@use "lib/_footer";
@use "lib/_content";
@use "lib/_mobile";
@use "lib/_menuMobile";
@use "lib/_mobileSmall";
@use "lib/_home";
@use "lib/_prism";
@use "lib/_sellingTable";
@use "lib/_skills";
@use "lib/_pwgen";
@use "lib/var";
@use "lib/colorMixer";
@use "lib/general";
@use "lib/menu";
@use "lib/normalize";
@use "lib/ntp";
@use "lib/header";
@use "lib/cookieinfo";
@use "lib/comments";
@use "lib/footer";
@use "lib/content";
@use "lib/mobile";
@use "lib/menuMobile";
@use "lib/mobileSmall";
@use "lib/home";
@use "lib/prism";
@use "lib/sellingTable";
@use "lib/skills";
@use "lib/pwgen";
@use "npm:basiclightbox/src/styles/main.scss"