diff --git a/_scss/helpers/variables.scss b/_scss/helpers/variables.scss index 9b79eee..33c08ec 100644 --- a/_scss/helpers/variables.scss +++ b/_scss/helpers/variables.scss @@ -3,6 +3,7 @@ $white: #ffffff; $black: #000000; $dark-gray: #242424; $light-gray: #D9D9D9; +$lighter-gray: #EEE; // Brand colors $gold: #FFDF3F; diff --git a/_scss/pages/home.scss b/_scss/pages/home.scss index b12dbb7..bad0346 100644 --- a/_scss/pages/home.scss +++ b/_scss/pages/home.scss @@ -4,7 +4,7 @@ body { background-color: $gold; background-image: url("/assets/images/btr-texture.png"); - background-size: 100%; + background-size: 170px; min-height: 100vh; } @@ -131,47 +131,66 @@ a:active { input[type='checkbox'] { display:none; } + .outlink { + display: block; + cursor: pointer; + transition: all 0.5s ease-out; + } + .outlink::after { + content: url("/assets/images/btr-carrot.svg"); + display: inline-block; + vertical-align: middle; + transform: rotate(90deg); + } .lbl-toggle { display: block; cursor: pointer; transition: all 0.5s ease-out; } - .lbl-toggle::before { - content: ' '; + .lbl-toggle::after { + content: url("/assets/images/btr-carrot.svg"); display: inline-block; - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - border-left: 5px solid currentColor; vertical-align: middle; - margin-right: .7rem; - transform: translateY(-2px); - transition: transform .5s ease-out; - } + transform: rotate(180deg); + transition: transform .25s ease-out; + } .content-expander { - border-bottom-color: $light-gray; + border-bottom-color: $lighter-gray; border-bottom-style: solid; - border-bottom-width: 1px; + border-bottom-width: 2px; padding: 10px; width: 100%; text-align: left; font-weight: 600; font-size: 14px; + span { + // Take up space so ::after is on the right + display: inline-block; + width: 94%; + } } .toggle:checked + .lbl-toggle + .content-expanded { max-height: 100vh; overflow: visible; + display: inherit; } - .toggle:checked + .lbl-toggle::before { - transform: rotate(90deg) translateX(-3px); + .toggle:checked + .lbl-toggle::after { + transform: rotate(360deg) translate(0, -2px); } .content-expanded { max-height: 0px; + display: none; overflow: hidden; transition: max-height .5s ease-in-out; width: 100%; + padding-bottom: 20px; + margin-bottom: 40px; margin-top: 20px; text-align: left; font-size: 13px; + border-bottom-color: $lighter-gray; + border-bottom-style: solid; + border-bottom-width: 2px; } .content-img { img { diff --git a/assets/images/btr-texture.png b/assets/images/btr-texture.png index 56378c6..6c72eec 100644 Binary files a/assets/images/btr-texture.png and b/assets/images/btr-texture.png differ diff --git a/index.html b/index.html index 9485133..3b7d49c 100644 --- a/index.html +++ b/index.html @@ -25,8 +25,9 @@ layout: default - - +
- + {% endif %}