diff --git a/_config.yml b/_config.yml index 4f8e6b84..ee58b7a4 100644 --- a/_config.yml +++ b/_config.yml @@ -17,6 +17,7 @@ map: https://maps.app.goo.gl/4jicdzYEBzjtHd916 twitter: DojoConJapan facebook: DojoConJapan email: dojocon2025@coderdojo.jp +youtube: UCX3tz875ZDtU85rFkYuwl5w court: contact: https://forms.gle/7wSMSLEmjc4ucVoHA registration: https://dojocon-japan.doorkeeper.jp/events/176163 diff --git a/_includes/footer.html b/_includes/footer.html index 0ae7e101..f97e5eb8 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,19 +1,26 @@ - \ No newline at end of file diff --git a/_sass/global/variables.scss b/_sass/global/variables.scss index f29652a6..562df1fd 100644 --- a/_sass/global/variables.scss +++ b/_sass/global/variables.scss @@ -15,6 +15,7 @@ $secondary-color: $purple; $third-color: $blue; $text-color: $black; $color-necessary: #ffe6cc; +$hover-color: $yellow; // SNS $color-facebook: #3b5998; diff --git a/_sass/includes/footer.scss b/_sass/includes/footer.scss index 86884cb6..aee8d3ca 100644 --- a/_sass/includes/footer.scss +++ b/_sass/includes/footer.scss @@ -1,74 +1,82 @@ @use '../global/variables' as *; -/* stylesheet for `_includes/footer.html` */ -footer { - background-color: $secondary-color; - color: #fff; - padding-bottom: 12px; - margin-top: auto; - a { - color: $white; +.site-footer { + background: #fff; + text-align: center; + padding: 40px 0 24px; + + .footer-logo img { + max-width: 400px; + width: 100%; + height: auto; + margin: 0 auto 24px auto; + display: block; } - .share { - display: grid; - grid-template-columns: 1fr 1fr; + + .footer-social { + margin-bottom: 24px; + a { - line-height: 60px; - height: 60px; - width: 100%; - display: block; - text-align: center; - text-decoration-line: none; + display: inline-block; + margin: 0 14px; + font-size: 2.2rem; + color: #000; + width: 48px; + height: 48px; + line-height: 48px; + border-radius: 50%; + background: #ffffff; + transition: background 0.2s, color 0.2s; + &:hover { - opacity: .8; + background: $hover-color; + color: #fff; } } - &::after { - content: ''; - clear: both; - display: block; - } - .share-twitter, - .share-facebook, - .share-line { - display: block; - } - .share-facebook { - background-color: $color-facebook; - } - .share-x { - background-color: $color-x; - } - .share-line { - background-color: $color-line; - display: none; - } } - .footer-menu { - .footer-menu-list { - list-style: none; - padding: 0; - margin-top: 1.5em; - li { - display: inline; - padding: 0 .5em; - a { - &:hover { - color: white; - opacity: 0.8; - } - } + + .footer-links { + margin-bottom: 16px; + + a { + display: inline-block; + margin: 0 10px; + color: #000; + text-decoration: none; + font-size: 1rem; + transition: color 0.2s; + + &:hover { + color: $hover-color; } } } -} -@media screen and (max-width: 800px) { - .share a { - width: 100%; - } - .share-line { - display: block; + .footer-copyright { + font-size: 0.98rem; } } + +// レスポンシブ対応 +@media (max-width: 600px) { + .site-footer { + padding: 32px 0 18px; + + .footer-logo img { + max-width: 220px; + margin-bottom: 18px; + } + .footer-social a { + margin: 0 8px; + font-size: 1.7rem; + width: 36px; + height: 36px; + line-height: 36px; + } + .footer-links a { + margin: 0 5px; + font-size: 0.97rem; + } + } +} \ No newline at end of file diff --git a/img/2025/top/footer_logo.png b/img/2025/top/footer_logo.png new file mode 100644 index 00000000..e9ea186f Binary files /dev/null and b/img/2025/top/footer_logo.png differ