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' ),
'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>',
)
);

View File

@ -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

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.
?>
<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; ?>

View File

@ -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)