From 7bd3ec0b746b38ba3fd477d75e1d0388c03fa83b Mon Sep 17 00:00:00 2001 From: ryan Date: Sat, 2 Sep 2023 02:22:13 -0400 Subject: [PATCH] updated footer & banner bg --- assets/style/_config.scss | 2 +- assets/style/components/_footer.scss | 125 +++++++++++++++++--------- assets/style/main.scss | 2 +- assets/style/pages/_404.scss | 2 +- assets/style/pages/index/_banner.scss | 16 ++-- components/Footer.vue | 38 ++++++-- components/index/Banner.vue | 7 +- 7 files changed, 128 insertions(+), 64 deletions(-) diff --git a/assets/style/_config.scss b/assets/style/_config.scss index e040ff8..032a527 100644 --- a/assets/style/_config.scss +++ b/assets/style/_config.scss @@ -5,11 +5,11 @@ $p-font: 'Titillium Web', sans-serif; // Primary Colors $b-color: #000000; // background $s-color: #f7931a; // secondary +$t-color: #242424; // ternary $w-color: #ffffff; // white $bl-color: #000000; // black $error: #d30012; // error -$hr: #d30012; // hr $btn-color: #faf1e5; // button $btnh-color: #f5ece0; // button hover diff --git a/assets/style/components/_footer.scss b/assets/style/components/_footer.scss index 6613b5d..ae8553f 100644 --- a/assets/style/components/_footer.scss +++ b/assets/style/components/_footer.scss @@ -1,55 +1,98 @@ .footer { - max-width: 60rem; - height: 2rem; - margin: .5rem auto; - padding: 0 4rem; + padding: 2rem 0 0 0; - .who { - float: left; - color: $f-color; - font-size: .895rem; + .top { + display: grid; + grid-template-columns: 1fr 1fr 1fr 2.5fr ; + max-width: 60rem; + padding: 2rem 4rem; + margin: 0 auto; + + ul { + list-style-type: none; + white-space:nowrap; + padding: 0; + margin: 0; + + li { + font-size: .895rem; + margin: .25rem 0; + } - a { - color: $link; - margin: 0 2px; + li h5 { font-size: 1rem } + li h6 { + font-size: .895rem; + font-weight: 400; + } - &:hover { text-decoration: underline } - } - - .icon-btc-b { - position: relative; - top: .25rem; - font-size: 1.1rem; + a { + color: $link; + &:hover { text-decoration: underline } + } } } - - .links { - float: right; - list-style-type: none; - white-space:nowrap; - padding: 0; + + hr { + height: 1px; + border: none; + color: $t-color; + background-color: $t-color; margin: 0; + } - li, li p { - display:inline; - font-size: .895rem; - } + .bottom { + max-width: 60rem; + height: 5.5rem; + padding: 2rem 4rem; + margin: 0 auto; - a { - color: $link; - margin: 0 .5rem; - - &:hover { text-decoration: underline } - } - - p { + .who { + float: left; color: $f-color; - margin: 0 0 0 .5rem; + font-size: .895rem; + + a { + color: $link; + margin: 0 2px; + + &:hover { text-decoration: underline } + } + + .icon-btc-b { + position: relative; + top: .25rem; + font-size: 1.1rem; + } } - - .copy .icon-copyright { - font-size: .7rem; - opacity: .9; + + ul { + float: right; + list-style-type: none; + white-space:nowrap; + padding: 0; + margin: 0; + + li, li p { + display:inline; + font-size: .895rem; + } + + a { + color: $link; + margin: 0 .5rem; + + &:hover { text-decoration: underline } + } + + p { + color: $f-color; + margin: 0 0 0 .5rem; + } + + .copy .icon-copyright { + font-size: .7rem; + opacity: .9; + } } } } diff --git a/assets/style/main.scss b/assets/style/main.scss index 01b12b3..9c0cd5a 100644 --- a/assets/style/main.scss +++ b/assets/style/main.scss @@ -8,7 +8,7 @@ body { main { max-width: 60rem; - min-height: calc(100vh - 224px); + min-height: calc(100vh - 438px); margin: 0 auto; padding: 0 4rem; } diff --git a/assets/style/pages/_404.scss b/assets/style/pages/_404.scss index e50496c..96ff6b9 100644 --- a/assets/style/pages/_404.scss +++ b/assets/style/pages/_404.scss @@ -1,6 +1,6 @@ .lost { position: relative; - top: calc(50vh - 280px); + top: calc(50vh - 320px); margin: auto; text-align: center; diff --git a/assets/style/pages/index/_banner.scss b/assets/style/pages/index/_banner.scss index 22d64e6..fd6e2fa 100644 --- a/assets/style/pages/index/_banner.scss +++ b/assets/style/pages/index/_banner.scss @@ -1,19 +1,21 @@ .banner { display: grid; - grid-template-columns: 2.5fr 1fr 1fr; + grid-template-columns: 1fr 2fr; max-width: 60rem; - margin: 0 auto; - padding: 2rem 0 8rem 0; + background: $t-color; + margin: 2rem auto 6rem auto; + padding: 2rem 2rem 2.25rem 2rem; h4 { - margin: 1.5rem 0; + margin: 0 0 1.5rem 0; } h6 { color: $f-color; - font-size: 1rem; - font-weight: 500; - line-height: 1.4rem; + font-size: 1.1rem; + font-weight: 400; + line-height: 1.65rem; + padding: .5rem 2rem 0 0; } } diff --git a/components/Footer.vue b/components/Footer.vue index 5699838..20a3269 100644 --- a/components/Footer.vue +++ b/components/Footer.vue @@ -1,12 +1,36 @@ \ No newline at end of file diff --git a/components/index/Banner.vue b/components/index/Banner.vue index f8de79f..33a1c41 100644 --- a/components/index/Banner.vue +++ b/components/index/Banner.vue @@ -1,13 +1,8 @@ \ No newline at end of file