From c49868cb9221be56cd5b8c66ae591a7272ca2f15 Mon Sep 17 00:00:00 2001 From: Daniel Kluge Date: Fri, 4 Feb 2022 23:29:26 +0100 Subject: [PATCH] Add asciidoc styles --- pages/_app.tsx | 1 + styles/ProjectModal.module.css | 3 +- styles/asciidocBootSlate.css | 442 +++++++++++++++++++++++++++++++++ styles/customAsciidoc.scss | 25 ++ 4 files changed, 470 insertions(+), 1 deletion(-) create mode 100644 styles/asciidocBootSlate.css create mode 100644 styles/customAsciidoc.scss diff --git a/pages/_app.tsx b/pages/_app.tsx index a9d8c50..8db6ab9 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,6 +1,7 @@ import type { AppProps } from "next/app"; import Head from "next/head"; import "../styles/globals.css"; +import "../styles/customAsciidoc.scss"; function MyApp({ Component, pageProps }: AppProps) { return <> diff --git a/styles/ProjectModal.module.css b/styles/ProjectModal.module.css index f9b5910..4097eb2 100644 --- a/styles/ProjectModal.module.css +++ b/styles/ProjectModal.module.css @@ -10,10 +10,11 @@ } .modalContainer { - background: #333; + background: #272b30; color: #ccc; width: 100%; height: 100%; padding: 20px; border-radius: 20px; + overflow-y: auto; } \ No newline at end of file diff --git a/styles/asciidocBootSlate.css b/styles/asciidocBootSlate.css new file mode 100644 index 0000000..8dd988f --- /dev/null +++ b/styles/asciidocBootSlate.css @@ -0,0 +1,442 @@ +/* MIT License + +Copyright (c) [year] [fullname] + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. */ + + +/* Source: https://raw.githubusercontent.com/darshandsoni/asciidoctor-skins/c98a8ab9b27571e5b63d75912a3c753cc72ed8e4/css/boot-slate.css */ + + +/* Based on Slate from Bootswatch (https://bootswatch.com/slate/) */ + + +/* document body (contains all content) */ + +body { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 14px; + line-height: 1.42857143; + color: #c8c8c8; + background-color: #272b30; + margin-left: 10%; + margin-right: 10%; +} + + +/* document header (contains title etc) */ + +#header { + width: 100%; +} + +#header>h1 { + border-bottom: 1px solid #ddddd8; + padding-bottom: 8px; +} + + +/* headings */ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-weight: 500; + line-height: 1.1; + color: inherit; +} + +h1, +h2, +h3 { + margin-top: 20px; + margin-bottom: 10px; +} + +h4, +h5, +h6 { + margin-top: 10px; + margin-bottom: 10px; +} + +h1 { + font-size: 4em; + /* font-size: 36px; */ +} + +h2 { + font-size: 30px; +} + +h3 { + font-size: 24px; +} + +h4 { + font-size: 18px; +} + +h5 { + font-size: 14px; +} + +h6 { + font-size: 12px; +} + + +/* plain paragraph text */ + +.paragraph { + /* font-family: sans-serif; */ + margin: 0 0 10px; +} + +p { + /* font-family: sans-serif; */ + margin: 0 0 10px; +} + + +/* blockquote text */ + +.quoteblock { + font-style: italic; +} + +blockquote { + padding: 10px 20px; + margin: 0 0 20px; + font-size: 17.5px; + border-left: 5px solid #7a8288; +} + +blockquote p:last-child, +blockquote ul:last-child, +blockquote ol:last-child { + margin-bottom: 0; +} + +.blockquote-reverse, +blockquote.pull-right { + padding-right: 15px; + padding-left: 0; + border-right: 5px solid #7a8288; + border-left: 0; + text-align: right; +} + +.blockquote-reverse footer:before, +blockquote.pull-right footer:before, +.blockquote-reverse small:before, +blockquote.pull-right small:before, +.blockquote-reverse .small:before, +blockquote.pull-right .small:before { + content: ''; +} + +.blockquote-reverse footer:after, +blockquote.pull-right footer:after, +.blockquote-reverse small:after, +blockquote.pull-right small:after, +.blockquote-reverse .small:after, +blockquote.pull-right .small:after { + content: '\00A0 \2014'; +} + + +/* blockquote attribution text */ + +.attribution, +.cite, +blockquote footer, +blockquote small, +blockquote .small { + display: block; + line-height: 1.42857143; + color: #7a8288; +} + +.attribution:before, +blockquote footer:before, +blockquote small:before, +blockquote .small:before { + content: '\2014 \00A0'; +} + + +/* unordered list */ + +ul, +ol { + margin-top: 0; + margin-bottom: 10px; +} + +ul ul, +ol ul, +ul ol, +ol ol { + margin-bottom: 0; +} + + +/* links */ + +a { + color: #ffffff; + text-decoration: none; +} + +a:hover, +a:focus { + color: #ffffff; + text-decoration: underline; +} + +a:focus { + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} + + +/* horizontal rules */ + +hr { + margin-top: 20px; + margin-bottom: 20px; + border: 0; + border-top: 1px solid #1c1e22; +} + + +/* table */ + +table { + background-color: transparent; + width: 100%; + max-width: 100%; + margin-bottom: 21px; + border-collapse: collapse; +} + +table col[class*="col-"] { + position: static; + float: none; + display: table-column; +} + +table td[class*="col-"], +table th[class*="col-"] { + position: static; + float: none; + display: table-cell; +} + + +/* table caption */ + +caption { + padding-top: 8px; + padding-bottom: 8px; + color: #7a8288; + text-align: left; +} + + +/* table header row */ + +thead { + border-bottom: 2px solid #1c1e22; +} + + +/* table header cell */ + +th { + text-align: left; + padding-left: 8px; +} + + +/* table footer */ + +tfoot { + color: #807F81; + border-top: 1px solid #1c1e22; +} + + +/* table cell */ + +td { + border-top: 1px solid #1c1e22; +} + +td p { + margin: auto; + padding: 8px; +} + + +/* table body */ + +tbody>tr:nth-of-type(odd) { + background-color: #353a41; +} + +tbody>tr:hover { + background-color: #49515a; +} + + +/* inline code */ + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +code { + padding: 2px 4px; + font-size: 90%; + color: #3a3f44; + background-color: #f5f5f5; + border-radius: 4px; +} + +kbd { + padding: 2px 4px; + font-size: 90%; + color: #ffffff; + background-color: #333333; + border-radius: 3px; + -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25); + box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25); +} + +kbd kbd { + padding: 0; + font-size: 100%; + font-weight: bold; + -webkit-box-shadow: none; + box-shadow: none; +} + +pre { + display: block; + padding: 9.5px; + margin: 0 0 10px; + font-size: 13px; + line-height: 1.42857143; + word-break: break-all; + word-wrap: break-word; + color: #3a3f44; + background-color: #f5f5f5; + border: 1px solid #cccccc; + border-radius: 4px; +} + +pre code { + padding: 0; + font-size: inherit; + color: inherit; + white-space: pre-wrap; + background-color: transparent; + border-radius: 0; +} + + +/* image */ + +img { + max-width: 100%; + vertical-align: middle; +} + + +/* footer section */ + +#footer { + margin-top: 22px; + padding: 14px 16px; + background-color: #3a3f44; +} + + +/* responsiveness fixes */ + +video { + max-width: 100%; +} + + +/* table of Contents sidebar */ + +#toctitle { + color: #272b30; +} + +#toc ul { + display: inline; + list-style-type: none; + margin: 0; + padding: 0; + overflow: hidden; +} + +#toc li { + display: block; +} + +#toc a { + background-color: #3a3f44; + float: left; + text-align: center; + padding: 14px 16px; + text-decoration: none; +} + +#toc li a:hover { + background-color: #272b2e; + text-decoration: none; +} + +#toc:after { + content: " "; + visibility: hidden; + display: block; + height: 0; + clear: both; +} + +@media all and (max-width: 600px) { + table { + width: 55vw!important; + font-size: 3vw; + } +} \ No newline at end of file diff --git a/styles/customAsciidoc.scss b/styles/customAsciidoc.scss new file mode 100644 index 0000000..69a8871 --- /dev/null +++ b/styles/customAsciidoc.scss @@ -0,0 +1,25 @@ +.asciidoc { + /*@import "../node_modules/@asciidoctor/core/dist/css/asciidoctor.css";*/ + @import "./asciidocBootSlate"; + h1 { + color: var(--repl-color-link, #2ac02a); + font-size: 3em; + } + h2, + h3 { + font-weight: bold; + text-decoration: underline; + } + h2, + h3, + h4, + h5, + h6 { + color: var(--repl-color, #188a18); + } + font-family: sans-serif; + #preamble { + font-style: italic; + font-size: 120%; + } +} \ No newline at end of file