diff --git a/src/css/footer.css b/src/css/footer.css index 426b7b86..b90e11b0 100644 --- a/src/css/footer.css +++ b/src/css/footer.css @@ -4,6 +4,7 @@ padding: 2.5rem 0; position: relative; z-index: var(--z-index-footer); + box-shadow: 0 0 10px -5px #999; } .footer a { @@ -21,18 +22,17 @@ height: 1px; background-color: var(--color-footer-text); transform: scale3d(0, 0.9999, 0.9999); - transition: transform 0.1s; + transition: transform 0.3s; } -.footer a.icon::after, -.footer a.btn::after { +.footer .footer-logo a.icon::after { content: none; } .footer a:focus::after, .footer a:hover::after { transform: scale3d(1, 0.9999, 0.9999); - transition-duration: 0.05s; + transition-duration: 0.3s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } @@ -45,7 +45,7 @@ } .footer-links .col { - flex-basis: 33.3333%; + flex-basis: 100%; padding-top: 0.625rem; } @@ -54,10 +54,6 @@ padding: 0 0 1.25rem; } -.footer-links .col:nth-child(5) { - flex-basis: 100%; -} - .footer-logo { padding: 1rem 0; width: 193px; @@ -135,41 +131,26 @@ justify-content: center; flex-wrap: wrap; margin-top: -4px; + flex-direction: column; } .footer-links .social-icons li { - display: inline-block; + display: flex; + justify-content: flex-start; + align-items: center; padding: 0; + margin-bottom: 1rem; } .footer-links .social-icons a { display: flex; align-items: center; justify-content: center; - width: 45px; - height: 45px; - margin: 0 0.125rem; + margin: 0 0 0 0.5rem; border-radius: 50%; transition: background-color 0.3s ease-in-out; } -.footer-links .social-icons svg { - fill: var(--color-footer-text); - width: 35px; - height: 29px; - transition: fill 0.3s ease-in-out; -} - -.footer-links .social-icons a:focus, -.footer-links .social-icons a:hover { - background-color: var(--color-footer-text); -} - -.footer-links .social-icons a:focus svg, -.footer-links .social-icons a:hover svg { - fill: var(--color-footer-bg); -} - .footer-terms { font-size: 0.875rem; line-height: 1; @@ -190,16 +171,18 @@ margin: 0.625rem 0.3125rem; } -@media screen and (min-width: 769px) { +.footer-terms-links a { + font-weight: var(--weight-bold); +} + +/* Responsive css */ + +@media screen and (min-width: 768px) { .footer-links .col { - flex-basis: 22%; + flex-basis: 24%; } .footer-links .col:nth-child(1) { - flex-basis: 34%; - } - - .footer-links .col:nth-child(5) { flex-basis: 100%; } @@ -228,7 +211,7 @@ } .footer-links .col { - flex-basis: 17%; + flex-basis: calc((100% - 27%) / 4); } .footer-links .col:nth-child(1) { @@ -236,14 +219,6 @@ padding: 0 1.25rem; } - .footer-links .col:nth-child(2) { - flex-basis: 16%; - } - - .footer-links .col:nth-child(5) { - flex-basis: 23%; - } - .footer-links li a { font-size: inherit; } @@ -253,22 +228,7 @@ padding-right: 0.75rem; } - .footer-terms { - text-align: left; - } - .footer-terms span { margin-left: 0.125rem; } } - -@media screen and (min-width: 1200px) { - .footer-links .social-icons a { - width: 52px; - height: 52px; - } - - .footer-links .social-icons svg { - width: 50px; - } -} diff --git a/src/css/vars.css b/src/css/vars.css index d0852ac6..a7d352fb 100644 --- a/src/css/vars.css +++ b/src/css/vars.css @@ -56,8 +56,9 @@ --color-shade: #f3f3f3; --color-navbar-bg: var(--color-brand-black); --color-navbar-text: var(--color-brand-white); - --color-footer-bg: var(--color-brand-black); - --color-footer-text: var(--color-brand-white); + --color-footer-bg: var(--color-shade); + --color-footer-bg-gray: var(--color-brand-black); + --color-footer-text: var(--color-text); /* Color for code block */ --hljs-attr: #407787; diff --git a/src/img/couchbase_logo_black.svg b/src/img/couchbase_logo_black.svg new file mode 100644 index 00000000..fe5ac581 --- /dev/null +++ b/src/img/couchbase_logo_black.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/img/social-icon/LinkedIn_black.svg b/src/img/social-icon/LinkedIn_black.svg new file mode 100644 index 00000000..15e9c066 --- /dev/null +++ b/src/img/social-icon/LinkedIn_black.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/src/img/social-icon/facebook_black.svg b/src/img/social-icon/facebook_black.svg new file mode 100644 index 00000000..9ef74341 --- /dev/null +++ b/src/img/social-icon/facebook_black.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/src/img/social-icon/github_black.svg b/src/img/social-icon/github_black.svg new file mode 100644 index 00000000..811e4ddb --- /dev/null +++ b/src/img/social-icon/github_black.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/social-icon/stackoverflow_black.svg b/src/img/social-icon/stackoverflow_black.svg new file mode 100644 index 00000000..ca903069 --- /dev/null +++ b/src/img/social-icon/stackoverflow_black.svg @@ -0,0 +1,13 @@ + + + + + + + + + diff --git a/src/img/social-icon/twitter_black.svg b/src/img/social-icon/twitter_black.svg new file mode 100644 index 00000000..06c32953 --- /dev/null +++ b/src/img/social-icon/twitter_black.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/src/img/social-icon/youtube_black.svg b/src/img/social-icon/youtube_black.svg new file mode 100644 index 00000000..a0de2fb0 --- /dev/null +++ b/src/img/social-icon/youtube_black.svg @@ -0,0 +1,15 @@ + + + + + + + diff --git a/src/partials/footer-content.hbs b/src/partials/footer-content.hbs index 2e1f59d2..64f992cb 100644 --- a/src/partials/footer-content.hbs +++ b/src/partials/footer-content.hbs @@ -4,7 +4,7 @@
@@ -32,30 +32,37 @@