diff --git a/app/app/assets/images/kcff-logo.png b/app/app/assets/images/kcff-logo.png index f05e4ea..8645430 100644 Binary files a/app/app/assets/images/kcff-logo.png and b/app/app/assets/images/kcff-logo.png differ diff --git a/app/app/assets/stylesheets/media.css b/app/app/assets/stylesheets/media.css index aa42e6f..1a0ae56 100644 --- a/app/app/assets/stylesheets/media.css +++ b/app/app/assets/stylesheets/media.css @@ -17,3 +17,4 @@ @import url('media/notice.css'); @import url('media/home.css'); @import url('media/button.css'); +@import url('media/footer.css'); diff --git a/app/app/assets/stylesheets/media/application-header.css b/app/app/assets/stylesheets/media/application-header.css index 07582fc..05c9a4a 100644 --- a/app/app/assets/stylesheets/media/application-header.css +++ b/app/app/assets/stylesheets/media/application-header.css @@ -16,14 +16,14 @@ } .application-header-logo { - height: 64px; + height: 36px; img { height: 100%; } @media (max-width: 599px) { - height: 48px; + height: 24px; } } diff --git a/app/app/assets/stylesheets/media/footer.css b/app/app/assets/stylesheets/media/footer.css new file mode 100644 index 0000000..b7abe7b --- /dev/null +++ b/app/app/assets/stylesheets/media/footer.css @@ -0,0 +1,56 @@ +.media-footer { + gap: 2rem; + padding-block: 2rem; + display: flex; + flex-direction: column; + justify-content: center; + background-color: var(--color-gray-100); + + @media (min-width: 768px) { + flex-direction: row; + padding-block: 4rem; + gap: 8rem; + } +} + +.media-footer-logo { + display: flex; + justify-content: center; +} + +.media-footer-logo-image { + width: 18rem; + + @media (min-width: 768px) { + width: 24rem; + } +} + +.media-footer-link-groups { + display: flex; + gap: 4rem; + + @media (max-width: 599px) { + justify-content: center; + } +} + +.media-footer-link-group { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.media-footer-link-group-title { + font-weight: bold; +} + +.media-footer-links { + display: flex; + flex-direction: column; + gap: 1rem; +} + +.media-footer-link-group-title, .media-footer-link { + font-size: 0.875rem; +} diff --git a/app/app/views/layouts/media/_footer.html.haml b/app/app/views/layouts/media/_footer.html.haml new file mode 100644 index 0000000..9d61723 --- /dev/null +++ b/app/app/views/layouts/media/_footer.html.haml @@ -0,0 +1,38 @@ +:ruby + menu_links = [ + { title: 'お知らせ', path: notices_path }, + { title: '日程・結果', path: game_schedules_path }, + { title: '所属チーム', path: teams_path }, + { title: '試合会場', path: game_fields_path } + ] + + support_links = [ + { title: 'お問い合わせ', path: 'https://forms.gle/Nv5ng9Up8DrY4B2G7' }, + { title: '公式X(旧Twitter)', path: 'https://x.com/kcff_contact' } + ] + +.media-footer + .media-footer__logo + .media-footer-logo + = image_tag 'kcff-logo.png', class: 'media-footer-logo-image' + .media-footer__link-groups + .media-footer-link-groups + .media-footer-link-groups__link-group + .media-footer-link-group + .media-footer-link-group__title + .media-footer-link-group-title + メニュー + .media-footer-link-group__links + .media-footer-links + - menu_links.each do |menu_link| + = link_to menu_link[:title], menu_link[:path], class: 'media-footer-link common-text-link' + .media-footer-link-groups__link-group + .media-footer-link-group + .media-footer-link-group__title + .media-footer-link-group-title + サポート + .media-footer-link-group__links + .media-footer-links + - support_links.each do |support_link| + = link_to support_link[:title], support_link[:path], + class: 'media-footer-link common-text-link', target: '_blank', rel: 'noopener noreferrer' diff --git a/app/app/views/layouts/media/application.html.haml b/app/app/views/layouts/media/application.html.haml index bb473a3..1ce6fd8 100644 --- a/app/app/views/layouts/media/application.html.haml +++ b/app/app/views/layouts/media/application.html.haml @@ -17,3 +17,5 @@ = render 'layouts/media/breadcrumbs' .application__main = yield + .application__footer + = render 'layouts/media/footer'