jekyll-docs-theme 0.1.2 → 1.0.0

data/_sass/abstracts/_themer.scss

@@ -0,0 +1,18 @@
+@mixin themer($property, $values) {
+    @if $site-ui-mode == 'auto' {
+        @media (prefers-color-scheme: dark) {
+            & {
+                #{$property}: map-get($values, 'dark');
+            }
+        }
+
+        @media (prefers-color-scheme: light) {
+            & {
+                #{$property}: map-get($values, 'light');
+            }
+        }
+    }
+    @else if $site-ui-mode == 'dark' or $site-ui-mode == 'light' {
+        #{$property}: map-get($values, $site-ui-mode);
+    }
+}

data/_sass/abstracts/_variables.scss

@@ -0,0 +1,6 @@
+$background-color-dark: #252525 !default;
+$background-color-light: #ffffff !default;
+$color-dark: #d8d8d8 !default;
+$color-light: #222222 !default;
+
+$sidebar-border-width: 2px !default;

data/_sass/base/_anchor.scss

@@ -0,0 +1,20 @@
+a {
+    @include themer(color, (
+        'dark': $site-ui-brand-dark,
+        'light': $site-ui-brand-light,
+    ));
+
+    border-bottom: 1px dashed currentColor;
+    text-decoration: none;
+
+    &:active,
+    &:focus,
+    &:hover {
+        @include themer(color, (
+            'dark': darken($site-ui-brand-dark, 10%),
+            'light': darken($site-ui-brand-light, 10%),
+        ));
+
+        text-decoration: none;
+    }
+}

data/_sass/base/_blockquote.scss

@@ -0,0 +1,19 @@
+blockquote {
+    @include themer(border-bottom-color, (
+        'dark': $site-ui-border-color-dark,
+        'light': $site-ui-border-color-light,
+    ));
+
+    @include themer(color, (
+        'dark': rgba($color-dark, 60%),
+        'light': rgba($color-light, 60%),
+    ));
+
+    border-left-style: solid;
+    border-left-width: 4px;
+    padding: 0.5rem 1.25rem;
+
+    *:last-child {
+        margin-bottom: 0;
+    }
+}

data/_sass/base/_body.scss

@@ -0,0 +1,12 @@
+body {
+    @include themer(background-color, (
+        'dark': $background-color-dark,
+        'light': $background-color-light,
+    ));
+    @include themer(color, (
+        'dark': $color-dark,
+        'light': $color-light,
+    ));
+
+    position: relative;
+}

data/_sass/base/_horizontal-rule.scss

@@ -0,0 +1,9 @@
+hr {
+    @include themer(border-top-color, (
+        'dark': $site-ui-border-color-dark,
+        'light': $site-ui-border-color-light,
+    ));
+
+    margin-bottom: 2.5rem;
+    margin-top: 2.5rem;
+}

data/_sass/base/_scope-markdown.scss

@@ -0,0 +1,108 @@
+.scope-markdown {
+    code {
+        @include themer(color, (
+            'dark': #ffa6a6,
+            'light': #e83e8c,
+        ));
+    }
+
+    h1, h2, h3,
+    h4, h5, h6 {
+        .heading-anchor {
+            border-bottom: 0;
+            font-size: 0.8em;
+            opacity: 0.6;
+            transition: opacity 0.2s;
+        }
+
+        &:hover {
+            .heading-anchor {
+                opacity: 1;
+
+                &:active,
+                &:focus,
+                &:hover {
+                    @include themer(color, (
+                        'dark': $site-ui-brand-dark,
+                        'light': $site-ui-brand-light,
+                    ));
+
+                    text-decoration: underline;
+                }
+            }
+        }
+    }
+
+    h1 {
+        font-size: 2.25rem;
+    }
+
+    h2 {
+        @include themer(border-bottom-color, (
+            'dark': $site-ui-border-color-dark,
+            'light': $site-ui-border-color-light,
+        ));
+
+        border-bottom-style: solid;
+        border-bottom-width: 1px;
+        font-size: 2rem;
+        margin-bottom: 1.25rem;
+        margin-top: 2rem;
+        padding-bottom: 0.5rem;
+    }
+
+    h3, h4, h5, h6 {
+        font-size: 1.5rem;
+        font-weight: bold;
+        margin-bottom: 0.75rem;
+        margin-top: 1.75rem;
+    }
+
+    h4 {
+        font-size: 1.25rem;
+    }
+
+    h5 {
+        font-size: 1.15rem;
+    }
+
+    h6 {
+        font-size: 1rem;
+    }
+
+    img {
+        display: block;
+        max-width: 100%;
+    }
+
+    table {
+        width: 100%;
+
+        thead,
+        tr {
+            @include themer(border-bottom-color, (
+                'dark': $site-ui-border-color-dark,
+                'light': $site-ui-border-color-light,
+            ));
+
+            border-bottom-style: solid;
+        }
+
+        thead {
+            border-bottom-width: 2px;
+        }
+
+        tr {
+            border-bottom-width: 1px;
+
+            &:last-child {
+                border-bottom: 0;
+            }
+        }
+
+        td,
+        th {
+            padding: 0.5rem 0.25rem;
+        }
+    }
+}

