relocalize styles from customizer to theme styles

Lightweb-Media · May 8, 2023 · ce1cc9a · ce1cc9a
1 parent c89bec3
commit ce1cc9a
Showing 1 changed file with 118 additions and 13 deletions.
diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
@@ -3,6 +3,36 @@ img {
     border-radius: 4px;
 }
 
+* {
+    hyphens: auto;
+    -ms-hyphens: auto; 
+    -moz-hyphens: auto; 
+    -webkit-hyphens: auto;    
+}
+
+@media (max-width: $outer-screen-padding-breakpoint) {
+	h1 {
+        &.gb-headline-29e627db {
+            text-align: center;
+            font-size: 35px !important;
+            font-family: Poppins, sans-serif !important;
+
+            strong {
+                font-size: 35px !important;
+                font-family: Poppins, sans-serif !important;
+                font-weight: 700;
+            }
+        }
+    }
+	.gb-button-44beaeff {
+		display: block;
+		font-size: 14px;
+	}
+	.floating-shapes .floating-shape {
+		position: absolute;
+	}
+}
+
 // Author Infos
 .author-info {
     display: flex;
@@ -125,7 +155,7 @@ img {
 
 }
 
-/* Blog Single Content */
+// Blog Single Content
 #primary{
     .entry-content{
         figure{margin-bottom: 20px;}
@@ -143,7 +173,7 @@ img {
     }
 }
 
-/* Styles for Archives */
+// Styles for Archives
 body:not(.single, .page) #primary, .featured-posts{
     article.post .inside-article{
         @media (min-width: 1200px) {
@@ -211,7 +241,7 @@ body.single-post{
     width: 100%;
 }
 
-/* Search bar */
+// Search bar
 .wp-block-search__inside-wrapper{
     border: none;
     input{
@@ -228,7 +258,7 @@ body.single-post{
 
 }
 
-/* WP Forms 7 contact form overwrites */
+// WP Forms 7 contact form overwrites
 input[type="text"],
 input[type="email"],
 #your-message{
@@ -238,12 +268,87 @@ input[type="email"],
 }
 
 .wcf7{
-	background-color:#EFEFEF; /* TODO Define variable color from customizer?*/
+	background-color: --light-green; // TODO Define variable color from customizer?
     padding:20px;
 }
 
+// Newsletter Block
+#newsletter-form {
+	display: flex;
+    gap: 10px 20px;
+    justify-content: center;
+    flex-wrap: wrap;
+	align-items: stretch;
+
+    &::after {
+        content: '';
+        position: absolute;
+        left: -1.4rem;
+        top: -1.4rem;
+        background: --light-blue;
+        border-radius: 12px;
+        width: 80px;
+        height: 80px;
+    }
+
+    input {
+        border: 1px solid inherit;
+        background: #fff;
+        color: --dark-blue;
+    }
+
+    label {
+        color: #fff;
+    }
 
-/* Footer styles */
+    input[type="submit"] {
+        width: 100%;
+        background: --blue;
+        color: #fff;
+        position: relative;
+        top:26px;
+    }
+
+    .wpcf7-response-output {
+        flex-basis: 100%;
+        color: #fff;
+    }
+
+    .wpcf7-form-control-wrap {
+        display: inline-table;
+    }
+
+    .wpcf7-list-item {
+        display: inline-block;
+        margin: 0 auto;
+    }
+}
+
+@media screen and (max-width:$outer-screen-padding-breakpoint) {
+	#newsletter-form {
+        p {
+		    width: 100%;
+	    }
+
+        input:not([type="checkbox"]) {
+            width: 100%;
+            max-height: 4.875rem; /* 78px / 16px */
+        }
+
+        input[type="submit"] {
+            display: inline;
+            line-height: 2;
+            font-size: 18px;
+            top: 18px;
+        }
+
+        .wpcf7-response-output {
+            margin: 0 auto;
+        }
+    }
+}
+
+// Footer styles
 .site-footer{
     .footer-widgets .inside-footer-widgets hr{
         max-width: 30px;
@@ -267,7 +372,7 @@ input[type="email"],
 
 
 
-/* Pagination */
+// Pagination
 .paging-navigation .nav-links>*{
     font-size: $pagination-text;
     background: $pagination-button-background;
@@ -283,7 +388,7 @@ input[type="email"],
     opacity: 0.6;
 }
 
-/* Style page title */
+// Style page title
 .page-header, .home-headline{
     padding-bottom: 0px !important;
     h1, h2{
@@ -294,7 +399,7 @@ input[type="email"],
     padding-bottom: 0px;
 }
 
-/* Post Single */
+// Post Single
 body.single-post{
 
     article {
@@ -334,12 +439,12 @@ body.single-post{
     }
 }
 
-/* Add ".." after excerpt */
+// Add ".." after excerpt
 .entry-summary p:after{
     content: '..';
 }
 
-/* 404 Page */
+// 404 Page
 body.error404{
     .entry-title center:after{
         display: block;
@@ -361,7 +466,7 @@ body.error404{
     }
 }
 
-/* Author Page */
+// Author Page
 body.author{
     .author_bio_section{
         display: flex;
@@ -537,4 +642,4 @@ section.recommended{
     line-height: 1.2em;
     font-weight: 400;
     text-transform: none;
-}
+}