jonasled2/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 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 { body {
background: $back-color; background: var.$back-color;
overflow: hidden; 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-2: color.adjust(var.$back-color, $lightness: - var.$darker-color);
$back-color-3: darken($back-color, $darker-color-2); $back-color-3: color.adjust(var.$back-color, $lightness: - var.$darker-color-2);
$accent-color-2: darken($accent-color, $darker-color); $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 "var";
@use "lib/_colorMixer"; @use "colorMixer";
#newComment { #newComment {
form { form {
input, textarea{ input, textarea{
width: 100%; width: 100%;
background-color: $back-color; background-color: var.$back-color;
color: $text-color; color: var.$text-color;
border: solid $back-color-2; border: solid colorMixer.$back-color-2;
border-radius: 5px; border-radius: 5px;
padding: 5px; padding: 5px;
} }
@ -21,7 +21,7 @@
} }
input[type=submit]{ input[type=submit]{
background-color: $accent-color; background-color: var.$accent-color;
color: #000; color: #000;
text-transform: uppercase; text-transform: uppercase;
padding: 15px; padding: 15px;
@ -29,10 +29,10 @@
cursor: pointer; cursor: pointer;
outline: 0; outline: 0;
border: 0; border: 0;
transition: background-color $link-hover-animation-time linear; transition: background-color var.$link-hover-animation-time linear;
&:HOVER{ &:HOVER{
background-color: $accent-color-2; background-color: colorMixer.$accent-color-2;
} }
} }
} }
@ -69,7 +69,7 @@
} }
.bigButton { .bigButton {
background-color: $accent-color; background-color: var.$accent-color;
color: #000; color: #000;
text-transform: uppercase; text-transform: uppercase;
padding: 15px; padding: 15px;
@ -77,7 +77,7 @@
cursor: pointer; cursor: pointer;
outline: 0; outline: 0;
border: 0; border: 0;
transition: background-color $link-hover-animation-time linear; transition: background-color var.$link-hover-animation-time linear;
width: 100%; width: 100%;
margin-top: 10px; margin-top: 10px;
} }

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

