Skip to content
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.

Sign up for GitHub

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

Jump to bottom

New footer design #907

Merged
merged 7 commits into from
Aug 18, 2024
Merged

New footer design #907

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
a002139
New Footer
coppolaemilio Aug 18, 2024
2787bdd
Make main.css be an scss file to handle imports
coppolaemilio Aug 18, 2024
facbcdb
Remove margin gap fix
coppolaemilio Aug 18, 2024
bbe1279
remove unused logos
coppolaemilio Aug 18, 2024
50de99d
Update _sass/_footer.scss
coppolaemilio Aug 18, 2024
9e7ad08
Update _sass/_footer.scss
coppolaemilio Aug 18, 2024
9d49981
Update assets/css/main.scss
coppolaemilio Aug 18, 2024
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
119 changes: 60 additions & 59 deletions _includes/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,71 +1,72 @@
</main>

<footer>
<div class="container flex footer-container">
<div id="copyright">
<footer class="footer-global">
<div class="wrapper">
<div class="columns">
<div class="col">
<h2>Godot Engine</h2>
<ul>
<li><a class="set-os-download-url" href="/download">Download</a></li>
<li><a href="https://docs.godotengine.org">Documentation</a></li>
<li><a href="/features/">Features</a></li>
<li><a href="https://editor.godotengine.org/releases/latest/">Web Editor</a></li>
<li><a href="/download/archive/">Release Archive</a></li>
<li><a href="https://github.com/godotengine">Source Code</a></li>
</ul>
</div>
<div class="col">
<h2>Project</h2>
<ul>
<li><a href="/blog/">Blog</a></li>
<li><a href="/code-of-conduct/">Code of Conduct</a></li>
<li><a href="/governance/">Governance</a></li>
<li><a href="/teams/">Teams</a></li>
<li><a href="/community/">Communities</a></li>
</ul>
</div>
<div class="col">
<h2>Resources</h2>
<ul>
<li><a href="https://godotengine.org/asset-library/asset">Asset Library</a></li>
<li><a href="/press/">Press Kit</a></li>
<li><a href="/showcase/">Showcase</a></li>
<li><a href="/education/">Education</a></li>
</ul>
</div>
<div class="col">
<h2>Foundation</h2>
<ul>
<li><a href="https://godot.foundation/">About</a></li>
<li><a href="https://fund.godotengine.org">Donate</a></li>
<li><a href="/license/">License</a></li>
<li><a href="/privacy-policy/">Privacy Policy</a></li>
<li><a href="/contact/">Contact us</a></li>
</ul>
</div>
</div>
<hr>
<div class="credits-and-socials">
<p>
© 2007-{{ site.time | date: '%Y' }} Juan Linietsky, Ariel Manzur and <a
href="https://github.com/godotengine/godot/blob/master/AUTHORS.md" target="_blank"
rel="noopener">contributors</a>.<br>
Hosted by the <a href="https://godot.foundation/" target="_blank" rel="noopener">Godot Foundation</a>.<br>
Website <a href="https://github.com/godotengine/godot-website" target="_blank" rel="noopener">source code on GitHub</a>.
© 2007-{{ site.time | date: '%Y' }} Juan Linietsky, Ariel Manzur and <a href="https://github.com/godotengine/godot/blob/master/AUTHORS.md" target="_blank" rel="noopener">contributors</a>. Hosted by the <a href="https://godot.foundation/" target="_blank" rel="noopener">Godot Foundation</a>. Website <a href="https://github.com/godotengine/godot-website" target="_blank" rel="noopener">source code on GitHub</a>.
</p>
</div>
<div id="sitemap">
<ul class="sitemap-group">
<li><strong>Get Godot</strong></li>
<li><a href="/download/windows/" class="set-os-download-url">Download</a></li>
<li><a href="/download/archive/">Release Archive</a></li>
<li><a href="https://editor.godotengine.org/releases/latest/">Web Editor</a></li>
<li>&nbsp;</li>
<li><strong>Public Relations</strong></li>
<li><a href="/blog/">Blog</a></li>
<li><a href="/community/">Communities and Events</a></li>
<li><a href="/press/">Press Kit</a></li>
</ul>
<ul class="sitemap-group">
<li><strong>About Godot</strong></li>
<li><a href="/features/">Features</a></li>
<li><a href="/showcase/">Showcase</a></li>
<li><a href="/education/">Education</a></li>
<li><a href="/license/">License</a></li>
<li><a href="/code-of-conduct/">Code of Conduct</a></li>
<li><a href="/privacy-policy/">Privacy Policy</a></li>
<li><a href="https://fund.godotengine.org">Donate</a></li>
</ul>
<ul class="sitemap-group">
<li><strong>Project Team</strong></li>
<li><a href="/governance/">Governance</a></li>
<li><a href="/teams/">Teams</a></li>
<li>&nbsp;</li>
<li><strong>Extra Resources</strong></li>
<li><a href="https://godotengine.org/asset-library/asset">Asset Library</a></li>
<li><a href="https://docs.godotengine.org">Documentation</a></li>
<li><a href="https://github.com/godotengine">Code Repository</a></li>
</ul>
</div>
<div id="social" class="dark-desaturate">
<h4 class="text-right"><a href="/contact/">Contact us</a></h4>
<div class="flex justify-space-between" style="gap: 3px;">
<a href="https://github.com/godotengine" target="_blank" rel="noopener">
<img src="/assets/footer/github_logo.svg" width="32" height="32" alt="GitHub">
<div class="social">
<a href="https://github.com/godotengine" target="_blank" rel="noopener" title="GitHub">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
</a>
<a href="https://mastodon.gamedev.place/@godotengine" target="_blank" rel="noopener">
<img src="/assets/footer/mastodon_logo.svg" width="32" height="32" alt="Mastodon">
<a href="https://mastodon.gamedev.place/@godotengine" target="_blank" rel="noopener" title="Mastodon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M433 179.1c0-97.2-63.7-125.7-63.7-125.7-62.5-28.7-228.6-28.4-290.5 0 0 0-63.7 28.5-63.7 125.7 0 115.7-6.6 259.4 105.6 289.1 40.5 10.7 75.3 13 103.3 11.4 50.8-2.8 79.3-18.1 79.3-18.1l-1.7-36.9s-36.3 11.4-77.1 10.1c-40.4-1.4-83-4.4-89.6-54a102.5 102.5 0 0 1 -.9-13.9c85.6 20.9 158.7 9.1 178.8 6.7 56.1-6.7 105-41.3 111.2-72.9 9.8-49.8 9-121.5 9-121.5zm-75.1 125.2h-46.6v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.3V197c0-58.5-64-56.6-64-6.9v114.2H90.2c0-122.1-5.2-147.9 18.4-175 25.9-28.9 79.8-30.8 103.8 6.1l11.6 19.5 11.6-19.5c24.1-37.1 78.1-34.8 103.8-6.1 23.7 27.3 18.4 53 18.4 175z"/></svg>
</a>
<a href="https://twitter.com/godotengine" target="_blank" rel="noopener">
<img src="/assets/footer/twitter_logo.svg" width="32" height="32" alt="Twitter">
<a href="https://twitter.com/godotengine" target="_blank" rel="noopener" title="Twitter">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M459.4 151.7c.3 4.5 .3 9.1 .3 13.6 0 138.7-105.6 298.6-298.6 298.6-59.5 0-114.7-17.2-161.1-47.1 8.4 1 16.6 1.3 25.3 1.3 49.1 0 94.2-16.6 130.3-44.8-46.1-1-84.8-31.2-98.1-72.8 6.5 1 13 1.6 19.8 1.6 9.4 0 18.8-1.3 27.6-3.6-48.1-9.7-84.1-52-84.1-103v-1.3c14 7.8 30.2 12.7 47.4 13.3-28.3-18.8-46.8-51-46.8-87.4 0-19.5 5.2-37.4 14.3-53 51.7 63.7 129.3 105.3 216.4 109.8-1.6-7.8-2.6-15.9-2.6-24 0-57.8 46.8-104.9 104.9-104.9 30.2 0 57.5 12.7 76.7 33.1 23.7-4.5 46.5-13.3 66.6-25.3-7.8 24.4-24.4 44.8-46.1 57.8 21.1-2.3 41.6-8.1 60.4-16.2-14.3 20.8-32.2 39.3-52.6 54.3z"/></svg>
</a>
<a href="https://www.facebook.com/groups/godotengine/" target="_blank" rel="noopener">
<img src="/assets/footer/facebook_logo.svg" width="32" height="32" alt="Facebook">
<a href="https://www.facebook.com/groups/godotengine/" target="_blank" rel="noopener" title="Facebook">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z"/></svg>
</a>
<a href="https://www.reddit.com/r/godot" target="_blank" rel="noopener">
<!-- Zero-width space in the `alt` text to prevent content blockers from blocking the icon -->
<img src="/assets/footer/reddit_logo.svg" width="32" height="32" alt="Red​dit">
<a href="https://www.reddit.com/r/godot" title="Reddit" target="_blank" rel="noopener">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M0 256C0 114.6 114.6 0 256 0S512 114.6 512 256s-114.6 256-256 256L37.1 512c-13.7 0-20.5-16.5-10.9-26.2L75 437C28.7 390.7 0 326.7 0 256zM349.6 153.6c23.6 0 42.7-19.1 42.7-42.7s-19.1-42.7-42.7-42.7c-20.6 0-37.8 14.6-41.8 34c-34.5 3.7-61.4 33-61.4 68.4l0 .2c-37.5 1.6-71.8 12.3-99 29.1c-10.1-7.8-22.8-12.5-36.5-12.5c-33 0-59.8 26.8-59.8 59.8c0 24 14.1 44.6 34.4 54.1c2 69.4 77.6 125.2 170.6 125.2s168.7-55.9 170.6-125.3c20.2-9.6 34.1-30.2 34.1-54c0-33-26.8-59.8-59.8-59.8c-13.7 0-26.3 4.6-36.4 12.4c-27.4-17-62.1-27.7-100-29.1l0-.2c0-25.4 18.9-46.5 43.4-49.9l0 0c4.4 18.8 21.3 32.8 41.5 32.8zM177.1 246.9c16.7 0 29.5 17.6 28.5 39.3s-13.5 29.6-30.3 29.6s-31.4-8.8-30.4-30.5s15.4-38.3 32.1-38.3zm190.1 38.3c1 21.7-13.7 30.5-30.4 30.5s-29.3-7.9-30.3-29.6c-1-21.7 11.8-39.3 28.5-39.3s31.2 16.6 32.1 38.3zm-48.1 56.7c-10.3 24.6-34.6 41.9-63 41.9s-52.7-17.3-63-41.9c-1.2-2.9 .8-6.2 3.9-6.5c18.4-1.9 38.3-2.9 59.1-2.9s40.7 1 59.1 2.9c3.1 .3 5.1 3.6 3.9 6.5z"/></svg>
</a>
<a href="/rss.xml" target="_blank" rel="noopener">
<!-- Icon is called `feed` instead of `rss` to prevent content blockers from blocking the icon -->
<img src="/assets/footer/feed_logo.svg" width="32" height="32" alt="RSS feed">
<a href="/rss.xml" title="RSS" target="_blank" rel="noopener">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zM96 136c0-13.3 10.7-24 24-24c137 0 248 111 248 248c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-110.5-89.5-200-200-200c-13.3 0-24-10.7-24-24zm0 96c0-13.3 10.7-24 24-24c83.9 0 152 68.1 152 152c0 13.3-10.7 24-24 24s-24-10.7-24-24c0-57.4-46.6-104-104-104c-13.3 0-24-10.7-24-24zm0 120a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>
</a>
</div>
</div>
Expand Down
4 changes: 0 additions & 4 deletions _layouts/download-archive.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,6 @@
grid-template-columns: 1fr;
gap: 16px;
}

