Initial commit: Grav CMS setup with HTML reference material

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-18 23:38:26 +02:00
commit a9be15caf3
2261 changed files with 418989 additions and 0 deletions
@@ -0,0 +1,315 @@
+// Grav Editor
+.grav-editor-content {
+    position: relative;
+}
+
+.grav-editor {
+    [data-grav-editor] {
+        height: 300px;
+
+        &.code-mirrored {
+            padding: 0;
+            border: 0;
+            position: absolute;
+            z-index: -1;
+            display: block !important;
+        }
+    }
+
+    .CodeMirror {
+        .CodeMirror-vscrollbar, .CodeMirror-hscrollbar {
+            z-index: 1;
+            &:focus {
+                outline: none;
+            }
+        }
+    }
+
+    .CodeMirror-scroll {
+        //margin-right: -36px;
+        position: static;
+
+        // hide native scrollbar at the bottom
+        padding-bottom: 15px;
+    }
+
+    .grav-editor-resizer {
+        height: 6px;
+        cursor: row-resize;
+        border-radius: 0 0 3px 3px;
+        position: relative;
+        z-index: 1;
+    }
+    .CodeMirror-selected {
+        background: #D6E8FF;
+    }
+
+    .CodeMirror-gutters {
+        height: 100%!important;
+    }
+}
+
+.grav-editor-fullscreen {
+    position: fixed;
+    top: 4.2rem;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 3;
+    padding: 0 !important;
+    margin: 0 !important;
+    display: flex;
+    flex-direction: column;
+
+    .grav-editor-content {
+        display: flex;
+        flex-direction: column;
+        flex: 1 0 0;
+        overflow-y: auto;
+    }
+
+    .grav-editor-content, .CodeMirror-wrap, .grav-editor-preview {
+        height: 100% !important;
+    }
+
+    .grav-editor-toolbar {
+        flex: 0 0 auto;
+    }
+
+    .grav-editor-toolbar, .grav-editor-toolbar ul li:first-child a, .grav-editor-toolbar-flip ul li:last-child a {
+        border-radius: 0 !important;
+    }
+
+    .grav-editor-resizer {
+        display: none;
+    }
+
+    .grav-editor-content.is-active {
+        display: flex;
+    }
+}
+
+.grav-editor-toolbar {
+    @include align-items(stretch);
+    @include display(flex);
+    @include flex-direction(row);
+
+    .grav-editor-actions {
+        @include flex(1);
+    }
+    .grav-editor-modes {
+        flex-shrink: 0;
+        margin-right: 2px;
+        ul {
+            float: right;
+        }
+    }
+}
+
+.grav-editor-toolbar {
+    @include clearfix;
+
+    ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+
+        li {
+            &:first-child a {
+                border-top-left-radius: 4px;
+            }
+            display: inline-block;
+        }
+
+        a {
+            display: inline-block;
+            cursor: pointer;
+            background-color: transparent;
+            border-radius: 0;
+            padding: 0.4rem;
+            margin-top: -1px;
+            border: 1px solid transparent;
+
+            &, &:hover, &:active, &:focus {
+                outline: 0;
+            }
+        }
+    }
+
+    .dropdown-menu li {
+        width: 50%;
+    }
+}
+
+.grav-editor-hide-toolbar {
+    display: none;
+}
+
+.grav-editor-toolbar .grav-editor-modes {
+    li {
+        &:first-child a {
+            border-top-left-radius: 0;
+        }
+        &:last-child a {
+            border-top-right-radius: 4px;
+        }
+    }
+
+    a {
+        &:hover {
+            /*border: 1px solid transparent;
+            border-bottom: 1px solid darken($content-bg, 20%);*/
+        }
+    }
+}
+
+.grav-editor-toolbar-flip {
+    float: right;
+    ul li:last-child a {
+        border-top-right-radius: 4px;
+    }
+}
+
+.grav-editor-content, .grav-editor-preview {
+    @include clearfix;
+    cursor: text;
+    display: none;
+
+    &.is-active {
+        display: block;
+    }
+}
+
+.grav-editor-content {
+    /* PADDING */
+    .CodeMirror-lines {
+        padding: 10px 0; /* Vertical padding around content */
+    }
+
+    &.fontsize-lg {
+        font-size: 16px;
+
+        &.fontfamily-sans {
+            font-size: 18px;
+        }
+    }
+
+    &.fontsize-md {
+        font-size: 14px;
+
+        &.fontfamily-sans {
+            font-size: 16px;
+        }
+    }
+
+    &.font-size-sm {
+        font-size: 12px;
+
+        &.fontfamily-sans {
+            font-size: 14px;
+        }
+    }
+}
+
+#admin-main .admin-block {
+    .grav-editor-preview {
+        padding: 20px;
+        overflow-y: scroll;
+        position: relative;
+        line-height: 1.5;
+        background: #fff !important;
+        color: #555 !important;
+
+        //shortcode {
+        //    background: #ffc;
+        //    font-size: 90%;
+        //}
+        //
+        //twig {
+        //    background: #cfc;
+        //    font-size: 90%;
+        //}
+
+        a {
+            color: #1c90fb !important;
+        }
+
+        h1 {
+            font-size: 36px;
+        }
+
+        h2 {
+            font-size: 28px;
+        }
+
+        h3 {
+            font-size: 22px;
+        }
+
+        h4 {
+            font-size: 18px;
+        }
+
+        h5 {
+            font-size: 16px;
+        }
+
+        h6 {
+            font-size: 14px;
+        }
+
+        h1, h2, h3, h4, h5, h6 {
+            padding: 0;
+            margin: 0.5rem 0;
+            border-bottom: 0 !important;
+            color: #333 !important;
+            font-weight: bold;
+        }
+
+        p {
+            padding: 0;
+            margin: 0.5rem 0 1rem;
+        }
+
+        pre {
+            code {
+                color: #1c90fb;
+                font-size: 14px;
+            }
+        }
+
+        blockquote {
+            border-color: #ccc !important;
+            background-color: #f0f0f0 !important;
+            p {
+                color: #444 !important;
+            }
+        }
+
+        hr {
+            border-color: #eee !important;
+        }
+
+        table {
+            td, th, tr {
+                border-color: #eee !important;
+            }
+        }
+
+    }
+}
+
+
+.grav-editor-toolbar {
+    [data-hint]:after {
+        white-space: nowrap !important;
+        max-width: 300px;
+        width: auto !important;
+    }
+
+    p {
+        margin-top: 10px;
+        margin-bottom: 10px;
+        padding-left: 20px;
+    }
+}