data/_sass/components/_alert.scss

@@ -0,0 +1,5 @@
+.alert {
+    p:last-of-type {
+        margin-bottom: 0;
+    }
+}

data/_sass/components/_footer.scss

@@ -0,0 +1,39 @@
+.site-footer {
+}
+
+.site-footer__social-links {
+    .github-btn {
+        border: 0;
+        overflow: hidden
+    }
+
+    .twitter-follow-button {
+        width: 225px!important
+    }
+
+    .twitter-share-button {
+        width: 98px!important
+    }
+
+}
+
+.site-footer__links {
+    .list-inline-item {
+        &:not(:last-child)::after {
+            content: '\00b7';
+            padding-left: 0.5rem;
+        }
+    }
+}
+
+.site-footer__link {
+    border-bottom: 0;
+
+    span {
+        border-bottom: 1px dashed currentColor;
+    }
+}
+
+.site-footer__summary {
+    font-size: 0.8rem;
+}

data/_sass/components/_header.scss

@@ -0,0 +1,22 @@
+.navbar-custom {
+    a {
+        border-bottom: 0;
+    }
+
+    .navbar-brand {
+        font-weight: bold;
+    }
+
+    .icon-bar {
+        @include themer(background, (
+            'dark': $site-ui-brand-dark,
+            'light': $site-ui-brand-light,
+        ));
+
+        border-radius: 1px;
+        display: block;
+        height: 2px;
+        margin: 4px 0;
+        width: 22px;
+    }
+}

data/_sass/components/_highlight.scss