@ -1,8 +1,8 @@
@use "lib/_var"; @use "var";
@use "lib/_colorMixer"; @use "colorMixer";
#content{ #content{
background-color: $back-color; background-color: var.$back-color;
padding: 20px 20%; padding: 20px 20%;
img { img {
max-width: 40%; max-width: 40%;
@ -10,7 +10,7 @@
} }
article{ article{
border: 2px solid $accent-color; border: 2px solid var.$accent-color;
border-radius: 20px; border-radius: 20px;
padding: 10px; padding: 10px;
margin-right: 10px; margin-right: 10px;
@ -42,13 +42,13 @@ article{
} }
.clickSpan{ .clickSpan{
color: $accent-color; color: var.$accent-color;
text-decoration: underline; text-decoration: underline;
transition: background-color $link-hover-animation-time linear; transition: background-color var.$link-hover-animation-time linear;
cursor: pointer; cursor: pointer;
&:hover{ &:hover{
color: $accent-color-2; color: colorMixer.$accent-color-2;
} }
} }
@ -56,5 +56,5 @@ article{
border: 0; border: 0;
height: 200px; height: 200px;
width: 600px; 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 "var";
@use "lib/_colorMixer"; @use "colorMixer";
.cookieinfo{ .cookieinfo{
position: fixed; position: fixed;
@ -15,9 +15,9 @@
text-align: center; text-align: center;
bottom: 0; bottom: 0;
opacity: 1; opacity: 1;
background-color: $back-color-3; background-color: colorMixer.$back-color-3;
color: $text-color; color: var.$text-color;
border: 1px solid $accent-color; border: 1px solid var.$accent-color;
} }
@ -29,12 +29,12 @@
margin-left: 5px; margin-left: 5px;
border-radius: 5px; border-radius: 5px;
cursor: pointer; cursor: pointer;
background-color: $accent-color; background-color: var.$accent-color;
color: #000; color: #000;
text-align: center; text-align: center;
&:HOVER{ &:HOVER{
background-color: $accent-color-2; background-color: colorMixer.$accent-color-2;
} }
} }
@ -45,9 +45,9 @@
.cookieinfo-link{ .cookieinfo-link{
text-decoration: none; text-decoration: none;
color: $accent-color; color: var.$accent-color;
&:HOVER{ &: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 "var";
@use "lib/_colorMixer"; @use "colorMixer";
footer{ footer{
display: flex; display: flex;
@ -31,23 +31,23 @@ footer{
} }
a{ a{
color: $text-color; color: var.$text-color;
transition: color $link-hover-animation-time; transition: color var.$link-hover-animation-time;
&:hover{ &:hover{
color: $accent-color; color: var.$accent-color;
} }
} }
a svg { a svg {
fill: $text-color; fill: var.$text-color;
max-width: 30px; max-width: 30px;
transition: fill $link-hover-animation-time; transition: fill var.$link-hover-animation-time;
margin-left: 10px; margin-left: 10px;
display: inline; display: inline;
&:hover{ &:hover{
fill: $accent-color; fill: var.$accent-color;
} }
} }
} }
@ -56,7 +56,7 @@ footer{
#blueBar{ #blueBar{
height: 5px; height: 5px;
width: 100%; width: 100%;
background-color: $content-footer-div-color; background-color: var.$content-footer-div-color;
} }
#newestPost{ #newestPost{

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

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

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

@ -1,11 +1,11 @@
@use "lib/_var"; @use "var";
@use "lib/_colorMixer"; @use "colorMixer";
.header-wrapper *:before { .header-wrapper *:before {
box-sizing: border-box; box-sizing: border-box;
} }
.header-homepage { .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; background-size: cover;
position: relative; position: relative;
color: #fff; color: #fff;
@ -29,7 +29,7 @@
svg { display: block; svg { display: block;
width: calc(100% + 1.3px); width: calc(100% + 1.3px);
height: 90px; 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 "var";
@use "lib/_colorMixer"; @use "colorMixer";
.abuseIpImg{ .abuseIpImg{
width: 391px; width: 391px;
@ -14,5 +14,5 @@
#homeImage{ #homeImage{
float: left; float: left;
margin-right: 20px; 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 "var";
@use "lib/_colorMixer"; @use "colorMixer";
#mainmenu { #mainmenu {
position: absolute; position: absolute;
@ -30,22 +30,22 @@
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
a { a {
background-color: $back-color-3; background-color: colorMixer.$back-color-3;
border-bottom: $back-color-2 solid 2px; border-bottom: colorMixer.$back-color-2 solid 2px;
width: 100%; width: 100%;
color: $text-color; color: var.$text-color;
transition: background-color $link-hover-animation-time linear; transition: background-color var.$link-hover-animation-time linear;
&:first-of-type { &:first-of-type {
border-top-left-radius: $border-radius-sub-nav; border-top-left-radius: var.$border-radius-sub-nav;
border-top-right-radius: $border-radius-sub-nav; border-top-right-radius: var.$border-radius-sub-nav;
} }
&:last-of-type { &:last-of-type {
border-bottom: none; border-bottom: none;
border-bottom-left-radius: $border-radius-sub-nav; border-bottom-left-radius: var.$border-radius-sub-nav;
border-bottom-right-radius: $border-radius-sub-nav; border-bottom-right-radius: var.$border-radius-sub-nav;
} }
&:hover { &: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 "var";
@use "lib/_colorMixer"; @use "colorMixer";
#burgermenu { #burgermenu {
position: absolute; position: absolute;
@ -11,7 +11,7 @@
.bar1, .bar2, .bar3 { .bar1, .bar2, .bar3 {
width: 35px; width: 35px;
height: 5px; height: 5px;
background-color: $text-color; background-color: var.$text-color;
margin: 6px 0; margin: 6px 0;
transition: 0.4s; 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{ #burgermenu{
display: inline-block; display: inline-block;
} }
@ -41,7 +41,7 @@
display: none; display: none;
text-align: left !important; text-align: left !important;
background-color: $back-color-3; background-color: colorMixer.$back-color-3;
width: 100% !important; width: 100% !important;
a { a {

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

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

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

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

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

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

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

@ -1,3 +1,6 @@
@use "var";
@use "colorMixer";
/* PrismJS 1.24.1 /* 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 */ 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-"], code[class*="language-"],
pre[class*="language-"] { pre[class*="language-"] {
color: #ccc; color: #ccc;
background: $back-color-2; background: colorMixer.$back-color-2;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 1em; font-size: 1em;
text-align: left; text-align: left;

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

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

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

@ -1,5 +1,5 @@
@use "lib/_var"; @use "var";
@use "lib/_colorMixer"; @use "colorMixer";
jl-selling-table { jl-selling-table {
table { table {
@ -13,6 +13,6 @@ jl-selling-table {
} }
tr:nth-child(even) { 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 "var";
@use "lib/_colorMixer"; @use "colorMixer";
.skills { .skills {
max-height: 80px; max-height: 80px;

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

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

38
src/scss/style.scss
View file

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