adding style.css

redacademy · Jun 19, 2019 · 23a123c · 23a123c
2 parents ef6f3cf + c3b27b4
commit 23a123c
Show file tree

Hide file tree

Showing 11 changed files with 227 additions and 88 deletions.
diff --git a/...ages/illustrations/Space ring(update).svg → ...mages/illustrations/space-ring-update.svg b/...ages/illustrations/Space ring(update).svg → ...mages/illustrations/space-ring-update.svg
diff --git a/themes/terra/page-disclaimer.php b/themes/terra/page-disclaimer.php
@@ -14,7 +14,7 @@
 
 				<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 					<header class="entry-header">
-
+						<h1 class="disclaimer-title"><?php echo the_title(); ?></h1>
 
 						<?php if ('post' === get_post_type()) : ?>
 							<div class="entry-meta">
@@ -24,7 +24,7 @@
 					</header><!-- .entry-header -->
 
 					<div class="entry-content">
-						<?php the_excerpt(); ?>
+						<?php the_content(); ?>
 					</div><!-- .entry-content -->
 				</article><!-- #post-## -->
 

diff --git a/themes/terra/page-the-project.php b/themes/terra/page-the-project.php
@@ -11,18 +11,24 @@
 
 <div id="primary" class="content-area">
 	<main id="main" class="site-main" role="main">
-		<!-- Hero Banner Section -->
 
+		<!-- Hero Banner Section -->
 		<div class="hero-banner">
 			<?php while (have_posts()) : the_post(); ?>
 				<img class="banner-pic" src="<?php echo get_the_post_thumbnail_url(); ?>">
 				<h1 class="banner-title"><?php the_title(); ?></h1>
 			<?php endwhile;
 		?>
 		</div>
-		<!-- Lack of Awareness Section NOTE: need to hardcode background image unless we want CSF -->
 
+		<div class="entry-content whats-terra">
+			<?php the_content(); ?>
 
+		</div><!-- .entry-content -->
+
+
+
+		<!-- Lack of Awareness Section NOTE: need to hardcode background image unless we want CSF -->
 		<section class="lack-aware-sect">
 			<h2 class="lack-aware-h2"><?php echo CFS()->get('lack_of_awareness_blurb'); ?></h2>
 			<div class="lack-aware-cards">
@@ -70,8 +76,8 @@
 
 		</section>
 
-		<!-- Our Partners Section NOTE: IS IT OK TO LEAVE SAME CLASSES AS ON FP?-->
 
+		<!-- Our Partners Section NOTE: IS IT OK TO LEAVE SAME CLASSES AS ON FP?-->
 		<section class="fp-partners">
 			<h2><?php echo CFS()->get('our_partners_title'); ?></h2>
 			<div class="partner-entries">
@@ -96,8 +102,8 @@
 
 		</section>
 
-		<!-- Source Of Funds Section -->
 
+		<!-- Source Of Funds Section -->
 		<section class="source-funds">
 
 			<h2><?php echo CFS()->get('source_of_funds_title'); ?></h2>
@@ -137,6 +143,8 @@
 			<button class="wh-paper-btn"><?php echo CFS()->get('white_paper_link'); ?></button>
 
 		</section>
+
+
 	</main><!-- #main -->
 </div><!-- #primary -->
 

diff --git a/themes/terra/sass/_aquaponics-page.scss b/themes/terra/sass/_aquaponics-page.scss
@@ -34,49 +34,59 @@
 }
 
 .page-aquaponics {
-  .intro-aqua {
-    @include center-page;
-    line-height: $font__line-height-body;
-    padding-left: 20px;
-    padding-right: 20px;
-  }
   // -----What is Aquaponics Section-----//
-
   .intro-aqua {
     display: flex;
+
+    @include desktop {
+      @include center-page;
+      line-height: $font__line-height-body;
+      padding-left: 20px;
+      padding-right: 20px;
+    }
   }
   .what-aqua-text {
-    max-width: 66%;
+    max-width: 100%;
+    @include desktop {
+      max-width: 66%;
+    }
   }
   .what-aqua-imgs {
-    width: 33%;
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: 1fr 1fr;
-    grid-template-areas:
-      " 1 2 "
-      " 3 4 ";
-    img {
-      width: 150px;
-      &:nth-child(1) {
-        grid-area: 1;
-        padding: 2rem;
-        object-fit: contain;
-      }
-      &:nth-child(2) {
-        grid-area: 2;
-        padding: 2rem;
-        object-fit: contain;
-      }
-      &:nth-child(3) {
-        grid-area: 3;
-        padding: 2rem;
-        object-fit: contain;
-      }
-      &:nth-child(4) {
-        grid-area: 4;
-        padding: 2rem;
-        object-fit: contain;
+    display: none;
+    @include desktop {
+      display: block;
+      width: 33%;
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: 1fr 1fr;
+      grid-template-areas:
+        " 1 2 "
+        " 3 4 ";
+      img {
+        width: 150px;
+        &:nth-child(1) {
+          grid-area: 1;
+          padding: 2rem;
+          object-fit: contain;
+        }
+        &:nth-child(2) {
+          grid-area: 2;
+          padding: 2rem;
+          object-fit: contain;
+        }
+        &:nth-child(3) {
+          grid-area: 3;
+          padding: 2rem;
+          object-fit: contain;
+        }
+        &:nth-child(4) {
+          grid-area: 4;
+          padding: 2rem;
+          object-fit: contain;
+        }
       }
     }
   }
+  //end what is aqua section
+
+  // How Aqua Works Section
 }
diff --git a/themes/terra/sass/_mixins.scss b/themes/terra/sass/_mixins.scss
@@ -87,3 +87,9 @@
     z-index: 100000; /* Above WP toolbar. */
   }
 }
