diff --git a/assets/js/menu.js b/assets/js/menu.js new file mode 100644 index 000000000..b7253db35 --- /dev/null +++ b/assets/js/menu.js @@ -0,0 +1,76 @@ +;(() => { + const arrowWrappers = document.getElementsByClassName("a-wrapper") + const titles = document.getElementsByClassName("title") + + let index = 0 + for (const el of arrowWrappers) { + const folders = document.getElementsByClassName("folder") + const folder = folders[index] + + el.addEventListener("click", () => { + const arrow = el.getElementsByClassName("arrow")[0] + arrow.classList.toggle("down") + folder.classList.toggle("active") + }) + index++ + } + + const singlePage = document.getElementsByClassName("singlePage")[0] + const body = document.getElementsByTagName("body")[0] + const blurElement = document.getElementsByClassName("blur-element")[0] + const aside = document.getElementsByClassName("main-aside")[0] + const nav_button = document.getElementsByClassName("nav-btn")[0] + + index = 0 + for (const el of titles) { + const folders = document.getElementsByClassName("folder") + const folder = folders[index] + + const arrow = document.getElementsByClassName("arrow")[index] + el.addEventListener("click", () => { + arrow.classList.add("down") + folder.classList.add("active") + body.classList.remove("fixed-position") + blurElement.classList.remove("enabled") + aside.classList.add("disabled") + // nav_button.classList.add("disabled") + singlePage.classList.remove("blur") + }) + index++ + } + + blurElement.addEventListener("click", () => { + blurElement.classList.remove("enabled") + aside.classList.add("disabled") + // nav_button.classList.add("disabled") + body.classList.remove("fixed-position") + singlePage.classList.remove("blur") + }) + + const pagesLink = document.getElementsByClassName("page-link") + for (const el of pagesLink) { + el.addEventListener("click", () => { + aside.classList.add("disabled") + // nav_button.classList.add("disabled") + body.classList.remove("fixed-position") + blurElement.classList.remove("enabled") + singlePage.classList.remove("blur") + }) + } + + nav_button.addEventListener("click", () => { + singlePage.classList.toggle("blur") + body.classList.toggle("fixed-position") + aside.classList.toggle("disabled") + blurElement.classList.toggle("enabled") + // nav_button.classList.toggle("disabled") + }) + + document.getElementsByClassName("close-nav-mobile")[0].addEventListener("click", () => { + aside.classList.add("disabled") + // nav_button.classList.add("disabled") + body.classList.remove("fixed-position") + blurElement.classList.remove("enabled") + singlePage.classList.remove("blur") + }) +})() diff --git a/assets/styles/base.scss b/assets/styles/base.scss index 5eaf6c4b8..54e103978 100644 --- a/assets/styles/base.scss +++ b/assets/styles/base.scss @@ -6,6 +6,8 @@ --font-mono: "Fira Code" } + + // typography html { scroll-behavior: smooth; @@ -20,8 +22,9 @@ html { } } + .singlePage { - padding: 4em 30vw; + padding: 1em 20vw; @media all and (max-width: 1200px) { padding: 25px 5vw; } @@ -180,7 +183,7 @@ blockquote { article { & > h1 { - margin-top: 2em; + margin-top: 1.5em; font-size: 2em; } @@ -619,3 +622,5 @@ header { } } + + diff --git a/assets/styles/custom.scss b/assets/styles/custom.scss index a7a2e7992..e929bc2cb 100644 --- a/assets/styles/custom.scss +++ b/assets/styles/custom.scss @@ -1,5 +1,3 @@ -// Add your own CSS here! - :root { --light: #faf8f8; --dark: #141021; @@ -11,6 +9,13 @@ --lightgray: #f0f0f0; --outlinegray: #dadada; --million-progress-bar-color: var(--secondary); + // my + --lightAlt: #f5f6f8 !important; + --secondaryAlt: #e3e5e8 !important; + --cgray: #4e4e4e; + --lightRgba: 250,248,248; + --darkRgba: 20,16,33; + --shadowColor: 4px 4px 4px rgba(var(--darkRgba), 0.35); } [saved-theme="dark"] { @@ -23,7 +28,214 @@ --gray: #d4d4d4 !important; --lightgray: #292633 !important; --outlinegray: #343434 !important; + // my + --lightAlt: #1a1a1a !important; + --secondaryAlt: #000000 !important; + --cgray: #6e6e6e !important; + --lightRgba: 30,30,33 !important; + --darkRgba: 251,255,245 !important; + --shadowColor: 1px 2px 2px rgba(var(--darkRgba), 0.35); +} + +::-webkit-scrollbar{ + width: 8px; + background: #fff5f3; +} +::-webkit-scrollbar-track{ + box-shadow: inset 0 0 2px rgba(5, 41, 70, .3); +} +::-webkit-scrollbar-thumb{ + background-color: #888; + border-radius: 2px; +} + +aside::-webkit-scrollbar{ + width: 2px; + background: #fff5f3; +} + +.main-container{ + width: 100%; + margin: 0 auto; } +@media all and (max-width: 1200px) { + .fixed-position{ + position: fixed; + } + + .blur-element{ + z-index: 4; + &.enabled{ + position: absolute; + height: 100%; + width: 100%; + } + } + .blur{ + transition: all 0.2s linear; + filter: blur(1.5px); + } +} + +.main-aside{ + width: 16%; + padding-right: 1%; + padding-bottom: 1em; + height: 100vh; + position: fixed; + overflow-y:auto; + overflow-x: hidden; + color: var(--dark); + background-color: var(--lightAlt); + transition: all 0.2s linear; + border-right: 1px solid var(--secondaryAlt); + left: 0; + + ul{ + list-style: none; + padding-left: 5%; + } + .close-nav-mobile{ + display: none; + } + + @media all and (max-width: 1200px) { + min-width: 250px; + z-index: 7; + width: max-content; + max-width: 35%; + padding-top: 0; + height: 100vh; + border-right:0px; + &.disabled{ + left:-60% + } + -webkit-box-shadow: var(--shadowColor); + box-shadow: var(--shadowColor); + } + + @media all and (max-width: 450px) { + width: 100%; + max-width: 100%; + box-shadow: 0px 0px 0px; + &.disabled{ + left:-102% + } + .close-nav-mobile{ + display: block; + &:after { + color: var(--dark); + position: absolute; + top: 2%; + right: 5%; + font-size: 1.75em; + content: '\d7'; + line-height: normal; + text-align: center; + } + &:hover{ + cursor: pointer; + } + } + } +} + +.search-wrapper{ + display: flex; +} + +@media all and (max-width: 1200px) { + .main-header{ + display: flex; + position: relative; + justify-content: space-between; + .spacer{ + flex: none; + } + .nav-wrapper{ + flex-grow: 1; + flex-basis: 0%; + filter: blur(0); + z-index: 6; + .nav-btn{ + z-index: 6; + position: relative; + margin: auto 0; + width: 1.3rem; + & > div{ + width: 100%; + height: 2px; + margin: 5px 0; + background-color: var(--dark ); + transition: all 0.1s linear; + } + &:hover{ + cursor: pointer; + } + } + } + #page-title{ + flex-basis: 0%; + flex-grow: 1; + } + + .search-wrapper{ + padding: 3px; + .search-icon{ + padding: 2px; + } + p{ + display: none !important; + } + } + } +} + + +.folder{ + .page-link{ + margin: 1px 0; + } + .wrapper{ + display: flex; + } + .title{ + display: block; + } + .a-wrapper{ + padding-right: 10px; + &:hover{ + cursor: pointer; + } + .arrow{ + content: ""; + display: inline-block; + // arrow + margin-bottom: 3.5px; + border: solid var(--dark); + border-width: 0 0.13rem 0.13rem 0; + padding: 0.12rem; + // others + z-index: 10; + //default + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); + } + .down { + -webkit-transform: rotate(45deg) !important; + transform: rotate(45deg) !important; + } + } + &>ul{ + padding-left: 5%; + display: none; + } +} + +.folder.active>ul{ + display:block; +} + diff --git a/content/subfolder/_index.md b/content/subfolder/_index.md new file mode 100644 index 000000000..452503349 --- /dev/null +++ b/content/subfolder/_index.md @@ -0,0 +1,5 @@ +--- +title: Subfolder +--- + +Subfolder :D \ No newline at end of file diff --git a/content/subfolder/note.md b/content/subfolder/note.md new file mode 100644 index 000000000..158db5d7c --- /dev/null +++ b/content/subfolder/note.md @@ -0,0 +1,5 @@ +--- +title: Note +--- + +My cool note :D \ No newline at end of file diff --git a/content/subfolder/sub-subfolder/_index.md b/content/subfolder/sub-subfolder/_index.md new file mode 100644 index 000000000..672edc8f2 --- /dev/null +++ b/content/subfolder/sub-subfolder/_index.md @@ -0,0 +1,5 @@ +--- +title: Sub-Subfolder +--- + +Subfolder :D \ No newline at end of file diff --git a/content/subfolder/sub-subfolder/note.md b/content/subfolder/sub-subfolder/note.md new file mode 100644 index 000000000..158db5d7c --- /dev/null +++ b/content/subfolder/sub-subfolder/note.md @@ -0,0 +1,5 @@ +--- +title: Note +--- + +My cool note :D \ No newline at end of file diff --git a/layouts/index.html b/layouts/index.html index c7871e9f6..981fdfd56 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,20 +1,26 @@ {{ partial "head.html" . }} - {{partial "search.html" .}} -
- +
+ +
{{partial "header.html" .}} -
+
{{partial "toc.html" .}} {{partial "textprocessing.html" . }} {{if $.Site.Data.config.enableRecentNotes}} - {{partial "recent.html" . }} + {{partial "recent.html" . }} {{end}} -
- {{partial "footerIndex.html" .}} -
- - + + {{partial "footerIndex.html" .}} +
+ + +{{ $js := resources.Get "js/menu.js" }} + +{{/* */}} + \ No newline at end of file diff --git a/layouts/partials/header.html b/layouts/partials/header.html index a7f6733b2..a6584bccf 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,11 +1,23 @@ -
+
+
+
+
+
+
+
+
{{ $config := cond (eq $.Site.Language.Lang "en") "config" (printf "config.%s" $.Site.Language.Lang) }}

{{ ( index $.Site.Data $config ).page_title | default $.Site.Data.config.page_title }}

-
-

{{ i18n "search" }}

- {{ i18n "search_icon" }}{{ i18n "icon_search" }} +
+
+

{{ i18n "search" }}

+ {{ i18n "search_icon" }}{{ i18n "icon_search" }} +
+ {{partial "darkmode.html" .}}
- {{partial "darkmode.html" .}}
+ + + diff --git a/layouts/partials/menu-content.html b/layouts/partials/menu-content.html new file mode 100644 index 000000000..029c5da60 --- /dev/null +++ b/layouts/partials/menu-content.html @@ -0,0 +1,40 @@ +{{/* inspired by https://github.com/alex-shpak/hugo-book/blob/master/layouts/partials/docs/menu-filetree.html */}} +{{ $section := default "/" .Site.Params.BookSection }} +{{ if eq $section "*" }} + {{ $section = "/" }} {{/* Backward compatibility */}} +{{ end }} + +{{ with .Site.GetPage $section }} + {{ template "folder-children" (dict "Section" . "CurrentPage" $) }} +{{ end }} + +{{ define "folder-children" }}{{/* (dict "Section" .Section "CurrentPage" .CurrentPage) */}} + +{{ end }} + +{{ define "children-link" }}{{/* (dict "Page" .Page "CurrentPage" .CurrentPage) */}} + {{ $current := eq .CurrentPage .Page }} + + {{- partial "title" .Page -}} + +{{ end }} \ No newline at end of file diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html new file mode 100644 index 000000000..99f6595bb --- /dev/null +++ b/layouts/partials/menu.html @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/layouts/partials/title.html b/layouts/partials/title.html new file mode 100644 index 000000000..7094d8d7e --- /dev/null +++ b/layouts/partials/title.html @@ -0,0 +1,11 @@ +{{ $title := "" }} + +{{ if .Title }} + {{ $title = .Title }} +{{ else if and .IsSection .File }} + {{ $title = path.Base .File.Dir | humanize | title }} +{{ else if and .IsPage .File }} + {{ $title = .File.BaseFileName | humanize | title }} +{{ end }} + +{{ return $title }} \ No newline at end of file