Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions _config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ map: https://maps.app.goo.gl/4jicdzYEBzjtHd916
twitter: DojoConJapan
facebook: DojoConJapan
email: [email protected]
youtube: UCX3tz875ZDtU85rFkYuwl5w
court:
contact: https://forms.gle/7wSMSLEmjc4ucVoHA
registration: https://dojocon-japan.doorkeeper.jp/events/176163
Expand Down
43 changes: 25 additions & 18 deletions _includes/footer.html
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>
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

サイトマップのページが現状ないので、/sitemapとしておいた。

<a href="/privacy">プライバシーポリシー</a>
<a href="{{site.contact}}" target="_blank">お問い合わせ</a>
Copy link
Collaborator Author

Choose a reason for hiding this comment

The 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">&copy; DojoCon Japan {{ site.year }} 実行委員会</p>
</footer>
<div class="footer-copyright">
&copy; DojoCon Japan 2025 実行委員会
</div>
</footer>
130 changes: 70 additions & 60 deletions _sass/includes/footer.scss
Original file line number Diff line number Diff line change
@@ -1,74 +1,84 @@
@use '../global/variables' as *;
$footer-bg: #fff;
$footer-link: #333;
$footer-link-hover: #7cc224;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

これは興味本位の質問ですが、この色ってどこから持ってきた色ですか?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

この色ですが、どれを使えば良いか分からなかったので、ロゴの「Inspire Next.」の色に近いものを使っています。
セルフレビュー時に、そのことを書いておくべきでした。すみません🙇‍♀️

将来的にホバー時の色は統一されると思うので、variables.scssに追加するのが良いと思いました。

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

042ed88 こちらでvariables.scssからホバーした際の色を参照するようにしました。
現状は、黄色にしていますが今後変更する予定です。

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OKです!
いい判断だと思います。

$footer-icon-size: 2.2rem;

/* stylesheet for `_includes/footer.html` */
.site-footer {
background: $footer-bg;
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: $footer-icon-size;
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;
}
}
}
Binary file added img/2025/top/footer_logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.