+
+@mixin white-space-both-side {
+  padding-right: 2rem;
+  padding-left: 2rem;
+
+}
diff --git a/themes/terra/sass/_page-contact-us.scss b/themes/terra/sass/_page-contact-us.scss
@@ -1,5 +1,5 @@
 .page-contact-us {
-  .site-main {
+  .page-contact-us.site-main {
     background: url('../../assets/images/illustrations/futurisitc_illustration-mobile.svg');
     background-repeat: no-repeat;
     background-position: top 20px right -250px;
@@ -11,7 +11,7 @@
     }
   }
 
-  h1.entry-title {
+  .page-contact-us h1.entry-title {
     display: none;
   }
 
@@ -23,7 +23,7 @@
     }
   }
 
-  h2 {
+  .page-contact-us h2 {
     text-transform: uppercase;
     color: $font-awesome-color;
     margin: 25px auto;

diff --git a/themes/terra/sass/_page-disclaimer.scss b/themes/terra/sass/_page-disclaimer.scss
@@ -1,6 +1,16 @@
 .disclaimer-center {
-    @include center-page;
-    line-height: $font__line-height-body;
-    padding-left: 20px;
-    padding-right: 20px;
+        @include center-page;
+        line-height: $font__line-height-body;
+        padding-left: 2rem;
+        padding-right: 2rem;
+        padding-top: 2rem;
+        padding-bottom: 2rem;
+
+    .disclaimer-title {
+        text-align: center;
+    }
+    .page-contact-us h1.entry-title {
+        display: unset;
+      }
+
 }
diff --git a/themes/terra/sass/_page-the-project.scss b/themes/terra/sass/_page-the-project.scss
@@ -0,0 +1,30 @@
+.page-the-project {
+
+    .whats-terra {
+        padding: $page-padding-mobile;
+        // padding-left: 2rem;
+        // padding-right: 2rem;
+        // background-image: url('../../assets/images/illustrations/space-ring-update.svg');
+        // background-repeat: no-repeat;
+        // background-position: top 20px right -250px;
+        // background-size: 60%;
+
+        &::after {
+            content: "";
+            background-image: url('../../assets/images/illustrations/space-ring-update.svg');
+            background-repeat: no-reapeat;
+            opacity: 0.1;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            right: 0;
+            position: absolute;
+            z-index: -1;   
+            width : 100%
+
+          }
+
+
+    }
+
+}
diff --git a/themes/terra/sass/_typography.scss b/themes/terra/sass/_typography.scss
@@ -1,8 +1,17 @@
 body {
-    font-family: $font__main;
-    line-height: $font__line-height-body;
+  font-family: $font__main;
+  line-height: $font__line-height-body;
 }
 
-h1, h2, h3, h4, h5, h6 {
-    font-family: $font__heading;
-}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: $font__heading;
+  color: $header-title-font-color;
+}
+p {
+  color: $font-color;
+}
diff --git a/themes/terra/sass/_variables.scss b/themes/terra/sass/_variables.scss
@@ -36,4 +36,5 @@ $font__heading: ‘Lato’;
 $font__code: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
 $font__pre: "Courier 10 Pitch", Courier, monospace;
 $font__line-height-body: 1.25rem;
-$font__line-height-pre: 1.6;
+$font__line-height-pre: 1.6rem;
+$page-padding-mobile: 0 1.25rem 0 1.25rem;