diff options
| author | Darshan Baral <darshanbaral@gmail.com> | 2020-05-05 00:30:32 +0300 |
|---|---|---|
| committer | Darshan Baral <darshanbaral@gmail.com> | 2020-05-05 00:30:32 +0300 |
| commit | 8295fbe70cf68395e65aaed7c3b000e6b43aff07 (patch) | |
| tree | b4687635a7c900a613e7a9ff28b6c5022cbebd27 | |
| parent | 5caeb63fc2224b46d938a633f4365ea0a9b33c42 (diff) | |
Added modal
| -rw-r--r-- | layouts/_default/baseof.html | 6 | ||||
| -rw-r--r-- | layouts/partials/footer.html | 2 | ||||
| -rw-r--r-- | layouts/partials/hamburgerCross.html | 45 | ||||
| -rw-r--r-- | layouts/partials/header.html | 11 | ||||
| -rw-r--r-- | layouts/partials/menu.html | 41 | ||||
| -rw-r--r-- | static/css/main.css | 65 |
6 files changed, 81 insertions, 89 deletions
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 1890230..dfde5d9 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,13 +1,11 @@ <!DOCTYPE html> <html lang="{{ .Site.LanguageCode }}"> {{- partial "head.html" . -}} - <body style="padding: 0 8px;"> + <body style="min-height: 100vh;"> {{- partial "header.html" . -}} <main id="content" {{if not .IsHome }} style="margin-top: 80px;" {{ end }}> {{- block "main" . }}{{- end }} </main> - {{ if not .IsHome }} - {{- partial "footer.html" . -}} - {{ end }} + {{ if not .IsHome }} {{- partial "footer.html" . -}} {{ end }} </body> </html> diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 0d1cb48..544ca02 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -8,7 +8,7 @@ {{ end }}
<div
style="
- padding: 30px 5px;
+ padding: 10px 5px;
font-size: 0.8em;
background-color: var(--bgDarker);
box-shadow: 0px 0px 2px 2px black;
diff --git a/layouts/partials/hamburgerCross.html b/layouts/partials/hamburgerCross.html index e616687..3afc2c1 100644 --- a/layouts/partials/hamburgerCross.html +++ b/layouts/partials/hamburgerCross.html @@ -19,54 +19,33 @@ </i>
</div>
<script>
- let currentX, currentY;
- let initialHeaderShadow = document.querySelector("header").style.boxShadow;
+ const htmlDoc = document.querySelector("html");
+ const scrollBarWidth = window.innerWidth - htmlDoc.clientWidth;
- const showMenu = (menu, hamBurger, cross, main, footer) => {
+ const showMenu = (menu, hamBurger, cross) => {
+ htmlDoc.style.overflowY = "hidden";
+ htmlDoc.style.marginRight = scrollBarWidth + "px";
hamBurger.style.visibility = "hidden";
cross.style.visibility = "visible";
- currentX = window.scrollX;
- currentY = window.scrollY;
menu.classList.remove("collapsed");
- menu.style.width = "100%";
- main.style.display = "none";
- footer ? (footer.style.display = "none") : undefined;
+ menu.style.top = "0";
};
- const hideMenu = (
- menu,
- hamBurger,
- cross,
- main,
- footer,
- currentX,
- currentY
- ) => {
+ const hideMenu = (menu, hamBurger, cross) => {
+ htmlDoc.style.overflowY = "scroll";
+ htmlDoc.style.marginRight = "0";
hamBurger.style.visibility = "visible";
cross.style.visibility = "hidden";
menu.classList.add("collapsed");
- menu.style.width = "0px";
- main.style.display = "block";
- footer ? (footer.style.display = "block") : undefined;
- window.scrollTo(currentX, currentY);
+ menu.style.top = "-100vh";
};
const myFunction = () => {
const menu = document.querySelector(".slide-menu");
const hamBurger = document.querySelector(".hamburger");
const cross = document.querySelector(".cross");
- const main = document.body.querySelector("main");
- const footer = document.body.querySelector("footer");
menu.classList.contains("collapsed")
- ? showMenu(menu, hamBurger, cross, main, footer)
- : hideMenu(
- menu,
- hamBurger,
- cross,
- main,
- footer,
- currentX,
- currentY
- );
+ ? showMenu(menu, hamBurger, cross)
+ : hideMenu(menu, hamBurger, cross);
};
</script>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 3d9c89f..af3d452 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,16 +1,7 @@ <header
style="
- background-color: {{ if not .IsHome}} var(--bgDarker) {{ else }} inherit {{ end }};
- display: block;
- width: 100%;
- height: 50px;
- padding-bottom: 10px;
- margin-bottom: 10px;
- max-width: 960px;
- position: fixed;
- margin: 0;
- top: 0;
box-shadow: {{ if not .IsHome}} 0px 0px 2px 2px black {{ else }} none {{ end }};
+ background-color: {{ if not .IsHome}} var(--bgDarker) {{ else }} inherit {{ end }};
"
>
{{ partial "hamburgerCross.html" . }}{{ if not .IsHome}}
diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html index cad505a..f47080e 100644 --- a/layouts/partials/menu.html +++ b/layouts/partials/menu.html @@ -1,13 +1,36 @@ <div
class="slide-menu collapsed"
- style="width: 0; overflow: hidden; 0px 0px 2px 2px black;"
+ style="
+ width: 100vw;
+ height: 100vh;
+ overflow: hidden;
+ background-color: #19092be3;
+ transition: all 0.5s;
+ position: fixed;
+ left: 0;
+ top: -100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ "
>
- <h1>
- <a href="/" style="white-space: nowrap;">Home</a>
- </h1>
- {{ range .Site.Sections }}
- <h1>
- <a href="{{ .Permalink }}" style="white-space: nowrap;">{{ .Title }}</a>
- </h1>
- {{ end }}
+ <div
+ style="
+ background-color: var(--bgColor);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 6px;
+ border: solid 1px var(--textColor);
+ border-radius: 5px;
+ box-shadow: 3px 3px 5px 2px black;
+ "
+ >
+ <a class="menu-item" href="/">Home</a>
+
+ {{ range .Site.Sections }}
+ <a class="menu-item" href="{{ .Permalink }}">{{ .Title }}</a>
+ {{ end }}
+ </div>
</div>
diff --git a/static/css/main.css b/static/css/main.css index f23c550..21d54e3 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -9,23 +9,43 @@ --codeColor: #51ef5b;
}
+html {
+ margin: 0;
+ overflow-y: scroll;
+ margin-right: 0;
+}
+
body {
+ width: 95%;
+ margin: auto;
position: relative;
z-index: 10;
display: flex;
flex-direction: column;
- padding: 0;
max-width: 960px;
- min-height: 100vh;
margin: auto;
color: var(--textColor);
background-color: var(--bgColor);
font-family: "Mukta", sans-serif;
font-weight: 300;
font-size: 1.2em;
- overflow-y: scroll;
+}
+header {
+ width: 95%;
+ height: 60px;
+ max-width: 960px;
+ position: fixed;
+ top: 0;
+ z-index: 30;
+}
+header,
+footer {
+ flex: none;
}
+main {
+ flex: 1 1 0%;
+}
code {
font-size: 1em;
color: var(--codeColor);
@@ -40,15 +60,6 @@ pre { overflow: auto;
}
-header,
-footer {
- flex: none;
-}
-
-main {
- flex: 1 1 0%;
-}
-
h1,
h2,
h3,
@@ -102,7 +113,16 @@ blockquote { .footnotes {
font-size: 0.8em;
}
-
+.menu-item {
+ display: block;
+ font-size: 1.2em !important;
+ width: 100%;
+ padding: 0 0.5em;
+ box-sizing: border-box;
+}
+.menu-item:hover {
+ background-color: var(--bgLighter);
+}
table {
border-collapse: collapse;
}
@@ -159,25 +179,6 @@ tbody { color: var(--textColor);
}
-.slide-menu {
- background-color: var(--bgColor);
- max-width: 960px;
- height: 100vh;
- transition: all 0.5s;
- position: fixed;
- z-index: 30;
- left: 0;
- right: 0;
- margin: auto;
- top: 0;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
-}
-.slide-menu > h1 {
- font-size: 1.5em;
-}
ul.pagination {
display: flex;
flex-direction: row;
|