From 6f9926a55df7bbe93c15d5bb0f7514f108cdf29a Mon Sep 17 00:00:00 2001
From: FredericoAndrade <faandrade@gmail.com>
Date: Mon, 15 Jul 2024 22:52:40 +0200
Subject: [PATCH] improve footer styles

---
 footer.php                 |  63 +++++++++++----------
 stylus/main.css            |  90 ++++++++++++++++++++++++------
 stylus/require/footer.styl | 109 +++++++++++++++++++++++++++----------
 3 files changed, 183 insertions(+), 79 deletions(-)

diff --git a/footer.php b/footer.php
index 09450b86..a1ea0e61 100644
--- a/footer.php
+++ b/footer.php
@@ -1,49 +1,48 @@
 <section class="wt_newsletter">
+	<h2>Stay in touch</h2>
 	<?php echo get_field('newsletter_signup_embed', 'options'); ?>
 </section>
 
 <footer class="wt_footer">
 
-	<section class="wt_footer__section">
-		<!-- footer navigation -->
-		<?php
-			wp_nav_menu(
-				array( 
-					'theme_location' => 'footer-menu',
-					'container' => 'nav',
-					'container_class' => 'wt_footer__nav'
-				)
-			); 
-		?>
+	<section class="wt_footer__logo">
+		<a href="<?php bloginfo('url'); ?>">
+			<img src="<?php the_field('footer_logo', 'options'); ?>" alt="Wikitongues Logo">
+		</a>
+	</section>
 
-		<!-- contact information -->
+	<section class="wt_footer__section" id="content">
+		<?php wp_nav_menu(
+			array( 
+				'theme_location' => 'footer-menu',
+				'container' => 'nav',
+				'container_class' => 'wt_footer__nav'
+			)
+		); ?>
 		<aside class="wt_footer__meta">
-			<a class="wt_footer__logo" href="<?php bloginfo('url'); ?>">
-				<img src="<?php the_field('footer_logo', 'options'); ?>"
-				     alt="Wikitongues Logo">
-			</a>
-			<p class="wt_footer__address">
-				<?php the_field('wikitongues_address', 'options'); ?>
-			</p>
-			<p class="wt_footer__contact">
-				<?php the_field('wikitongues_email', 'options'); ?><br />
-				<?php the_field('wikitongues_phone', 'options'); ?>
-			</p>
+			<section>
+				<div>
+				<p class="wt_footer__address">
+					<?php the_field('wikitongues_address', 'options'); ?>
+				</p>
+				<p class="wt_footer__contact">
+					<?php the_field('wikitongues_email', 'options'); ?><br />
+					<?php the_field('wikitongues_phone', 'options'); ?>
+				</p>
+				</div>
+				<div>
+				<a class="wt_footer__candid" href="https://www.guidestar.org/profile/shared/8eef7d54-d184-4013-aad1-0e3ada544f64" target="_blank"><img src="https://widgets.guidestar.org/TransparencySeal/9488075" /></a>
+				</div>
+			</section>
 		</aside>
-
-		<!-- clear floats -->
-		<div class="clear"></div>
 	</section>
 
-	<!-- land acknowledgement and copyright notice -->
-	<section class="wt_footer__section">
+	<section class="wt_footer__section" id="colophon">
 		<p class="wt_footer__land-acknowledgement">
 			<?php the_field('land_acknowledgement', 'options'); ?>
+			<br>
+			<span class="wt_footer__copyright">&#169; Copyright <?php echo date('Y'); ?> Wikitongues, All Rights Reserved</span>
 		</p>
-		<p class="wt_footer__copyright">
-			<span>&#169; Copyright <?php echo date('Y'); ?> Wikitongues, All Rights Reserved</span>
-		</p>
-		<a class="wt_footer__candid" href="https://www.guidestar.org/profile/shared/8eef7d54-d184-4013-aad1-0e3ada544f64" target="_blank"><img src="https://widgets.guidestar.org/TransparencySeal/9488075" /></a>
 	</section>
 	
 	<?php wp_footer(); ?>
