mirror of
https://github.com/thangisme/notes.git
synced 2024-12-10 23:16:33 -05:00
commit
3573db5d34
@ -1,6 +1,7 @@
|
||||
{
|
||||
"ignoreFiles" : [
|
||||
"assets/css/just-the-docs.scss",
|
||||
"assets/css/dark-mode-preview.scss",
|
||||
"_sass/vendor/**/*.scss"
|
||||
],
|
||||
"extends": [
|
||||
|
@ -6,6 +6,7 @@ env:
|
||||
|
||||
install:
|
||||
- npm install
|
||||
- gem install bundler --version '>=1.17.1'
|
||||
- bundle install
|
||||
|
||||
script:
|
||||
|
@ -28,3 +28,6 @@ search_enabled: true
|
||||
aux_links:
|
||||
"Just the Docs on GitHub":
|
||||
- "//github.com/pmarsceill/just-the-docs"
|
||||
|
||||
# Color scheme currently only supports "dark" or nil (default)
|
||||
color_scheme: nil
|
||||
|
@ -5,7 +5,7 @@
|
||||
|
||||
<div class="page-wrap">
|
||||
<div class="side-bar">
|
||||
<a href="{{ site.url }}{{ site.baseurl }}" class="site-title fs-6 text-grey-dk-300 lh-tight">{{ site.title }}</a>
|
||||
<a href="{{ site.url }}{{ site.baseurl }}" class="site-title fs-6 lh-tight">{{ site.title }}</a>
|
||||
<span class="fs-3"><button class="js-main-nav-trigger navigation-list-toggle btn btn-outline" type="button" data-text-toggle="Hide">Menu</button></span>
|
||||
<div class="navigation main-nav js-main-nav">
|
||||
{% include nav.html %}
|
||||
|
@ -7,6 +7,11 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: $white;
|
||||
background: $link-color;
|
||||
}
|
||||
|
||||
html {
|
||||
@include fs-4;
|
||||
}
|
||||
@ -16,6 +21,7 @@ body {
|
||||
font-size: inherit;
|
||||
line-height: $body-line-height;
|
||||
color: $body-text-color;
|
||||
background-color: $body-background-color;
|
||||
}
|
||||
|
||||
p,
|
||||
@ -64,7 +70,7 @@ a {
|
||||
|
||||
a:not([class]) {
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient($grey-lt-100 0%, $grey-lt-100 100%);
|
||||
background-image: linear-gradient($border-color 0%, $border-color 100%);
|
||||
background-repeat: repeat-x;
|
||||
background-position: 0 100%;
|
||||
background-size: 1px 1px;
|
||||
@ -99,6 +105,6 @@ hr {
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: $sp-6 0;
|
||||
background-color: $grey-lt-100;
|
||||
background-color: $border-color;
|
||||
border: 0;
|
||||
}
|
||||
|
@ -15,11 +15,11 @@
|
||||
font-size: inherit;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
color: $purple-200;
|
||||
color: $link-color;
|
||||
text-decoration: none;
|
||||
vertical-align: baseline;
|
||||
cursor: pointer;
|
||||
background-color: #f7f7f7;
|
||||
background-color: $base-button-color;
|
||||
border-width: 0;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
|
||||
@ -38,7 +38,7 @@
|
||||
|
||||
&:hover,
|
||||
&.zeroclipboard-is-hover {
|
||||
color: $purple-300;
|
||||
color: darken($link-color, 2%);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
@ -46,13 +46,13 @@
|
||||
&.zeroclipboard-is-hover,
|
||||
&.zeroclipboard-is-active {
|
||||
text-decoration: none;
|
||||
background-color: #f4f4f4;
|
||||
background-color: darken($base-button-color, 1%);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.selected,
|
||||
&.zeroclipboard-is-active {
|
||||
background-color: #ededed;
|
||||
background-color: darken($base-button-color, 3%);
|
||||
background-image: none;
|
||||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
@ -75,7 +75,7 @@
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
color: $blue-100;
|
||||
color: $link-color;
|
||||
background: transparent;
|
||||
box-shadow: inset 0 0 0 2px $grey-lt-300;
|
||||
|
||||
@ -83,7 +83,7 @@
|
||||
&:active,
|
||||
&.zeroclipboard-is-hover,
|
||||
&.zeroclipboard-is-active {
|
||||
color: $grey-dk-100;
|
||||
color: darken($link-color, 4%);
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
box-shadow: inset 0 0 0 3px $grey-lt-300;
|
||||
@ -101,6 +101,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@include btn-color($white, $btn-primary-color);
|
||||
}
|
||||
|
||||
.btn-purple {
|
||||
@include btn-color($white, $purple-100);
|
||||
}
|
||||
|
@ -6,7 +6,7 @@
|
||||
code {
|
||||
padding: 0.2em 0.15em;
|
||||
font-weight: 400;
|
||||
background-color: $grey-lt-000;
|
||||
background-color: $code-background-color;
|
||||
border: $border $border-color;
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
@ -14,7 +14,7 @@ code {
|
||||
pre.highlight {
|
||||
padding: $sp-3;
|
||||
margin-bottom: 0;
|
||||
background-color: $grey-lt-000;
|
||||
background-color: $code-background-color;
|
||||
|
||||
code {
|
||||
padding: 0;
|
||||
|
14
_sass/color_schemes/dark.scss
Normal file
14
_sass/color_schemes/dark.scss
Normal file
@ -0,0 +1,14 @@
|
||||
|
||||
$body-background-color: $grey-dk-300;
|
||||
$sidebar-color: $grey-dk-300;
|
||||
$border-color: $grey-dk-200;
|
||||
|
||||
$body-text-color: $grey-lt-300;
|
||||
$body-heading-color: $grey-lt-000;
|
||||
$nav-child-link-color: $grey-dk-000;
|
||||
|
||||
$link-color: $blue-000;
|
||||
$btn-primary-color: $blue-200;
|
||||
$base-button-color: $grey-dk-250;
|
||||
|
||||
$code-background-color: $grey-dk-250;
|
@ -17,6 +17,7 @@
|
||||
// $grey-dk-000: #959396;
|
||||
// $grey-dk-100: #5c5962;
|
||||
// $grey-dk-200: #44434d;
|
||||
// $grey-dk-250: #302d36 !default;
|
||||
// $grey-dk-300: #27262b;
|
||||
//
|
||||
// $grey-lt-000: #f5f6fa;
|
||||
@ -39,9 +40,16 @@
|
||||
// $green-200: #009c7b;
|
||||
// $green-300: #026e57;
|
||||
//
|
||||
// $body-text-color: $grey-dk-100;
|
||||
// $body-heading-color: $grey-dk-300;
|
||||
// $link-color: $purple-000;
|
||||
// $body-background-color: $white !default;
|
||||
// $sidebar-color: $grey-lt-000 !default;
|
||||
// $code-background-color: $grey-lt-000 !default;
|
||||
|
||||
// $body-text-color: $grey-dk-100 !default;
|
||||
// $body-heading-color: $grey-dk-300 !default;
|
||||
// $nav-child-link-color: $grey-dk-100 !default;
|
||||
// $link-color: $purple-000 !default;
|
||||
// $btn-primary-color: $purple-100 !default;
|
||||
// $base-button-color: #f7f7f7 !default;
|
||||
//
|
||||
// //
|
||||
// // Media queries in pixels
|
||||
|
@ -21,7 +21,7 @@
|
||||
flex-wrap: wrap;
|
||||
padding-top: $gutter-spacing-sm;
|
||||
padding-bottom: $gutter-spacing-sm;
|
||||
background-color: $grey-lt-000;
|
||||
background-color: $sidebar-color;
|
||||
|
||||
@include mq(md) {
|
||||
flex-wrap: nowrap;
|
||||
@ -75,10 +75,10 @@
|
||||
}
|
||||
|
||||
.page-header {
|
||||
background-color: $grey-lt-000;
|
||||
background-color: $sidebar-color;
|
||||
|
||||
@include mq(md) {
|
||||
background-color: $white;
|
||||
background-color: $body-background-color;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
@ -138,6 +138,6 @@ body {
|
||||
position: static;
|
||||
align-self: flex-end;
|
||||
justify-self: end;
|
||||
background-color: $grey-lt-000;
|
||||
background-color: $sidebar-color;
|
||||
}
|
||||
}
|
||||
|
@ -5,7 +5,8 @@
|
||||
.site-title {
|
||||
display: block;
|
||||
flex: 1 1 auto;
|
||||
background-color: $grey-lt-000;
|
||||
color: $body-heading-color;
|
||||
background-color: $sidebar-color;
|
||||
|
||||
@include mq(md) {
|
||||
position: absolute;
|
||||
@ -34,7 +35,7 @@
|
||||
list-style: none;
|
||||
|
||||
.navigation-list-link {
|
||||
color: $grey-dk-100;
|
||||
color: $nav-child-link-color;
|
||||
}
|
||||
|
||||
.navigation-list-item {
|
||||
@ -44,13 +45,13 @@
|
||||
position: absolute;
|
||||
margin-top: 0.3em;
|
||||
margin-left: -0.8em;
|
||||
color: $grey-dk-000;
|
||||
color: rgba($body-text-color, 0.3);
|
||||
content: "- ";
|
||||
}
|
||||
|
||||
&.active {
|
||||
&::before {
|
||||
color: $grey-dk-100;
|
||||
color: $body-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -72,7 +73,7 @@
|
||||
|
||||
&.active {
|
||||
font-weight: 600;
|
||||
color: $grey-dk-200;
|
||||
color: $body-heading-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
@ -39,20 +39,21 @@
|
||||
display: block;
|
||||
width: 300px;
|
||||
margin-top: $gutter-spacing;
|
||||
background: $white;
|
||||
background: lighten($body-background-color, 1%);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
.search-input-wrap {
|
||||
display: flex;
|
||||
background-color: $white;
|
||||
background-color: $body-background-color;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding-top: $sp-1;
|
||||
padding-bottom: $sp-1;
|
||||
background-color: $body-background-color;
|
||||
border-top: 0;
|
||||
border-right: 0;
|
||||
border-bottom: 0;
|
||||
@ -64,7 +65,7 @@
|
||||
box-shadow: none;
|
||||
|
||||
+ .search-icon {
|
||||
fill: $purple-000;
|
||||
fill: $link-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -107,6 +108,7 @@
|
||||
padding-left: $sp-3;
|
||||
|
||||
&:hover {
|
||||
background-color: $grey-lt-000;
|
||||
color: $body-heading-color;
|
||||
background-color: darken($body-background-color, 2%);
|
||||
}
|
||||
}
|
||||
|
@ -17,6 +17,7 @@ $white: #fff !default;
|
||||
$grey-dk-000: #959396 !default;
|
||||
$grey-dk-100: #5c5962 !default;
|
||||
$grey-dk-200: #44434d !default;
|
||||
$grey-dk-250: #302d36 !default;
|
||||
$grey-dk-300: #27262b !default;
|
||||
|
||||
$grey-lt-000: #f5f6fa !default;
|
||||
@ -49,9 +50,16 @@ $red-100: #f96e65 !default;
|
||||
$red-200: #e94c4c !default;
|
||||
$red-300: #dd2e2e !default;
|
||||
|
||||
$body-background-color: $white !default;
|
||||
$sidebar-color: $grey-lt-000 !default;
|
||||
$code-background-color: $grey-lt-000 !default;
|
||||
|
||||
$body-text-color: $grey-dk-100 !default;
|
||||
$body-heading-color: $grey-dk-300 !default;
|
||||
$nav-child-link-color: $grey-dk-100 !default;
|
||||
$link-color: $purple-000 !default;
|
||||
$btn-primary-color: $purple-100 !default;
|
||||
$base-button-color: #f7f7f7 !default;
|
||||
|
||||
//
|
||||
// Media queries in pixels
|
||||
|
@ -25,7 +25,8 @@ td {
|
||||
padding-right: $sp-3;
|
||||
padding-bottom: $sp-2;
|
||||
padding-left: $sp-3;
|
||||
border-bottom: $border $grey-lt-000;
|
||||
background-color: lighten($body-background-color, 2%);
|
||||
border-bottom: $border rgba($border-color, 0.5);
|
||||
border-left: $border $border-color;
|
||||
|
||||
&:first-of-type {
|
||||
|
@ -16,6 +16,10 @@
|
||||
color: $grey-dk-200 !important;
|
||||
}
|
||||
|
||||
.text-grey-dk-250 {
|
||||
color: $grey-dk-250 !important;
|
||||
}
|
||||
|
||||
.text-grey-dk-300 {
|
||||
color: $grey-dk-300 !important;
|
||||
}
|
||||
@ -130,6 +134,10 @@
|
||||
background-color: $grey-dk-200 !important;
|
||||
}
|
||||
|
||||
.bg-grey-dk-250 {
|
||||
background-color: $grey-dk-250 !important;
|
||||
}
|
||||
|
||||
.bg-grey-dk-300 {
|
||||
background-color: $grey-dk-300 !important;
|
||||
}
|
||||
|
41
assets/css/dark-mode-preview.scss
Normal file
41
assets/css/dark-mode-preview.scss
Normal file
@ -0,0 +1,41 @@
|
||||
---
|
||||
# this ensures Jekyll reads the file to be transformed into CSS later
|
||||
# only Main files contain this front matter, not partials.
|
||||
---
|
||||
|
||||
//
|
||||
// Import external dependencies
|
||||
//
|
||||
|
||||
@import "./vendor/normalize.scss/normalize.scss";
|
||||
|
||||
//
|
||||
// Import Just the docs scss
|
||||
//
|
||||
|
||||
// Support
|
||||
@import "./support/support";
|
||||
|
||||
//
|
||||
// Import custom color scheme scss
|
||||
//
|
||||
|
||||
@import "./color_schemes/dark.scss";
|
||||
|
||||
// Modules
|
||||
@import "./base";
|
||||
@import "./layout";
|
||||
@import "./content";
|
||||
@import "./navigation";
|
||||
@import "./typography";
|
||||
@import "./labels";
|
||||
@import "./buttons";
|
||||
@import "./search";
|
||||
@import "./tables";
|
||||
@import "./code";
|
||||
@import "./utilities/utilities";
|
||||
|
||||
//
|
||||
// Import custom overrides
|
||||
//
|
||||
@import "./custom/custom";
|
@ -4,7 +4,7 @@
|
||||
---
|
||||
|
||||
//
|
||||
// Import dependancies
|
||||
// Import external dependencies
|
||||
//
|
||||
|
||||
@import "./vendor/normalize.scss/normalize.scss";
|
||||
@ -16,8 +16,13 @@
|
||||
// Support
|
||||
@import "./support/support";
|
||||
|
||||
// Custom overrides
|
||||
@import "./custom/custom";
|
||||
//
|
||||
// Import custom color scheme scss
|
||||
//
|
||||
|
||||
{% if site.color_scheme == "dark" %}
|
||||
@import "./color_schemes/dark.scss";
|
||||
{% endif %}
|
||||
|
||||
// Modules
|
||||
@import "./base";
|
||||
@ -31,3 +36,8 @@
|
||||
@import "./tables";
|
||||
@import "./code";
|
||||
@import "./utilities/utilities";
|
||||
|
||||
//
|
||||
// Import custom overrides
|
||||
//
|
||||
@import "./custom/custom";
|
||||
|
@ -23,3 +23,28 @@ aux_links:
|
||||
"Just the Docs on GitHub":
|
||||
- "//github.com/pmarsceill/just-the-docs"
|
||||
```
|
||||
|
||||
## Color scheme
|
||||
|
||||
```yml
|
||||
# Color scheme currently only supports "dark" or nil (default)
|
||||
color_scheme: "dark"
|
||||
```
|
||||
<button class="btn js-toggle-dark-mode">Preview dark color scheme</button>
|
||||
|
||||
<script>
|
||||
const toggleDarkMode = document.querySelector('.js-toggle-dark-mode')
|
||||
const cssFile = document.querySelector('[rel="stylesheet"]')
|
||||
const originalCssRef = cssFile.getAttribute('href')
|
||||
const darkModeCssRef = originalCssRef.replace('just-the-docs.css', 'dark-mode-preview.css')
|
||||
|
||||
addEvent(toggleDarkMode, 'click', function(){
|
||||
if (cssFile.getAttribute('href') === originalCssRef) {
|
||||
cssFile.setAttribute('href', darkModeCssRef)
|
||||
} else {
|
||||
cssFile.setAttribute('href', originalCssRef)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
See [Customization]({{site.baseurl }}{% link docs/customization.md %}) for more information.
|
||||
|
@ -15,11 +15,49 @@ nav_order: 6
|
||||
|
||||
---
|
||||
|
||||
## Visual customization
|
||||
## Color schemes
|
||||
{: .d-inline-block :}
|
||||
|
||||
New
|
||||
{: .label .label-green :}
|
||||
|
||||
Just the Docs supports two color schemes: light (default), and dark.
|
||||
|
||||
To enable a color scheme, set the `color_scheme` parameter in your site's `_config.yml` file:
|
||||
|
||||
#### Example
|
||||
{: no_toc }
|
||||
|
||||
```yml
|
||||
# Color scheme currently only supports "dark" or nil (default)
|
||||
color_scheme: "dark"
|
||||
```
|
||||
<button class="btn js-toggle-dark-mode">Preview dark color scheme</button>
|
||||
|
||||
<script>
|
||||
const toggleDarkMode = document.querySelector('.js-toggle-dark-mode')
|
||||
const cssFile = document.querySelector('[rel="stylesheet"]')
|
||||
const originalCssRef = cssFile.getAttribute('href')
|
||||
const darkModeCssRef = originalCssRef.replace('just-the-docs.css', 'dark-mode-preview.css')
|
||||
|
||||
addEvent(toggleDarkMode, 'click', function(){
|
||||
if (cssFile.getAttribute('href') === originalCssRef) {
|
||||
cssFile.setAttribute('href', darkModeCssRef)
|
||||
} else {
|
||||
cssFile.setAttribute('href', originalCssRef)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
## Specific visual customization
|
||||
|
||||
To customize your site’s aesthetic, open `_sass/custom/custom.scss` in your editor to see if there is a variable that you can override. Most styles like fonts, colors, spacing, etc.. are derived from these variables. To override a specific variable, uncomment out it’s line and change it’s value.
|
||||
|
||||
For example, to change the link color from the purple default to blue, open `_sass/custom/custom.css` and find the link color variable on line `44`. Uncomment it out, and change it's value to our `$blue-000` variable, or another shade of your choosing.
|
||||
For example, to change the link color from the purple default to blue, open `_sass/custom/custom.css` and find the `$link-color` variable on line `50`. Uncomment it out, and change it's value to our `$blue-000` variable, or another shade of your choosing.
|
||||
|
||||
#### Example
|
||||
{: no_toc }
|
||||
|
||||
```scss
|
||||
// ...
|
||||
@ -35,10 +73,3 @@ _Note:_ Editing the variables directly in `_sass/support/variables.scss` is not
|
||||
|
||||
---
|
||||
|
||||
## Themes
|
||||
{: .d-inline-block :}
|
||||
|
||||
Coming soon
|
||||
{: .label .label-yellow :}
|
||||
|
||||
Hard at work on a dark theme, and more.
|
||||
|
@ -34,6 +34,7 @@ All the colors used in Just the Docs have been systemsized into a series of vari
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-000"></span> `grey-dk-000` | `.text-grey-dk-000` | `.bg-grey-dk-000` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-100"></span> `grey-dk-100` | `.text-grey-dk-100` | `.bg-grey-dk-100` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-200"></span> `grey-dk-200` | `.text-grey-dk-200` | `.bg-grey-dk-200` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-250"></span> `grey-dk-250` | `.text-grey-dk-250` | `.bg-grey-dk-250` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-300"></span> `grey-dk-300` | `.text-grey-dk-300` | `.bg-grey-dk-300` |
|
||||
|
||||
## Purples
|
||||
|
2
index.md
2
index.md
@ -12,7 +12,7 @@ permalink: /
|
||||
Just the Docs gives your documentation a jumpstart with a responsive Jekyll theme that is easily customizable and hosted on GitHub pages.
|
||||
{: .fs-6 .fw-300 }
|
||||
|
||||
[Get started now](#getting-started){: .btn .btn-purple .fs-5 .mb-4 .mb-md-0 .mr-2 } [View it on GitHub](https://github.com/pmarsceill/just-the-docs){: .btn .fs-5 }
|
||||
[Get started now](#getting-started){: .btn .btn-primary .fs-5 .mb-4 .mb-md-0 .mr-2 } [View it on GitHub](https://github.com/pmarsceill/just-the-docs){: .btn .fs-5 }
|
||||
|
||||
---
|
||||
|
||||
|
@ -13,8 +13,8 @@ Gem::Specification.new do |spec|
|
||||
spec.files = `git ls-files -z`.split("\x0").select { |f| f.match(%r{^(assets|bin|_layouts|_includes|lib|Rakefile|_sass|LICENSE|README)}i) }
|
||||
spec.executables << 'just-the-docs'
|
||||
|
||||
spec.add_runtime_dependency "jekyll", "~> 3.3"
|
||||
spec.add_runtime_dependency "rake", "~> 10.0"
|
||||
spec.add_runtime_dependency "jekyll", "~> 3.8.5"
|
||||
spec.add_runtime_dependency "rake", "~> 12.3.1"
|
||||
|
||||
spec.add_development_dependency "bundler", "~> 1.12"
|
||||
spec.add_development_dependency "bundler", "~> 1.17.1"
|
||||
end
|
||||
|
Loading…
Reference in New Issue
Block a user