Added block class for component sections

Updated CSS
ekoindia · Dec 28, 2020 · d1cc558 · d1cc558
1 parent 7f8a472
commit d1cc558
Show file tree

Hide file tree

Showing 41 changed files with 122 additions and 162 deletions.
diff --git a/src/404.njk b/src/404.njk
@@ -5,12 +5,12 @@ permalink: 404.html
 {% extends "./_layouts/base.njk" %}
 
 {% block main %}
-<section>
-<center>
-	<h1>404</h1>
-	<p>Oops! This page is missing. The link you clicked may be broken or the page may have been removed.</p>
-	<br><br>
-	<a href="{{ "/" | url }}" class="button">Go back to home page</a>
-</center>
-</section>
+	<section class="block">
+		<center>
+			<h1>404</h1>
+			<p>Oops! This page is missing. The link you clicked may be broken or the page may have been removed.</p>
+			<br><br>
+			<a href="/" class="button">Go back to home page</a>
+		</center>
+	</section>
 {% endblock %}
diff --git a/src/_includes/blogslist.njk b/src/_includes/blogslist.njk
@@ -1,4 +1,4 @@
-<section class="band">
+<section class="block band">
     {% for blog in blogposts | trimArray(30) %}
 		<div class="item">
 			<a href="{{ blog.url | url }}" class="card nostyle">
@@ -23,7 +23,7 @@
 </section>
 
 {% if pagination.pages.length > 1 %}
