From fc61e0a16b8e261f3a30fd2f7a532e93411b0709 Mon Sep 17 00:00:00 2001
From: Jonas Leder <jonas@jonasled.de>
Date: Mon, 11 Jan 2021 19:12:50 +0100
Subject: [PATCH] move colors in extra file
---
public/internal/header.php | 1 +
scss/_colorMixer.scss | 2 ++
scss/_general.scss | 60 ++++++++++++++++++++++++++------------
scss/_menue.scss | 4 +--
scss/_var.scss | 6 ++++
scss/fas.scss | 1 +
scss/style.scss | 5 ++--
7 files changed, 57 insertions(+), 22 deletions(-)
create mode 100644 scss/_colorMixer.scss
create mode 100644 scss/_var.scss
create mode 100644 scss/fas.scss
diff --git a/public/internal/header.php b/public/internal/header.php
index a0c4a75..cf7ad85 100644
--- a/public/internal/header.php
+++ b/public/internal/header.php
@@ -22,6 +22,7 @@ function getHeader($pagetitle, $navselect)
<title > $pagetitle - Jonas Leder </title >
<link href = "/css/style.css" rel = "stylesheet" >
+ <link href = "/css/fas.css" rel = "stylesheet" >
</head >
<body >
<header >
diff --git a/scss/_colorMixer.scss b/scss/_colorMixer.scss
new file mode 100644
index 0000000..7d24dc5
--- /dev/null
+++ b/scss/_colorMixer.scss
@@ -0,0 +1,2 @@
+$back-color-2: darken($back-color, $darker-color);
+$accent-color-2: darken($accent-color, $darker-color);
\ No newline at end of file
diff --git a/scss/_general.scss b/scss/_general.scss
index e9633c3..53f6478 100644
--- a/scss/_general.scss
+++ b/scss/_general.scss
@@ -1,11 +1,11 @@
body {
margin: 0;
- background-color: #151d28;
- color: #b3b3b3;
+ background-color: $back-color-2;
+ color: $text-color;
font-family: 'Source Sans Pro', sans-serif;
}
#content{
- background-color: #1a2332;
+ background-color: $back-color;
width: 100%;
padding: 20px 20%;
img {
@@ -16,7 +16,7 @@ body {
#blueBar{
height: 5px;
width: 100%;
- background-color: #03A8F4;
+ background-color: $content-footer-div-color;
}
footer{
@@ -30,8 +30,12 @@ footer{
a{
padding: 0;
- color: #b3b3b3;
+ color: $accent-color;
text-decoration:underline;
+
+ &:HOVER{
+ color: $accent-color-2;
+ }
}
.footerIconSpacer{
@@ -48,7 +52,7 @@ a{
}
article{
- border: 2px solid #b3b3b3;
+ border: 2px solid $accent-color;
border-radius: 20px;
padding: 10px;
margin-right: 20px;
@@ -72,13 +76,17 @@ article:last-child{
}
button{
- background: #1cb09a;
+ background-color: $accent-color;
color: #fff;
text-transform: uppercase;
border: 0;
padding: 5px;
cursor: pointer;
border-radius: 5px;
+
+ &:HOVER{
+ background-color: $accent-color-2;
+ }
}
#homeImage{
@@ -103,12 +111,16 @@ button{
h3 {
margin-top: 0;
}
+
+ a {
+ color: $text-color;
+ }
}
.cookieinfo{
position: fixed;
- left: 0px;
- right: 0px;
+ left: 0;
+ right: 0;
height: auto;
min-height: 21px;
z-index: 2147483647;
@@ -117,10 +129,10 @@ button{
font-family: verdana, arial, sans-serif;
font-size: 14px;
text-align: center;
- bottom: 0px;
+ bottom: 0;
opacity: 1;
- background: #1a2332;
- color: #b3b3b3;
+ background-color: $back-color;
+ color: $text-color;
}
@@ -132,9 +144,13 @@ button{
margin-left: 5px;
border-radius: 5px;
cursor: pointer;
- background: #1cb09a;
+ background-color: $accent-color;
color: #fff;
text-align: center;
+
+ &:HOVER{
+ background-color: $accent-color-2;
+ }
}
.cookieinfo-text {
@@ -144,15 +160,19 @@ button{
.cookieinfo-link{
text-decoration: none;
- color: #1cb09a;
+ color: $accent-color;
+
+ &:HOVER{
+ color: $accent-color-2;
+ }
}
#newComment {
form {
input, textarea{
width: 100%;
- background: #1a2332;
- color: #b3b3b3;
- border: solid #212a39;
+ background-color: $back-color;
+ color: $text-color;
+ border: solid $back-color-2;
}
input:focus, textarea:focus {
@@ -164,7 +184,7 @@ button{
}
input[type=submit]{
- background: #1cb09a;
+ background-color: $accent-color;
color: #fff;
text-transform: uppercase;
padding: 15px;
@@ -172,6 +192,10 @@ button{
cursor: pointer;
outline: 0;
border: 0;
+
+ &:HOVER{
+ background-color: $accent-color-2;
+ }
}
}
}
diff --git a/scss/_menue.scss b/scss/_menue.scss
index b50b43e..34e67da 100644
--- a/scss/_menue.scss
+++ b/scss/_menue.scss
@@ -27,10 +27,10 @@
width: max-content;
left: 50%;
transform: translateX(-50%);
- background-color: #1a2332;
+ background-color: $back-color;
a {
- border-bottom: #151d28 solid 2px;
+ border-bottom: $back-color-2 solid 2px;
width: 100%;
}
}
diff --git a/scss/_var.scss b/scss/_var.scss
new file mode 100644
index 0000000..47a3c1f
--- /dev/null
+++ b/scss/_var.scss
@@ -0,0 +1,6 @@
+$back-color: #1a2332;
+$text-color: #b3b3b3;
+$accent-color: #1cb09a;
+$content-footer-div-color: #03A8F4;
+
+$darker-color: 5%;
\ No newline at end of file
diff --git a/scss/fas.scss b/scss/fas.scss
new file mode 100644
index 0000000..483254d
--- /dev/null
+++ b/scss/fas.scss
@@ -0,0 +1 @@
+@import "Fork-Awesome/main";
\ No newline at end of file
diff --git a/scss/style.scss b/scss/style.scss
index 85943c1..2be302c 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -1,8 +1,9 @@
+@import "var";
+@import "colorMixer";
@import "general";
@import "menue";
@import "normalize";
@import "ntp";
@import "prism";
@import "sourcesanspro";
-@import "header";
-@import "Fork-Awesome/main";
\ No newline at end of file
+@import "header";
\ No newline at end of file
--
GitLab