From 21cb98114174f655f8767242460f037d9ef7cabb Mon Sep 17 00:00:00 2001
From: Jonas Leder <jonas@jonasled.de>
Date: Mon, 11 Jan 2021 19:24:57 +0100
Subject: [PATCH] splitted scss in multiple files
---
public/internal/footer.php | 2 +-
scss/_comments.scss | 64 ++++++++++
scss/_content.scss | 37 ++++++
scss/_footer.scss | 39 +++++++
scss/_general.scss | 233 ++-----------------------------------
scss/_mobile.scss | 29 +++++
scss/cookieinfo.scss | 49 ++++++++
scss/style.scss | 7 +-
8 files changed, 233 insertions(+), 227 deletions(-)
create mode 100644 scss/_comments.scss
create mode 100644 scss/_content.scss
create mode 100644 scss/_footer.scss
create mode 100644 scss/_mobile.scss
create mode 100644 scss/cookieinfo.scss
diff --git a/public/internal/footer.php b/public/internal/footer.php
index 3e74572..59ba39d 100644
--- a/public/internal/footer.php
+++ b/public/internal/footer.php
@@ -35,7 +35,7 @@ function getFooter(){
<p class="center">
<a href="https://www.instagram.com/jonasled1/"><i class="fa fa-instagram fa-2x"></i></a><i class="footerIconSpacer"></i>
<a href="https://www.thingiverse.com/jonasled/designs/"><i class="fa fa-cubes fa-2x"></i></a><i class="footerIconSpacer"></i>
- <a href="https://paypal.me/jonasled/"><i class="fa fa-paypal fa-2x"></i></a>
+ <a href="https://paypal.me/jonasled/"><i class="fa fa-paypal fa-2x"></i></a><i class="footerIconSpacer"></i>
<a href="https://matrix.jonasled.de/invite/#/@jonasled:jonasled.de"><i class="fa fa-matrix-org fa-2x"></i></a>
</p>
</div>
diff --git a/scss/_comments.scss b/scss/_comments.scss
new file mode 100644
index 0000000..d404278
--- /dev/null
+++ b/scss/_comments.scss
@@ -0,0 +1,64 @@
+
+#newComment {
+ form {
+ input, textarea{
+ width: 100%;
+ background-color: $back-color;
+ color: $text-color;
+ border: solid $back-color-2;
+ }
+
+ input:focus, textarea:focus {
+ outline: none;
+ }
+
+ textarea{
+ resize: vertical;
+ }
+
+ input[type=submit]{
+ background-color: $accent-color;
+ color: #fff;
+ text-transform: uppercase;
+ padding: 15px;
+ font-size: 14px;
+ cursor: pointer;
+ outline: 0;
+ border: 0;
+
+ &:HOVER{
+ background-color: $accent-color-2;
+ }
+ }
+ }
+}
+
+.comment{
+ display: flex;
+ img{
+ margin-right: 10px;
+ width: 100px;
+ height: 100px;
+ }
+}
+
+.commentTitle{
+ margin-bottom: 5px;
+}
+
+.commentArticle{
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ align-items: center;
+ min-height: 100px;
+}
+
+.commentText{
+ margin: 0;
+ width: 100%;
+}
+
+.emailBox {
+ display: inline;
+}
diff --git a/scss/_content.scss b/scss/_content.scss
new file mode 100644
index 0000000..8767c6e
--- /dev/null
+++ b/scss/_content.scss
@@ -0,0 +1,37 @@
+#content{
+ background-color: $back-color;
+ width: 100%;
+ padding: 20px 20%;
+ img {
+ max-width: 40%;
+ }
+}
+
+article{
+ border: 2px solid $accent-color;
+ border-radius: 20px;
+ padding: 10px;
+ margin-right: 20px;
+ width: 100%;
+ height: 100%;
+ h2{
+ text-align: center;
+ margin: 0;
+ }
+
+ &:last-child{
+ margin-right: 0;
+ }
+}
+
+#blog{
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+#homeImage{
+ float: left;
+ margin-right: 5px;
+}
\ No newline at end of file
diff --git a/scss/_footer.scss b/scss/_footer.scss
new file mode 100644
index 0000000..030a4d8
--- /dev/null
+++ b/scss/_footer.scss
@@ -0,0 +1,39 @@
+footer{
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ a {
+ text-decoration: none;
+ }
+
+
+ #footerContent{
+ width: 100%;
+ display: flex;
+ justify-content: center;
+
+ div{
+ border-right: #3d3d3d 1px solid;
+ padding: 20px;
+ }
+
+ h3 {
+ margin-top: 0;
+ }
+
+ a {
+ color: $text-color;
+ }
+ }
+
+ .footerIconSpacer{
+ margin-left: 10px;
+ display: inline;
+ }
+}
+
+#blueBar{
+ height: 5px;
+ width: 100%;
+ background-color: $content-footer-div-color;
+}
diff --git a/scss/_general.scss b/scss/_general.scss
index 53f6478..8870868 100644
--- a/scss/_general.scss
+++ b/scss/_general.scss
@@ -3,76 +3,9 @@ body {
background-color: $back-color-2;
color: $text-color;
font-family: 'Source Sans Pro', sans-serif;
-}
-#content{
- background-color: $back-color;
- width: 100%;
- padding: 20px 20%;
- img {
- max-width: 40%;
- }
-}
-
-#blueBar{
- height: 5px;
- width: 100%;
- background-color: $content-footer-div-color;
-}
-
-footer{
- display: flex;
- justify-content: center;
- flex-direction: column;
- a {
- text-decoration: none;
- }
-}
-
-a{
- padding: 0;
- color: $accent-color;
- text-decoration:underline;
-
- &:HOVER{
- color: $accent-color-2;
- }
-}
-
-.footerIconSpacer{
- margin-left: 10px;
- display: inline;
-}
-
-.red {
- color: red;
-}
-
-.center{
- text-align: center;
-}
-article{
- border: 2px solid $accent-color;
- border-radius: 20px;
- padding: 10px;
- margin-right: 20px;
- width: 100%;
+ width: calc(100% - 1px);
height: 100%;
- h2{
- text-align: center;
- margin: 0;
- }
-}
-
-#blog{
- width: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-article:last-child{
- margin-right: 0;
}
button{
@@ -89,174 +22,24 @@ button{
}
}
-#homeImage{
- float: left;
- margin-right: 5px;
-}
-
.spacer{
clear: both;
}
-#footerContent{
- width: 100%;
- display: flex;
- justify-content: center;
-
- div{
- border-right: #3d3d3d 1px solid;
- padding: 20px;
- }
-
- h3 {
- margin-top: 0;
- }
-
- a {
- color: $text-color;
- }
-}
-
-.cookieinfo{
- position: fixed;
- left: 0;
- right: 0;
- height: auto;
- min-height: 21px;
- z-index: 2147483647;
- line-height: 21px;
- padding: 8px 18px;
- font-family: verdana, arial, sans-serif;
- font-size: 14px;
- text-align: center;
- bottom: 0;
- opacity: 1;
- background-color: $back-color;
- color: $text-color;
-
-}
-
-.cookieinfo-close{
- float: right;
- display: block;
- padding: 5px 8px;
- min-width: 100px;
- margin-left: 5px;
- border-radius: 5px;
- cursor: pointer;
- background-color: $accent-color;
- color: #fff;
- text-align: center;
-
- &:HOVER{
- background-color: $accent-color-2;
- }
-}
-
-.cookieinfo-text {
- display:block;
- padding:5px 0 5px 0;
-}
-
-.cookieinfo-link{
- text-decoration: none;
+a{
+ padding: 0;
color: $accent-color;
+ text-decoration:underline;
&:HOVER{
color: $accent-color-2;
}
}
-#newComment {
- form {
- input, textarea{
- width: 100%;
- background-color: $back-color;
- color: $text-color;
- border: solid $back-color-2;
- }
-
- input:focus, textarea:focus {
- outline: none;
- }
-
- textarea{
- resize: vertical;
- }
-
- input[type=submit]{
- background-color: $accent-color;
- color: #fff;
- text-transform: uppercase;
- padding: 15px;
- font-size: 14px;
- cursor: pointer;
- outline: 0;
- border: 0;
-
- &:HOVER{
- background-color: $accent-color-2;
- }
- }
- }
-}
-
-.comment{
- display: flex;
- img{
- margin-right: 10px;
- width: 100px;
- height: 100px;
- }
-}
-
-.commentTitle{
- margin-bottom: 5px;
-}
-.commentArticle{
- display: flex;
- justify-content: center;
- flex-direction: column;
- align-items: center;
- min-height: 100px;
-}
-
-.commentText{
- margin: 0;
- width: 100%;
-}
-
-.emailBox {
- display: inline;
+.red {
+ color: red;
}
-@media only screen and (max-width: 600px) {
- #homeImage{
- float: none;
- }
- #content{
- padding-left: 10px;
- padding-right: 10px;
- }
- #blog{
- flex-direction: column;
- }
- article {
- margin-bottom: 10px;
- margin-right: 0;
- }
- #banner {
- a {
- display: block;
- }
- img {
- max-width: none;
- width: 100%;
- }
- }
-
- #newestPost{
- display: none;
- }
-
+.center{
+ text-align: center;
}
\ No newline at end of file
diff --git a/scss/_mobile.scss b/scss/_mobile.scss
new file mode 100644
index 0000000..4b78bb4
--- /dev/null
+++ b/scss/_mobile.scss
@@ -0,0 +1,29 @@
+@media only screen and (max-width: 600px) {
+ #homeImage{
+ float: none;
+ }
+ #content{
+ padding-left: 10px;
+ padding-right: 10px;
+ }
+ #blog{
+ flex-direction: column;
+ }
+ article {
+ margin-bottom: 10px;
+ margin-right: 0;
+ }
+ #banner {
+ a {
+ display: block;
+ }
+ img {
+ max-width: none;
+ width: 100%;
+ }
+ }
+
+ #newestPost{
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/scss/cookieinfo.scss b/scss/cookieinfo.scss
new file mode 100644
index 0000000..25290eb
--- /dev/null
+++ b/scss/cookieinfo.scss
@@ -0,0 +1,49 @@
+.cookieinfo{
+ position: fixed;
+ left: 0;
+ right: 0;
+ height: auto;
+ min-height: 21px;
+ z-index: 2147483647;
+ line-height: 21px;
+ padding: 8px 18px;
+ font-family: verdana, arial, sans-serif;
+ font-size: 14px;
+ text-align: center;
+ bottom: 0;
+ opacity: 1;
+ background-color: $back-color;
+ color: $text-color;
+
+}
+
+.cookieinfo-close{
+ float: right;
+ display: block;
+ padding: 5px 8px;
+ min-width: 100px;
+ margin-left: 5px;
+ border-radius: 5px;
+ cursor: pointer;
+ background-color: $accent-color;
+ color: #fff;
+ text-align: center;
+
+ &:HOVER{
+ background-color: $accent-color-2;
+ }
+}
+
+.cookieinfo-text {
+ display:block;
+ padding:5px 0 5px 0;
+}
+
+.cookieinfo-link{
+ text-decoration: none;
+ color: $accent-color;
+
+ &:HOVER{
+ color: $accent-color-2;
+ }
+}
\ No newline at end of file
diff --git a/scss/style.scss b/scss/style.scss
index 2be302c..75c1495 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -6,4 +6,9 @@
@import "ntp";
@import "prism";
@import "sourcesanspro";
-@import "header";
\ No newline at end of file
+@import "header";
+@import "cookieinfo";
+@import "comments";
+@import "mobile";
+@import "footer";
+@import "content";
\ No newline at end of file
--
GitLab