From 2335fd11879367164d79fd36beaeb5919a3f2fde Mon Sep 17 00:00:00 2001 From: mateuswetah Date: Thu, 12 Aug 2021 14:43:27 -0300 Subject: [PATCH] Some css tweaks to minimum compatibility with block widget. --- src/assets/scss/_footer.scss | 378 +++++++++++++++++----------------- src/assets/scss/_sidebar.scss | 181 ++++++++-------- 2 files changed, 286 insertions(+), 273 deletions(-) diff --git a/src/assets/scss/_footer.scss b/src/assets/scss/_footer.scss index 529f321..6931bc7 100644 --- a/src/assets/scss/_footer.scss +++ b/src/assets/scss/_footer.scss @@ -1,156 +1,49 @@ -footer { - &.tainacan-footer { - background-color: #2c2d2d; - a { - color: #9f9f9f; - &:hover { +footer.tainacan-footer { + background-color: #2c2d2d; + color: white; + a { + color: #9f9f9f; + &:hover { + color: white; + font-weight: 600; + text-decoration: none; + } + } + + .tainacan-footer-widgets-area { + @media only screen and (max-width: 991px){ + margin: 0 calc(4.16666666667% * 1); + margin: 0 calc(4.16666666667vw * 1); + } + @media only screen and (min-width: 992px){ + margin: 0 calc(4.16666666667% * 2); + margin: 0 calc(4.16666666667vw * 2); + } + nav { + border: none; + } + .tainacan-side ul, + .tainacan-side ol { + list-style: inside; + + li{ color: white; - font-weight: 600; - text-decoration: none; - } - } - - .tainacan-footer-widgets-area { - @media only screen and (max-width: 991px){ - margin: 0 calc(4.16666666667% * 1); - margin: 0 calc(4.16666666667vw * 1); - } - @media only screen and (min-width: 992px){ - margin: 0 calc(4.16666666667% * 2); - margin: 0 calc(4.16666666667vw * 2); - } - nav { - border: none; - } - .tainacan-side ul, - .tainacan-side ol { - list-style: inside; + margin-bottom: 0.875rem; - li{ - color: white; - margin-bottom: 0.875rem; - - &.tainacan-side { - h6 { - font: { - size: 1.125rem; - } - } - } - p { - .fiber{ - font-size: 0.5625rem; - } - } - a { - color: #9f9f9f; - &:hover { - color: white; - font-weight: 600; - text-decoration: none; + &.tainacan-side { + h6 { + font: { + size: 1.125rem; } } } - } - .gallery { - display: flex; - flex-wrap: wrap; - max-height: 485px; - overflow: hidden; - justify-content: flex-start; - align-items: flex-start; - .gallery-item{ - margin: 5px !important; - width: auto !important; - - img { - border: none !important; + p { + .fiber{ + font-size: 0.5625rem; } } - .gallery-caption { - display: none; - } - br{ - display: none; - } - } - .image { - max-width: 100%; - height: auto; - } - .input-group { - background: white; - padding: 0rem; - align-items: center; - height: 2.5rem; - .btn { - border-radius: 0px; - border-color: #dbdbdb; - min-height: 40px; - &:hover { - color: #454647; - } - } - } - .form-control { - height: 100%; - border-radius: 0; - font-size: 0.875rem; - font-weight: 400; - color: #898d8f; - padding-right: 2rem; - - &:focus { - color: #454647; - box-shadow: none; - border: 1px solid #555758 !important; - } - } - .search-controls { - background: #f2f2f2; - border-bottom: 1px solid #dee2e6; - border-left: 1px solid #dee2e6; - border-right: 1px solid #dee2e6; - padding: 0.75rem 0.875rem 0.5rem 0.875rem; - font-size: 0.75rem; - column-count: 2; - label { - white-space: normal; - display: flex; - color: #454647; - align-items: center; - input { - margin-right: 0.5rem; - } - } - } - } - .tainacan-footer-info { - font-size: 0.875rem; - width: auto; - - @media only screen and (max-width: 991px){ - margin: 0 calc(4.16666666667% * 1); - margin: 0 calc(4.16666666667vw * 1); - } - @media only screen and (min-width: 992px){ - margin: 0 calc(4.16666666667% * 2); - margin: 0 calc(4.16666666667vw * 2); - } - - .tainacan-footer-info--blog { - font-weight: 400; - margin-bottom: 2rem; - } - .tainacan-footer-info--logo { - width: 120px; - } - .tainacan-powered { - font-weight: 400; - color: #cbcbcb; - a { - color: #f9f9f9; + color: #9f9f9f; &:hover { color: white; font-weight: 600; @@ -159,58 +52,162 @@ footer { } } } - &.tainacan-footer-colored { - background-color: #298596; - a { - color: #e6f6f8; - } - .tainacan-footer-widgets-area { - .tainacan-side ul, - .tainacan-side ol { - li { - a { - color: #e6f6f8; - } - } + h1, + h2, + h3, + h4, + h5, + h6 { + color: white; + font-size: 1.125rem !important; + } + .gallery { + display: flex; + flex-wrap: wrap; + max-height: 485px; + overflow: hidden; + justify-content: flex-start; + align-items: flex-start; + .gallery-item{ + margin: 5px !important; + width: auto !important; + + img { + border: none !important; } } - .tainacan-footer-info { - .tainacan-powered { - color: #e6f6f8; + .gallery-caption { + display: none; + } + br{ + display: none; + } + } + .image { + max-width: 100%; + height: auto; + } + .input-group { + background: white; + padding: 0rem; + align-items: center; + height: 2.5rem; + .btn { + border-radius: 0px; + border-color: #dbdbdb; + min-height: 40px; + &:hover { + color: #454647; } } } - &.tainacan-footer-light { - background-color: #f2f2f2; - .text-white { - color: #454647 !important; - } - a { + .form-control { + height: 100%; + border-radius: 0; + font-size: 0.875rem; + font-weight: 400; + color: #898d8f; + padding-right: 2rem; + + &:focus { color: #454647; - &:hover { - color: black; + box-shadow: none; + border: 1px solid #555758 !important; + } + } + .search-controls { + background: #f2f2f2; + border-bottom: 1px solid #dee2e6; + border-left: 1px solid #dee2e6; + border-right: 1px solid #dee2e6; + padding: 0.75rem 0.875rem 0.5rem 0.875rem; + font-size: 0.75rem; + column-count: 2; + label { + white-space: normal; + display: flex; + color: #454647; + align-items: center; + input { + margin-right: 0.5rem; } } - - .tainacan-footer-widgets-area { - .tainacan-side ul, - .tainacan-side ol { - li{ - color: black; - a { - color: #454647; - &:hover { - color: black; - } - } + } + } + .tainacan-footer-info { + font-size: 0.875rem; + width: auto; + + @media only screen and (max-width: 991px){ + margin: 0 calc(4.16666666667% * 1); + margin: 0 calc(4.16666666667vw * 1); + } + @media only screen and (min-width: 992px){ + margin: 0 calc(4.16666666667% * 2); + margin: 0 calc(4.16666666667vw * 2); + } + + .tainacan-footer-info--blog { + font-weight: 400; + margin-bottom: 2rem; + } + .tainacan-footer-info--logo { + width: 120px; + } + .tainacan-powered { + font-weight: 400; + color: #cbcbcb; + + a { + color: #f9f9f9; + &:hover { + color: white; + font-weight: 600; + text-decoration: none; + } + } + } + } + &.tainacan-footer-colored { + background-color: #298596; + a { + color: #e6f6f8; + } + .tainacan-footer-widgets-area { + .tainacan-side ul, + .tainacan-side ol { + li { + a { + color: #e6f6f8; } } } - .tainacan-footer-info { - .tainacan-powered { - color: #454647; + } + .tainacan-footer-info { + .tainacan-powered { + color: #e6f6f8; + } + } + } + &.tainacan-footer-light { + background-color: #f2f2f2; + .text-white { + color: #454647 !important; + } + a { + color: #454647; + &:hover { + color: black; + } + } + + .tainacan-footer-widgets-area { + .tainacan-side ul, + .tainacan-side ol { + li{ + color: black; a { - color: #222; + color: #454647; &:hover { color: black; } @@ -218,5 +215,16 @@ footer { } } } + .tainacan-footer-info { + .tainacan-powered { + color: #454647; + a { + color: #222; + &:hover { + color: black; + } + } + } + } } } \ No newline at end of file diff --git a/src/assets/scss/_sidebar.scss b/src/assets/scss/_sidebar.scss index e475569..d4befba 100644 --- a/src/assets/scss/_sidebar.scss +++ b/src/assets/scss/_sidebar.scss @@ -3,101 +3,106 @@ border-top: none !important; } } -#sidebar{ - &.sidebar{ - .widget{ - .widget-title{ - font-size: 1rem; - font-weight: bold; - color: #1d1d1b; - } - &.widget_recent_entries, &.widget_recent_comments{ - ul{ - li{ - margin-bottom: 0.3rem; - } - } - } - &.widget_media_gallery{ - .gallery{ - display: grid; - dl{ - margin-top: 0; - dt{ - img{ - border: 0; - } - } - } - br{ - display: none; - } - } - } - &.widget_text{ - font-size: 0.75rem; - } - table.wp-calendar-table { - font-size: 0.875rem; - - td { - padding: 2px; - } - } +#sidebar.sidebar { + .widget { + .widget-title, + &.widget_block>.wp-block-group>.wp-block-group__inner-container>h1, + &.widget_block>.wp-block-group>.wp-block-group__inner-container>h2, + &.widget_block>.wp-block-group>.wp-block-group__inner-container>h3, + &.widget_block>.wp-block-group>.wp-block-group__inner-container>h4, + &.widget_block>.wp-block-group>.wp-block-group__inner-container>h5, + &.widget_block>.wp-block-group>.wp-block-group__inner-container>h6 + { + font-size: 1rem !important; + font-weight: bold; + color: #1d1d1b; + } + &.widget_recent_entries, &.widget_recent_comments{ ul{ - padding-left: 0; li{ - display: block; margin-bottom: 0.3rem; - a{ - font-weight: 400; - font-size: 0.875rem; - } - } - } - form { - .input-group-append{ - button{ - height: 30px; - padding: 0 5px 0 0px; - &:hover{ - color: inherit; - } - i{ - color: #01295c; - font-size: 1.1875rem; - } - } - } - } - #tainacan-search{ - font-size: 0.75rem; - color: #555758; - border-color: #dbdbdb; - height: 30px; - border-radius: 0px; - &:focus{ - box-shadow: none; - border-color: #555758; - } - &+.input-group-append button { - border-left-width: 0; - border-color: #dbdbdb; - border-radius: 0px; - padding: 0 5px; } } } - .search-controls { - padding: 0.75rem 0.875rem 0.5rem 0.875rem; - font-size: 0.75rem; - column-count: 2; - label { - white-space: normal; - display: flex; - input { - margin-right: 0.5rem; + &.widget_media_gallery{ + .gallery{ + display: grid; + dl{ + margin-top: 0; + dt{ + img{ + border: 0; + } + } } + br{ + display: none; + } + } + } + &.widget_text{ + font-size: 0.75rem; + } + table.wp-calendar-table { + font-size: 0.875rem; + + td { + padding: 2px; + } + } + ul{ + padding-left: 0; + li{ + display: block; + margin-bottom: 0.3rem; + a{ + font-weight: 400; + font-size: 0.875rem; + } + } + } + form { + .input-group-append{ + button{ + height: 30px; + padding: 0 5px 0 0px; + &:hover{ + color: inherit; + } + i{ + color: #01295c; + font-size: 1.1875rem; + } + } + } + } + #tainacan-search{ + font-size: 0.75rem; + color: #555758; + border-color: #dbdbdb; + height: 30px; + border-radius: 0px; + &:focus{ + box-shadow: none; + border-color: #555758; + } + &+.input-group-append button { + border-left-width: 0; + border-color: #dbdbdb; + border-radius: 0px; + padding: 0 5px; + } + } + } + .search-controls { + padding: 0.75rem 0.875rem 0.5rem 0.875rem; + font-size: 0.75rem; + column-count: 2; + label { + white-space: normal; + display: flex; + input { + margin-right: 0.5rem; } } }