Commit db8183bb authored by Satya Kresna's avatar Satya Kresna

fix: remove toggle menu and replace navigation title

parent 0aedcb58
......@@ -18,81 +18,19 @@
}
}
.navigation-title {
letter-spacing: 0.1rem;
text-transform: uppercase;
display: flex;
align-items: center;
}
.navigation-list {
float: right;
display: flex;
list-style: none;
margin-bottom: 0;
margin-top: 0;
@media only screen and (max-width : 768px) {
position: absolute;
top: 5rem;
right: 0;
z-index: 1;
visibility: hidden;
opacity: 0;
padding: 0;
max-height: 0;
width: 100%;
background-color: $bg-color;
border-top: solid 2px $alt-bg-color;
border-bottom: solid 2px $alt-bg-color;
transition: opacity 0.25s, max-height 0.15s linear;
}
.navigation-item {
float: left;
margin: 0;
position: relative;
@media only screen and (max-width : 768px) {
float: none !important;
text-align: center;
a, span {
line-height: 3rem;
}
}
a, span {
margin-left: 1.0rem;
margin-right: 1.0rem;
}
}
.menu-separator {
@media only screen and (max-width : 768px) {
border-top: 2px solid $fg-color;
margin: 0 8.0rem;
span {
display: none;
}
}
}
}
#menu-toggle {
display: none;
@media only screen and (max-width : 768px) {
&:checked + label {
color: $alt-bg-color;
}
&:checked + label + ul {
visibility: visible;
opacity: 1;
max-height: 100rem;
}
}
}
.menu-button {
display: none;
@media only screen and (max-width : 768px) {
display: block;
font-size: 2.4rem;
font-weight: 400;
line-height: 6.0rem;
color: $fg-color;
cursor: pointer;
&:hover,
&:focus {
color: $link-color
}
}
}
}
<nav class="navigation">
<a class="navigation-title" href="{{ .Site.BaseURL | absLangURL }}">
{{ .Site.Title }}
<a class="navigation-title" href="{{ .Site.BaseURL | absLangURL }}" title="home">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"/></svg>
</a>
<input type="checkbox" id="menu-toggle" />
<label class="menu-button" for="menu-toggle">
<span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"/></svg>
</span>
</label>
<ul class="navigation-list">
{{ with .Site.Menus.main}}
{{ range sort . }}
......
......@@ -229,68 +229,17 @@ svg {
.navigation a:hover, .navigation a:focus {
color: #1565c0; }
.navigation .navigation-title {
letter-spacing: 0.1rem;
text-transform: uppercase; }
display: flex;
align-items: center; }
.navigation .navigation-list {
float: right;
display: flex;
list-style: none;
margin-bottom: 0;
margin-top: 0; }
@media only screen and (max-width: 768px) {
.navigation .navigation-list {
position: absolute;
top: 5rem;
right: 0;
z-index: 1;
visibility: hidden;
opacity: 0;
padding: 0;
max-height: 0;
width: 100%;
background-color: #FAFAFA;
border-top: solid 2px #E0E0E0;
border-bottom: solid 2px #E0E0E0;
transition: opacity 0.25s, max-height 0.15s linear; } }
.navigation .navigation-list .navigation-item {
float: left;
margin: 0;
position: relative; }
@media only screen and (max-width: 768px) {
.navigation .navigation-list .navigation-item {
float: none !important;
text-align: center; }
.navigation .navigation-list .navigation-item a, .navigation .navigation-list .navigation-item span {
line-height: 3rem; } }
.navigation .navigation-list .navigation-item a, .navigation .navigation-list .navigation-item span {
margin-left: 1.0rem;
margin-right: 1.0rem; }
@media only screen and (max-width: 768px) {
.navigation .navigation-list .menu-separator {
border-top: 2px solid #212121;
margin: 0 8.0rem; }
.navigation .navigation-list .menu-separator span {
display: none; } }
.navigation #menu-toggle {
display: none; }
@media only screen and (max-width: 768px) {
.navigation #menu-toggle:checked + label {
color: #E0E0E0; }
.navigation #menu-toggle:checked + label + ul {
visibility: visible;
opacity: 1;
max-height: 100rem; } }
.navigation .menu-button {
display: none; }
@media only screen and (max-width: 768px) {
.navigation .menu-button {
display: block;
font-size: 2.4rem;
font-weight: 400;
line-height: 6.0rem;
color: #212121;
cursor: pointer; }
.navigation .menu-button:hover, .navigation .menu-button:focus {
color: #1565c0; } }
.navigation .navigation-list .navigation-item a, .navigation .navigation-list .navigation-item span {
margin-left: 1.0rem;
margin-right: 1.0rem; }
.pagination {
text-align: center; }
.pagination li {
......
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z"/></svg>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment