-
-
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 1 commit
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 |
---|---|---|
|
@@ -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 | ||
|
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> | ||
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,84 @@ | ||
@use '../global/variables' as *; | ||
$footer-bg: #fff; | ||
$footer-link: #333; | ||
$footer-link-hover: #7cc224; | ||
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. これは興味本位の質問ですが、この色ってどこから持ってきた色ですか? 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. この色ですが、どれを使えば良いか分からなかったので、ロゴの「Inspire Next.」の色に近いものを使っています。 将来的にホバー時の色は統一されると思うので、variables.scssに追加するのが良いと思いました。 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. 042ed88 こちらでvariables.scssからホバーした際の色を参照するようにしました。 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. 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; | ||
} | ||
} | ||
} |
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
としておいた。