From 97cf9cb1a0bdfa2eb8328fb48f490d5178caa940 Mon Sep 17 00:00:00 2001 From: Jacob Haddon Date: Wed, 18 Nov 2020 16:59:23 -0500 Subject: [PATCH 1/6] first additions for a pop down menu, rather than the new one at the top --- functions.php | 1 + header.php | 43 +++++++++++ style.css | 201 ++++++++++++++++++++++++++++++++++---------------- 3 files changed, 182 insertions(+), 63 deletions(-) diff --git a/functions.php b/functions.php index 2824d33..ff2d251 100644 --- a/functions.php +++ b/functions.php @@ -8,6 +8,7 @@ function melville_theme_styles(){ wp_enqueue_style( 'style', get_stylesheet_uri() ); + wp_enqueue_script('jquery'); } add_action( 'wp_enqueue_scripts', 'melville_theme_styles' ); diff --git a/header.php b/header.php index 03e334c..80f4f37 100644 --- a/header.php +++ b/header.php @@ -33,6 +33,22 @@ --> + + + + + <?php /* * Print the <title> tag based on what is being viewed. @@ -59,6 +75,14 @@ <?php if ( is_singular() ) wp_enqueue_script( "comment-reply" ); ?> <?php wp_head();?> + +<script> +jQuery(document).ready(function(){ + jQuery("#flip").click(function(){ + jQuery("#panel").slideToggle(); + }); +}); +</script> </head> <body <?php body_class(); ?>> @@ -73,5 +97,24 @@ </<?php echo $heading_tag; ?>> <div id="site-description"><?php bloginfo( 'description' ); ?></div> </div><!--#header--> + <div id="flip">Click to slide down panel</div> +<div id="panel"> +<?php wp_nav_menu( array( 'container_class' => 'melville_header_menu', 'theme_location' => 'header-menu' ) ); ?> +Hello world!Top References +<ul> + <li>HTML Reference</li> + <li>CSS Reference</li> + <li>JavaScript Reference</li> + <li>SQL Reference</li> + <li>Python Reference</li> + <li>W3.CSS Reference</li> + <li>Bootstrap Reference</li> + <li>PHP Reference</li> + <li>HTML Colors</li> + <li>Java Reference</li> + <li>Angular Reference</li> + <li>jQuery Reference</li> +</ul> +</div> <div id="content"> diff --git a/style.css b/style.css index 2843994..1fff31a 100644 --- a/style.css +++ b/style.css @@ -16,7 +16,6 @@ Original theme, Dalton Rooney - http://madebyraygun.com /* @group Google Font Loader */ /* #site-title a, #content h1.entry-title, #content h1.page-title, #content h2.entry-title, span.cap { visibility: hidden; } */ /* .wf-active #site-title a, .wf-active #site-title a, .wf-active #content h1.entry-title, .wf-active #content h1.page-title, .wf-active #content h2.entry-title, .wf-active span.cap, .wf-inactive #site-title a, .wf-inactive #site-title a, .wf-inactive #content h1.entry-title, .wf-inactive #content h1.page-title, .wf-inactive #content h2.entry-title, .wf-inactive span.cap { visibility: visible; } */ - /* @end */ /* @group Reset */ /* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */ @@ -61,20 +60,13 @@ a img { border: none; } /* Gets rid of IE's blue borders */ /* @end */ - /* # Width Styles ---------------------------------------------- */ -div#wrapper, div#header, #menu, div#footer -{ - max-width: 810px; -} -img { max-width: 100%;} +div#wrapper, div#header, #menu, div#footer { max-width: 810px; } +img { max-width: 100%; } /* # Typography ---------------------------------------------- */ - /* ## Serif */ - body { font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; } - span.dropcap, .page #content h2, #site-title a, @@ -94,7 +86,6 @@ pre.wp-block-verse, a#cancel-comment-reply-link { font-family: Jost, 'helvetica neue',helvetica, arial,sans-serif; } figcaption, input[type="submit"] { font-family: Jost, Futura; } - /* @group Body ---------------------------------------------- */ body { @@ -104,11 +95,11 @@ body text-align: left; line-height: 1.3em; margin: 0; - text-shadow: #fff 0 0 1px; +/* text-shadow: #fff 0 0 1px; */ /* for extra long words */ -ms-word-wrap: break-word; word-wrap: break-word; -/* #f1ede8 */ + /* #f1ede8 */ } div#wrapper @@ -119,11 +110,14 @@ div#wrapper margin: 0 auto -40px; border-right: 1px solid #cccccc; border-left: 1px solid #cccccc; +/* -moz-box-shadow: 1px 0 20px #dddddd; -webkit-box-shadow: 1px 0 20px #dddddd; box-shadow: 1px 0 20px #dddddd; -/* overflow: hidden; */ + */ + /* overflow: hidden; */ padding-top: 20px; + word-wrap: break-word; } h1, h2, h3, h4, h5, h6 @@ -163,7 +157,6 @@ blockquote } cite { font-style: italic; } - hr { margin: 20px 0; } #content table @@ -205,12 +198,18 @@ hr { margin: 20px 0; } { margin: 20px 0; padding: 10px; + overflow: hidden; + text-overflow: ellipsis; /* background-color: #fdfdfd; border: 1px solid #eeeeee; */ } +#content pre:hover { + overflow: visible; +} + #content address { font-style: italic; @@ -321,11 +320,8 @@ p.wp-caption-text .page-link a:hover { color: #aaa; } .alignnone { margin: 20px 0; } - /* fix the height for these alignments */ -.alignleft img, .alignright img, .aligncenter img, .alignwide img, .alignfull img { - height: auto !important; -} +.alignleft img, .alignright img, .aligncenter img, .alignwide img, .alignfull img { height: auto !important; } .aligncenter { @@ -354,22 +350,12 @@ p.wp-caption-text } /* Remove excess padding for the wide/full alignment */ -.wp-block-cover.alignwide, .wp-block-cover.alignfull { - padding: 0px !important; -} +.wp-block-cover.alignwide, .wp-block-cover.alignfull { padding: 0px !important; } /* To fix inherited width attribute */ -.wp-block-cover { - width: inherit; -} - -.alignwide figcaption { - padding-left: 80px; -} - -.alignfull figcaption { - text-align: center; -} +.wp-block-cover { width: inherit; } +.alignwide figcaption { padding-left: 80px; } +.alignfull figcaption { text-align: center; } .alignfull { @@ -382,14 +368,8 @@ p.wp-caption-text width: 100vw; } -figcaption -{ - font-size: 0.75em; -} - -.wp-block-columns.alignfull { - background: #fff; -} +figcaption { font-size: 0.75em; } +.wp-block-columns.alignfull { background: #fff; } .wp-caption { @@ -410,7 +390,6 @@ br.clear /* Use this br class to clear your floated columns */ /* @end */ - /* @group Header ---------------------------------------------- */ div#header { @@ -425,7 +404,7 @@ div#header { margin: 40px 0 20px 0; text-align: center; - padding-top: 30px; + padding-top: 30px; } #site-title a @@ -454,10 +433,12 @@ div#footer border-top: 1px solid #dddddd; border-right: 1px solid #cccccc; border-left: 1px solid #cccccc; +/* -moz-box-shadow: 1px 4 20px #dddddd; -webkit-box-shadow: 1px 4 20px #dddddd; box-shadow: 1px 4 20px #dddddd; - overflow: hidden; + */ + overflow: hidden; } #footer p.credits @@ -561,9 +542,7 @@ input#searchsubmit:hover margin: 0 auto; } -.blocks-gallery-item { -margin: 0px !important; -} +.blocks-gallery-item { margin: 0px !important; } /* @end */ /* @group Comments ---------------------------------------------- */ @@ -722,7 +701,6 @@ h3#reply-title { margin: 18px 0; } } /* @end */ - /* @group Menu ---------------------------------------------- */ /* Header Menu Styles */ #menu @@ -730,9 +708,11 @@ h3#reply-title { margin: 18px 0; } margin: 0 auto; border-right: 1px solid #cccccc; border-left: 1px solid #cccccc; +/* -moz-box-shadow: 1px 4 20px #dddddd; -webkit-box-shadow: 1px 4 20px #dddddd; box-shadow: 1px 4 20px #dddddd; + */ } #menu div.menu, #menu div.melville_footer_menu @@ -778,7 +758,6 @@ h3#reply-title { margin: 18px 0; } color: #333333; } - /* Footer Menu Styles */ .melville_header_menu ul { @@ -800,11 +779,12 @@ h3#reply-title { margin: 18px 0; } } .melville_header_menu li a { text-decoration: none; } -.melville_header_menu li:hover ul -{ - display: block; - z-index: 10; - padding: 0 10px; + +.melville_header_menu li:hover ul +{ + display: block; + z-index: 10; + padding: 0 10px; border-top: 1px solid; } @@ -826,15 +806,13 @@ h3#reply-title { margin: 18px 0; } } /* # Gutenberg Blocks ---------------------------------------------- */ - - #content pre.wp-block-verse { line-height: 1.5em; color: #222222; padding: 50px; text-shadow: none; -/* Not sure about this idea yet... + /* Not sure about this idea yet... background: #d5b78b94; border-radius: 20px 75px; */ @@ -849,9 +827,7 @@ p.has-drop-cap:not(:focus):first-letter } /* @end */ - /* # Widget Areas ---------------------------------------------- */ - .widget-area { width: 30%; } .widget-area ul @@ -1003,7 +979,6 @@ p.has-drop-cap:not(:focus):first-letter } /* # Possibly Obsolete */ - .headerLine { border-bottom: 0.5px #bbbbbb; @@ -1012,8 +987,8 @@ p.has-drop-cap:not(:focus):first-letter margin-left: auto; } - -.sticky { +.sticky +{ background: #c3dce8; position: relative; width: 100%; @@ -1023,5 +998,105 @@ p.has-drop-cap:not(:focus):first-letter z-index: 0; } - */ +@media screen and (prefers-color-scheme: dark) +{ +/* https://www.schemecolor.com/pure-coffee.php */ + /* Text Colors */ + body, + #content h1.entry-title, + #content h1.page-title, + #content h2.entry-title, + .page #content h2, + .entry-title a, + .page-title a, + #site-title a, + input#searchsubmit:hover, + #commentform input#submit:hover, + #menu div.menu li a, + #menu div.melville_footer_menu li a, + h3#reply-title, h3#comments-title, + .melville_header_menu li a { color: #e6d6c8; } + + #menu div.menu li a:hover, + #menu div.melville_footer_menu li a:hover, + #menu div.menu ul li.current_page_item a, + #menu div.melville_footer_menu ul li.current_page_item a, + #content ins, + .page-link a:link, + .page-link a:visited { color: #482b29; } + + #content pre.wp-block-verse, + .widget-title, + #wp-calendar caption { color: #f0e3b4; } + + #wp-calendar tbody, .page-link a:hover { color: #aaa; } + a, div#header, input#s, + input#searchsubmit, + #commentform input, + #commentform textarea,#respond label, + #respond + .form-allowed-tags { color: #CB997C; } + #content tr th, #content thead th, #content .gallery .gallery-caption { color: #888; } + #respond .required, .widget_rss a.rsswidget:hover { color: #ff4b33; } + .widget_rss a.rsswidget { color: #000; } + a:hover { color: #9d581f; } + + + /* Background Colors */ + body, .melville_header_menu ul ul { background: #241f20; } + div#wrapper, div#footer { background-color: #1e1c16;} + .sticky { background: #724444; } + #content ins, #wp-calendar tbody td { background: #3a2f2f; } + .page-link a:link, .page-link a:visited { background: #f1f1f1; } +/* div#footer { background-color: #241f20; } */ + input#s { background-color: #fefefe; } + #commentform input, #commentform textarea { background-color: #fcfcfc; } + #menu div.menu, #menu div.melville_footer_menu + { + background-color: #67554F;} + + /* Border Colors */ + div#wrapper + { + border-right: 1px solid #cccccc; + border-left: 1px solid #cccccc; + } + + #content table, #content tr td { border: 1px solid #e7e7e7; } + #content tr.odd td { background: #fafafa; } + #content abbr, #content acronym { border-bottom: 1px dotted #ccc; } + .home .sticky .page-link a { background: #d9e8f7; } + .wp-block-columns.alignfull { background: #fff; } + + div#footer + { + border-top: 1px solid #dddddd; + border-right: 1px solid #cccccc; + border-left: 1px solid #cccccc; +/* box-shadow: 1px 4 20px #dddddd; */ + } + + input#s, #content .gallery img, #commentform input, #commentform textarea { border-color: #dddddd; } + input#searchsubmit:hover { border-color: #aaaaaa; } + + + #commentform input#submit:hover { border-color: #aaaaaa; } + + #menu div.menu, #menu div.melville_footer_menu + { + border-bottom-color: #bbb; + border-top-color: #bbb; + } + + #menu div.menu ul, #menu div.melville_footer_menu ul { border-bottom: 1px solid #dddddd; } + + #wp-calendar tbody td + { + border: 1px solid #fff; + } + + .headerLine { border-bottom: 0.5px #bbbbbb; } +} + +/* media */ From abc5cb369db2b6abc898f611e61f5fb3a6135c5b Mon Sep 17 00:00:00 2001 From: Jacob Haddon <jhaddon@apokrupha.com> Date: Thu, 19 Nov 2020 20:16:26 -0500 Subject: [PATCH 2/6] updated menu configs and dark mode tweaks --- header.php | 63 +++++++++++++++++++++++++++++++++--------------------- style.css | 38 +++++++++++++++++++++----------- 2 files changed, 65 insertions(+), 36 deletions(-) diff --git a/header.php b/header.php index 80f4f37..c9c27c2 100644 --- a/header.php +++ b/header.php @@ -36,16 +36,41 @@ -<style>#panel { - padding: 5px; - text-align: center; - background-color: #e5eecc; - border: solid 1px #c3c3c3; -} +<style> #panel { - /* padding: 50px; */ + padding: 5px; + text-align: left; + background-color: #e5eecc; + border: solid 1px #c3c3c3; +/* column-count: 4; */ + padding: 20px; display: none; + margin: 0 0 20px 0; +} + +.bar1, .bar2, .bar3 { + width: 35px; + height: 5px; + background-color: #777; + margin: 6px 0; + transition: 0.4s; +} + +.change .bar1 { + -webkit-transform: rotate(-45deg) translate(-9px, 6px); + transform: rotate(-45deg) translate(-9px, 6px); +} + +.change .bar2 {opacity: 0;} + +.change .bar3 { + -webkit-transform: rotate(45deg) translate(-8px, -8px); + transform: rotate(45deg) translate(-8px, -8px); +} + +#flip { +margin: -40px 0 0 90%; } </style> @@ -80,6 +105,7 @@ jQuery(document).ready(function(){ jQuery("#flip").click(function(){ jQuery("#panel").slideToggle(); + jQuery("#flip").toggleClass("change"); }); }); </script> @@ -88,7 +114,7 @@ jQuery(document).ready(function(){ <body <?php body_class(); ?>> <div id="wrapper"> <?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?> - <?php wp_nav_menu( array( 'container_class' => 'melville_header_menu', 'theme_location' => 'header-menu' ) ); ?> + <div id="header"> <?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?> @@ -97,24 +123,13 @@ jQuery(document).ready(function(){ </<?php echo $heading_tag; ?>> <div id="site-description"><?php bloginfo( 'description' ); ?></div> </div><!--#header--> - <div id="flip">Click to slide down panel</div> + <div id="flip"> <div class="bar1"></div> + <div class="bar2"></div> + <div class="bar3"></div></div> <div id="panel"> <?php wp_nav_menu( array( 'container_class' => 'melville_header_menu', 'theme_location' => 'header-menu' ) ); ?> -Hello world!Top References -<ul> - <li>HTML Reference</li> - <li>CSS Reference</li> - <li>JavaScript Reference</li> - <li>SQL Reference</li> - <li>Python Reference</li> - <li>W3.CSS Reference</li> - <li>Bootstrap Reference</li> - <li>PHP Reference</li> - <li>HTML Colors</li> - <li>Java Reference</li> - <li>Angular Reference</li> - <li>jQuery Reference</li> -</ul> +<div style="clear: both"></div> + </div> <div id="content"> diff --git a/style.css b/style.css index 1fff31a..ae089d2 100644 --- a/style.css +++ b/style.css @@ -243,7 +243,7 @@ hr { margin: 20px 0; } div#content { - margin: 0 0 20px 0; + margin: 40px 0 20px 0; padding: 0px 80px 0 80px; } @@ -393,7 +393,7 @@ br.clear /* @group Header ---------------------------------------------- */ div#header { - margin: 0 0 60px 0; +/* margin: 0 0 20px 0; */ padding: 0 0 20px 0; color: #777777; /* border-bottom: 1px solid #bbbbbb; */ @@ -637,7 +637,7 @@ input[type="submit"] { color: #333; } #respond { - border-top: 1px solid #e7e7e7; +/* border-top: 1px solid #e7e7e7; */ margin: 24px 0; overflow: hidden; position: relative; @@ -761,25 +761,29 @@ h3#reply-title { margin: 18px 0; } /* Footer Menu Styles */ .melville_header_menu ul { - list-style: none; +/* list-style: none; */ padding: 0px; } .melville_header_menu ul ul { - display: none; - position: absolute; - background-color: white; +/* display: none; */ +/* position: absolute; */ +/* background-color: white; */ } .melville_header_menu li { display: inline-block; - padding-right: 20px; + padding-right: 0px; + width: 24%; + vertical-align: top; + } .melville_header_menu li a { text-decoration: none; } +/* .melville_header_menu li:hover ul { display: block; @@ -787,13 +791,16 @@ h3#reply-title { margin: 18px 0; } padding: 0 10px; border-top: 1px solid; } + */ + .melville_header_menu li li { - display: block; +/* display: block; */ + display: inline-block; text-align: left; padding-top: 10px; - padding-left: 5px; + padding-left: 0px; } .melville_header_menu li ul { } @@ -801,7 +808,7 @@ h3#reply-title { margin: 18px 0; } .melville_header_menu { - text-align: center; + text-align: left; font-variant: small-caps; } @@ -1051,10 +1058,17 @@ p.has-drop-cap:not(:focus):first-letter .page-link a:link, .page-link a:visited { background: #f1f1f1; } /* div#footer { background-color: #241f20; } */ input#s { background-color: #fefefe; } - #commentform input, #commentform textarea { background-color: #fcfcfc; } + #commentform input, #commentform textarea { + background: #241f20; +/* background-color: #fcfcfc; */ + } #menu div.menu, #menu div.melville_footer_menu { background-color: #67554F;} + + #panel { + background: #323232; + } /* Border Colors */ div#wrapper From 23bb31595cf4b59c04d27e5d5a555d4ad6556e71 Mon Sep 17 00:00:00 2001 From: Jacob Haddon <jhaddon@apokrupha.com> Date: Thu, 19 Nov 2020 21:15:19 -0500 Subject: [PATCH 3/6] updated with new widget functions. --- functions.php | 36 +++++++++++++++++++++++++++++++++++- header.php | 4 ++-- 2 files changed, 37 insertions(+), 3 deletions(-) diff --git a/functions.php b/functions.php index ff2d251..faeb176 100644 --- a/functions.php +++ b/functions.php @@ -67,7 +67,8 @@ function melville_setup() { // This theme uses wp_nav_menu() in one locations. register_nav_menus( array( 'header-menu' => __( 'Header Menu', 'twentyten'), - 'footer-menu' => __( 'Footer Menu', 'twentyten' ) + 'footer-menu' => __( 'Footer Menu', 'twentyten' ), + 'slidedown-menu' => __( 'SlideDown Menu', 'twentyten' ) ) ); } endif; @@ -377,6 +378,39 @@ function melville_widgets_init() { 'after_title' => '</h3>', ) ); + + + + // Area 5, located in the popout. Empty by default. + register_sidebar( + array( + '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">', + 'after_title' => '</h3>', + ) + ); + + + // Area 6, located in the popout. Empty by default. + register_sidebar( + array( + '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">', + 'after_title' => '</h3>', + ) + ); + + + + } /** Register sidebars by running twentyten_widgets_init() on the widgets_init hook. */ add_action( 'widgets_init', 'melville_widgets_init' ); diff --git a/header.php b/header.php index c9c27c2..75a4328 100644 --- a/header.php +++ b/header.php @@ -127,8 +127,8 @@ jQuery(document).ready(function(){ <div class="bar2"></div> <div class="bar3"></div></div> <div id="panel"> -<?php wp_nav_menu( array( 'container_class' => 'melville_header_menu', 'theme_location' => 'header-menu' ) ); ?> - +<?php wp_nav_menu( array( 'container_class' => 'melville_header_menu', 'theme_location' => 'slidedown-menu' ) ); ?> +<?php get_sidebar( 'slidedown' ); ?> <div style="clear: both"></div> </div> From 254db6f3bf62dbaa8f1210772d049593a5faf92a Mon Sep 17 00:00:00 2001 From: Jacob Haddon <jhaddon@apokrupha.com> Date: Thu, 19 Nov 2020 21:16:02 -0500 Subject: [PATCH 4/6] added the sidebar php for the new widget area. lots to style now. --- sidebar-slidedown.php | 44 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 sidebar-slidedown.php diff --git a/sidebar-slidedown.php b/sidebar-slidedown.php new file mode 100644 index 0000000..6d2730e --- /dev/null +++ b/sidebar-slidedown.php @@ -0,0 +1,44 @@ +<?php +/** + * The popout widget areas + * + * @package WordPress + * @subpackage Twenty_Ten + * @since Twenty Ten 1.0 + */ +?> + +<?php + /* + * The footer widget area is triggered if any of the areas + * have widgets. So let's check that first. + * + * If none of the sidebars have widgets, then let's bail early. + */ +if ( ! is_active_sidebar( 'first-slidedown-widget-area' ) + && ! is_active_sidebar( 'second-slidedown-widget-area' ) + ) { + return; +} + // If we get this far, we have widgets. Let do this. +?> + + <div id="footer-widget-area" role="complementary"> + +<?php if ( is_active_sidebar( 'first-slidedown-widget-area' ) ) : ?> + <div id="first" class="slidedown-widget-area"> + <ul class="xoxo"> + <?php dynamic_sidebar( 'first-slidedown-widget-area' ); ?> + </ul> + </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"> + <?php dynamic_sidebar( 'second-slidedown-widget-area' ); ?> + </ul> + </div><!-- #second .widget-area --> +<?php endif; ?> + + </div><!-- #footer-widget-area --> 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 5/6] 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) From 6aa0c6e2119185ba58a8385dfc19b997a8913782 Mon Sep 17 00:00:00 2001 From: Jacob Haddon <jhaddon@apokrupha.com> Date: Sat, 19 Dec 2020 19:44:05 -0500 Subject: [PATCH 6/6] minor corrections --- functions.php | 2 +- header.php | 4 +++- style.css | 14 +++++++++----- 3 files changed, 13 insertions(+), 7 deletions(-) diff --git a/functions.php b/functions.php index 3f45920..f97c606 100644 --- a/functions.php +++ b/functions.php @@ -389,7 +389,7 @@ function melville_widgets_init() { 'description' => __( 'An optional widget area for your site sidedown.', 'twentyten' ), 'before_widget' => '<div id="%1$s" class="slidedown-widget-container %2$s">', 'after_widget' => '</div>', - 'before_title' => '<h3 class="lidedown-widget-title">', + 'before_title' => '<h3 class="slidedown-widget-title">', 'after_title' => '</h3>', ) ); diff --git a/header.php b/header.php index 1c218fe..87fd821 100644 --- a/header.php +++ b/header.php @@ -98,7 +98,9 @@ div#slidedown-widget-area input#searchsubmit { margin: 0 10px 0 20px; } .widget-float-right { float: right; } - + h3.slidedown-widget-title { + font-size: 1.3em; + } diff --git a/style.css b/style.css index 2808181..ff1c183 100644 --- a/style.css +++ b/style.css @@ -987,20 +987,24 @@ p.has-drop-cap:not(:focus):first-letter } -@media screen and (max-width: 450px) { - - .widget-float-right, .widget-float-left, { +@media screen and (max-width: 550px) { + .widget-float-right, .widget-float-left { + float: left; } .slidedown-widget-area { width: 90%; } + + .melville_header_menu { + font-size: 1.4em; + } .melville_header_menu li { - width: 45%; - margin-bottom: 10px; + width: 95%; + margin-bottom: 30px; } }