diff --git a/_sass/_base.scss b/_sass/_base.scss index f213df4..13700ae 100644 --- a/_sass/_base.scss +++ b/_sass/_base.scss @@ -151,71 +151,6 @@ blockquote { } } -/** - * Code formatting - */ -pre, -code { - font-size: 0.9375em; - border: 1px solid hsla(0, 0%, 100%, 0.1); - padding: 3em; - // background-color: var(--background-color); -} - -code { - padding: 1px 5px; - background-color: rgba(255, 168, 106, 0.2); - color: var(--brand-color); - margin: 0 2px; - padding: 1px 6px; - border: none; -} - -pre { - padding: 8px 12px; - padding: 1.25em; - overflow-x: auto; - - > code { - background-color: unset; - border: 0; - padding-right: 0; - padding-left: 0; - } -} - -.highlight { - position: relative; -} - -.highlight > button { - all: unset; - opacity: 0; - position: absolute; - top: 1rem; - right: 1rem; - z-index: 100; - cursor: pointer; - - background: hsla(0, 0%, 87.8%, 0.2) !important; - border-radius: 0 !important; - box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2) !important; - color: #bbb !important; - font-size: 0.8em !important; - margin: 6px !important; - padding: 10px !important; - transition: opacity 0.5s ease; -} - -.highlight:hover > button { - opacity: 1; -} - -.highlight > button:active, -.highlight > button:focus { - opacity: 1; -} - /** * Clearfix */ diff --git a/_sass/_header.scss b/_sass/_header.scss index 4ac480c..e3e57a1 100644 --- a/_sass/_header.scss +++ b/_sass/_header.scss @@ -44,9 +44,9 @@ @include media-query($on-palm) { position: absolute; top: 9px; - right: calc(var(--spacing-unit) / 2); + right: 0; background-color: $background-color; - border: 1px solid $grey-color-light; + border: 1px solid rgba(254, 168, 106, 0.6); border-radius: 5px; text-align: right; @@ -67,9 +67,12 @@ line-height: 0; padding-top: 10px; text-align: center; + -webkit-user-select: none; + user-select: none; > svg { fill: $grey-color-dark; + fill: var(--brand-color); } } diff --git a/_sass/_post.scss b/_sass/_post.scss new file mode 100644 index 0000000..d53375b --- /dev/null +++ b/_sass/_post.scss @@ -0,0 +1,68 @@ +/** + * Code formatting + */ +pre, +code { + font-size: 0.9375em; + border: 1px solid hsla(0, 0%, 100%, 0.1); + padding: 3em; + // background-color: var(--background-color); +} + +code { + padding: 1px 5px; + background-color: rgba(255, 168, 106, 0.2); + color: var(--brand-color); + margin: 0 2px; + padding: 1px 6px; + border: none; +} + +pre { + padding: 8px 12px; + padding: 1.25em; + overflow-x: auto; + + > code { + background-color: unset; + border: 0; + padding-right: 0; + padding-left: 0; + } +} + +div.highlight { + position: relative; +} + +.highlight > button { + all: unset; + opacity: 0; + position: absolute; + top: 0.3rem; + right: 1rem; + z-index: 100; + cursor: pointer; + + background: hsla(0, 0%, 87.8%, 0.8) !important; + border-radius: 0 !important; + box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.8) !important; + color: black; + font-size: 0.8em !important; + margin: 6px !important; + padding: 10px !important; + transition: all 0.5s ease; +} + +.highlight:hover > button { + opacity: 1; +} + +.highlight > button:active, +.highlight > button:focus { + opacity: 1; +} + +.changelog { + float: right; +} diff --git a/_sass/main.scss b/_sass/main.scss index eafeecd..4875aa6 100644 --- a/_sass/main.scss +++ b/_sass/main.scss @@ -74,4 +74,5 @@ $on-laptop: 800px !default; @import "tags"; @import "syntax-highlighting.scss"; @import "header.scss"; +@import "post.scss"; diff --git a/assets/scripts/copyCode.js b/assets/scripts/copyCode.js index 37e263d..3695fe1 100644 --- a/assets/scripts/copyCode.js +++ b/assets/scripts/copyCode.js @@ -1,6 +1,6 @@ // This assumes that you're using Rouge; if not, update the selector // const codeBlocks = document.querySelectorAll('.code-header + .highlighter-rouge'); -const codeBlocks = document.querySelectorAll('.highlight'); +const codeBlocks = document.querySelectorAll('div.highlight'); const copyCodeButtons = document.querySelectorAll('.copy-code-button'); codeBlocks.forEach((codeBlock) => {