footer {
margin-top: 0;
}
</style>

<div class="hero">
Expand Down
120 changes: 120 additions & 0 deletions _sass/_footer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
/* Footer */
footer.footer-global {
padding: 15px;
color: #898989;
font-weight: 200;
font-size: 17px;
background: rgb(17, 17, 17);
@media (prefers-color-scheme: light) {
background: #fff;
color: #2c2c2c;
}
@media (max-width: 768px) {
padding: 23px;
}
.wrapper {
max-width: 1210px;
margin: 0 auto;
@media (min-width: 768px) {
margin: 60px auto;
}
}
hr {
border: none;
margin: 50px 0;
border-top: 1px solid #2c2c2c;
@media (prefers-color-scheme: light) {
border-top: 1px solid #e7e7e7;
}
@media (max-width: 768px) {
margin: 30px 0 50px;
}
}
a {
color: inherit;
text-decoration-color: #898989;
text-decoration-thickness: 1px;
transition: all 0.2s ease-in-out;
&:hover {
color: var(--link-color);
text-decoration-color: var(--link-color);
}
img {
display: inline-block;
}
}
h2 {
font-size: 25px;
margin-bottom: 14px;
color: white;
@media (prefers-color-scheme: light) {
color: #2c2c2c;
}
@media (max-width: 768px) {
font-size: 20px;
}
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
margin-bottom: 30px;
li {
margin-bottom: 5px;
font-size: 16px;
}
a {
text-decoration: none;
}
}
.columns {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
@media (max-width: 768px) {
grid-template-columns: 1fr;
}
}
.credits-and-socials {
display: grid;
align-items: center;
grid-template-columns: 1fr 1fr;
@media (max-width: 768px) {
grid-template-columns: 1fr;
text-align: center;
}
p {
margin: 0;
max-width: 500px;
@media (max-width: 768px) {
margin: 0 auto;
}
}
.social {
text-align: right;
@media (max-width: 768px) {
margin-top: 30px;
text-align: center;
}
svg {
max-width: 32px;
max-height: 32px;
transition: all 0.2s ease-in-out;
fill: white;
opacity: 0.5;
@media (prefers-color-scheme: light) {
fill: #000;
}
&:hover {
fill: var(--link-color);
opacity: 1;
}
}
a {
text-decoration: none;
margin-right: 9px;
display: inline-block;
width: 32px;
}
}
}
}
Loading
Loading