-
-
Notifications
You must be signed in to change notification settings - Fork 0
change: footerのスタイルを変更 #8
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 2 commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,26 @@ | ||
| <footer> | ||
| <nav class="share"> | ||
| <div> | ||
| <a href="https://www.facebook.com/share.php?u={{ site.url }}" target="_blank" class="share-facebook text-white" rel="noopener"><i class="fa-brands fa-square-facebook"></i> Facebook でシェア</a> | ||
| </div> | ||
| <div> | ||
| <a href="https://x.com/share?url={{ site.url }}{{ page.url }}&text={{ site.title | url_encode }} - {{ page.title | url_encode }}&hashtags=DojoConJapan,CoderDojo&via={{ site.twitter }}&related={{ site.twitter }}" target="_blank" class="share-x text-white" rel="noopener"><i class="fa-brands fa-square-x-twitter"></i> X でシェア</a> | ||
| </div> | ||
| <footer class="site-footer"> | ||
| <div class="footer-logo"> | ||
| <img src="/img/2025/top/footer_logo.png" alt="DojoCon Japan 2025 Inspire Next." /> | ||
| </div> | ||
| <div class="footer-social"> | ||
| <a href="https://twitter.com/{{ site.twitter }}" target="_blank" rel="noopener" class="social-x" aria-label="X"> | ||
| <i class="fa-brands fa-x-twitter" style="color:#000000;"></i> | ||
| </a> | ||
| <a href="https://www.facebook.com/{{ site.facebook }}" target="_blank" rel="noopener" class="social-facebook" aria-label="Facebook"> | ||
| <i class="fa-brands fa-facebook" style="color:#3b5998;"></i> | ||
| </a> | ||
| <a href="https://www.youtube.com/channel/{{ site.youtube }}" target="_blank" rel="noopener" class="social-youtube" aria-label="YouTube"> | ||
| <i class="fa-brands fa-youtube" style="color:#ff0000;"></i> | ||
| </a> | ||
| </div> | ||
| <nav class="footer-links"> | ||
| <a href="/">ホーム</a> | ||
| <a href="/code-of-conduct">行動規範</a> | ||
| <a href="/sitemap">サイトマップ</a> | ||
| <a href="/privacy">プライバシーポリシー</a> | ||
| <a href="{{site.contact}}" target="_blank">お問い合わせ</a> | ||
|
Collaborator
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. お問い合わせのリンクは、お問い合わせGoogleフォームにした。 |
||
| </nav> | ||
| <nav class="footer-menu text-center"> | ||
| <ul class="footer-menu-list"> | ||
| <li><a href="/code-of-conduct">行動規範</a></li> | ||
| <li><a href="/privacy">プライバシー・ポリシー</a></li> | ||
| <li><a href="https://www.facebook.com/{{ site.facebook }}" target="_blank" rel="noopener">Facebook</a></li> | ||
| <li><a href="https://twitter.com/{{ site.twitter }}" target="_blank" rel="noopener">Twitter</a></li> | ||
| </ul> | ||
| </nav> | ||
| <p class="copyright text-center">© DojoCon Japan {{ site.year }} 実行委員会</p> | ||
| </footer> | ||
| <div class="footer-copyright"> | ||
| © DojoCon Japan 2025 実行委員会 | ||
| </div> | ||
| </footer> | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,74 +1,81 @@ | ||
| @use '../global/variables' as *; | ||
| $footer-link-hover: #7cc224; | ||
|
||
|
|
||
| /* stylesheet for `_includes/footer.html` */ | ||
| .site-footer { | ||
| background: #fff; | ||
| text-align: center; | ||
| padding: 40px 0 24px; | ||
|
|
||
| footer { | ||
| background-color: $secondary-color; | ||
| color: #fff; | ||
| padding-bottom: 12px; | ||
| margin-top: auto; | ||
| a { | ||
| color: $white; | ||
| .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: $footer-link-hover; | ||
| 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: $footer-link-hover; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @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; | ||
| } | ||
| } | ||
| } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
サイトマップのページが現状ないので、
/sitemapとしておいた。