Add asciidoc styles

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 <>

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;
 }

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;
+    }
+}

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%;
+    }
+}