From cebb7d8de541b9c1a3bd81b28b475e97546c8f9b Mon Sep 17 00:00:00 2001 From: alok <alok.aman@opensenselabs.com> Date: Fri, 6 Dec 2024 12:34:38 +0530 Subject: [PATCH] revolt-3492147: Footer needs to be styled, and space. --- css/style.css | 283 ++++++++++++--------------------------- scss/layout/_footer.scss | 11 ++ 2 files changed, 98 insertions(+), 196 deletions(-) diff --git a/css/style.css b/css/style.css index e40ff75..cb5fc32 100644 --- a/css/style.css +++ b/css/style.css @@ -92,12 +92,7 @@ body { color: #242424; } -h1, -h2, -h3, -h4, -h5, -h6 { +h1, h2, h3, h4, h5, h6 { color: #2b2c2e; } @@ -141,7 +136,7 @@ html { * Basic styles for links */ a { - color: #fd8f5f; + color: #FD8F5F; text-decoration: none; } a:hover { @@ -155,7 +150,7 @@ img { label.vt-required:after { content: "*"; - color: #ec0f0f; + color: #EC0F0F; margin-left: 3px; } @@ -164,112 +159,34 @@ label.vt-required:after { margin-left: auto !important; } -html, -body, -div, -span, -applet, -object, -iframe, -p, -blockquote, -pre, -a, -abbr, -acronym, -address, -big, -cite, -code, -del, -dfn, -em, -img, -ins, -kbd, -q, -s, -samp, -small, -strike, -strong, -sub, -sup, -tt, -var, -b, -u, -i, -center, -dl, -dt, -dd, -ol, -ul, -li, -fieldset, -form, -label, -legend, -table, -caption, -tbody, -tfoot, -thead, -tr, -th, -td, -article, -aside, -canvas, -details, -embed, -figure, -figcaption, -footer, -header, -hgroup, -main, -menu, -nav, -output, -ruby, -section, -summary, -time, -mark, -audio, -video { +html, body, div, span, applet, object, iframe, +p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +main, menu, nav, output, ruby, section, summary, +time, mark, audio, video { margin: 0; padding: 0; border: 0; vertical-align: baseline; } -h1, -h2, -h3, -h4, -h5, -h6 { +h1, h2, h3, h4, h5, h6 { padding: 0; border: 0; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -main, -menu, -nav, -section { +article, aside, details, figcaption, figure, +footer, header, hgroup, main, menu, nav, section { display: block; } @@ -314,15 +231,12 @@ ol li > ol > li { list-style-type: lower-alpha; } -blockquote, -q { +blockquote, q { quotes: none; } -blockquote:before, -blockquote:after, -q:before, -q:after { +blockquote:before, blockquote:after, +q:before, q:after { content: ""; content: none; } @@ -360,12 +274,12 @@ table { gap: 1rem; } -input[type="password"], -input[type="search"], -input[type="tel"], -input[type="number"], -input[type="text"], -input[type="email"], +input[type=password], +input[type=search], +input[type=tel], +input[type=number], +input[type=text], +input[type=email], textarea { border: solid 1px transparent; background: #f6f6f6; @@ -379,24 +293,24 @@ textarea { -o-transition: 0.3s; transition: 0.3s; } -input[type="password"]:hover, -input[type="search"]:hover, -input[type="tel"]:hover, -input[type="number"]:hover, -input[type="text"]:hover, -input[type="email"]:hover, +input[type=password]:hover, +input[type=search]:hover, +input[type=tel]:hover, +input[type=number]:hover, +input[type=text]:hover, +input[type=email]:hover, textarea:hover { box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; transform: translateY(-2px); } -input[type="password"]:focus-visible, -input[type="search"]:focus-visible, -input[type="tel"]:focus-visible, -input[type="number"]:focus-visible, -input[type="text"]:focus-visible, -input[type="email"]:focus-visible, +input[type=password]:focus-visible, +input[type=search]:focus-visible, +input[type=tel]:focus-visible, +input[type=number]:focus-visible, +input[type=text]:focus-visible, +input[type=email]:focus-visible, textarea:focus-visible { - border: solid 1px #fd8f5f; + border: solid 1px #FD8F5F; outline: none; transform: translateY(-2px); } @@ -432,8 +346,7 @@ form .vt-seletct { width: 100%; float: left; } -.vt-form-wraper.vt-form-type-checkbox, -.vt-form-wraper.vt-form-type-radio { +.vt-form-wraper.vt-form-type-checkbox, .vt-form-wraper.vt-form-type-radio { margin-bottom: 0.5rem; } .vt-form-wraper.fieldgroup legend { @@ -463,30 +376,30 @@ textarea { line-height: inherit; } -input[type="password"], -input[type="search"], -input[type="tel"], -input[type="number"], -input[type="text"], -input[type="email"], +input[type=password], +input[type=search], +input[type=tel], +input[type=number], +input[type=text], +input[type=email], textarea { width: 100%; display: block; } -input[type="range"] { +input[type=range] { width: 100%; display: block; -webkit-appearance: none; height: 15px; - background: linear-gradient(to right, #fd8f5f 0%, #9a2720 100%); + background: linear-gradient(to right, #FD8F5F 0%, #9A2720 100%); background-position: center; background-repeat: no-repeat; outline: none; margin: 0.5rem 0 0 0; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; } -input[type="range"]::-webkit-slider-thumb { +input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 30px; @@ -517,7 +430,7 @@ input[type="range"]::-webkit-slider-thumb { content: ""; position: absolute; z-index: 1; - border: 2px solid #fd8f5f; + border: 2px solid #FD8F5F; border-top-style: none; border-right-style: none; height: 0.35rem; @@ -532,7 +445,7 @@ input[type="range"]::-webkit-slider-thumb { width: 1.2rem; height: 1.2rem; background: #fff; - border: 2px solid #fd8f5f; + border: 2px solid #FD8F5F; cursor: pointer; top: 3px; } @@ -574,7 +487,7 @@ input[type="range"]::-webkit-slider-thumb { z-index: 1; width: 0.6rem; height: 0.6rem; - background: #fd8f5f; + background: #FD8F5F; border-radius: 50%; } .vt-form-type-radio .form-radio:checked + span:before { @@ -590,7 +503,7 @@ input[type="range"]::-webkit-slider-thumb { width: 1.2rem; height: 1.2rem; background: #fff; - border: 2px solid #fd8f5f; + border: 2px solid #FD8F5F; border-radius: 50%; } @@ -632,13 +545,13 @@ input[type="range"]::-webkit-slider-thumb { .button--primary, .button-primary { color: #fff; - background: #140c40; + background: #140C40; border: 1px solid transparent; } .button--primary:hover, .button-primary:hover { - color: #140c40; - border: 1px solid #140c40; + color: #140C40; + border: 1px solid #140C40; background: #fff; } @@ -763,7 +676,7 @@ table th { padding: 12px 15px; } table thead tr { - background-color: #fd8f5f; + background-color: #FD8F5F; color: #ffffff; text-align: left; } @@ -774,7 +687,7 @@ table tbody tr:nth-of-type(even) { background-color: #ffffff; } table tbody tr:last-of-type { - border-bottom: 2px solid #fd8f5f; + border-bottom: 2px solid #FD8F5F; } .container { @@ -875,12 +788,7 @@ table tbody tr:last-of-type { width: 100%; } } -.vt-header .vt-region-header .vt-menu-main > .vt-item, -.vt_header_top - .vt-region-top-header - .vt-menu--account - .vt-user-menu-account - .vt-item { +.vt-header .vt-region-header .vt-menu-main > .vt-item, .vt_header_top .vt-region-top-header .vt-menu--account .vt-user-menu-account .vt-item { display: inline-block; position: relative; } @@ -930,21 +838,11 @@ table tbody tr:last-of-type { padding: 0; gap: 15px; } -.vt_header_top - .vt-region-top-header - .vt-menu--account - .vt-user-menu-account - .vt-item - a { +.vt_header_top .vt-region-top-header .vt-menu--account .vt-user-menu-account .vt-item a { color: #ffffff; } -.vt_header_top - .vt-region-top-header - .vt-menu--account - .vt-user-menu-account - .vt-item - a:hover { - color: #fd8f5f; +.vt_header_top .vt-region-top-header .vt-menu--account .vt-user-menu-account .vt-item a:hover { + color: #FD8F5F; } .vt-header { @@ -1008,7 +906,7 @@ table tbody tr:last-of-type { .vt-header .vt-region-header .burger span.burger-line { height: 2px; width: 75%; - background-color: #fd8f5f; + background-color: #FD8F5F; display: block; margin: 4px 0; float: right; @@ -1039,11 +937,11 @@ table tbody tr:last-of-type { } .vt-header .vt-region-header .vt-menu-main > .vt-item a.vt-link:hover, .vt-header .vt-region-header .vt-menu-main > .vt-item span.vt-link:hover { - color: #fd8f5f; + color: #FD8F5F; } .vt-header .vt-region-header .vt-menu-main > .vt-item a.vt-link.is-active, .vt-header .vt-region-header .vt-menu-main > .vt-item span.vt-link.is-active { - color: #fd8f5f; + color: #FD8F5F; } .vt-header .vt-region-header .vt-menu-main > .vt-item .vt-submenu { position: absolute; @@ -1055,7 +953,7 @@ table tbody tr:last-of-type { opacity: 0; box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.05); padding: 17px 0; - border-top: 5px solid #fd8f5f; + border-top: 5px solid #FD8F5F; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; @@ -1065,27 +963,16 @@ table tbody tr:last-of-type { .vt-header .vt-region-header .vt-menu-main > .vt-item .vt-submenu .vt-item { list-style: none; } -.vt-header - .vt-region-header - .vt-menu-main - > .vt-item - .vt-submenu - .vt-item - a.vt-link { +.vt-header .vt-region-header .vt-menu-main > .vt-item .vt-submenu .vt-item a.vt-link { padding: 1rem; } -.vt-header - .vt-region-header - .vt-menu-main - > .vt-item.menu-item--expanded:hover - .vt-submenu { +.vt-header .vt-region-header .vt-menu-main > .vt-item.menu-item--expanded:hover .vt-submenu { opacity: 1; top: 100%; visibility: visible; } .vt-header .vt-region-header .vt-mobile-main-menu .vt-menu-main { - box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, - rgba(0, 0, 0, 0.06) 0px 0px 0px 1px; + box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px; display: block; position: fixed; top: 0; @@ -1119,12 +1006,7 @@ table tbody tr:last-of-type { .vt-header .vt-region-header .vt-mobile-main-menu .vt-menu-main .vt-item { display: block; } -.vt-header - .vt-region-header - .vt-mobile-main-menu - .vt-menu-main - .vt-item - a.vt-link { +.vt-header .vt-region-header .vt-mobile-main-menu .vt-menu-main .vt-item a.vt-link { padding: 0.25rem 0.5rem; } .vt-header .vt-region-header .vt-block-system-branding-block .vt-logo { @@ -1185,14 +1067,14 @@ table tbody tr:last-of-type { text-align: center; padding: 0.2rem 0.6rem; display: block; - border: 1px solid #fd8f5f; + border: 1px solid #FD8F5F; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .vt-pager-item a:hover { - background: #fd8f5f; + background: #FD8F5F; color: #ffffff; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; transform: translateY(-2px); @@ -1207,7 +1089,7 @@ table tbody tr:last-of-type { } .vt-pager-item.is-active a { - background: #fd8f5f; + background: #FD8F5F; color: #ffffff; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; } @@ -1244,8 +1126,8 @@ table tbody tr:last-of-type { box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; } .vt-views-field-view-node span a:hover { - color: #140c40; - border: 1px solid #140c40; + color: #140C40; + border: 1px solid #140C40; background: #fff; transform: translateY(-5px); border-radius: 1.5rem; @@ -1260,9 +1142,18 @@ footer.site-footer { padding: 80px 0; color: #ffffff; } +footer.site-footer .vt-region-footer nav { + margin-bottom: 40px; +} +footer.site-footer .vt-region-footer nav h2 { + color: #fff; +} +footer.site-footer .vt-region-footer nav ul { + padding-left: 0; +} #back-top { - background: #fd8f5f; + background: #FD8F5F; height: 50px; width: 50px; right: 31px; diff --git a/scss/layout/_footer.scss b/scss/layout/_footer.scss index 58649f3..b45144e 100644 --- a/scss/layout/_footer.scss +++ b/scss/layout/_footer.scss @@ -2,4 +2,15 @@ footer.site-footer { background-color: $gray-dark; padding: 80px 0; color: $white; + .vt-region-footer { + nav { + margin-bottom: 40px; + h2 { + color: #fff; + } + ul { + padding-left: 0; + } + } + } } -- GitLab