Compare commits

..

2 Commits

Author SHA1 Message Date
Jakub
be6208af22 wip - hamburger menu 2024-02-02 06:31:53 -05:00
Jakub
97f1d637eb remove old css file 2024-02-01 21:37:39 -05:00
4 changed files with 74 additions and 263 deletions

View File

@ -2,10 +2,23 @@
<input class="menu-btn" type="checkbox" id="menu-btn" />
<ul class="menu" >
<li>
<label class="menu-icon" for="menu-btn">
<a href="/" class="logo" >{{ .Site.Title }}</a>
<label class="menu-icon" for="menu-btn">
<div class="hamburger" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<script>
function myFunction(x) {
x.classList.toggle("change");
}
</script>
</label>
<span class="menu-entries">
<a href="/" class="home-link" >Home</a>
{{ range.Site.Menus.main }}

View File

@ -1,261 +0,0 @@
body {
}
a {
}
.menu-entries a:hover,
.header .menu-btn:hover {
background-color: var(--alt-bg);
color: var(--acc-1);
}
.header .menu-btn:checked ~ .menu .logo {
background-color: var(--acc-1);
color: var(--alt-bg);
}
a.home-link{
display: none;
}
.logo img, .logo {
height: 24px;
}
.content {
overflow: none;
margin: auto 5% auto 5%;
word-wrap: break-word;
/* padding-bottom: 15%; */
/* display: inline-grid; */
/* max-width: 45rem; */
/* margin-bottom: 2rem; */
/* margin: 2rem auto; */
/* padding-top: 100px; */
}
/* Lists */
.post-snippet {
margin-bottom: 1rem;
}
.post-snippet h3 {
margin-bottom: 0.25rem;
}
/* header */
.header {
z-index: 3;
}
.header .menu {
/* /1* width: 100%; *1/ */
/* height: auto; */
/* overflow: hidden; */
/* background-color: #a89984; */
}
.header .logo {
/* float: left; */
}
/* menu */
.menu-entries {
/* display: none; */
}
.header .menu {
}
/* menu icon */
.logo {
cursor: pointer;
}
.header .menu-icon {
/* cursor: pointer; */
/* float: right; */
/* padding: 28px 20px; */
/* position: relative; */
/* user-select: none; */
}
/* menu btn */
.header .menu-btn {
display: none;
}
.menu .logo {
transition: 400ms;
}
footer {
/* position: fixed; */
left: 0;
/* bottom: 0; */
/* width: 100%; */
text-align: center;
/* max-height: 15%; */
padding-top; 10px;
padding-bottom: 10px;
}
footer .buttons {
margin-top: 5px;
}
footer .buttons img {
/* margin: 5px; */
display: inline-block;
max-height: 25em;
max-width: 100%;
}
/* div.content, footer{ */
/* margin-left: 0; */
/* /1* height: 1000px; *1/ */
/* } */
/* @media screen and (max-width: 900px) { */
/* ul.menu { width: 100%; */
/* height: auto; */
/* position: relative; */
/* } */
/* ul.menu li a { */
/* padding: 15px; */
/* } */
/* div.content, footer {margin-left: 0;} */
/* } */
/* .menu a { */
/* padding: 20px 30px; */
/* } */
/* ul.menu li a { */
/* float: left; */
/* } */
/* .menu-entries { */
/* float: right; */
/* } */
/* .header .menu li .menu-entries{ */
/* clear: none; */
/* align-self: right; */
/* width: auto; */
/* max-height: none; */
/* } */
/* .header .menu-icon { */
/* display: none; */
/* } */
/* } */
@media screen and (max-width: 750px) {
.menu-entries {
text-align: center;
float: none;
display: none;
}
.logo {
/* clear: none; */
pointer-events: none;
}
.menu-icon {
cursor: pointer;
}
.menu {
overflow: auto;
}
.content {
margin: auto 5% auto 5%;
}
}
@media screen and (min-width: 1040px) {
/* ul.menu { */
.header {
top: 0;
width: 15%;
height: 100%;
position: fixed;
}
.menu {
height: 100%;
}
/* .header .logo { */
/* float: none; */
/* } */
/* .header .menu { */
/* clear: both; */
/* } */
.menu-entries{
float: none;
}
.menu-entries a:hover,
.header .menu-btn:hover {
color: #83a598;
background-color: #504945;
}
/* ul.menu li a { */
/* float: none; */
/* padding: 20px; */
/* } */
.content, footer {
/* margin: auto; */
padding: 1px 16px;
}
.header .menu li a {
display: block;
/* width: 100%; */
float: none;
}
.content {
margin: auto 5% auto 20%;
}
}
/* .logo { */
/* height: 28px; */
/* width: fit-content; */
/* } */
/* } */
/* .header .logo { */
/* display: block; */

View File

@ -1,4 +1,4 @@
@import url('./colors.css'); /* Include colorscheme */
@import url('./colorschemes/gruvbox.css'); /* Include colorscheme */
/* Globals */
html, body {
@ -36,6 +36,10 @@ a{
}
.hamburger {
display: none;
}
.menu-entries a:hover{
background-color: var(--acc-1);
color: var(--alt-bg);
@ -105,6 +109,59 @@ a.logo {
color: var(--alt-bg);
transition: 400ms;
}
.hamburger {
display: block;
float: right;
position: absolute;
top: 0;
right: 0;
margin-top: 12px;
margin-right: 12px;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: var(--acc-1);
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
background-color: var(--alt-bg);
transform: translate(0, 11px) rotate(-45deg);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
transform: translate(0, -11px) rotate(45deg);
background-color: var(--alt-bg);
}
}
@media screen and (min-width: 1040px) {
@ -132,3 +189,5 @@ a.logo {
box-shadow: inset -22px 0 20px -20px var(--shadow);
}
}