updated menu configs and dark mode tweaks

This commit is contained in:
Jacob Haddon 2020-11-19 20:16:26 -05:00
parent 97cf9cb1a0
commit abc5cb369d
2 changed files with 65 additions and 36 deletions

View File

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

View File

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