Wordpress/Melville
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updated menu configs and dark mode tweaks

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
header.php
View File

@ -36,16 +36,41 @@
<style>#panel { <style>
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel { #panel {
/* padding: 50px; */ padding: 5px;
text-align: left;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
/* column-count: 4; */
padding: 20px;
display: none; 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> </style>
@ -80,6 +105,7 @@
jQuery(document).ready(function(){ jQuery(document).ready(function(){
jQuery("#flip").click(function(){ jQuery("#flip").click(function(){
jQuery("#panel").slideToggle(); jQuery("#panel").slideToggle();
jQuery("#flip").toggleClass("change");
}); });
}); });
</script> </script>
@ -88,7 +114,7 @@ jQuery(document).ready(function(){
<body <?php body_class(); ?>> <body <?php body_class(); ?>>
<div id="wrapper"> <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 /* 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"> <div id="header">
<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?> <?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
@ -97,24 +123,13 @@ jQuery(document).ready(function(){
</<?php echo $heading_tag; ?>> </<?php echo $heading_tag; ?>>
<div id="site-description"><?php bloginfo( 'description' ); ?></div> <div id="site-description"><?php bloginfo( 'description' ); ?></div>
</div><!--#header--> </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"> <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' => 'header-menu' ) ); ?>
Hello world!Top References <div style="clear: both"></div>
<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>
<div id="content"> <div id="content">

38
style.css
View File

@ -243,7 +243,7 @@ hr { margin: 20px 0; }
div#content div#content
{ {
margin: 0 0 20px 0; margin: 40px 0 20px 0;
padding: 0px 80px 0 80px; padding: 0px 80px 0 80px;
} }
@ -393,7 +393,7 @@ br.clear
/* @group Header ---------------------------------------------- */ /* @group Header ---------------------------------------------- */
div#header div#header
{ {
margin: 0 0 60px 0; /* margin: 0 0 20px 0; */
padding: 0 0 20px 0; padding: 0 0 20px 0;
color: #777777; color: #777777;
/* border-bottom: 1px solid #bbbbbb; */ /* border-bottom: 1px solid #bbbbbb; */
@ -637,7 +637,7 @@ input[type="submit"] { color: #333; }
#respond #respond
{ {
border-top: 1px solid #e7e7e7; /* border-top: 1px solid #e7e7e7; */
margin: 24px 0; margin: 24px 0;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
@ -761,25 +761,29 @@ h3#reply-title { margin: 18px 0; }
/* Footer Menu Styles */ /* Footer Menu Styles */
.melville_header_menu ul .melville_header_menu ul
{ {
list-style: none; /* list-style: none; */
padding: 0px; padding: 0px;
} }
.melville_header_menu ul ul .melville_header_menu ul ul
{ {
display: none; /* display: none; */
position: absolute; /* position: absolute; */
background-color: white; /* background-color: white; */
} }
.melville_header_menu li .melville_header_menu li
{ {
display: inline-block; 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 a { text-decoration: none; }
/*
.melville_header_menu li:hover ul .melville_header_menu li:hover ul
{ {
display: block; display: block;
@ -787,13 +791,16 @@ h3#reply-title { margin: 18px 0; }
padding: 0 10px; padding: 0 10px;
border-top: 1px solid; border-top: 1px solid;
} }
*/
.melville_header_menu li li .melville_header_menu li li
{ {
display: block; /* display: block; */
display: inline-block;
text-align: left; text-align: left;
padding-top: 10px; padding-top: 10px;
padding-left: 5px; padding-left: 0px;
} }
.melville_header_menu li ul { } .melville_header_menu li ul { }
@ -801,7 +808,7 @@ h3#reply-title { margin: 18px 0; }
.melville_header_menu .melville_header_menu
{ {
text-align: center; text-align: left;
font-variant: small-caps; 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; } .page-link a:link, .page-link a:visited { background: #f1f1f1; }
/* div#footer { background-color: #241f20; } */ /* div#footer { background-color: #241f20; } */
input#s { background-color: #fefefe; } 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 #menu div.menu, #menu div.melville_footer_menu
{ {
background-color: #67554F;} background-color: #67554F;}
#panel {
background: #323232;
}
/* Border Colors */ /* Border Colors */
div#wrapper div#wrapper