From c544f5b3835e723efe09de43613f24e414677f79 Mon Sep 17 00:00:00 2001 From: Matheus Medeiros Date: Thu, 15 Apr 2021 13:47:15 -0300 Subject: [PATCH] chore(sidebar): rework sidebar --- parts/sidebar.html | 78 +-- static/js/toggle_menu.js | 4 +- static/scss/style.css | 1215 -------------------------------------- static/scss/style.scss | 238 ++++---- 4 files changed, 161 insertions(+), 1374 deletions(-) delete mode 100755 static/scss/style.css diff --git a/parts/sidebar.html b/parts/sidebar.html index 0765c58..2202fcf 100644 --- a/parts/sidebar.html +++ b/parts/sidebar.html @@ -1,39 +1,3 @@ -
-
-
- -
-
- - v0.2 -
-
- - -
-
-
-
-
-
- {{.TOC}} -
-
-
- -
@@ -46,26 +10,28 @@
diff --git a/static/js/toggle_menu.js b/static/js/toggle_menu.js index 98226c6..3aa521d 100644 --- a/static/js/toggle_menu.js +++ b/static/js/toggle_menu.js @@ -1,7 +1,7 @@ (() => { const button = document.querySelector('.burger-button'); - const menuContent = document.querySelector('#mobile-menu-content'); - const overlay = document.querySelector('.sidebar-mobile .overlay'); + const menuContent = document.querySelector('.mobile-menu-content'); + const overlay = document.querySelector('#sidebar .overlay'); const toggleMenu = () => { menuContent.classList.toggle('menu-active'); diff --git a/static/scss/style.css b/static/scss/style.css deleted file mode 100755 index 375f0ac..0000000 --- a/static/scss/style.css +++ /dev/null @@ -1,1215 +0,0 @@ -/* http://meyerweb.com/eric/tools/css/reset/ - v2.0-modified | 20110126 - License: none (public domain) -*/ -* { - box-sizing: border-box; } - -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; } - -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; } - -body { - line-height: 1; } - -ol, ul { - list-style: none; } - -blockquote, q { - quotes: none; } - -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; } - -table { - border-collapse: collapse; - border-spacing: 0; } - -details > summary { - list-style: none; } - -details > summary::-webkit-details-marker { - display: none; } - -input:focus { - outline: none; } - -:root { - --owl-fontSet--latin: -apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue","Ubuntu"; - --owl-fontSet--monospace: "Menlo","Consolas"; - --owl-baseFont: var(--owl-fontSet--latin),sans-serif; - --owl-monospaceFont: var(--owl-fontSet--monospace),monospace; - --owl-backgroundColor: #1c1c1c; - --owl-sidebar-width: 280px; - --primary500: rgb(177, 144, 247); - --gray50: #343640; - --gray100: #43454f; - --gray200: #8c8a8a; - --gray300: #9e9ea2; - --gray500: #a3acb9; - --gray600: #c1c9d2; - --gray700: #e3e8ee; - --gray800: #f7fafc; - --gray900: #fff; - --code-background: hsla(0, 0%, 100%, .04); - --logo-color: #fff; - --search-background-color: transparent; - --search-color: var(--gray500); - --search-body-color: var(--gray600); } - -html, body { - font-family: var(--owl-baseFont); - font-size: 14px; - font-weight: 400; - color: #4f566b; - background-color: var(--owl-backgroundColor); - overflow-x: hidden; } - -body.light { - --owl-backgroundColor: rgb(250, 250, 250); - --owl-sidebar-width: 280px; - --primary500: rgb(121, 74, 219); - --gray50: #ffffff; - --gray100: rgb(219, 219, 219); - --gray200: #999; - --gray300: #686868; - --gray500: #292929; - --gray600: rgb(76, 76, 76); - --gray700: #4f4a4a; - --gray800: #2f2f2f; - --gray900: #424141; - --code-background: hsla(0, 0%, 0%, .14); - --logo-color: #212121; - --search-background-color: #e1e1e1; - --search-color: var(--gray800); - --search-body-color: #ccc; } - -strong { - font-weight: 600; } - -a, a:active, a:focus, a:hover, a:visited { - text-decoration: none; - outline: 0; - cursor: pointer; - color: var(--primary500); - font-weight: 500; } - -a:active, a:focus, a:hover { - color: var(--gray800); } - -p { - margin-top: 20px; - color: var(--gray600); - margin-bottom: 0px; - line-height: 22px; } - -h5 { - font-weight: 400; } - -em { - font-style: italic; } - -ol { - list-style: decimal; } - -h3, h4, h5, h6 { - color: var(--gray800); - margin-top: 20px; - padding-bottom: 12px; - border-bottom: 1px solid var(--gray100); - font-size: 16px; - font-weight: 500; - width: 100%; - display: flex; - align-items: baseline; - justify-content: space-between; } - -.logo g[stroke='#fff'] { - stroke: var(--logo-color); } - -.logo g[fill='#fff'] { - fill: var(--logo-color); } - -#sidebar { - width: var(--owl-sidebar-width); - height: 100vh; - box-shadow: -1px 0 0 0 var(--gray100) inset; - overflow-y: auto; - overflow-x: hidden; } - #sidebar .header { - padding: 15px; - box-shadow: 0 -1px 0 0 var(--gray100) inset; } - #sidebar .header .version-and-toggle { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 15px; } - #sidebar .header .version-and-toggle .version { - display: flex; - align-items: center; - color: var(--gray800); } - #sidebar .header .version-and-toggle .version small { - margin-top: 5px; } - #sidebar .search { - background: var(--search-background-color); - border-radius: 8px; - box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); - padding: 8px; - display: flex; - align-items: center; } - #sidebar .search:hover { - background-color: var(--gray100); - cursor: pointer; } - #sidebar .search span.label { - flex: 1; - margin: 0 8px; - color: var(--gray500); } - #sidebar .search span.keyboard { - padding: 2px 6px; - background-color: var(--gray100); - border-radius: 3px; - color: var(--gray800); - line-height: 10px; - display: block; - height: 17px; } - #sidebar .search svg { - margin-right: 5px; } - #sidebar .search svg circle, #sidebar .search svg path { - stroke: var(--search-color); } - @media (max-width: 768px) { - #sidebar { - display: none; } } - -#content { - position: absolute; - top: 0; - left: 280px; - bottom: 0; - right: 0; - box-sizing: border-box; - -webkit-overflow-scrolling: touch; - outline: none !important; - overflow-x: hidden; - overflow-y: scroll; } - -h1 { - font-size: 24px; - line-height: 40px; - line-height: 40px; - font-weight: 500; - color: #2a2f45; - color: var(--gray800); - margin: 0; - display: flex; - align-items: center; - flex-wrap: wrap; } - -section.section { - border-bottom: 1px solid var(--gray100); - display: flex; - flex-direction: column; - align-items: start; } - section.section .section-wrapper { - display: flex; - flex-direction: row; - padding: 5vw; - width: 100%; - justify-content: space-between; } - section.section .content { - flex-grow: 1; - max-width: 600px; - margin-right: 5vw; - line-height: 26px; - color: var(--gray600); - margin-bottom: 24px; } - section.section .content .pre-code-block { - margin-top: 12px; - border-radius: 8px; } - section.section .content .pre-code-block pre span { - margin: 0; } - section.section .sidenote { - flex-grow: 1; - position: -webkit-sticky; - position: sticky; - align-self: flex-start; - top: 0; - min-width: 500px; - padding-top: 50px; - max-width: 50vw; } - section.section .sidenote h2 { - color: var(--gray800); - font-weight: 600; - text-transform: uppercase; - font-size: 14px; } - section.section .sidenote p { - line-height: 26px; - margin-top: 12px; - color: var(--gray500); } - section.section .sidenote .box { - background: var(--gray50); - border-radius: 8px; - box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); - margin-bottom: 12px; - margin-top: 24px; } - section.section .sidenote .box > p { - padding: 12px 20px; - margin-top: initial; - line-height: auto; } - section.section .sidenote .box .title { - background: var(--gray100); - padding: 10px 12px; - font-weight: 500; - font-size: 12px; - color: var(--gray600); - letter-spacing: .01em; - display: flex; - align-items: center; - justify-content: space-between; - border-top-right-radius: 8px; - border-top-left-radius: 8px; } - section.section .sidenote .box .title p { - color: var(--gray500); - font-size: 12px; - font-weight: 500; - text-transform: uppercase; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - pointer-events: none; - margin-top: initial; - line-height: auto; } - section.section .sidenote .box table { - width: 100%; - color: var(--gray500); } - section.section .sidenote .box table td { - padding: 12px; } - -pre, code { - font-family: var(--owl-monospaceFont); - margin: 0; } - -code { - color: #2a2f45; - color: var(--gray800); - background: var(--code-background); - padding: 0 3px; - margin: 0 1px; - border-radius: 4px; - border: 1px solid rgba(255, 255, 255, 0.08); - font-weight: 500; - font-size: .9em; } - -.pre-code-block { - background: #111; - overflow: auto; - border-radius: 0px 0px 8px 8px; } - -pre { - padding: 12px 8px; - display: inline-block; } - pre span { - margin-bottom: 4px; - display: inline-block; } - -.owl-list li, .owl-list li.content { - margin: 0; - padding: 0; } - -.owl-list p { - margin: 0; - padding: 0; } - -.owl-list li.title { - font-family: var(--owl-monospaceFont); - font-weight: 600; - color: var(--gray700); - font-size: 13px; - margin-top: 15px; - margin-bottom: 5px; } - .owl-list li.title code { - color: var(--gray500); - font-size: 12px; - background: none; - border: none; - padding: 0; } - -.owl-list li.content { - padding-bottom: 15px; - border-bottom: 1px solid var(--gray100); } - .owl-list li.content:last-of-type { - border-bottom: 1px solid transparent; } - .owl-list li.content > .owl-list { - margin-top: 12px; } - -.owl-list .owl-list, .owl-list details .owl-list { - border-radius: 6px; - border: 1px solid var(--gray100); - margin: 6px; } - .owl-list .owl-list .title, .owl-list details .owl-list .title { - margin: 0; } - .owl-list .owl-list .title p, .owl-list details .owl-list .title p { - padding: 0; - margin: 0; - padding-top: 8px; } - .owl-list .owl-list h5, .owl-list details .owl-list h5 { - padding: 0; - margin: 0; - font-size: 13px; - line-height: 20px; - font-weight: 500; - padding: 8px 12px; - color: var(--gray500); } - .owl-list .owl-list h5 + .owl-list, .owl-list details .owl-list h5 + .owl-list { - border: 1px solid transparent; } - .owl-list .owl-list li .title, .owl-list details .owl-list li .title { - padding: 8px 12px; } - .owl-list .owl-list li .content, .owl-list details .owl-list li .content { - padding: 0 12px 12px 12px; } - .owl-list .owl-list li .content:last-child, .owl-list details .owl-list li .content:last-child { - padding-bottom: 0; } - -.owl-list details { - margin-top: 10px; } - .owl-list details summary { - padding: 5px 12px; } - .owl-list details summary:hover { - color: var(--gray900); - fill: var(--gray900); - cursor: pointer; } - .owl-list details summary svg { - transition: transform .3s ease-in; - fill: var(--gray500); - margin-right: 8px; } - .owl-list details > .owl-list { - border: none; - padding: 0; - margin: 0; } - .owl-list details[open] { - border-radius: 6px; - border: 1px solid var(--gray100); } - .owl-list details[open] > summary { - display: block; - border-bottom: 1px solid var(--gray100); } - .owl-list details[open] > summary::after { - content: 'Hide children attributes'; } - .owl-list details[open] > summary svg { - transform: rotate(45deg); } - .owl-list details[open] > .owl-list { - margin-bottom: 12px; } - .owl-list details:not([open]) > summary { - display: inline-block; - border: 1px solid var(--gray100); - border-radius: 25px; - margin-bottom: 12px; } - .owl-list details:not([open]) > summary::after { - content: 'Show children attributes'; } - -.owl-list .owl-list li { - padding-left: 6px; - padding-right: 6px; } - -.owl-list .content > h5 { - margin-top: 8px !important; - border: 1px solid var(--gray100); - border-radius: 8px 8px 0 0; - padding-left: 10px; - padding-top: 10px; } - .owl-list .content > h5 + .owl-list { - margin: 0; - border-top: 0px !important; } - -.owl-list .content > .owl-list { - border: 1px solid var(--gray100) !important; - border-radius: 0 0 8px 8px; - margin: 0; } - -.group > h1 { - padding-top: 5vw; - padding-left: 5vw; - padding-right: 5vw; - font-size: 36px; } - .group > h1 + section.section > .section-wrapper { - padding-top: 2vw; } - -.toc { - margin-top: 12px; } - .toc a { - display: block; - padding: 8px 12px; - margin-right: 10px; } - .toc a:active, .toc a:hover { - background-color: var(--gray100); - border-radius: 0px 3px 3px 0px; } - .toc details { - display: block; } - .toc details summary { - padding: 8px 12px; - color: var(--gray900); - text-transform: uppercase; - font-weight: 700; - letter-spacing: 1px; - display: flex; - justify-content: space-between; } - .toc details summary:hover { - padding: 8px 12px; - cursor: pointer; } - .toc details summary::before { - margin-right: 8px; } - .toc details summary::after { - flex: 0 0 12px; - transform: rotate(90deg); - transition: transform .3s ease-out; - background-size: 12px; - background-repeat: no-repeat; - background-position: right center; - background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwLjg5NCAzLjc4OUwxOCAxOEgyTDkuMTA2IDMuNzg5YTEgMSAwIDAxMS43ODggMHoiIGZpbGw9IiNDMUM5RDIiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg=="); - content: ""; } - .toc details[open] summary::after { - transform: rotate(180deg); } - -body.light .toc details summary::after { - background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEwLjg5NCAzLjc4OUwxOCAxOEgyTDkuMTA2IDMuNzg5YTEgMSAwIDAxMS43ODggMHoiIGZpbGw9IiMyMTIxMjEiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg=="); } - -blockquote { - display: flex; - flex-direction: row; } - blockquote::before { - display: block; - content: ''; - background-color: var(--primary500); - width: 5px; - margin-right: 8px; - border-radius: 3px; } - blockquote p { - margin-top: 0; } - -.group > .group-self-content > .section { - border-bottom: none; } - .group > .group-self-content > .section > .section-wrapper { - padding: 1vw 5vw; } - -.group > .group-self-content + .section > .section-wrapper { - padding-top: 1vw; } - -#search-container { - display: none; - position: absolute; - z-index: 10; - top: 0; - left: 0; - right: 0; - bottom: 0; - justify-content: center; - align-items: flex-start; } - #search-container .hints { - display: flex; - justify-content: space-between; } - #search-container .hints li { - padding: 8px 0; - display: flex; - align-items: center; - height: 30px; - margin-top: 8px; - color: var(--gray200); } - #search-container .hints svg { - margin-right: 8px; } - #search-container .hints svg g { - stroke: var(--gray200); } - -#sidebar-mobile { - position: relative; - z-index: 1; - margin-right: 48px; } - #sidebar-mobile .overlay { - display: none; - position: absolute; - width: 100vw; - height: 100vh; - background-color: black; - opacity: 0.4; } - #sidebar-mobile .wrapper { - display: block; - position: relative; - z-index: 1; - width: 100%; - height: 100%; - flex-direction: column; - overflow: scroll; } - #sidebar-mobile .header { - display: none; - z-index: 1; - position: sticky; - width: 100vw; - align-items: center; - padding: 8px; - background-color: var(--owl-backgroundColor); - border-bottom: 1px solid var(--gray100); } - #sidebar-mobile .content { - display: none; - z-index: 2; - width: 100%; - height: 100%; - background-color: var(--owl-backgroundColor); } - #sidebar-mobile .content > ul > li { - padding: 8px 12px; } - #sidebar-mobile .burger-button { - color: var(--gray800); - font-size: 18px; - background: none; - border: none; } - #sidebar-mobile .burger-button:active { - color: yellow; } - @media (max-width: 768px) { - #sidebar-mobile .overlay { - display: block; } - #sidebar-mobile .header { - display: flex; } - #sidebar-mobile .burger-open { - display: block; - height: 100vh; } - #sidebar-mobile .version-and-toggle { - display: flex; - align-items: center; - color: var(--gray800); - width: 100%; - justify-content: space-between; - padding: 0 4px; } } - -body.showing-search #search-container { - display: flex; } - -body.showing-search #sidebar, body.showing-search #content { - filter: blur(5px) saturate(3); } - -.search-box { - margin-top: 100px; - background-color: #282828; - padding: 12px; - border-radius: 8px; - box-shadow: 0px 1px 8px rgba(11, 11, 11, 0.7); - width: 500px; } - .search-box input { - border: 1px solid #535353; - background: #202020; - padding: 8px 10px; - border-radius: 3px; - color: #fff; - font-size: 25px; - width: 100%; } - -#result-list li.empty { - padding: 12px; - text-align: center; - color: var(--gray300); } - -#result-list li.result { - font-size: 19px; - display: flex; - flex-direction: column; - color: var(--search-body-color); - cursor: pointer; - padding: 0 15px; } - #result-list li.result:not(:last-child) { - border-bottom: 1px solid var(--gray50); } - #result-list li.result.active { - background: #1a1919; } - #result-list li.result .search-title { - padding-top: 12px; - font-size: 20px; } - #result-list li.result .text-matches { - padding-top: 8px; - padding-bottom: 10px; - font-size: 14px; } - #result-list li.result .text-matches .search-result-match { - color: black; - background-color: yellow; - border-radius: 3px; - padding: 1px 2px; - border: 1px solid #ecb430; } - -.theme-toggle { - overflow: hidden; } - .theme-toggle input { - position: absolute; - left: -99em; } - .theme-toggle .toggle { - cursor: pointer; - display: inline-block; - position: relative; - width: 48px; - height: 24px; - background-color: #83D8FF; - border-radius: 84px; - transition: background-color 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95); } - .theme-toggle .toggle-handler { - display: inline-block; - position: relative; - z-index: 1; - top: 3px; - left: 3px; - width: 18px; - height: 18px; - background-color: #FFCF96; - border-radius: 50px; - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); - transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55); - transform: rotate(-45deg); } - .theme-toggle .toggle-handler .crater { - position: absolute; - background-color: #E8CDA5; - opacity: 0; - transition: opacity 200ms ease-in-out; - border-radius: 100%; } - .theme-toggle .toggle-handler .crater--1 { - top: 4px; - left: 8px; - width: 4px; - height: 4px; } - .theme-toggle .toggle-handler .crater--2 { - top: 11px; - left: 4px; - width: 6px; - height: 6px; } - .theme-toggle .toggle-handler .crater--3 { - top: 10px; - left: 14px; - width: 2px; - height: 2px; } - .theme-toggle .star { - position: absolute; - background-color: #ffffff; - transition: all 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95); - border-radius: 50%; } - .theme-toggle .star--1 { - top: 10px; - left: 24px; - z-index: 0; - width: 15px; - height: 2px; } - .theme-toggle .star--2 { - top: 18px; - left: 32px; - z-index: 0; - width: 10px; - height: 2px; } - .theme-toggle .star--3 { - top: 27px; - left: 40px; - z-index: 0; - width: 30px; - height: 3px; } - .theme-toggle .star--4, - .theme-toggle .star--5, - .theme-toggle .star--6 { - opacity: 0; - transition: all 300ms 0 cubic-bezier(0.445, 0.05, 0.55, 0.95); } - .theme-toggle .star--4 { - top: 16px; - left: 11px; - z-index: 0; - width: 2px; - height: 2px; - transform: translate3d(3px, 0, 0); } - .theme-toggle .star--5 { - top: 32px; - left: 17px; - z-index: 0; - width: 3px; - height: 3px; - transform: translate3d(3px, 0, 0); } - .theme-toggle .star--6 { - top: 36px; - left: 28px; - z-index: 0; - width: 2px; - height: 2px; - transform: translate3d(3px, 0, 0); } - .theme-toggle input:checked + .toggle { - background-color: #749DD6; } - .theme-toggle input:checked + .toggle .toggle-handler { - background-color: #FFE5B5; - transform: translate3d(24px, 0, 0) rotate(0); } - .theme-toggle input:checked + .toggle .toggle-handler .crater { - opacity: 1; } - .theme-toggle input:checked + .toggle .star--1 { - width: 2px; - height: 2px; } - .theme-toggle input:checked + .toggle .star--2 { - width: 4px; - height: 4px; - transform: translate3d(-5px, 0, 0); } - .theme-toggle input:checked + .toggle .star--3 { - width: 2px; - height: 2px; - transform: translate3d(-7px, 0, 0); } - .theme-toggle input:checked + .toggle .star--4, - .theme-toggle input:checked + .toggle .star--5, - .theme-toggle input:checked + .toggle .star--6 { - opacity: 1; - transform: translate3d(0, 0, 0); } - .theme-toggle input:checked + .toggle .star--4 { - transition: all 300ms 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95); } - .theme-toggle input:checked + .toggle .star--5 { - transition: all 300ms 300ms cubic-bezier(0.445, 0.05, 0.55, 0.95); } - .theme-toggle input:checked + .toggle .star--6 { - transition: all 300ms 400ms cubic-bezier(0.445, 0.05, 0.55, 0.95); } - -/* Dark Theme */ -body .pre-code-block { - background-color: #282a36; } - -body .chroma { - color: #e2e4e5; - background-color: #282a36; } - -body .chroma .err { - color: #ff5c57; } - -body .chroma .lntd { - vertical-align: top; - padding: 0; - margin: 0; - border: 0; } - -body .chroma .lntable { - border-spacing: 0; - padding: 0; - margin: 0; - border: 0; - width: auto; - overflow: auto; - display: block; } - -body .chroma .hl { - display: block; - width: 100%; - background-color: #3d3f4a; } - -body .chroma .lnt { - margin-right: 0.4em; - padding: 0 0.4em 0 0.4em; - color: #7f7f7f; } - -body .chroma .ln { - margin-right: 0.4em; - padding: 0 0.4em 0 0.4em; - color: #7f7f7f; } - -body .chroma .k { - color: #ff6ac1; } - -body .chroma .kc { - color: #ff6ac1; } - -body .chroma .kd { - color: #ff5c57; } - -body .chroma .kn { - color: #ff6ac1; } - -body .chroma .kp { - color: #ff6ac1; } - -body .chroma .kr { - color: #ff6ac1; } - -body .chroma .kt { - color: #9aedfe; } - -body .chroma .na { - color: #57c7ff; } - -body .chroma .nb { - color: #ff5c57; } - -body .chroma .nc { - color: #f3f99d; } - -body .chroma .no { - color: #ff9f43; } - -body .chroma .nd { - color: #ff9f43; } - -body .chroma .nf { - color: #57c7ff; } - -body .chroma .nl { - color: #ff5c57; } - -body .chroma .nt { - color: #ff6ac1; } - -body .chroma .nv { - color: #ff5c57; } - -body .chroma .vc { - color: #ff5c57; } - -body .chroma .vg { - color: #ff5c57; } - -body .chroma .vi { - color: #ff5c57; } - -body .chroma .s { - color: #5af78e; } - -body .chroma .sa { - color: #5af78e; } - -body .chroma .sb { - color: #5af78e; } - -body .chroma .sc { - color: #5af78e; } - -body .chroma .dl { - color: #5af78e; } - -body .chroma .sd { - color: #5af78e; } - -body .chroma .s2 { - color: #5af78e; } - -body .chroma .se { - color: #5af78e; } - -body .chroma .sh { - color: #5af78e; } - -body .chroma .si { - color: #5af78e; } - -body .chroma .sx { - color: #5af78e; } - -body .chroma .sr { - color: #5af78e; } - -body .chroma .s1 { - color: #5af78e; } - -body .chroma .ss { - color: #5af78e; } - -body .chroma .m { - color: #ff9f43; } - -body .chroma .mb { - color: #ff9f43; } - -body .chroma .mf { - color: #ff9f43; } - -body .chroma .mh { - color: #ff9f43; } - -body .chroma .mi { - color: #ff9f43; } - -body .chroma .il { - color: #ff9f43; } - -body .chroma .mo { - color: #ff9f43; } - -body .chroma .o { - color: #ff6ac1; } - -body .chroma .ow { - color: #ff6ac1; } - -body .chroma .c { - color: #78787e; } - -body .chroma .ch { - color: #78787e; } - -body .chroma .cm { - color: #78787e; } - -body .chroma .c1 { - color: #78787e; } - -body .chroma .cs { - color: #78787e; } - -body .chroma .cp { - color: #78787e; } - -body .chroma .cpf { - color: #78787e; } - -body .chroma .gd { - color: #ff5c57; } - -body .chroma .ge { - text-decoration: underline; } - -body .chroma .gr { - color: #ff5c57; } - -body .chroma .gh { - font-weight: bold; } - -body .chroma .gi { - font-weight: bold; } - -body .chroma .go { - color: #43454f; } - -body .chroma .gs { - font-style: italic; } - -body .chroma .gu { - font-weight: bold; } - -body .chroma .gl { - text-decoration: underline; } - -/* Light Theme */ -body.light .pre-code-block { - background-color: #ffffff; } - -body.light .chroma { - color: #000000; - background-color: #ffffff; } - -body.light .chroma .err { - color: #ff0000; } - -body.light .chroma .lntd { - vertical-align: top; - padding: 0; - margin: 0; - border: 0; } - -body.light .chroma .lntable { - border-spacing: 0; - padding: 0; - margin: 0; - border: 0; - width: auto; - overflow: auto; - display: block; } - -body.light .chroma .hl { - display: block; - width: 100%; - background-color: #e5e5e5; } - -body.light .chroma .lnt { - margin-right: 0.4em; - padding: 0 0.4em 0 0.4em; - color: #7f7f7f; } - -body.light .chroma .ln { - margin-right: 0.4em; - padding: 0 0.4em 0 0.4em; - color: #7f7f7f; } - -body.light .chroma .k { - color: #0000ff; } - -body.light .chroma .kc { - color: #0000ff; } - -body.light .chroma .kd { - color: #0000ff; } - -body.light .chroma .kn { - color: #0000ff; } - -body.light .chroma .kp { - color: #0000ff; } - -body.light .chroma .kr { - color: #0000ff; } - -body.light .chroma .kt { - color: #0000ff; } - -body.light .chroma .n { - color: #000000; } - -body.light .chroma .na { - color: #000000; } - -body.light .chroma .nb { - color: #000000; } - -body.light .chroma .bp { - color: #000000; } - -body.light .chroma .nc { - color: #000000; } - -body.light .chroma .no { - color: #000000; } - -body.light .chroma .nd { - color: #000000; } - -body.light .chroma .ni { - color: #000000; } - -body.light .chroma .ne { - color: #000000; } - -body.light .chroma .nf { - color: #000000; } - -body.light .chroma .fm { - color: #000000; } - -body.light .chroma .nl { - color: #000000; } - -body.light .chroma .nn { - color: #000000; } - -body.light .chroma .nx { - color: #000000; } - -body.light .chroma .py { - color: #000000; } - -body.light .chroma .nt { - color: #000000; } - -body.light .chroma .nv { - color: #000000; } - -body.light .chroma .vc { - color: #000000; } - -body.light .chroma .vg { - color: #000000; } - -body.light .chroma .vi { - color: #000000; } - -body.light .chroma .vm { - color: #000000; } - -body.light .chroma .s { - color: #55aa22; } - -body.light .chroma .sa { - color: #55aa22; } - -body.light .chroma .sb { - color: #55aa22; } - -body.light .chroma .sc { - color: #55aa22; } - -body.light .chroma .dl { - color: #55aa22; } - -body.light .chroma .sd { - color: #55aa22; } - -body.light .chroma .s2 { - color: #55aa22; } - -body.light .chroma .se { - color: #55aa22; } - -body.light .chroma .sh { - color: #55aa22; } - -body.light .chroma .si { - color: #55aa22; } - -body.light .chroma .sx { - color: #55aa22; } - -body.light .chroma .sr { - color: #55aa22; } - -body.light .chroma .s1 { - color: #55aa22; } - -body.light .chroma .ss { - color: #55aa22; } - -body.light .chroma .m { - color: #33aaff; } - -body.light .chroma .mb { - color: #33aaff; } - -body.light .chroma .mf { - color: #33aaff; } - -body.light .chroma .mh { - color: #33aaff; } - -body.light .chroma .mi { - color: #33aaff; } - -body.light .chroma .il { - color: #33aaff; } - -body.light .chroma .mo { - color: #33aaff; } - -body.light .chroma .ow { - color: #0000ff; } - -body.light .chroma .c { - color: #888888; - font-style: italic; } - -body.light .chroma .ch { - color: #888888; - font-style: italic; } - -body.light .chroma .cm { - color: #888888; - font-style: italic; } - -body.light .chroma .c1 { - color: #888888; - font-style: italic; } - -body.light .chroma .cs { - color: #888888; - font-style: italic; } - -body.light .chroma .cp { - color: #888888; - font-style: italic; } - -body.light .chroma .cpf { - color: #888888; - font-style: italic; } diff --git a/static/scss/style.scss b/static/scss/style.scss index f3d1430..0ecad4f 100644 --- a/static/scss/style.scss +++ b/static/scss/style.scss @@ -115,76 +115,6 @@ h3, h4, h5, h6 { } } -#sidebar { - width: var(--owl-sidebar-width); - height: 100vh; - box-shadow: -1px 0 0 0 var(--gray100) inset; - overflow-y: auto; - overflow-x: hidden; - - .header { - padding: 15px; - box-shadow: 0 -1px 0 0 var(--gray100) inset; - .version-and-toggle { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 15px; - } - } - - .search { - background: var(--search-background-color); - border-radius: 8px; - box-shadow: 0 0 0 1px hsla(0, 0%, 100%, .15); - padding: 8px; - display: flex; - align-items: center; - - &:hover { - background-color: var(--gray100); - cursor: pointer; - } - - span { - &.label { - flex: 1; - margin: 0 8px; - color: var(--gray500); - } - &.keyboard { - padding: 2px 6px; - background-color: var(--gray100); - border-radius: 3px; - color: var(--gray800); - line-height: 10px; - display: block; - height: 17px; - } - } - - svg { - margin-right: 5px; - circle, path { - stroke: var(--search-color); - } - } - } - @media (max-width: $breakpoint-tablet) { - display: none; - } -} - -.version { - display: flex; - align-items: center; - color: var(--gray800); - - small { - margin-top: 5px; - } -} - #content { position: absolute; top: 0; @@ -700,38 +630,125 @@ blockquote { } } -.sidebar-mobile { - position: relative; - z-index: 1; - - margin-right: 48px; +#sidebar { + width: var(--owl-sidebar-width); + height: 100vh; + box-shadow: -1px 0 0 0 var(--gray100) inset; + overflow-y: auto; + overflow-x: hidden; .header { - display: none; - z-index: 1; - position: fixed; - width: 100vw; - align-items: center; - padding: 8px; - background-color: var(--owl-backgroundColor); - border-bottom: 1px solid var(--gray100); + padding: 15px; + box-shadow: 0 -1px 0 0 var(--gray100) inset; + + .version-and-toggle { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 15px; + + .version { + display: flex; + align-items: center; + color: var(--gray800); + + small { + margin-top: 5px; + } + } + + @media (max-width: $breakpoint-tablet) { + color: var(--gray800); + width: 100%; + padding: 0 4px; + margin: 0; + } + } + + @media (max-width: $breakpoint-tablet) { + display: flex; + z-index: 1; + position: fixed; + width: 100vw; + align-items: center; + padding: 8px; + background-color: var(--owl-backgroundColor); + border-bottom: 1px solid var(--gray100); + } } .overlay { display: none; - position: absolute; + position: fixed; width: 100vw; height: 100vh; background-color: black; opacity: 0.4; + + @media (max-width: $breakpoint-tablet) { + display: none; + } + } + + .search { + background: var(--search-background-color); + border-radius: 8px; + box-shadow: 0 0 0 1px hsla(0, 0%, 100%, .15); + padding: 8px; + display: flex; + align-items: center; + + &:hover { + background-color: var(--gray100); + cursor: pointer; + } + + span { + &.label { + flex: 1; + margin: 0 8px; + color: var(--gray500); + } + &.keyboard { + padding: 2px 6px; + background-color: var(--gray100); + border-radius: 3px; + color: var(--gray800); + line-height: 10px; + display: block; + height: 17px; + } + } + + svg { + margin-right: 5px; + circle, path { + stroke: var(--search-color); + } + } + + @media (max-width: $breakpoint-tablet) { + display: none; + } } - .wrapper { + .desktop-menu-content { + display: block; + + @media (max-width: $breakpoint-tablet) { + display: none; + } + } + + .mobile-menu-content { + display: none; position: fixed; top: 51px; left: -280px; z-index: 1; width: 280px; + max-height: 375px; + overflow: scroll; padding: 12px 0; flex-direction: column; background-color: var(--owl-backgroundColor); @@ -750,20 +767,19 @@ blockquote { height: 40px; line-height: 20px; } - - .sidebar-group-wrapper a { - padding-left: 30px; - } } + @media (max-width: $breakpoint-tablet) { + display: block; + } } - .menu-active { - display: block; - left: 0 + .sidebar-group-wrapper a { + padding-left: 30px; } .burger-button { + display: none; color: var(--gray800); font-size: 18px; background: none; @@ -772,30 +788,38 @@ blockquote { &:active { opacity: 0.4; } - } - @media (max-width: $breakpoint-tablet) { - .overlay { - display: none; + @media (max-width: $breakpoint-tablet) { + display: block; } + } - .header { - display: flex; + .menu-active { + display: none; + + @media (max-width: $breakpoint-tablet) { + display: block; + left: 0 } + } + + .open { + display: none; - .open { + @media (max-width: $breakpoint-tablet) { display: block; height: 100vh; } + } - .version-and-toggle { - display: flex; - align-items: center; - color: var(--gray800); - width: 100%; - justify-content: space-between; - padding: 0 4px; - } + @media (max-width: $breakpoint-tablet) { + position: relative; + z-index: 1; + margin-right: 48px; + height: auto; + overflow-y: visible; + overflow-x: visible; + box-shadow: none; } }