-	<section class="pagination layout horizontal around-justified flex wrap center-center" aria-labelledby="pagination">
+	<section class="block pagination layout horizontal around-justified flex wrap center-center" aria-labelledby="pagination">
 		{# <a href="{{ pagination.href.first }}">&lt;&lt; First</a> #}
 		<a href="{{ pagination.href.previous }}"{% if pagination.pageNumber == 0 %} disabled{% endif %}>&lt; Previous</a>
 

diff --git a/src/_includes/careers_list.njk b/src/_includes/careers_list.njk
@@ -1,5 +1,4 @@
-<section>
-<div class="band">
+<section class="block band">
     {% for career in careers_list | reverse %}
     <div class="item">
         <a href="{{ career.url | url }}" class="card">
@@ -12,5 +11,4 @@
         </a>
     </div>
     {% endfor %}
-</div>
 </section>
diff --git a/src/_includes/css/base.css b/src/_includes/css/base.css
@@ -145,35 +145,20 @@ a.nostyle, a.nostyle:hover {
 	font-weight: 700;
 }
 
-.primarycolor {
-	color: var(--primary-color);
-}
+/* Color utility classes --- */
 
-/* button, select {
-  text-transform: none;
+.bg-shaded {
+	background-color: var(--background-section-color);
 }
 
-button,
-  [type="button"],
-  [type="reset"],
-  [type="submit"] {
-  -webkit-appearance: none;
+.bg-primary {
+	background-color: var(--primary-color);
 }
 
-button::-moz-focus-inner,
-  [type="button"]::-moz-focus-inner,
-  [type="reset"]::-moz-focus-inner,
-  [type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
+.text-primary {
+	color: var(--primary-color);
 }
 
-button:-moz-focusring,
-  [type="button"]:-moz-focusring,
-  [type="reset"]:-moz-focusring,
-  [type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-} */
 
 
 /* =============== COMMON UI COMPONENTS ================= */
@@ -299,30 +284,56 @@ tr:nth-child(even) td {
 	background: var(--background-section-color);
 }
 
+/* Slim UL list: colored dots & negetive left-margin */
+ul.slim_ul, .slim_ul ul {
+	list-style-type: none;
+	padding-left: 0;
+}
+
+ul.slim_ul > li, .slim_ul ul > li {
+	position: relative;
+	line-height: 1.5;
+}
+
+ul.slim_ul > li::before, .slim_ul ul > li::before {
+	content: "";
+    position: absolute;
+    left: -1em;
+    top: 10px;
+	left: -1.1em;
+    top: 0.4em;
+    width: 0.6em;
+    height: 0.6em;
+    background: var(--primary-color);
+    border-radius: 50%;
+}
+
+
+
 
 
 /* ============= SECTIONS / COMPONENTS =================== */
 
-section, nav.topnav, footer {
+section.block, nav.topnav, footer {
 	box-sizing: border-box;
 	width: 100%;
 	margin: 0;
 	padding-left: 20px;
 	padding-right: 20px;
 }
 
-section {
+section.block {
   padding-top: 20px;
   padding-bottom: 20px;
 }
 
 @media (min-width: 576px) {
-	section, nav.topnav, footer {
+	section.block, nav.topnav, footer {
 		padding-left: 10%;
 		padding-right: 10%;
 	}
 
-	section {
+	section.block {
 		padding-top: 3%;
 		padding-bottom: 3%;
 	}
@@ -333,20 +344,22 @@ section {
 }
 
 
-.horizontal-spacer {
-	padding-right: 20px;
+.l-box {
+	padding: 1em;
 }
 
-.background-section {
-	background-color: var(--background-section-color);
+@media (min-width: 700px) {
+	.l-box {
+		padding: 2em;
+	}
 }
 
 
 
 /* Index Page Top Hero Section */
 
 .index-page-hero .main-header {
-	font-size: 33px;
+	font-size: 30px;
 	max-width: 95%;
 }
 
@@ -445,52 +458,27 @@ section {
   opacity: 1;
 }
 
-
-
-.main-line {
-  font-weight: bold;
+.small_heros .img-box {
+  display: inline-block;
+  padding: 17px 55px;
+  width: 190px;
+  height: 62px;
 }
 
+
 .dimmed-image {
   filter: grayscale(100%);
   opacity: 0.5;
   max-width: 100%;
   height: auto;
 }
 
-.img-box {
-  display: inline-block;
-  padding: 17px 55px;
-  width: 190px;
-  height: 62px;
-}
-
 .dimmed-image:hover {
   filter: none;
   opacity: 1;
 }
 
 
-
-.orange-link {
-  color: var(--primary-color) !important;
-}
-
-.l-box {
-  padding: 2em;
-}
-
-@media only screen and (max-width: 700px) {
-  .l-box {
-      padding: 1em !important;
-  }
-  .main-header {
-    font-size: 30px;
-  }
-}
-
-
-
 /* product_category_showcase section */
 
 .prod-category-box {
@@ -556,52 +544,22 @@ section {
 /* -------------------------------------- */
 
 
-.header {
+.single-hero .header {
   font-size: 30px;
 }
 
-.bi-arrow-right {
-  color: var(--primary-color);
-  font-weight: bold;
-}
-
-h6 {
-  font-weight: bold;
-  font-size: 16px;
-  letter-spacing: 0.1em;
-}
-
-.three-box {
+.icon-list .three-box {
   padding: 5%;
 }
 
-.three-box p {
+.icon-list .three-box p {
   font-weight: 500 !important;
   font-size: 18px !important;
 }
 
-.box-link {
-  color: dark-blue !important;
-  font-size: 12px !important;
-}
-
-
-
-.one-liner {
-  width: 70%;
-}
-
-.one-liner .tags-row {
-  width: 70%;
-}
-
-.round {
-  border-radius: 25px;
-}
 
-.caption {
-  font-size: 12px;
-  font-weight: normal;
+.one-liner, .one-liner .tags-row {
+	width: 70%;
 }
 
 

diff --git a/src/_includes/css/carousel.css b/src/_includes/css/carousel.css
@@ -95,6 +95,16 @@ left: -25px;
 right: -25px;
 }
 
+.round {
+  border-radius: 25px;
+}
+
+.caption {
+  font-size: 12px;
+  font-weight: normal;
+}
+
+
 .gallery {
 	border: none !important;
 }

diff --git a/src/_includes/css/debug.css b/src/_includes/css/debug.css
@@ -1,9 +1,9 @@
-section[type] {
+section.block {
 	position: relative;
 	border:1px solid #666;
 }
-section[type]::before {
-	content: "section: " attr(type);
+section.block::before {
+	content: "🧩 section_" attr(type) ".njk";
 	position: absolute;
 	top:0; left:0;
 	font-family: monospace;

diff --git a/src/_includes/css/nav.css b/src/_includes/css/nav.css
@@ -28,10 +28,6 @@
   justify-content: center;
 }
 
-.nav .l-box {
-  padding: 2em;
-}
-
 .nav a {
 text-decoration: none;
 color: var(--main-text-color);

diff --git a/src/_includes/footer.njk b/src/_includes/footer.njk
@@ -38,7 +38,7 @@
 	<br><br><br><br><br><br>
 	<a href="{{ website.signup_url }}" class="button">Sign Up</a>
 	<br><br>
-	<a class="orange-link" href="{{ website.contact_url }}">{% svgico 'paper-plane' %}&nbsp;&nbsp;{{ footer.contact_button_text }}</a>
+	<a class="text-primary" href="{{ website.contact_url }}">{% svgico 'paper-plane' %}&nbsp;&nbsp;{{ footer.contact_button_text }}</a>
 	</div>
 </footer>
 
diff --git a/src/_includes/navigation.njk b/src/_includes/navigation.njk
@@ -85,7 +85,7 @@
     <div class="pure-u-1 pure-u-md-1-3">
       <ul class="nav" class="menubar">
         <li class="menuitem">
-          <a href="{{ website.contact_url }}" class="icolink">{% svgico 'paper-plane', 'primarycolor' %}&nbsp;Contact Sales</a>
+          <a href="{{ website.contact_url }}" class="icolink">{% svgico 'paper-plane', 'text-primary' %}&nbsp;Contact Sales</a>
         </li>
         <li class="menuitem">
           <a href="{{ website.signup_url }}" class="button">Sign Up</a>

diff --git a/src/_includes/section_accordion.njk b/src/_includes/section_accordion.njk
@@ -1,4 +1,4 @@
-<section type="accordian">
+<section class="block" type="accordian">
 
 	{% if item.header %}
 		<center>

diff --git a/src/_includes/section_alternating_steps.njk b/src/_includes/section_alternating_steps.njk
@@ -1,4 +1,4 @@
-<section class="alternating-steps" type="alternating_steps">
+<section class="block alternating-steps" type="alternating_steps">
 	{% if item.title %}
 		<center>
 			<p>{{ item.subtitle }}</p>
@@ -9,7 +9,7 @@
 	{% endif %}
 
 	{% for step in item.steps %}
-		<div class="pure-g flex-grid">
+		<div class="pure-g flex-grid slim_ul">
 			<div class="step-text pure-u-1 pure-u-md-1-2 l-box">
 				<h2>{{ step.title }}</h2>
             	<br>
@@ -20,7 +20,7 @@
 				{% endif%}
 				{% if step.button %}
 					<a href="{{ step.button_link }}" class="button">{{ step.button }}</a>
-					<span class="horizontal-spacer"></span>
+					&nbsp;
 				{% endif %}
 				{% if step.more_info %}
 					{% linkArrow step.info_link, step.more_info, 'bold' %}

diff --git a/src/_includes/section_bullet_list.njk b/src/_includes/section_bullet_list.njk
@@ -1,4 +1,4 @@
-<section class="background-section" type="bullet_list">
+<section class="block bg-shaded" type="bullet_list">
 	<center>
 		<div class="bullet-list">
 			<ul>