From bf006151c949b55075c6a60d8b5f9c8e9f8b4333 Mon Sep 17 00:00:00 2001 From: Robert McGovern Date: Mon, 20 Feb 2023 00:56:48 +0000 Subject: [PATCH] Moved variables and other CSS into seperate file Mostly so I can have syntax highlighting and easy editing of colors in VS Code. --- src/assets/css/main.scss.liquid | 226 +------------------------------ src/assets/css/my-vars.scss | 227 ++++++++++++++++++++++++++++++++ 2 files changed, 228 insertions(+), 225 deletions(-) create mode 100644 src/assets/css/my-vars.scss diff --git a/src/assets/css/main.scss.liquid b/src/assets/css/main.scss.liquid index fa1895a..badd496 100644 --- a/src/assets/css/main.scss.liquid +++ b/src/assets/css/main.scss.liquid @@ -5,231 +5,7 @@ permalink: /assets/css/tocompile.scss @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; -} +@import "my-vars.scss"; //@import "progress.css"; // for progress bar //@import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin diff --git a/src/assets/css/my-vars.scss b/src/assets/css/my-vars.scss new file mode 100644 index 0000000..2e0e9e7 --- /dev/null +++ b/src/assets/css/my-vars.scss @@ -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; +}