Commit ee21355e authored by julientaq's avatar julientaq
Browse files

menu and link and update to mobile site

parent 4b227091
{"Target":"css/main.min.a7a54ffea315d873ae0bc68b0ab41c50.css","MediaType":"text/css","Data":{"Integrity":"md5-p6VP/qMV2HOuC8aLCrQcUA=="}}
\ No newline at end of file
{"Target":"css/main.min.3b5fd627051dc3f41b03aa567dcb3830.css","MediaType":"text/css","Data":{"Integrity":"md5-O1/WJwUdw/QbA6pWfcs4MA=="}}
\ No newline at end of file
......@@ -134,3 +134,6 @@ article {
}
}
.menu-call {
display: none;
}
\ No newline at end of file
......@@ -11,13 +11,14 @@
background: var(--color-paper);
z-index: 9999999;
align-items: flex-end;
height: 50px;
/* height: 50px; */
font-size: 0.9em;
/* border-image: linear-gradient(red, yellow) ; */
/* border-width: 0 0 20px 0; */
box-shadow: -4px 4px 0 var(--color-paper), 0px 4px 0 var(--color-paper), 4px 4px 0 var(--color-paper);
.baseline {
line-height: 1;
position: relative;
......@@ -62,9 +63,11 @@
text-transform: uppercase;
font-variant: all-small-caps;
font-size: 1.1em;
&.hide {
display: flex;
}
ul {
width: 100%;
list-style-type: none;
......@@ -97,13 +100,18 @@
}
}
.homepage {
#paged-logo {
display: none;
}
}
.menu-call {
font-family: var(--font-sans);
padding: 1em;
background: transparent;
border: none;
position: absolute;
right: 0;
top: 14px;
}
\ No newline at end of file
@media screen and (max-width: 570px) {
body {
/* grid-template-columns: [sidebar] 0 [main] 100% [right] 0 [end]; */
......@@ -33,6 +31,7 @@
.symbol-text {
display: none;
}
body {
padding: 1.5em;
width: 90%;
......@@ -43,7 +42,7 @@
body {
padding: 1.5em;
margin: 1em;
width: auto;
width: auto;
}
/* .symbol-text {
display: none;
......@@ -58,21 +57,25 @@ width: auto;
/* border-bottom: none; */
background: white;
}
article {
grid-template-columns: [left] 10% [main] 80% 10% [end];
}
grid-template-columns: [left] 10% [main] 80% 10% [end];
}
.menu {
width: 100%;
}
.menu ul {
justify-content: space-around;
padding: 0;
li {
margin: 0 1ch;
}
}
}
@media screen and (max-width: 767px) {
:root {
--font-size: 16px;
......@@ -80,6 +83,23 @@ width: auto;
.homepage #paged-logo {
display: block;
}
.homepage {
min-height: 80vh;
height: 90vh;
margin: 5%;
padding-bottom: 5vh;
.running-head {
height: auto;
border-bottom: 0 solid transparent;
margin-bottom: 3em;
justify-content: flex-start;
padding-top: 4em;
}
.menu {
align-items: flex-start;
}
}
article {
......@@ -89,9 +109,8 @@ width: auto;
body {
padding: 0em;
margin: 1em;
width: auto;
width: auto;
grid-template-columns: 5% [left] 5% [main] 80% [right] 5% [end] 5%;
}
.running-head {
......@@ -106,14 +125,18 @@ width: auto;
.back-home {
position: unset;
background: transparent;
background: 0 0;
padding-top: 1em;
width: 100%;
background: white;
padding: 1.5em 35% 0.5em ;
background: #fff;
padding: 1.5em 73% .5em 0;
}
.menu-call {
display: block;
z-index: 3000;
}
.menu {
margin-top: 0;
transition: all .6s;
......@@ -122,13 +145,15 @@ width: auto;
/* margin-bottom: 2em; */
display: flex;
flex-direction: column;
/* height: auto; */
}
.menu.hide {
opacity: 0;
display: none;
/* opacity: 0; */
/* margin-top: -50vh; */
/* background: red; */
height: 0;
/* height: 0; */
}
.menu ul {
......@@ -141,20 +166,21 @@ width: auto;
margin: 0;
border-bottom: 1px solid grey;
padding: 1em;
&:last-of-type {
border-bottom: none;
}
&:last-of-type {
border-bottom: none;
}
}
}
}
header {
grid-column: main/main;
margin-top: 4em;
#title {
font-size: 3.25em;
}
#title {
font-size: 3.25em;
}
}
.symbol-text {
......@@ -209,8 +235,10 @@ width: auto;
body .article {
grid-template-columns: [left] 2% [main] 96% 2%[end];
}
.list {
grid-column: main/main;
ul {
padding-left: 0;
}
......
......@@ -84,7 +84,7 @@
justify-content: center;
justify-self: flex-end;
margin-top: auto;
li::before {
content: none;
}
......@@ -98,5 +98,9 @@
display: inline-block;
font-family: var(--font-sans);
padding: 1em;
text-align: center;
}
}
......@@ -13,7 +13,7 @@ document.querySelector('.toc .title').addEventListener("click", function() {
})
}
document.querySelector(".back-home").addEventListener("click", function() {document.querySelector(".menu").classList.toggle("hide")});
document.querySelector(".menu-call").addEventListener("click", function() {document.querySelector(".menu").classList.toggle("hide")});
if (document.querySelector('#print')) {
......
......@@ -30,11 +30,14 @@
{{ partial "cropmarks.html" }}
{{ block "running" . }}
<div class="running-head">
<button class="back-home">
<a class="back-home" href="{{ .Site.BaseURL }}">
{{ partial "paged-logo.html" . }}
</button>
<!-- </a> -->
</a>
<button class="menu-call">MENU</button>
{{ partial "menu" . }}
<!-- </a> -->
</div>
{{ end }}
{{ block "header" . }}
......
......@@ -8,6 +8,8 @@
<!-- <button class="back-home">
{{ partial "paged-logo" .}}
</button> -->
<button class="menu-call">MENU</button>
{{ partial "menu" . }}
</div>
{{ end }}
......
......@@ -20,7 +20,7 @@
{{ else }}
<div class="symbol-text">The characters in the Dingbats block are derived from the ITC Zapf Dingbats series 100, a set of glyphs which make up the “Zapf Dingbat” font currently available on most laser printers. The Zapf Dingbats are considered an industry standard. The font was created in 1977 and 1978 by the German type designer Hermann Zapf.
<a href="https://decodeunicode.org/en/scripts/dingbats#dingbats">Read More at Decode Unicode</a>
<a href="https://decodeunicode.org/en/scripts/dingbats#dingbats">Read More</a>
</div>
......
<footer>
<!-- <div class="postit"> -->
<p class="foot-content">Paged.js is maintained by the nice folks of the
<p class="foot-content">Paged.js is maintained by the nice folks at
<a href="https://www.cabbagetreelabs.org" class="footer-logo">Cabbage Tree Labs</a></p>
{{/* {{ partial "ctl-logo.html" }} */}}
......
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