diff --git a/src/layouts/partials/full-width-cta.html b/src/layouts/partials/full-width-cta.html index f61e952..e73187a 100644 --- a/src/layouts/partials/full-width-cta.html +++ b/src/layouts/partials/full-width-cta.html @@ -1,5 +1,5 @@
- Authenticate with tea devs authenticated + Authenticate with tea devs authenticated

diff --git a/src/static/css/buttons.css b/src/static/css/buttons.css index d38dc08..043526c 100644 --- a/src/static/css/buttons.css +++ b/src/static/css/buttons.css @@ -1,49 +1,265 @@ /* Full-Width CTA */ -.btn-primary{ - padding: 2.455vw 4.185vw; - border-radius: 0px !important; - font-family: "pp-neue-machina", sans-serif; - text-transform: uppercase; - font-size: 2vw; - border-left: 2px solid #949494 !important; - border-right: 2px solid #949494 !important; - background-color: #1a1a1a !important; - outline: none !important; - box-shadow: none !important; - text-align: left; - border-top-color:#1a1a1a; - border-bottom-color: #1a1a1a; - transition: 0.2s linear; +@media only screen and (min-width: 1200px) { + + .btn-primary{ + padding: 2.455vw 4.185vw; + border-radius: 0px !important; + font-family: "pp-neue-machina", sans-serif; + text-transform: uppercase; + font-size: 2vw; + border-left: 2px solid #949494 !important; + border-right: 2px solid #949494 !important; + background-color: #1a1a1a !important; + outline: none !important; + box-shadow: none !important; + text-align: left; + border-top-color:#1a1a1a; + border-bottom-color: #1a1a1a; + transition: 0.2s linear; + } + + .btn-primary:hover{ + background-color: #00ffd0 !important; + color: #1a1a1a; + border-top-color:#00ffd0; + border-bottom-color:#00ffd0; + border-left-color:#00ffd0; + border-right-color:#00ffd0; + box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important; + padding: 2.455vw 5.580vw; + border-top-color:#1a1a1a; + border-bottom-color: #1a1a1a; + } + + .button-container{ + padding: 0vw 8.929vw; + } + + /* Icon Styling */ + + .btn-primary .icon-enter-arrow{ + display: inline-block; + position: relative; + margin-right: 0.558vw; + transition: 0.2s linear; + } + + .btn-primary:hover .icon-enter-arrow{ + display: inline-block; + transform: rotate(-45deg) !important; + } + } -.btn-primary:hover{ - background-color: #00ffd0 !important; - color: #1a1a1a; - border-top-color:#00ffd0; - border-bottom-color:#00ffd0; - border-left-color:#00ffd0; - border-right-color:#00ffd0; - box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important; - padding: 2.455vw 5.580vw; - border-top-color:#1a1a1a; - border-bottom-color: #1a1a1a; +@media only screen and (min-width: 992px) and (max-width: 1200px) { + + .btn-primary{ + padding: 2.455vw 4.185vw; + border-radius: 0px !important; + font-family: "pp-neue-machina", sans-serif; + text-transform: uppercase; + font-size: 2vw; + border-left: 2px solid #949494 !important; + border-right: 2px solid #949494 !important; + background-color: #1a1a1a !important; + outline: none !important; + box-shadow: none !important; + text-align: left; + border-top-color:#1a1a1a; + border-bottom-color: #1a1a1a; + transition: 0.2s linear; + } + + .btn-primary:hover{ + background-color: #00ffd0 !important; + color: #1a1a1a; + border-top-color:#00ffd0; + border-bottom-color:#00ffd0; + border-left-color:#00ffd0; + border-right-color:#00ffd0; + box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important; + padding: 2.455vw 5.580vw; + border-top-color:#1a1a1a; + border-bottom-color: #1a1a1a; + } + + .button-container{ + padding: 0vw 8.929vw; + } + + /* Icon Styling */ + + .btn-primary .icon-enter-arrow{ + display: inline-block; + position: relaitve; + margin-right: 0.558vw; + transition: 0.2s linear; + } + + .btn-primary:hover .icon-enter-arrow{ + display: inline-block; + transform: rotate(-45deg) !important; + } + } -.button-container{ - padding: 0vw 8.929vw; +@media only screen and (min-width: 768px) and (max-width: 992px) { + + .btn-primary{ + padding: 2.455vw 4.185vw; + border-radius: 0px !important; + font-family: "pp-neue-machina", sans-serif; + text-transform: uppercase; + font-size: 2vw; + border-left: 2px solid #949494 !important; + border-right: 2px solid #949494 !important; + background-color: #1a1a1a !important; + outline: none !important; + box-shadow: none !important; + text-align: left; + border-top-color:#1a1a1a; + border-bottom-color: #1a1a1a; + transition: 0.2s linear; + } + + .btn-primary:hover{ + background-color: #00ffd0 !important; + color: #1a1a1a; + border-top-color:#00ffd0; + border-bottom-color:#00ffd0; + border-left-color:#00ffd0; + border-right-color:#00ffd0; + box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important; + padding: 2.455vw 5.580vw; + border-top-color:#1a1a1a; + border-bottom-color: #1a1a1a; + } + + .button-container{ + padding: 0vw 8.929vw; + } + + /* Icon Styling */ + + .btn-primary .icon-enter-arrow{ + display: inline-block; + position: relaitve; + margin-right: 0.558vw; + transition: 0.2s linear; + } + + .btn-primary:hover .icon-enter-arrow{ + display: inline-block; + transform: rotate(-45deg) !important; + } + } -/* Icon Styling */ +@media only screen and (min-width: 576px) and (max-width: 768px){ + + .btn-primary{ + padding: 2.455vw 4.185vw; + border-radius: 0px !important; + font-family: "pp-neue-machina", sans-serif; + text-transform: uppercase; + font-size: 2vw; + border-left: 2px solid #949494 !important; + border-right: 2px solid #949494 !important; + background-color: #1a1a1a !important; + outline: none !important; + box-shadow: none !important; + text-align: left; + border-top-color:#1a1a1a; + border-bottom-color: #1a1a1a; + transition: 0.2s linear; + } + + .btn-primary:hover{ + background-color: #00ffd0 !important; + color: #1a1a1a; + border-top-color:#00ffd0; + border-bottom-color:#00ffd0; + border-left-color:#00ffd0; + border-right-color:#00ffd0; + box-shadow: inset 0vw 0vw 0vw 0.558vw #1a1a1a !important; + padding: 2.455vw 5.580vw; + border-top-color:#1a1a1a; + border-bottom-color: #1a1a1a; + } + + .button-container{ + padding: 0vw 8.929vw; + } + + /* Icon Styling */ + + .btn-primary .icon-enter-arrow{ + display: inline-block; + position: relaitve; + margin-right: 0.558vw; + transition: 0.2s linear; + } + + .btn-primary:hover .icon-enter-arrow{ + display: inline-block; + transform: rotate(-45deg) !important; + } -.btn-primary .icon-enter-arrow{ - display: inline-block; - position: relaitve; - margin-right: 0.558vw; - transition: 0.2s linear; } -.btn-primary:hover .icon-enter-arrow{ - display: inline-block; - transform: rotate(-45deg) !important; +@media only screen and (max-width: 576px) { + + .btn-primary{ + padding: 7.5vw 11.200vw; + border-radius: 0px !important; + font-family: "pp-neue-machina", sans-serif; + text-transform: uppercase; + font-size: 4vw; + border-left: 2px solid #949494 !important; + border-right: 2px solid #949494 !important; + background-color: #1a1a1a !important; + outline: none !important; + box-shadow: none !important; + text-align: left; + border-top-color:#1a1a1a; + border-bottom-color: #1a1a1a; + transition: 0.2s linear; + } + + .btn-primary:hover{ + background-color: #00ffd0 !important; + color: #1a1a1a; + border-top-color:#00ffd0; + border-bottom-color:#00ffd0; + border-left-color:#00ffd0; + border-right-color:#00ffd0; + box-shadow: inset 0vw 0vw 0vw 1vw #1a1a1a !important; + padding: 7.5vw 11.200vw; + border-top-color:#1a1a1a; + border-bottom-color: #1a1a1a; + } + + .button-container{ + padding: 0vw 8.929vw; + } + + .dev-count{ + display: none; + } + + /* Icon Styling */ + + .btn-primary .icon-enter-arrow{ + display: inline-block; + position: relative; + margin-right: 3vw; + transition: 0.2s linear; + } + + .btn-primary:hover .icon-enter-arrow{ + display: inline-block; + transform: rotate(-45deg) !important; + } + }