forked from jakub/jakubb-hugo
Compare commits
2 Commits
8a9005bd0e
...
be6208af22
| Author | SHA1 | Date | |
|---|---|---|---|
|
be6208af22 | ||
|
|
97f1d637eb |
@ -2,9 +2,22 @@
|
||||
<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>
|
||||
|
||||
@ -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; */
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user