From 098afc3d2d5c657d278637cce395222150da8d2e Mon Sep 17 00:00:00 2001 From: Jonas Rosland Date: Wed, 18 Aug 2021 16:07:46 -0400 Subject: [PATCH] Add new CSS styling Signed-off-by: Jonas Rosland --- _coverpage.md | 2 +- _sidebar.md | 3 + css/docsify/darkly.css | 837 +++++++++++++++++++++++++++++++++++++++++ index.html | 2 +- 4 files changed, 842 insertions(+), 2 deletions(-) create mode 100644 css/docsify/darkly.css diff --git a/_coverpage.md b/_coverpage.md index 2edb4e8..5903330 100644 --- a/_coverpage.md +++ b/_coverpage.md @@ -1,4 +1,4 @@ -![logo](assets/img/aaru.png) +![logo](assets/img/aaru.png ':size=300') # Aaru Data Preservation Suite diff --git a/_sidebar.md b/_sidebar.md index cba0910..c1fb05a 100644 --- a/_sidebar.md +++ b/_sidebar.md @@ -9,18 +9,21 @@ - Devices + - [Get info about a physical device](device/info.md) - [List supported connected devices](device/list.md) - [Devices supported by Aaru](faq/supported-devices.md) - Media + - [Check readability of the media](media/scan.md) - [Create a media dump](media/dump.md) - [Get info about an inserted media](media/info.md) - Media images + - [Convert a media dump](image/convert.md) - [Create metadata sidecar](image/create-sidecar.md) - [Decode and print media tags](image/decode.md) diff --git a/css/docsify/darkly.css b/css/docsify/darkly.css new file mode 100644 index 0000000..3bd08b1 --- /dev/null +++ b/css/docsify/darkly.css @@ -0,0 +1,837 @@ +/*! + * Darkly - Dark theme for docsify - modified + * Original at: https://github.com/sushantrahate/docsify-darkly-theme +*/ +@import url('https://fonts.googleapis.com/css?family=Roboto+Mono|Source+Sans+Pro:300,600'); +* { + -webkit-font-smoothing: antialiased; + -webkit-overflow-scrolling: touch; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + -webkit-text-size-adjust: none; + -webkit-touch-callout: none; + box-sizing: border-box; +} +body:not(.ready) { + overflow: hidden; +} +body:not(.ready) .app-nav, +body:not(.ready) > nav, +body:not(.ready) [data-cloak] { + display: none; +} +div#app { + font-size: 30px; + font-weight: lighter; + margin: 40vh auto; + text-align: center; +} +div#app:empty:before { + content: 'Loading...'; +} +.emoji { + height: 1.2rem; + vertical-align: middle; +} +.progress { + background-color: var(--theme-color, #e18fdc); + height: 2px; + left: 0; + position: fixed; + right: 0; + top: 0; + transition: width 0.2s, opacity 0.4s; + width: 0; + z-index: 5; +} +input[type='search'] { + background: #1c2c25; + border-color: #1c2c25; + color: rgb(192, 192, 192); +} +.search { + border-bottom: 1px solid #191919; +} +.search .search-keyword, +.search a:hover { + color: var(--theme-color, #e18fdc); +} +.search .search-keyword { + color: var(--theme-color, #e18fdc); + font-style: normal; + font-weight: 700; +} +.search .results-panel { + color: rgb(192, 192, 192); +} +.search .matching-post { + border-bottom: 1px solid #444444 !important; +} +body, +html { + height: 100%; +} +body { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + color: #ffffff; + font-family: Source Sans Pro, Helvetica Neue, Arial, sans-serif; + font-size: 16px; + letter-spacing: 0; + margin: 0; + overflow-x: hidden; +} +img { + max-width: 100%; +} +a[disabled] { + cursor: not-allowed; + opacity: 0.6; +} +kbd { + border: 1px solid #a3a3a3; + border-radius: 3px; + display: inline-block; + font-size: 12px !important; + line-height: 12px; + margin-bottom: 3px; + padding: 3px 5px; + vertical-align: middle; +} +.task-list-item { + list-style-type: none; +} +li input[type='checkbox'] { + margin: 0 0.2em 0.25em -1.6em; + vertical-align: middle; +} +.app-nav { + margin: 25px 60px 0 0; + position: absolute; + right: 0; + text-align: right; + z-index: 2; +} +.app-nav.no-badge { + margin-right: 25px; +} +.app-nav p { + margin: 0; +} +.app-nav > a { + margin: 0 1rem; + padding: 5px 0; +} +.app-nav li, +.app-nav ul { + display: inline-block; + list-style: none; + margin: 0; +} +.app-nav a { + color: inherit; + font-size: 16px; + text-decoration: none; + transition: color 0.3s; +} +.app-nav a.active, +.app-nav a:hover { + color: var(--theme-color, #e18fdc); +} +.app-nav a.active { + border-bottom: 2px solid var(--theme-color, #e18fdc); + color: var(--theme-color, #e18fdc); +} +.app-nav li { + display: inline-block; + margin: 0 1rem; + padding: 5px 0; + position: relative; +} +.app-nav li ul { + background-color: #fff; + border: 1px solid #b0b0b0; + border-bottom-color: #a3a3a3; + border-radius: 4px; + box-sizing: border-box; + display: none; + max-height: calc(100vh - 61px); + overflow-y: auto; + padding: 10px 0; + position: absolute; + right: -15px; + text-align: left; + top: 100%; + white-space: nowrap; +} +.app-nav li ul li { + display: block; + font-size: 14px; + line-height: 1rem; + margin: 0; + margin: 8px 14px; + white-space: nowrap; +} +.app-nav li ul a { + display: block; + font-size: inherit; + margin: 0; + padding: 0; +} +.app-nav li ul a.active { + border-bottom: 0; +} +.app-nav li:hover ul { + display: block; +} +.github-corner { + border-bottom: 0; + position: fixed; + right: 0; + text-decoration: none; + top: 0; + z-index: 1; +} +.github-corner:hover .octo-arm { + animation: a 0.56s ease-in-out; +} +.github-corner svg { + color: #222; + fill: var(--theme-color, #e18fdc); + height: 80px; + width: 80px; +} +main { + display: block; + position: relative; + width: 100vw; + height: 100%; + z-index: 0; +} +main.hidden { + display: none; +} +.anchor { + display: inline-block; + text-decoration: none; + transition: all 0.3s; +} +.anchor span { + color: #d28fc8; +} +.anchor:hover { + text-decoration: underline; +} +.sidebar { + border-right: 1px solid rgba(0, 0, 0, 0.4); + overflow-y: auto; + padding: 40px 0 0; + position: absolute; + top: 0; + bottom: 0; + left: 0; + transition: transform 0.25s ease-out; + width: 300px; + z-index: 3; +} +.sidebar > h1 { + margin: 0 auto 1rem; + font-size: 1.5rem; + font-weight: 300; + text-align: center; +} +.sidebar > h1 a { + color: inherit; + text-decoration: none; + font-weight: 600; + color: #e18fdc; +} +.sidebar > h1 .app-nav { + display: block; + position: static; +} +.sidebar .sidebar-nav { + line-height: 2em; + padding-bottom: 40px; +} +.sidebar li.collapse .app-sub-sidebar { + display: none; +} +.sidebar ul { + margin: 0 0 0 15px; + padding: 0; +} +.sidebar li > p { + font-weight: 700; + margin: 0; + color: #c32727; +} +.sidebar ul, +.sidebar ul li { + list-style: none; +} +.sidebar ul li a { + border-bottom: none; + display: block; +} +.sidebar ul li ul { + padding-left: 20px; +} +.sidebar::-webkit-scrollbar { + width: 4px; +} +.sidebar::-webkit-scrollbar-thumb { + background: transparent; + border-radius: 4px; +} +.sidebar:hover::-webkit-scrollbar-thumb { + background: hsla(0, 0%, 53%, 0.4); +} +.sidebar:hover::-webkit-scrollbar-track { + background: hsla(0, 0%, 53%, 0.1); +} +.sidebar-toggle { + background-color: transparent; + background-color: hsla(0, 0%, 13%, 0.8); + border: 0; + outline: none; + padding: 10px; + position: absolute; + bottom: 0; + left: 0; + text-align: center; + transition: opacity 0.3s; + width: 284px; + z-index: 4; +} +.sidebar-toggle .sidebar-toggle-button:hover { + opacity: 0.4; +} +.sidebar-toggle span { + background-color: var(--theme-color, #e18fdc); + display: block; + margin-bottom: 4px; + width: 16px; + height: 2px; +} +body.sticky .sidebar, +body.sticky .sidebar-toggle { + position: fixed; +} +.content { + padding-top: 60px; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 300px; + transition: left 0.25s ease; +} +.markdown-section { + margin: 0 auto; + max-width: 800px; + padding: 30px 15px 40px; + position: relative; +} +.markdown-section > * { + box-sizing: border-box; + font-size: inherit; +} +.markdown-section > :first-child { + margin-top: 0 !important; +} +.markdown-section hr { + border: none; + border-bottom: 1px solid #444444; + margin: 2em 0; +} +.markdown-section iframe { + border: 1px solid #444444; +} +.markdown-section table { + border-collapse: collapse; + border-spacing: 0; + display: block; + margin-bottom: 1rem; + overflow: auto; + width: 100%; +} +.markdown-section th { + font-weight: 700; +} +.markdown-section td, +.markdown-section th { + border: 1px solid #b0b0b0; + padding: 6px 13px; +} +.markdown-section tr { + border-top: 1px solid #a3a3a3; +} +.markdown-section p.tip, +.markdown-section tr:nth-child(2n) { + background-color: #303030; +} +.markdown-section p.tip { + border-bottom-right-radius: 2px; + border-left: 4px solid #e18fdc; + border-top-right-radius: 2px; + margin: 2em 0; + padding: 12px 24px 12px 30px; + position: relative; +} +.markdown-section p.tip:before { + background-color: #e18fdc; + border-radius: 100%; + color: #fff; + content: '!'; + font-family: Dosis, Source Sans Pro, Helvetica Neue, Arial, sans-serif; + font-size: 14px; + font-weight: 700; + left: -12px; + line-height: 20px; + position: absolute; + height: 20px; + width: 20px; + text-align: center; + top: 14px; +} +.markdown-section p.tip code { + background-color: #191919; +} +.markdown-section p.tip em { + color: #34495e; +} +.markdown-section p.warn { + background: rgba(66, 185, 131, 0.2); + border-radius: 2px; + padding: 1rem; +} +body.close .sidebar { + transform: translateX(-300px); +} +body.close .sidebar-toggle { + width: auto; +} +body.close .content { + left: 0; +} +@media print { + .app-nav, + .github-corner, + .sidebar, + .sidebar-toggle { + display: none; + } +} +@media screen and (max-width: 768px) { + .github-corner, + .sidebar, + .sidebar-toggle { + position: fixed; + } + .app-nav { + margin-top: 16px; + } + .app-nav li ul { + top: 30px; + } + main { + height: auto; + overflow-x: hidden; + } + .sidebar { + left: -300px; + transition: transform 0.25s ease-out; + } + .content { + left: 0; + max-width: 100vw; + position: static; + padding-top: 20px; + transition: transform 0.25s ease; + } + .app-nav, + .github-corner { + transition: transform 0.25s ease-out; + } + .sidebar-toggle { + background-color: transparent; + width: auto; + padding: 30px 30px 10px 10px; + } + body.close .sidebar { + transform: translateX(300px); + } + body.close .sidebar-toggle { + background-color: hsla(0, 0%, 13%, 0.8); + transition: background-color 1s; + width: 284px; + padding: 10px; + } + body.close .content { + transform: translateX(300px); + } + body.close .app-nav, + body.close .github-corner { + display: none; + } + .github-corner:hover .octo-arm { + animation: none; + } + .github-corner .octo-arm { + animation: a 0.56s ease-in-out; + } +} +@keyframes a { + 0%, + to { + transform: rotate(0); + } + 20%, + 60% { + transform: rotate(-25deg); + } + 40%, + 80% { + transform: rotate(10deg); + } +} +section.cover { + -ms-flex-align: center; + align-items: center; + background-position: 50%; + background-repeat: no-repeat; + background-size: cover; + height: 100vh; + display: none; + background: linear-gradient( + to left bottom, + #ffffff 0%, + #6a6a6a 100% + ) !important; +} +section.cover.show { + display: -ms-flexbox; + display: flex; +} +section.cover.has-mask .mask { + background-color: #fff; + opacity: 0.8; + position: absolute; + top: 0; + height: 100%; + width: 100%; +} +section.cover .cover-main { + -ms-flex: 1; + flex: 1; + margin: -20px 16px 0; + text-align: center; + z-index: 1; +} +section.cover a { + color: inherit; +} +section.cover a, +section.cover a:hover { + text-decoration: none; +} +section.cover p { + line-height: 1.5rem; + margin: 1em 0; +} +section.cover h1 { + color: inherit; + font-size: 2.5rem; + font-weight: 300; + margin: 0.625rem 0 2.5rem; + position: relative; + text-align: center; +} +section.cover h1 a { + display: block; +} +section.cover h1 small { + bottom: -0.4375rem; + font-size: 1rem; + position: absolute; +} +section.cover blockquote { + font-size: 1.5rem; + text-align: center; +} +section.cover ul { + line-height: 1.8; + list-style-type: none; + margin: 1em auto; + max-width: 500px; + padding: 0; +} +section.cover .cover-main > p:last-child a { + border: 1px solid var(--theme-color, #c32727); + border-radius: 2rem; + box-sizing: border-box; + color: var(--theme-color, #c32727); + display: inline-block; + font-size: 1.05rem; + letter-spacing: 0.1rem; + margin: 0.5rem 1rem; + padding: 0.75em 2rem; + text-decoration: none; + transition: all 0.15s ease; + font-weight: bold; +} +section.cover .cover-main > p:last-child a:last-child { + background-color: var(--theme-color, #c32727); + color: #e5e5e5; +} +section.cover .cover-main > p:last-child a:last-child:hover { + color: inherit; + opacity: 0.8; + color: #e5e5e5; +} +section.cover .cover-main > p:last-child a:hover { + color: inherit; +} +section.cover blockquote > p > a { + border-bottom: 2px solid var(--theme-color, #e18fdc); + transition: color 0.3s; +} +section.cover blockquote > p > a:hover { + color: var(--theme-color, #e18fdc); +} +.sidebar, +body { + background-color: #222; +} +.sidebar { + color: #364149; +} +.sidebar li { + margin: 6px 0; +} +.sidebar ul li a { + color: #e18fdc; + font-size: 14px; + font-weight: 600; + overflow: hidden; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; +} +.sidebar ul li a:hover { + text-decoration: underline; +} +.sidebar ul li ul { + padding: 0; +} +.sidebar ul li.active > a { + border-right: 2px solid; + color: var(--theme-color, #e18fdc); + font-size: 16px; + font-weight: 600; +} +.app-sub-sidebar li:before { + content: '-'; + padding-right: 4px; + float: left; +} +.markdown-section h1, +.markdown-section h2, +.markdown-section h3, +.markdown-section h4, +.markdown-section strong { + color: #fff; + font-weight: 600; +} +.markdown-section a { + color: #2973b7; + font-weight: 600; +} +.markdown-section h1 { + font-size: 2rem; + margin: 0 0 1rem; +} +.markdown-section h2 { + font-size: 1.75rem; + margin: 45px 0 0.8rem; +} +.markdown-section h3 { + font-size: 1.5rem; + margin: 40px 0 0.6rem; +} +.markdown-section h4 { + font-size: 1.25rem; +} +.markdown-section h5 { + font-size: 1rem; +} +.markdown-section h6 { + color: #777; + font-size: 1rem; +} +.markdown-section figure, +.markdown-section p { + margin: 1.2em 0; +} +.markdown-section ol, +.markdown-section p, +.markdown-section ul { + line-height: 1.6rem; + word-spacing: 0.05rem; +} +.markdown-section ol, +.markdown-section ul { + padding-left: 1.5rem; +} +.markdown-section blockquote { + border-left: 4px solid var(--theme-color, #e18fdc); + color: #858585; + margin: 2em 0; + padding-left: 20px; +} +.markdown-section blockquote p { + font-weight: 600; + margin-left: 0; +} +.markdown-section iframe { + margin: 1em 0; +} +.markdown-section em { + color: #7f8c8d; +} +.markdown-section code { + border-radius: 2px; + color: #e18fdc; + font-size: 0.8rem; + margin: 0 2px; + padding: 3px 5px; + white-space: pre-wrap; +} +.markdown-section code, +.markdown-section pre { + background-color: #303030; + font-family: Roboto Mono, Monaco, courier, monospace; +} +.markdown-section pre { + -moz-osx-font-smoothing: initial; + -webkit-font-smoothing: initial; + line-height: 1.5rem; + margin: 1.2em 0; + overflow: auto; + padding: 0 1.4rem; + position: relative; + word-wrap: normal; +} +.token.cdata, +.token.comment, +.token.doctype, +.token.prolog { + color: #8e908c; +} +.token.namespace { + opacity: 0.7; +} +.token.boolean, +.token.number { + color: #c76b29; +} +.token.punctuation { + color: #0078c8; +} +.token.property { + color: #c76b29; +} +.token.tag { + color: #2973b7; +} +.token.string { + color: var(--theme-color, #e18fdc); +} +.token.selector { + color: #6679cc; +} +.token.attr-name { + color: #2973b7; +} +.language-css .token.string, +.style .token.string, +.token.entity, +.token.url { + color: #22a2c9; +} +.token.attr-value, +.token.control, +.token.directive, +.token.unit { + color: var(--theme-color, #e18fdc); +} +.token.keyword { + color: #c76b29; +} +.token.atrule, +.token.regex, +.token.statement { + color: #22a2c9; +} +.token.placeholder, +.token.variable { + color: #3d8fd1; +} +.token.deleted { + text-decoration: line-through; +} +.token.inserted { + border-bottom: 1px dotted #202746; + text-decoration: none; +} +.token.italic { + font-style: italic; +} +.token.bold, +.token.important { + font-weight: 700; +} +.token.important { + color: #c76b29; +} +.token.entity { + cursor: help; +} +.markdown-section pre > code { + -moz-osx-font-smoothing: initial; + -webkit-font-smoothing: initial; + background-color: #303030; + border-radius: 2px; + color: #c0c0c0; + display: block; + font-family: Roboto Mono, Monaco, courier, monospace; + font-size: 0.8rem; + line-height: inherit; + margin: 0 2px; + max-width: inherit; + overflow: inherit; + padding: 2.2em 5px; + white-space: inherit; +} +.markdown-section code:after, +.markdown-section code:before { + letter-spacing: 0.05rem; +} +code .token { + -moz-osx-font-smoothing: initial; + -webkit-font-smoothing: initial; + min-height: 1.5rem; +} +pre:after { + color: #a3a3a3; + content: attr(data-lang); + font-size: 0.6rem; + font-weight: 600; + height: 15px; + line-height: 15px; + padding: 5px 10px 0; + position: absolute; + right: 0; + text-align: right; + top: 0; +} diff --git a/index.html b/index.html index f9e5e25..e81ed8c 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ - +