simplify CSS stylesv0.3

9 files changed, 33 insertions, 47 deletions

diff --git a/assets/css/common.css b/assets/css/common.css
new file mode 100644
index 0000000..d7b33b9
--- /dev/null
+++ b/assets/css/common.css
@@ -0,0 +1,25 @@
+.bkg-image {
+    background-attachment: fixed;
+    background-origin: content-box;
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.btn {
+    background-color: var(--green);
+    border: 1px solid var(--green);
+    border-radius: 15px;
+    color: var(--foreground);
+    font-size: var(--p);
+    margin-top: 3.45rem;
+    padding: 0.75rem 1.45rem;
+    transition: all 0.25s;
+    width: 15rem;
+}
+
+.btn:hover,
+.btn:active {
+    background-color: var(--background);
+    color: var(--green);
+}
\ No newline at end of file
diff --git a/assets/css/style.css b/assets/css/style.css
index c01178a..0bd68dc 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1,11 +1,6 @@
 /* HERO */
 .hero {
     align-items: center;
-    background-attachment: fixed;
-    background-origin: content-box;
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: cover;
     border-bottom: 5px solid var(--green);
     color: var(--foreground);
     display: flex;
@@ -28,32 +23,14 @@
 }
 
 .cta {
-    background-color: var(--green);
-    border: 1px solid var(--green);
-    border-radius: 15px;
     display: block;
-    font-size: var(--p);
     line-height: 1.2;
-    margin-top: 3.45rem;
-    padding: 0.75rem 1.45rem;
     text-align: center;
-    transition: all 0.25s;
-    width: 15rem;
-}
-
-.cta:hover {
-    background-color: var(--background);
-    color: var(--green);
 }
 
 /* SECTIONS */
 .section {
     align-items: center;
-    background-attachment: fixed;
-    background-origin: content-box;
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: cover;
     display: flex;
     flex-direction: column;
     min-height: 90vh;
@@ -97,24 +74,6 @@
     width: 100%;
 }
 
-.submit {
-    background-color: var(--green);
-    border: 1px solid var(--green);
-    border-radius: 15px;
-    color: var(--foreground);
-    font-size: var(--p);
-    margin-top: 3.45rem;
-    padding: 0.75rem 1.45rem;
-    transition: all 0.25s;
-    width: 15rem;
-}
-
-.submit:hover,
-.submit:active {
-    background-color: var(--background);
-    color: var(--green);
-}
-
 /* FOOTER */
 .social-links {
     align-items: center;
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 3d25dbf..86f32f2 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -6,9 +6,11 @@
 	{{ if $.Site.Params.header.show }}
 	{{- partial "header.html" . -}}
 	{{ end }}
+
 	<main class="main">
 		{{- block "main" . }}{{- end }}
 	</main>
+
 	{{- partial "footer.html" . -}}
 </body>
 
diff --git a/layouts/index.html b/layouts/index.html
index 953e466..4078eb2 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,7 +1,6 @@
 {{ define "main" }}
 
 {{ partial "hero.html" . }}
-
 {{ partial "sections.html" . }}
 
 {{ if $.Site.Params.form.show }}
diff --git a/layouts/partials/contact.html b/layouts/partials/contact.html
index 8f8340d..f7846ba 100644
--- a/layouts/partials/contact.html
+++ b/layouts/partials/contact.html
@@ -30,7 +30,7 @@
 
         <!-- Submit -->
         <div class="contact__form__field contact__form__field--submit">
-            <button type="submit" class="submit" onclick="cleanForm"
+            <button type="submit" class="submit btn" onclick="cleanForm"
                 aria-label="{{ $.Site.Params.form.SubmitValue }}">
                 {{ if $.Site.Params.form.submitValue }}
                 {{ $.Site.Params.form.submitValue }}
diff --git a/layouts/partials/cta.html b/layouts/partials/cta.html
index 6e087f1..eb19e3b 100644
--- a/layouts/partials/cta.html
+++ b/layouts/partials/cta.html
@@ -1,3 +1,3 @@
-<a href="{{ $.Site.Params.cta.link }}" class="cta" alt="{{ $.Site.Params.cta.message }}">
+<a href="{{ $.Site.Params.cta.link }}" class="cta btn" alt="{{ $.Site.Params.cta.message }}">
     {{ $.Site.Params.cta.message }}
 </a>
\ No newline at end of file
diff --git a/layouts/partials/hero.html b/layouts/partials/hero.html
index ae6e593..ed59a0a 100644
--- a/layouts/partials/hero.html
+++ b/layouts/partials/hero.html
@@ -5,7 +5,7 @@
 {{ $bkg = printf "%s%s%s" "background-image: url('" $bkgURL "');"}}
 {{ end }}
 
-<section class="hero" style="{{ safeCSS $bkg }}">
+<section class="hero bkg-image" style="{{ safeCSS $bkg }}">
 
     <!-- Content -->
     {{ .Content }}
diff --git a/layouts/partials/sections.html b/layouts/partials/sections.html
index e65561c..f14495d 100644
--- a/layouts/partials/sections.html
+++ b/layouts/partials/sections.html
@@ -8,7 +8,7 @@
 {{ $bkg = printf "%s%s%s" "background-image: url('" $bkgURL "');"}}
 {{ end }}
 
-<section class="section" id="{{ .Title }}"
+<section class="section bkg-image" id="{{ .Title }}"
     style="{{ safeCSS $bkg }} border-bottom: 5px solid var(--{{ print .Params.borderColor }});">
     <h1 class="section__title">{{ .Title }}</h1>
     {{ .Content }}
diff --git a/layouts/partials/styles.html b/layouts/partials/styles.html
index 6b4edf0..da7ea9d 100644
--- a/layouts/partials/styles.html
+++ b/layouts/partials/styles.html
@@ -1,7 +1,8 @@
 {{ $reset := resources.Get "css/reset.css" }}
 {{ $base := resources.Get "css/base.css" }}
 {{ $style := resources.Get "css/style.css" }}
-{{ $bundle := slice $reset $base $style | resources.Concat "css/bundle.css" }}
+{{ $common := resources.Get "css/common.css" }}
+{{ $bundle := slice $reset $base $style $common | resources.Concat "css/bundle.css" }}
 {{ $css := $bundle | resources.Minify | resources.Fingerprint "sha512" }}
 
 <style>