diff --git a/stylus/main.css b/stylus/main.css
index b4cc3725..2942a293 100644
--- a/stylus/main.css
+++ b/stylus/main.css
@@ -2005,6 +2005,15 @@ text
   background: #9581c2;
   text-align: center;
 }
+.wt_newsletter h2 {
+  font-family: 'Schnyder Wide M Web';
+  font-weight: 300;
+  font-style: normal;
+  font-stretch: normal;
+  font-size: 6.08rem;
+  color: #101010;
+  margin-bottom: 3rem;
+}
 .wt_newsletter form>div {
   display: flex;
   justify-content: center;
@@ -2065,7 +2074,7 @@ text
   cursor: pointer;
 }
 .wt_footer {
-  padding: 6rem;
+  padding: 2rem 4rem;
   background: #101010;
   font-family: 'Graphik Web';
   font-weight: 400;
@@ -2075,13 +2084,35 @@ text
   line-height: 1.3;
   color: #fffcef;
   font-size: 1.28rem !important;
+  display: inline-block;
+  width: 100%;
 }
-.wt_footer__section:first-of-type {
+.wt_footer__logo {
+  width: 100%;
+  display: inline-block;
+  margin-bottom: 8px;
+  border-bottom: 1px dotted #3814a5;
+}
+.wt_footer__logo a {
+  display: inline-block;
+  float: right;
+}
+.wt_footer__logo img {
+  max-width: 250px;
+}
+.wt_footer__section {
+  float: left;
+  display: flex;
+  width: 100%;
+  justify-content: center;
+}
+.wt_footer__section#content {
   display: flex;
   flex-direction: row;
 }
-.wt_footer__section:last-of-type {
+.wt_footer__section#colophon {
   text-align: center;
+  margin: 2rem 0 3rem 0;
 }
 .wt_footer__nav {
   flex-grow: 3;
@@ -2100,40 +2131,51 @@ text
   line-height: 1.3;
   color: #fffcef;
   text-decoration: none;
-  font-size: 1.28rem !important;
+  text-transform: initial;
 }
 .wt_footer__nav >ul>li {
   margin-right: 3rem;
 }
 .wt_footer__nav >ul>li>a {
-  font-weight: 600 !important;
+  font-weight: bold;
 }
 .wt_footer__nav .sub-menu {
-  margin-top: 1.5rem;
+  margin-top: 0.5rem;
+}
+.wt_footer__nav .sub-menu a {
+  font-size: 1em;
+  padding: 0.2rem 0;
+  display: inline-block;
 }
 .wt_footer__meta {
   flex-grow: initial;
   text-align: right;
 }
