Add backgrounds, styling for section metadata (#38)

* Add backgrounds, styling for section metadata * Fix linting issues * Generic styling * Fix linting issue * Fix more linting issues
famous-smoke · Aug 8, 2024 · 9214f8a · 9214f8a
1 parent 132d053
commit 9214f8a
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 10 deletions.
diff --git a/cigars-for-beginners/icons/background-infused-cigars.jpg b/cigars-for-beginners/icons/background-infused-cigars.jpg
diff --git a/cigars-for-beginners/icons/background-tobacco-leaves.png b/cigars-for-beginners/icons/background-tobacco-leaves.png
diff --git a/cigars-for-beginners/icons/background-wood-texture-cigar-sizes.jpg b/cigars-for-beginners/icons/background-wood-texture-cigar-sizes.jpg
diff --git a/cigars-for-beginners/icons/background-wood-texture2.jpg b/cigars-for-beginners/icons/background-wood-texture2.jpg
diff --git a/cigars-for-beginners/styles/styles.css b/cigars-for-beginners/styles/styles.css
@@ -271,6 +271,59 @@ main .section {
   }
 }
 
+.section.no-section-padding {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+.section.bg-tobacco-leaves {
+  background-image: url("/cigars-for-beginners/icons/background-tobacco-leaves.png");
+  background-color: #5d7333;
+  background-position: left top;
+  background-size: cover;
+  background-repeat: no-repeat;
+  max-width: none;
+}
+
+.section.bg-sand {
+  background-image: url("/cigars-for-beginners/icons/background-infused-cigars.jpg");
+  background-color: #6a3c25;
+  background-position: left top;
+  background-size: cover;
+  background-repeat: no-repeat;
+  max-width: none;
+}
+
+.section.bg-wood {
+  background-image: url("/cigars-for-beginners/icons/background-wood-texture2.jpg");
+  background-color: #f3efe4;
+  background-position: left top;
+  background-size: 50%;
+  background-repeat: repeat;
+  max-width: none;
+}
+
+.how-cigars-are-rolled h3 {
+  padding-top: 3em;
+}
+
+.numbered-comparison h2 {
+  font-weight: bold;
+  margin-bottom: 2.5em;
+}
+
+.numbered-comparison h2, .numbered-comparison h3, .numbered-comparison em {
+  text-align: center;
+  display: block;
+}
+
+.section.center-title h2,
+.section.center-title h3
+{
+  text-align: center;
+  text-transform: uppercase;
+}
+
 /* section metadata */
 main .section.light,
 main .section.highlight {
@@ -348,16 +401,6 @@ main .section:empty {
   max-width: 152px;
 }
 
-.numbered-comparison h2 {
-  font-weight: bold;
-  margin-bottom: 2.5em;
-}
-
-.numbered-comparison h2, .numbered-comparison h3, .numbered-comparison em {
-  text-align: center;
-  display: block;
-}
-
 .numbered-comparison p {
   font-weight: 300;
 }
@@ -386,3 +429,17 @@ main .section.cigar-terminology {
   text-align: center;
   text-transform: uppercase;
 }
+
+.infused-cigars p {
+  font-weight: 300;
+}
+
+.how-cigars-are-rolled .default-content-wrapper p {
+  font-weight: 300;
+  max-width: 1020px;
+  margin: 2em auto 3em;
+}
+
+.infused-cigars .default-content-wrapper {
+  text-align: center;
+}