@@ -0,0 +1,59 @@
+@if $site-ui-mode == 'auto' {
+    @media (prefers-color-scheme: dark) {
+        @include highlight-dark-theme();
+    }
+
+    @media (prefers-color-scheme: light) {
+        @include highlight-light-theme();
+    }
+}
+@else if $site-ui-mode == 'dark' {
+    @include highlight-dark-theme();
+}
+@else if $site-ui-mode == 'light' {
+    @include highlight-light-theme();
+}
+
+.highlight {
+    @include themer(background-color, (
+        'dark': #3f3f3f,
+        'light': #f7f7f9,
+    ));
+    @include themer(border-color, (
+        'dark': #222222,
+        'light': #e1e1e8,
+    ));
+
+    border-style: solid;
+    border-width: 1px;
+    border-radius: 4px;
+    padding: 9px 14px;
+    margin-bottom: 14px;
+}
+
+.highlight pre {
+    background-color: transparent;
+    border: 0;
+    padding: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.highlight pre code {
+    @include themer(color, (
+        'dark': #fdce93,
+        'light': #333,
+    ));
+
+    font-size: inherit;
+    white-space: pre;
+}
+
+.highlight pre .lineno {
+    display: inline-block;
+    color: #bebec5;
+    margin-right: 10px;
+    padding-right: 5px;
+    text-align: right;
+    width: 22px;
+}

data/_sass/components/_masthead.scss

@@ -0,0 +1,62 @@
+.site-masthead {
+    @include themer(background, (
+        'dark': $site-ui-header-dark-color1,
+        'light': $site-ui-header-light-color1,
+    ));
+    @include themer(background, (
+        'dark': linear-gradient(135deg, $site-ui-header-dark-color1, $site-ui-header-dark-color2),
+        'light': linear-gradient(135deg, $site-ui-header-light-color1, $site-ui-header-light-color2),
+    ));
+
+    color: white;
+    position: relative;
+
+    &::after {
+        @include themer(background, (
+            'dark': linear-gradient(135deg, transparent 50px, $background-color-dark 50px),
+            'light': linear-gradient(135deg, transparent 50px, $background-color-light 50px),
+        ));
+
+        bottom: 0;
+        content: "";
+        height: 50px;
+        position: absolute;
+        right: 0;
+        width: 30%;
+    }
+}
+
+.site-masthead__button {
+    @include themer(border-color, (
+        'dark': $site-ui-masthead-color-dark,
+        'light': $site-ui-masthead-color-light,
+    ));
+    @include themer(color, (
+        'dark': $site-ui-masthead-color-dark,
+        'light': $site-ui-masthead-color-light,
+    ));
+
+    border-radius: 5px;
+    border-style: solid;
+    border-width: 1px;
+    display: inline-block;
+    font-size: 1.25rem;
+    padding: 0.75rem 2rem;
+
+    &:hover {
+        @include themer(background-color, (
+            'dark': $site-ui-masthead-color-dark,
+            'light': $site-ui-masthead-color-light,
+        ));
+        @include themer(color, (
+            'dark': $site-ui-brand-dark,
+            'light': $site-ui-brand-light,
+        ));
+
+        text-decoration: none;
+    }
+}
+
+.site-masthead__version {
+    font-size: 0.8rem;
+}

data/_sass/components/_mobile-toc.scss

@@ -0,0 +1,30 @@
+.mobile-toc {
+    h2 {
+        font-size: 1rem;
+        font-weight: bold;
+    }
+
+    ul {
+        padding-left: 1.4rem;
+    }
+
+    .toggle-toc {
+        @include themer(color, (
+            'dark': $site-ui-brand-dark,
+            'light': $site-ui-brand-light,
+        ));
+
+        background-color: transparent;
+        border: none;
+        cursor: pointer;
+        padding: 0;
+
+        &::before {
+            content: '[';
+        }
+
+        &::after {
+            content: ']';
+        }
+    }
+}

data/_sass/components/_sidebar.scss

@@ -0,0 +1,86 @@
+// Only hide nested ULs if they are accessible via JS
+.js .page-sidebar {
+    ul ul {
+        display: none;
+    }
+}
+
+.page-sidebar {
+    max-height: 100vh;
+    position: -webkit-sticky;
+    position: sticky;
+    overflow: auto;
+    top: 20px;
+
+    a {
+        @include themer(color, (
+            'dark': #c7c7c7,
+            'light': #999,
+        ));
+
+        border-bottom: 0;
+    }
+
+    ul {
+        padding-left: 15px;
+
+        & ul {
+            font-size: 90%;
+        }
+
+        li {
+            list-style: none;
+        }
+
+        a {
+            border-bottom: 0;
+            display: block;
+            font-weight: 500;
+            position: relative;
+
+            &:focus,
+            &:hover {
+                @include themer(color, (
+                    'dark': $site-ui-brand-dark,
+                    'light': $site-ui-brand-light,
+                ));
+
+                background-color: transparent;
+            }
+
+            &.active,
+            &.active:focus,
+            &.active:hover {
+                @include themer(color, (
+                    'dark': $site-ui-brand-dark,
+                    'light': $site-ui-brand-light,
+                ));
+
+                font-weight: 700;
+
+                // In order to prevent being affected by the extra width misaligning
+                // content, we'll do position absolute the border.
+                &::before {
+                    @include themer(border-left-color, (
+                        'dark': $site-ui-brand-dark,
+                        'light': $site-ui-brand-light,
+                    ));
+
+                    border-left-style: solid;
+                    border-left-width: $sidebar-border-width;
+                    content: '';
+                    display: block;
+                    height: 100%;
+                    left: 0;
+                    position: absolute;
+                    top: 0;
+                }
+            }
+
+            // Unhide any nested ULs when this TOC section is active
+            &.active + ul {
+                display: block;
+            }
+        }
+    }
+}