updated styling for moblie, fixed classes and IDs for slidedown widget areas

This commit is contained in:
Jacob Haddon 2020-11-25 20:49:21 -05:00
parent 254db6f3bf
commit 7afd8eca76
4 changed files with 81 additions and 26 deletions

View File

@ -387,9 +387,9 @@ function melville_widgets_init() {
'name' => __( 'First Slidedown Widget Area', 'twentyten' ), 'name' => __( 'First Slidedown Widget Area', 'twentyten' ),
'id' => 'first-slidedown-widget-area', 'id' => 'first-slidedown-widget-area',
'description' => __( 'An optional widget area for your site sidedown.', 'twentyten' ), 'description' => __( 'An optional widget area for your site sidedown.', 'twentyten' ),
'before_widget' => '<li id="%1$s" class="widget-container %2$s">', 'before_widget' => '<div id="%1$s" class="slidedown-widget-container %2$s">',
'after_widget' => '</li>', 'after_widget' => '</div>',
'before_title' => '<h3 class="widget-title">', 'before_title' => '<h3 class="lidedown-widget-title">',
'after_title' => '</h3>', 'after_title' => '</h3>',
) )
); );
@ -401,9 +401,9 @@ function melville_widgets_init() {
'name' => __( 'Second Slidedown Widget Area', 'twentyten' ), 'name' => __( 'Second Slidedown Widget Area', 'twentyten' ),
'id' => 'second-slidedown-widget-area', 'id' => 'second-slidedown-widget-area',
'description' => __( 'An optional widget area for your site slidedown.', 'twentyten' ), 'description' => __( 'An optional widget area for your site slidedown.', 'twentyten' ),
'before_widget' => '<li id="%1$s" class="widget-container %2$s">', 'before_widget' => '<div id="%1$s" class="slidedown-widget-container %2$s">',
'after_widget' => '</li>', 'after_widget' => '</div>',
'before_title' => '<h3 class="widget-title">', 'before_title' => '<h3 class="slidedown-widget-title">',
'after_title' => '</h3>', 'after_title' => '</h3>',
) )
); );

View File

@ -38,15 +38,22 @@
<style> <style>
#panel { #panel
padding: 5px; {
text-align: left; /* color: black; */
background-color: #e5eecc; text-align: left;
border: solid 1px #c3c3c3; /* background-color: #9BC8E8; */
/* column-count: 4; */ background-color: #e5eecc;
padding: 20px; border: solid 1px #c3c3c3;
display: none; /* column-count: 4; */
margin: 0 0 20px 0; padding: 20px;
display: none;
margin: 0 0 20px 0;
}
#panel a {
/* color:black; */
} }
.bar1, .bar2, .bar3 { .bar1, .bar2, .bar3 {
@ -72,6 +79,30 @@
#flip { #flip {
margin: -40px 0 0 90%; 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> </style>
<title><?php <title><?php

View File

@ -23,21 +23,21 @@ if ( ! is_active_sidebar( 'first-slidedown-widget-area' )
// If we get this far, we have widgets. Let do this. // 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' ) ) : ?> <?php if ( is_active_sidebar( 'first-slidedown-widget-area' ) ) : ?>
<div id="first" class="slidedown-widget-area"> <div id="first" class="widget-float-left slidedown-widget-area">
<ul class="xoxo"> <div class="xoxo">
<?php dynamic_sidebar( 'first-slidedown-widget-area' ); ?> <?php dynamic_sidebar( 'first-slidedown-widget-area' ); ?>
</ul> </div>
</div><!-- #first .widget-area --> </div><!-- #first .widget-area -->
<?php endif; ?> <?php endif; ?>
<?php if ( is_active_sidebar( 'second-slidedown-widget-area' ) ) : ?> <?php if ( is_active_sidebar( 'second-slidedown-widget-area' ) ) : ?>
<div id="second" class="slidedown-widget-area"> <div id="second" class="widget-float-right slidedown-widget-area">
<ul class="xoxo"> <div class="xoxo">
<?php dynamic_sidebar( 'second-slidedown-widget-area' ); ?> <?php dynamic_sidebar( 'second-slidedown-widget-area' ); ?>
</ul> </div>
</div><!-- #second .widget-area --> </div><!-- #second .widget-area -->
<?php endif; ?> <?php endif; ?>

View File

@ -775,10 +775,10 @@ h3#reply-title { margin: 18px 0; }
.melville_header_menu li .melville_header_menu li
{ {
display: inline-block; display: inline-block;
padding-right: 0px;
width: 24%; width: 24%;
vertical-align: top; vertical-align: top;
padding: 0px;
margin-bottom: 20px;
} }
.melville_header_menu li a { text-decoration: none; } .melville_header_menu li a { text-decoration: none; }
@ -808,8 +808,9 @@ h3#reply-title { margin: 18px 0; }
.melville_header_menu .melville_header_menu
{ {
text-align: left; text-align: center;
font-variant: small-caps; font-variant: small-caps;
margin-bottom: 50px;
} }
/* # Gutenberg Blocks ---------------------------------------------- */ /* # Gutenberg Blocks ---------------------------------------------- */
@ -985,6 +986,28 @@ p.has-drop-cap:not(:focus):first-letter
#footer-widget-area .widget-area { width: 25%; } #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 */ /* # Possibly Obsolete */
.headerLine .headerLine
{ {
@ -996,13 +1019,14 @@ p.has-drop-cap:not(:focus):first-letter
.sticky .sticky
{ {
background: #c3dce8; /* background: #c3dce8; */
position: relative; position: relative;
width: 100%; width: 100%;
margin: 20px -80px !important; margin: 20px -80px !important;
padding: 30px 80px; padding: 30px 80px;
text-shadow: none; text-shadow: none;
z-index: 0; z-index: 0;
background-color: #E1DEE0;
} }
@media screen and (prefers-color-scheme: dark) @media screen and (prefers-color-scheme: dark)