Make media queries for content direction

main
Nikita Tokarchuk 2 years ago
parent 541ae39098
commit 5da00eefee
Signed by: mainnika
GPG Key ID: A595FB7E3E56911C
  1. 4
      pkg/templates/menu.go.tmpl
  2. 8
      web/style/index.scss
  3. 8
      web/style/menu.scss

@ -1,6 +1,6 @@
<div class="menu"> <div class="menu columns-on-mobile">
<div class="menu-logo"><a href="{{ getIndexURL }}"><span>nikita</span>.tokarch.uk</a></div> <div class="menu-logo"><a href="{{ getIndexURL }}"><span>nikita</span>.tokarch.uk</a></div>
<ul class="menu-nav"> <ul class="menu-nav columns-on-tablet columns-on-mobile">
<li class="menu-nav-li1"><a href="#this-is-blog"><i class="bi bi-journal-arrow-down"></i> blog</a></li> <li class="menu-nav-li1"><a href="#this-is-blog"><i class="bi bi-journal-arrow-down"></i> blog</a></li>
<li class="menu-nav-li2"><a class="external" target="_blank" href="https://github.com/mainnika"><i class="bi bi-github"></i> github</a></li> <li class="menu-nav-li2"><a class="external" target="_blank" href="https://github.com/mainnika"><i class="bi bi-github"></i> github</a></li>
<li class="menu-nav-li3"><a class="external" target="_blank" href="https://www.linkedin.com/in/mainnika"><i class="bi bi-linkedin"></i> linkedin</a></li> <li class="menu-nav-li3"><a class="external" target="_blank" href="https://www.linkedin.com/in/mainnika"><i class="bi bi-linkedin"></i> linkedin</a></li>

@ -62,6 +62,10 @@ a.external::after {
margin-left: 1.4em; margin-left: 1.4em;
margin-right: 1.4em; margin-right: 1.4em;
} }
.columns-on-tablet {
flex-direction: column;
}
} }
@media all and (max-width: 512px) { @media all and (max-width: 512px) {
@ -69,4 +73,8 @@ a.external::after {
margin-left: 0.8em; margin-left: 0.8em;
margin-right: 0.8em; margin-right: 0.8em;
} }
.columns-on-mobile {
flex-direction: column;
}
} }

@ -46,6 +46,7 @@
.menu-nav { .menu-nav {
display: flex; display: flex;
list-style: none; list-style: none;
align-items: flex-end;
} }
.menu-nav > li::before { .menu-nav > li::before {
content: ""; content: "";
@ -56,10 +57,6 @@
} }
@media all and (max-width: 1024px) { @media all and (max-width: 1024px) {
.menu-nav {
flex-direction: column;
align-items: flex-end;
}
.menu-nav > li.menu-nav-li1::before { .menu-nav > li.menu-nav-li1::before {
display: inline; display: inline;
} }
@ -69,9 +66,6 @@
} }
@media all and (max-width: 512px) { @media all and (max-width: 512px) {
.menu {
flex-direction: column;
}
.menu-nav { .menu-nav {
margin-top: 0.3em; margin-top: 0.3em;
} }

Loading…
Cancel
Save