-.wt_footer__logo img {
-  max-width: 150px;
+.wt_footer__meta section {
+  display: inline-block;
+  clear: both;
+  float: left;
 }
-.wt_footer__address {
-  margin: 1.5rem 0;
+.wt_footer__meta section div {
+  float: left;
+}
+.wt_footer__meta section div:first-of-type {
+  margin-right: 16px;
 }
-.wt_footer__land-acknowledgement {
-  margin: 3rem 0 1.5rem;
+.wt_footer__address {
+  margin: 0 0 1.5rem 0;
 }
 .wt_footer__land-acknowledgement a {
   color: #fffcef;
 }
 .wt_footer__copyright {
-  font-weight: 700 !important;
+  font-weight: 700;
+  margin-top: 8px;
+  display: inline-block;
 }
 .wt_footer__candid {
   display: inline-block;
-  width: 90px;
-  margin-top: 2rem;
+  width: 100px;
 }
 .wt_footer__candid img {
   width: 100%;
@@ -2145,7 +2187,6 @@ text
   }
   .wt_footer__nav {
     width: 100%;
-    text-align: center;
   }
   .wt_footer__nav>ul {
     justify-content: center;
@@ -2153,7 +2194,6 @@ text
   .wt_footer__meta {
     margin: 6rem auto;
     width: 100%;
-    text-align: center;
   }
 }
 @media all and (max-width: 768px) {
@@ -2170,16 +2210,30 @@ text
   .wt_newsletter form input[type="submit"] {
     width: 100%;
   }
+  .wt_footer__logo {
+    display: flex;
+    justify-content: center;
+    margin: 1.5rem 0;
+  }
+  .wt_footer__section#content {
+    flex-direction: column;
+  }
   .wt_footer__nav>ul {
     display: block;
+    font-size: 1.2em;
   }
   .wt_footer__nav>ul>li {
-    margin-top: 3rem;
+    margin-top: 2rem;
     margin-right: 0rem;
   }
   .wt_footer__nav>ul>li:first-of-type {
     margin-top: 0;
   }
+  .wt_footer__meta {
+    margin: 2rem auto 0;
+    display: flex;
+    justify-content: center;
+  }
 }
 .wt_button--wide {
   width: 100%;
diff --git a/stylus/require/footer.styl b/stylus/require/footer.styl
index 6c3e61f2..2316d535 100644
--- a/stylus/require/footer.styl
+++ b/stylus/require/footer.styl
@@ -3,6 +3,10 @@
 	background $purple
 	text-align center
 	
+	h2
+		text--header($black)
+		margin-bottom 3rem
+
 	form
 		&>div
 			display flex
@@ -40,18 +44,39 @@
 					cursor pointer
 
 .wt_footer
-	padding 6rem
+	padding 2rem 4rem
 	background $black
 	text--body($parchment)
 	font-size 1.28rem !important
+	display inline-block
+	width 100%
 	
+	&__logo
+		width 100%
+		display inline-block	
+		margin-bottom 8px
+		border-bottom 1px dotted $blue
+		
+		a
+			display inline-block
+			float right 
+		
+		img
+			max-width 250px
+
 	&__section
-		&:first-of-type
+		float left
+		display flex
+		width 100%
+		justify-content center
+
+		&#content
 			display flex
 			flex-direction row
 		
-		&:last-of-type
+		&#colophon
 			text-align center
+			margin 2rem 0 3rem 0
 
 	&__nav
 		flex-grow 3
@@ -65,41 +90,52 @@
 				a
 					text--body($parchment)
 					text-decoration none
-					font-size 1.28rem !important
+					text-transform initial
 			
 			&>li
 				margin-right 3rem
 				
 				&>a
-					font-weight 600 !important
-		
+					font-weight bold
+
 		.sub-menu
-			margin-top 1.5rem
+			margin-top .5rem
+
+			a
+				font-size 1em
+				padding 0.2rem 0
+				display inline-block
 		
 	&__meta
 		flex-grow initial
 		text-align right
-		
-	&__logo
-		img
-			max-width 150px
-	
+
+		section
+			display inline-block
+			clear both
+			float left
+			
+			div
+				float left
+
+				&:first-of-type
+					margin-right 16px		
+
 	&__address
-		margin 1.5rem 0
+		margin 0 0 1.5rem 0
 		
 	&__land-acknowledgement
-		margin 3rem 0 1.5rem
-		
 		a
 			color $parchment
 
 	&__copyright
-		font-weight 700 !important
+		font-weight 700
+		margin-top 8px
+		display inline-block
 	
 	&__candid
 		display inline-block
-		width 90px
-		margin-top 2rem
+		width 100px
 		
 		img
 			width 100%
@@ -112,7 +148,7 @@
 			
 		&__nav
 			width 100%
-			text-align center
+			// text-align center
 			
 			&>ul
 				justify-content center
@@ -120,7 +156,7 @@
 		&__meta
 			margin 6rem auto
 			width 100%
-			text-align center
+			// text-align center
 
 @media all and (max-width:$mobile)
 	.wt_newsletter
@@ -138,13 +174,28 @@
 				&[type="submit"]
 					width 100%
 	
-	.wt_footer__nav
-		&>ul
-			display block
+	.wt_footer
+		&__logo
+			display flex
+			justify-content center
+			margin 1.5rem 0
+		&__section
+			&#content
+				flex-direction column
+		
+		&__nav
+			&>ul
+				display block
+				font-size 1.2em
 
-			&>li
-				margin-top 3rem
-				margin-right 0rem
-				
-				&:first-of-type
-					margin-top 0
\ No newline at end of file
+				&>li
+					margin-top 2rem
+					margin-right 0rem
+					
+					&:first-of-type
+						margin-top 0
+		
+		&__meta
+			margin 2rem auto 0
+			display flex
+			justify-content center