From 7afd8eca76f03ce0259c844d8d75e77fe7dfd1e2 Mon Sep 17 00:00:00 2001
From: Jacob Haddon <jhaddon@apokrupha.com>
Date: Wed, 25 Nov 2020 20:49:21 -0500
Subject: [PATCH] updated styling for moblie, fixed classes and IDs for
 slidedown widget areas

---
 functions.php         | 12 +++++------
 header.php            | 49 +++++++++++++++++++++++++++++++++++--------
 sidebar-slidedown.php | 14 ++++++-------
 style.css             | 32 ++++++++++++++++++++++++----
 4 files changed, 81 insertions(+), 26 deletions(-)

diff --git a/functions.php b/functions.php
index faeb176..3f45920 100644
--- a/functions.php
+++ b/functions.php
@@ -387,9 +387,9 @@ function melville_widgets_init() {
 			'name'          => __( 'First Slidedown Widget Area', 'twentyten' ),
 			'id'            => 'first-slidedown-widget-area',
 			'description'   => __( 'An optional widget area for your site sidedown.', 'twentyten' ),
-			'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
-			'after_widget'  => '</li>',
-			'before_title'  => '<h3 class="widget-title">',
+			'before_widget' => '<div id="%1$s" class="slidedown-widget-container %2$s">',
+			'after_widget'  => '</div>',
+			'before_title'  => '<h3 class="lidedown-widget-title">',
 			'after_title'   => '</h3>',
 		)
 	);
@@ -401,9 +401,9 @@ function melville_widgets_init() {
 			'name'          => __( 'Second Slidedown Widget Area', 'twentyten' ),
 			'id'            => 'second-slidedown-widget-area',
 			'description'   => __( 'An optional widget area for your site slidedown.', 'twentyten' ),
-			'before_widget' => '<li id="%1$s" class="widget-container %2$s">',
-			'after_widget'  => '</li>',
-			'before_title'  => '<h3 class="widget-title">',
+			'before_widget' => '<div id="%1$s" class="slidedown-widget-container %2$s">',
+			'after_widget'  => '</div>',
+			'before_title'  => '<h3 class="slidedown-widget-title">',
 			'after_title'   => '</h3>',
 		)
 	);
diff --git a/header.php b/header.php
index 75a4328..1c218fe 100644
--- a/header.php
+++ b/header.php
@@ -38,15 +38,22 @@
 
 <style>
 
-#panel {
-  padding: 5px;
-  text-align: left;
-  background-color: #e5eecc;
-  border: solid 1px #c3c3c3;
-/*   column-count: 4; */
-  padding: 20px;
-  display: none;
-  margin: 0 0 20px 0;
+#panel
+{
+	/* color: black; */
+	text-align: left;
+/* 	background-color: #9BC8E8; */
+	  background-color: #e5eecc;
+	border: solid 1px #c3c3c3;
+	/*   column-count: 4; */
+	padding: 20px;
+	display: none;
+	margin: 0 0 20px 0;
+}
+
+#panel a {
+
+/* color:black; */
 }
 
 .bar1, .bar2, .bar3 {
@@ -72,6 +79,30 @@
 #flip {
 margin: -40px 0 0 90%;
 }
+
+#slidedown-widget-area { margin: 20px; }
+.slidedown-widget-container {}
+
+div#slidedown-widget-area input#s {
+
+	width: 55%;
+
+}
+
+div#slidedown-widget-area input#searchsubmit { margin: 0 10px 0 20px; }
+
+.slidedown-widget-area { width: 45%;}
+
+.widget-float-left { float: left;}
+
+.widget-float-right {
+	float: right;
+}
+
+
+
+
+
 </style>
  
 <title><?php
diff --git a/sidebar-slidedown.php b/sidebar-slidedown.php
index 6d2730e..ec9be80 100644
--- a/sidebar-slidedown.php
+++ b/sidebar-slidedown.php
@@ -23,21 +23,21 @@ if ( ! is_active_sidebar( 'first-slidedown-widget-area' )
 	// If we get this far, we have widgets. Let do this.
 ?>
 
-			<div id="footer-widget-area" role="complementary">
+			<div id="slidedown-widget-area" role="complementary">
 
 <?php if ( is_active_sidebar( 'first-slidedown-widget-area' ) ) : ?>
-				<div id="first" class="slidedown-widget-area">
-					<ul class="xoxo">
+				<div id="first" class="widget-float-left slidedown-widget-area">
+					<div class="xoxo">
 						<?php dynamic_sidebar( 'first-slidedown-widget-area' ); ?>
-					</ul>
+					</div>
 				</div><!-- #first .widget-area -->
 <?php endif; ?>
 
 <?php if ( is_active_sidebar( 'second-slidedown-widget-area' ) ) : ?>
-				<div id="second" class="slidedown-widget-area">
-					<ul class="xoxo">
+				<div id="second" class="widget-float-right slidedown-widget-area">
+					<div class="xoxo">
 						<?php dynamic_sidebar( 'second-slidedown-widget-area' ); ?>
-					</ul>
+					</div>
 				</div><!-- #second .widget-area -->
 <?php endif; ?>
 
diff --git a/style.css b/style.css
index ae089d2..2808181 100644
--- a/style.css
+++ b/style.css
@@ -775,10 +775,10 @@ h3#reply-title { margin: 18px 0; }
 .melville_header_menu li
 {
 	display: inline-block;
-	padding-right: 0px;
 	width: 24%;
 	vertical-align: top;
-	
+	padding: 0px;
+	margin-bottom: 20px;
 }
 
 .melville_header_menu li a { text-decoration: none; }
@@ -808,8 +808,9 @@ h3#reply-title { margin: 18px 0; }
 
 .melville_header_menu
 {
-	text-align: left;
+	text-align: center;
 	font-variant: small-caps;
+	margin-bottom: 50px;
 }
 
 /* # Gutenberg Blocks ---------------------------------------------- */
@@ -985,6 +986,28 @@ p.has-drop-cap:not(:focus):first-letter
 	#footer-widget-area .widget-area { width: 25%; }
 }
 
+
+@media screen and (max-width: 450px) {
+
+	.widget-float-right, .widget-float-left, {
+
+	}
+
+	.slidedown-widget-area {
+		width: 90%;
+	}
+
+	.melville_header_menu li
+	{
+		width: 45%;
+		margin-bottom: 10px;
+	}
+
+}
+
+
+
+
 /* # Possibly Obsolete  */
 .headerLine
 {
@@ -996,13 +1019,14 @@ p.has-drop-cap:not(:focus):first-letter
 
 .sticky
 {
-	background: #c3dce8;
+	/* 	background: #c3dce8; */
 	position: relative;
 	width: 100%;
 	margin: 20px -80px !important;
 	padding: 30px 80px;
 	text-shadow: none;
 	z-index: 0;
+	background-color: #E1DEE0;
 }
 
 @media screen and (prefers-color-scheme: dark)