Moved variables and other CSS into seperate file
Mostly so I can have syntax highlighting and easy editing of colors in VS Code.
This commit is contained in:
parent
e906cf0c1f
commit
bf006151c9
|
|
@ -5,231 +5,7 @@ permalink: /assets/css/tocompile.scss
|
||||||
|
|
||||||
@charset "utf-8";
|
@charset "utf-8";
|
||||||
|
|
||||||
.author__urls.social-icons .svg-inline--fa,
|
@import "my-vars.scss";
|
||||||
.page__footer-follow .social-icons .svg-inline--fa {
|
|
||||||
color: rgba(102, 235, 97, 0.829) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Colors */
|
|
||||||
$background-color: #141010 !default;
|
|
||||||
$text-color: #fff6fbb9 !default;
|
|
||||||
$primary-color: #ff00ff !default;
|
|
||||||
$link-color: $primary-color !default;
|
|
||||||
$link-color-hover: mix(#fff, $link-color, 25%) !default;
|
|
||||||
$link-color-visited: mix(#000, $link-color, 25%) !default;
|
|
||||||
$code-background-color: mix(rgb(43, 39, 39), $background-color, 15%) !default;
|
|
||||||
$code-background-color-dark: mix(rgb(59, 54, 54), $background-color, 20%) !default;
|
|
||||||
|
|
||||||
/* Notices */
|
|
||||||
|
|
||||||
$success-color: #3fa63f !default;
|
|
||||||
$warning-color: #d67f05 !default;
|
|
||||||
$danger-color: #ff0000 !default;
|
|
||||||
$info-color: #3b9cba !default;
|
|
||||||
|
|
||||||
// section not needed under 11ty
|
|
||||||
/* neon syntax highlighting (base16) */
|
|
||||||
$base00: #1a191a;
|
|
||||||
$base01: #e0e0e0;
|
|
||||||
$base02: #b4a6a6;
|
|
||||||
$base03: #928e8e;
|
|
||||||
$base04: #ccc2c2;
|
|
||||||
$base05: #bd6262;
|
|
||||||
$base06: #a74040;
|
|
||||||
$base07: #701b1b;
|
|
||||||
$base08: #ff0086;
|
|
||||||
$base09: #fd8900;
|
|
||||||
$base0a: #aba800;
|
|
||||||
$base0b: #00c918;
|
|
||||||
$base0c: #1faaaa;
|
|
||||||
$base0d: #3777e6;
|
|
||||||
$base0e: #ad00a1;
|
|
||||||
$base0f: #926e5c;
|
|
||||||
// base16-atelier-heath
|
|
||||||
// base16-synth-midnight-dark
|
|
||||||
// base16-summerfruit-dark
|
|
||||||
// base16-seti
|
|
||||||
// base16-outrun-dark (a bit bright)
|
|
||||||
// base16-material-darker
|
|
||||||
// base16-harmonic-dark
|
|
||||||
// base16-google-dark (little dark for my tastes)
|
|
||||||
// base16-default-dark (little dull)
|
|
||||||
// base16-classic-dark
|
|
||||||
// base16-brewer
|
|
||||||
|
|
||||||
// section not needed under 11ty
|
|
||||||
// Hacking the syntax highlighting
|
|
||||||
.nb {
|
|
||||||
/* Name.Builtin */
|
|
||||||
color: $base0f !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.o {
|
|
||||||
/* Operator */
|
|
||||||
color: $base04 !important;
|
|
||||||
}
|
|
||||||
.n {
|
|
||||||
/* Name */
|
|
||||||
color: $base05 !important;
|
|
||||||
}
|
|
||||||
.p {
|
|
||||||
/* Punctuation */
|
|
||||||
color: #3ab469 !important;
|
|
||||||
}
|
|
||||||
.sr {
|
|
||||||
/* Literal.String.Regex */
|
|
||||||
color: $base0c !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Progress Bar
|
|
||||||
#progress-bar {
|
|
||||||
background: linear-gradient(to right, red, orange , yellow, green,
|
|
||||||
blue, indigo, violet var(--scroll), transparent 0);
|
|
||||||
position: fixed;
|
|
||||||
overflow: hidden;
|
|
||||||
width: 100%;
|
|
||||||
height: 3px;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Scroll to top
|
|
||||||
#scroll-to-top {
|
|
||||||
background: rgb(215, 210, 210);
|
|
||||||
display:block;
|
|
||||||
position:fixed;
|
|
||||||
font-size:25px;
|
|
||||||
bottom:25px;
|
|
||||||
right:10%;
|
|
||||||
opacity:0;
|
|
||||||
z-index:99;
|
|
||||||
text-align:center;
|
|
||||||
transform:translateY(30%);
|
|
||||||
transition:transform 0.5s ease-in-out, opacity 0.5s ease-in-out
|
|
||||||
}
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
#scroll-to-top {
|
|
||||||
font-size:20px
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
#scroll-to-top {
|
|
||||||
right:5%;
|
|
||||||
bottom:15px
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#scroll-to-top :last-child {
|
|
||||||
transition:transform 0.7s ease-in-out
|
|
||||||
}
|
|
||||||
#scroll-to-top :last-child:active,
|
|
||||||
#scroll-to-top :last-child:hover {
|
|
||||||
transform:translateY(-10%)
|
|
||||||
}
|
|
||||||
#scroll-to-top span {
|
|
||||||
cursor:pointer;
|
|
||||||
color:#dee3ee
|
|
||||||
}
|
|
||||||
#scroll-to-top span:hover .up-arrow,
|
|
||||||
#scroll-to-top span:active .up-arrow {
|
|
||||||
color:#00adb5
|
|
||||||
}
|
|
||||||
|
|
||||||
tt,
|
|
||||||
code,
|
|
||||||
kbd,
|
|
||||||
samp,
|
|
||||||
pre {
|
|
||||||
color: #1bb6be !important
|
|
||||||
}
|
|
||||||
|
|
||||||
$github-color: #fff !default;
|
|
||||||
|
|
||||||
div.highlight {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
div pre {
|
|
||||||
border: 4px #7e1c1c solid;
|
|
||||||
border-radius: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
outline: 1px #7e1c1c solid;
|
|
||||||
}
|
|
||||||
|
|
||||||
code > span {
|
|
||||||
padding-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
// messes up table code blocks
|
|
||||||
//code > span:first-child {
|
|
||||||
// padding-top: 5px;
|
|
||||||
//}
|
|
||||||
|
|
||||||
//code > span:last-child {
|
|
||||||
// padding-bottom: 5px;
|
|
||||||
//}
|
|
||||||
|
|
||||||
// hack to remove outline that above sets
|
|
||||||
td > div > pre {
|
|
||||||
border: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre > code > div {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
td {
|
|
||||||
display: inline-flex;
|
|
||||||
// below is hack so Firefox looks the same as Safari / Chrome.
|
|
||||||
// Both will ignore the assignment because they don't know about "ruby-base"
|
|
||||||
// https://caniuse.com/mdn-css_properties_display_ruby_values
|
|
||||||
display: ruby-base;
|
|
||||||
}
|
|
||||||
|
|
||||||
// === for copy-code-to-clipboard
|
|
||||||
|
|
||||||
// h/t https://simplernerd.com/hugo-add-copy-to-clipboard-button/
|
|
||||||
|
|
||||||
.clipboard-button {
|
|
||||||
position: absolute;
|
|
||||||
top: 2px;
|
|
||||||
right: 2px;
|
|
||||||
padding: 6px 8px 4px 8px;
|
|
||||||
margin: 5px;
|
|
||||||
// color: gray-500;
|
|
||||||
// border-color: gray-500;
|
|
||||||
// background-color: gray-100;
|
|
||||||
border: 1px solid;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 0.8em;
|
|
||||||
z-index: 1;
|
|
||||||
opacity: 0;
|
|
||||||
transition: 0.1s;
|
|
||||||
}
|
|
||||||
.clipboard-button > svg {
|
|
||||||
// fill: gray-500;
|
|
||||||
}
|
|
||||||
.clipboard-button:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
border-color: #01b139;
|
|
||||||
background-color: #87d09e;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
.clipboard-button:hover > svg {
|
|
||||||
fill: #1900ff;
|
|
||||||
}
|
|
||||||
.clipboard-button:focus {
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight:hover > .clipboard-button {
|
|
||||||
opacity: 1;
|
|
||||||
transition: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.highlight {
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
//@import "progress.css"; // for progress bar
|
//@import "progress.css"; // for progress bar
|
||||||
//@import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin
|
//@import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,227 @@
|
||||||
|
@charset "utf-8";
|
||||||
|
|
||||||
|
.author__urls.social-icons .svg-inline--fa,
|
||||||
|
.page__footer-follow .social-icons .svg-inline--fa {
|
||||||
|
color: rgba(102, 235, 97, 0.829) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Colors */
|
||||||
|
$background-color: #141010 !default;
|
||||||
|
$text-color: #fff6fbb9 !default;
|
||||||
|
$primary-color: #ff00ff !default;
|
||||||
|
$link-color: $primary-color !default;
|
||||||
|
$link-color-hover: mix(#fff, $link-color, 25%) !default;
|
||||||
|
$link-color-visited: mix(#000, $link-color, 25%) !default;
|
||||||
|
$code-background-color: mix(rgb(43, 39, 39), $background-color, 15%) !default;
|
||||||
|
$code-background-color-dark: mix(rgb(59, 54, 54), $background-color, 20%) !default;
|
||||||
|
|
||||||
|
/* Notices */
|
||||||
|
|
||||||
|
$success-color: #3fa63f !default;
|
||||||
|
$warning-color: #d67f05 !default;
|
||||||
|
$danger-color: #ff0000 !default;
|
||||||
|
$info-color: #3b9cba !default;
|
||||||
|
|
||||||
|
// section not needed under 11ty
|
||||||
|
/* neon syntax highlighting (base16) */
|
||||||
|
$base00: #1a191a;
|
||||||
|
$base01: #e0e0e0;
|
||||||
|
$base02: #b4a6a6;
|
||||||
|
$base03: #928e8e;
|
||||||
|
$base04: #ccc2c2;
|
||||||
|
$base05: #bd6262;
|
||||||
|
$base06: #a74040;
|
||||||
|
$base07: #701b1b;
|
||||||
|
$base08: #ff0086;
|
||||||
|
$base09: #fd8900;
|
||||||
|
$base0a: #aba800;
|
||||||
|
$base0b: #00c918;
|
||||||
|
$base0c: #1faaaa;
|
||||||
|
$base0d: #3777e6;
|
||||||
|
$base0e: #ad00a1;
|
||||||
|
$base0f: #926e5c;
|
||||||
|
// base16-atelier-heath
|
||||||
|
// base16-synth-midnight-dark
|
||||||
|
// base16-summerfruit-dark
|
||||||
|
// base16-seti
|
||||||
|
// base16-outrun-dark (a bit bright)
|
||||||
|
// base16-material-darker
|
||||||
|
// base16-harmonic-dark
|
||||||
|
// base16-google-dark (little dark for my tastes)
|
||||||
|
// base16-default-dark (little dull)
|
||||||
|
// base16-classic-dark
|
||||||
|
// base16-brewer
|
||||||
|
|
||||||
|
// section not needed under 11ty
|
||||||
|
// Hacking the syntax highlighting
|
||||||
|
.nb {
|
||||||
|
/* Name.Builtin */
|
||||||
|
color: $base0f !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.o {
|
||||||
|
/* Operator */
|
||||||
|
color: $base04 !important;
|
||||||
|
}
|
||||||
|
.n {
|
||||||
|
/* Name */
|
||||||
|
color: $base05 !important;
|
||||||
|
}
|
||||||
|
.p {
|
||||||
|
/* Punctuation */
|
||||||
|
color: #3ab469 !important;
|
||||||
|
}
|
||||||
|
.sr {
|
||||||
|
/* Literal.String.Regex */
|
||||||
|
color: $base0c !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Progress Bar
|
||||||
|
#progress-bar {
|
||||||
|
background: linear-gradient(to right, red, orange , yellow, green,
|
||||||
|
blue, indigo, violet var(--scroll), transparent 0);
|
||||||
|
position: fixed;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
height: 3px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Scroll to top
|
||||||
|
#scroll-to-top {
|
||||||
|
background: rgb(215, 210, 210);
|
||||||
|
display:block;
|
||||||
|
position:fixed;
|
||||||
|
font-size:25px;
|
||||||
|
bottom:25px;
|
||||||
|
right:10%;
|
||||||
|
opacity:0;
|
||||||
|
z-index:99;
|
||||||
|
text-align:center;
|
||||||
|
transform:translateY(30%);
|
||||||
|
transition:transform 0.5s ease-in-out, opacity 0.5s ease-in-out
|
||||||
|
}
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
#scroll-to-top {
|
||||||
|
font-size:20px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
#scroll-to-top {
|
||||||
|
right:5%;
|
||||||
|
bottom:15px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#scroll-to-top :last-child {
|
||||||
|
transition:transform 0.7s ease-in-out
|
||||||
|
}
|
||||||
|
#scroll-to-top :last-child:active,
|
||||||
|
#scroll-to-top :last-child:hover {
|
||||||
|
transform:translateY(-10%)
|
||||||
|
}
|
||||||
|
#scroll-to-top span {
|
||||||
|
cursor:pointer;
|
||||||
|
color:#dee3ee
|
||||||
|
}
|
||||||
|
#scroll-to-top span:hover .up-arrow,
|
||||||
|
#scroll-to-top span:active .up-arrow {
|
||||||
|
color:#00adb5
|
||||||
|
}
|
||||||
|
|
||||||
|
tt,
|
||||||
|
code,
|
||||||
|
kbd,
|
||||||
|
samp,
|
||||||
|
pre {
|
||||||
|
color: #1bb6be !important
|
||||||
|
}
|
||||||
|
|
||||||
|
$github-color: #fff !default;
|
||||||
|
|
||||||
|
div.highlight {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
div pre {
|
||||||
|
border: 4px #7e1c1c solid;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
outline: 1px #7e1c1c solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
code > span {
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// messes up table code blocks
|
||||||
|
//code > span:first-child {
|
||||||
|
// padding-top: 5px;
|
||||||
|
//}
|
||||||
|
|
||||||
|
//code > span:last-child {
|
||||||
|
// padding-bottom: 5px;
|
||||||
|
//}
|
||||||
|
|
||||||
|
// hack to remove outline that above sets
|
||||||
|
td > div > pre {
|
||||||
|
border: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre > code > div {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
display: inline-flex;
|
||||||
|
// below is hack so Firefox looks the same as Safari / Chrome.
|
||||||
|
// Both will ignore the assignment because they don't know about "ruby-base"
|
||||||
|
// https://caniuse.com/mdn-css_properties_display_ruby_values
|
||||||
|
display: ruby-base;
|
||||||
|
}
|
||||||
|
|
||||||
|
// === for copy-code-to-clipboard
|
||||||
|
|
||||||
|
// h/t https://simplernerd.com/hugo-add-copy-to-clipboard-button/
|
||||||
|
|
||||||
|
.clipboard-button {
|
||||||
|
position: absolute;
|
||||||
|
top: 2px;
|
||||||
|
right: 2px;
|
||||||
|
padding: 6px 8px 4px 8px;
|
||||||
|
margin: 5px;
|
||||||
|
// color: gray-500;
|
||||||
|
// border-color: gray-500;
|
||||||
|
// background-color: gray-100;
|
||||||
|
border: 1px solid;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 0.8em;
|
||||||
|
z-index: 1;
|
||||||
|
opacity: 0;
|
||||||
|
transition: 0.1s;
|
||||||
|
}
|
||||||
|
.clipboard-button > svg {
|
||||||
|
// fill: gray-500;
|
||||||
|
}
|
||||||
|
.clipboard-button:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
border-color: #01b139;
|
||||||
|
background-color: #87d09e;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.clipboard-button:hover > svg {
|
||||||
|
fill: #1900ff;
|
||||||
|
}
|
||||||
|
.clipboard-button:focus {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight:hover > .clipboard-button {
|
||||||
|
opacity: 1;
|
||||||
|
transition: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight {
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue