Skip to content

Commit acc3f86

Browse files
takusandayoootakusandayooo
authored
Merge pull request #8 from coderdojo-japan/change-footer-style
change: footerのスタイルを変更
2 parents 7fcbe8e + 042ed88 commit acc3f86

File tree

5 files changed

+94
-77
lines changed

5 files changed

+94
-77
lines changed

‎_config.yml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ map: https://maps.app.goo.gl/4jicdzYEBzjtHd916
1717
twitter: DojoConJapan
1818
facebook: DojoConJapan
1919
email: [email protected]
20+
youtube: UCX3tz875ZDtU85rFkYuwl5w
2021
court:
2122
contact: https://forms.gle/7wSMSLEmjc4ucVoHA
2223
registration: https://dojocon-japan.doorkeeper.jp/events/176163

‎_includes/footer.html

Lines changed: 25 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,26 @@
1-
<footer>
2-
<nav class="share">
3-
<div>
4-
<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>
5-
</div>
6-
<div>
7-
<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>
8-
</div>
1+
<footer class="site-footer">
2+
<div class="footer-logo">
3+
<img src="/img/2025/top/footer_logo.png" alt="DojoCon Japan 2025 Inspire Next." />
4+
</div>
5+
<div class="footer-social">
6+
<a href="https://twitter.com/{{ site.twitter }}" target="_blank" rel="noopener" class="social-x" aria-label="X">
7+
<i class="fa-brands fa-x-twitter" style="color:#000000;"></i>
8+
</a>
9+
<a href="https://www.facebook.com/{{ site.facebook }}" target="_blank" rel="noopener" class="social-facebook" aria-label="Facebook">
10+
<i class="fa-brands fa-facebook" style="color:#3b5998;"></i>
11+
</a>
12+
<a href="https://www.youtube.com/channel/{{ site.youtube }}" target="_blank" rel="noopener" class="social-youtube" aria-label="YouTube">
13+
<i class="fa-brands fa-youtube" style="color:#ff0000;"></i>
14+
</a>
15+
</div>
16+
<nav class="footer-links">
17+
<a href="/">ホーム</a>
18+
<a href="/code-of-conduct">行動規範</a>
19+
<a href="/sitemap">サイトマップ</a>
20+
<a href="/privacy">プライバシーポリシー</a>
21+
<a href="{{site.contact}}" target="_blank">お問い合わせ</a>
922
</nav>
10-
<nav class="footer-menu text-center">
11-
<ul class="footer-menu-list">
12-
<li><a href="/code-of-conduct">行動規範</a></li>
13-
<li><a href="/privacy">プライバシー・ポリシー</a></li>
14-
<li><a href="https://www.facebook.com/{{ site.facebook }}" target="_blank" rel="noopener">Facebook</a></li>
15-
<li><a href="https://twitter.com/{{ site.twitter }}" target="_blank" rel="noopener">Twitter</a></li>
16-
</ul>
17-
</nav>
18-
<p class="copyright text-center">&copy; DojoCon Japan {{ site.year }} 実行委員会</p>
19-
</footer>
23+
<div class="footer-copyright">
24+
&copy; DojoCon Japan 2025 実行委員会
25+
</div>
26+
</footer>

‎_sass/global/variables.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ $secondary-color: $purple;
1515
$third-color: $blue;
1616
$text-color: $black;
1717
$color-necessary: #ffe6cc;
18+
$hover-color: $yellow;
1819

1920
// SNS
2021
$color-facebook: #3b5998;

‎_sass/includes/footer.scss

Lines changed: 67 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,82 @@
11
@use '../global/variables' as *;
22

3-
/* stylesheet for `_includes/footer.html` */
43

5-
footer {
6-
background-color: $secondary-color;
7-
color: #fff;
8-
padding-bottom: 12px;
9-
margin-top: auto;
10-
a {
11-
color: $white;
4+
.site-footer {
5+
background: #fff;
6+
text-align: center;
7+
padding: 40px 0 24px;
8+
9+
.footer-logo img {
10+
max-width: 400px;
11+
width: 100%;
12+
height: auto;
13+
margin: 0 auto 24px auto;
14+
display: block;
1215
}
13-
.share {
14-
display: grid;
15-
grid-template-columns: 1fr 1fr;
16+
17+
.footer-social {
18+
margin-bottom: 24px;
19+
1620
a {
17-
line-height: 60px;
18-
height: 60px;
19-
width: 100%;
20-
display: block;
21-
text-align: center;
22-
text-decoration-line: none;
21+
display: inline-block;
22+
margin: 0 14px;
23+
font-size: 2.2rem;
24+
color: #000;
25+
width: 48px;
26+
height: 48px;
27+
line-height: 48px;
28+
border-radius: 50%;
29+
background: #ffffff;
30+
transition: background 0.2s, color 0.2s;
31+
2332
&:hover {
24-
opacity: .8;
33+
background: $hover-color;
34+
color: #fff;
2535
}
2636
}
27-
&::after {
28-
content: '';
29-
clear: both;
30-
display: block;
31-
}
32-
.share-twitter,
33-
.share-facebook,
34-
.share-line {
35-
display: block;
36-
}
37-
.share-facebook {
38-
background-color: $color-facebook;
39-
}
40-
.share-x {
41-
background-color: $color-x;
42-
}
43-
.share-line {
44-
background-color: $color-line;
45-
display: none;
46-
}
4737
}
48-
.footer-menu {
49-
.footer-menu-list {
50-
list-style: none;
51-
padding: 0;
52-
margin-top: 1.5em;
53-
li {
54-
display: inline;
55-
padding: 0 .5em;
56-
a {
57-
&:hover {
58-
color: white;
59-
opacity: 0.8;
60-
}
61-
}
38+
39+
.footer-links {
40+
margin-bottom: 16px;
41+
42+
a {
43+
display: inline-block;
44+
margin: 0 10px;
45+
color: #000;
46+
text-decoration: none;
47+
font-size: 1rem;
48+
transition: color 0.2s;
49+
50+
&:hover {
51+
color: $hover-color;
6252
}
6353
}
6454
}
65-
}
6655

67-
@media screen and (max-width: 800px) {
68-
.share a {
69-
width: 100%;
70-
}
71-
.share-line {
72-
display: block;
56+
.footer-copyright {
57+
font-size: 0.98rem;
7358
}
7459
}
60+
61+
// レスポンシブ対応
62+
@media (max-width: 600px) {
63+
.site-footer {
64+
padding: 32px 0 18px;
65+
66+
.footer-logo img {
67+
max-width: 220px;
68+
margin-bottom: 18px;
69+
}
70+
.footer-social a {
71+
margin: 0 8px;
72+
font-size: 1.7rem;
73+
width: 36px;
74+
height: 36px;
75+
line-height: 36px;
76+
}
77+
.footer-links a {
78+
margin: 0 5px;
79+
font-size: 0.97rem;
80+
}
81+
}
82+
}

‎img/2025/top/footer_logo.png

91.7 KB
Loading

0 commit comments

Comments
 (0)