pidgin/nest

Switch copy button to FontAwesome.

2019-08-21, Elliott Sales de Andrade
e54feb564200
Parents 453bb02a2797
Children 8955ee042c3c
Switch copy button to FontAwesome.

This makes it easier to change the colours, so now the code blocks are
grey/black and the inline code are purplish.

Also, tweak the inline code padding a bit to fit together better.
3 files changed, 11 insertions(+), 31 deletions(-)
  • +9 -24
    hugo/themes/learn/static/css/theme.css
  • +0 -6
    hugo/themes/learn/static/images/clippy.svg
  • +2 -1
    hugo/themes/learn/static/js/learn.js
    • --- a/hugo/themes/learn/static/css/theme.css Wed Aug 21 01:50:04 2019 -0400
    +++ b/hugo/themes/learn/static/css/theme.css Wed Aug 21 02:31:16 2019 -0400
    @@ -624,7 +624,11 @@
    white-space: nowrap;
    color: #8451a1;
    background: #e2e2fd;
    - padding: 0px 6px;
    + padding: 1px 3px;
    +}
    +code.with-copy {
    + border-top-right-radius: 0;
    + border-bottom-right-radius: 0;
    }
    h1 code, h2 code, h3 code, h4 code, h5 code, h6 code, h7 code {
    border-radius: 6px;
    @@ -633,15 +637,6 @@
    background: #e2e2fd;
    padding: 0px 2px;
    }
    -code + .copy-to-clipboard {
    - margin-left: -6px;
    - margin-top: -1px;
    - border-left: 0 !important;
    - font-size: inherit !important;
    - height: 18px;
    - top: 0;
    - background-color: #e2e2fd;
    -}
    pre {
    padding: 1rem;
    margin: 2rem 0;
    @@ -1050,22 +1045,12 @@
    }
    }
    .copy-to-clipboard {
    - background-image: url(../images/clippy.svg);
    - background-position: 50% 50%;
    - background-size: 16px 16px;
    - background-repeat: no-repeat;
    - width: 27px;
    - height: 1.45rem;
    - top: -1px;
    display: inline-block;
    - vertical-align: middle;
    - position: relative;
    - color: #5e5e5e;
    - background-color: #FFF7DD;
    - margin-left: -.2rem;
    + color: #8451a1;
    + background-color: #e2e2fd;
    cursor: pointer;
    - border-radius: 0 2px 2px 0;
    - margin-bottom: 1px;
    + border-radius: 2px 2px 2px 0;
    + padding: 2px;
    }
    .copy-to-clipboard:hover {
    background-color: #E8E2CD;
    --- a/hugo/themes/learn/static/images/clippy.svg Wed Aug 21 01:50:04 2019 -0400
    +++ /dev/null Thu Jan 01 00:00:00 1970 +0000
    @@ -1,6 +0,0 @@
    -<svg height="1024" width="896" xmlns="http://www.w3.org/2000/svg">
    - <path
    - stroke="white"
    - fill="white"
    - d="M128 768h256v64H128v-64zm320-384H128v64h320v-64zm128 192V448L384 640l192 192V704h320V576H576zm-288-64H128v64h160v-64zM128 704h160v-64H128v64zm576 64h64v128c-1 18-7 33-19 45s-27 18-45 19H64c-35 0-64-29-64-64V192c0-35 29-64 64-64h192C256 57 313 0 384 0s128 57 128 128h192c35 0 64 29 64 64v320h-64V320H64v576h640V768zM128 256h512c0-35-29-64-64-64h-64c-35 0-64-29-64-64s-29-64-64-64-64 29-64 64-29 64-64 64h-64c-35 0-64 29-64 64z"/>
    -</svg>
    --- a/hugo/themes/learn/static/js/learn.js Wed Aug 21 01:50:04 2019 -0400
    +++ b/hugo/themes/learn/static/js/learn.js Wed Aug 21 02:31:16 2019 -0400
    @@ -199,7 +199,8 @@
    const isTooShort = code.text().length < 5
    if (!isInHeading && !isInToc && !isTooShort) {
    - code.after('<span class="copy-to-clipboard" title="Copy to clipboard" />');
    + code.addClass('with-copy');
    + code.after('<i class="copy-to-clipboard far fa-copy" title="Copy to clipboard"></i>');
    code.next('.copy-to-clipboard').on('mouseleave', removeTooltip);
    }
    });