Create new footer #448
Create new footer #448
Conversation
Change footer to 5 sections: logo, activity, about, project and contact us. Additionally, ensure footer columns wrap on smaller screens.
There was a problem hiding this comment.
@eleanorLYJ thanks for the quick contribution. @jack482653 @rockleona could you please help review this PR
theme/templates/base.html
Outdated
| </a> | ||
| </div> | ||
|
|
||
| <div class="flex flex-col items-center justify-center py-4 px-6 rounded-lg h-full w-full" style="border: 2px solid white;"> |
There was a problem hiding this comment.
Since our volunteer system isn’t ready yet, we can remove the subscription block
theme/templates/base.html
Outdated
| <div class="flex flex-col"> | ||
| <h3 class="text-red-800 mb-2">activity</h3> | ||
| <div class="pl-2"> | ||
| <a href='' class="block text-white no-underline">meetup</a> |
There was a problem hiding this comment.
Could you please update the href to a real link?
For example, Meetup' should point to {{ SITEURL }}/meetup, and the project of modmesh should link to {{ SITEURL }}/project#modmesh
There was a problem hiding this comment.
Yes. But I would like to ask what is the link to the seminar? and is the link to orgainzers {{ SITEURL }}/about#organizers ?
There was a problem hiding this comment.
Since we don’t have a navigation item for seminar, I think we can use training ({{ SITEURL }}/training) instead.
Yes, the link to the organizers could be {{ SITEURL }}/about#organizers.
theme/templates/base.html
Outdated
| <i class="fab fa-github fa-stack-1x grey-text text-gray-800"></i> | ||
| </a> | ||
|
|
||
| <footer class="bg-blue-900 text-white"> |
There was a problem hiding this comment.
I think we can extend the width of the footer, it looks a little cramped on my screen
There was a problem hiding this comment.
Do you mean making every section more horizontally distributed??
There was a problem hiding this comment.
I think it looks better now!
theme/templates/base.html
Outdated
| <a href='' class="block text-white no-underline">seminar</a> | ||
| <a href='' class="block text-white no-underline">conference</a> |
There was a problem hiding this comment.
Following from @eleanorLYJ 's comment here, I suggest that we can do this change for now, since we do not have a specified page for seminar.
| <a href='' class="block text-white no-underline">seminar</a> | |
| <a href='' class="block text-white no-underline">conference</a> | |
| <a href='' class="block text-white no-underline">conference & seminar</a> |
|
Thanks @eleanorLYJ, just leave some comments above, please take a look if you're available! Also would you like to do another two breakpoint for responsive design? |
theme/templates/base.html
Outdated
| and | ||
| <a class="text-white" target="_blank" href="https://python.org">Python</a>. | ||
| <div class="flex flex-col"> | ||
| <h3 class="text-red-800 mb-2">activity</h3> |
There was a problem hiding this comment.
Looks like mb-2 does not have css definition:
theme/templates/base.html
Outdated
| <a href='' class="block text-white no-underline">seminar</a> | ||
| <a href='' class="block text-white no-underline">conference</a> | ||
| </div> | ||
| <h3 class="text-red-800 mt-1 mb-1">about</h3> |
There was a problem hiding this comment.
mb-1 does not have definition, too.
|
Note: we need to have footer layout at mobile and tablet device. (not available yet on figma) |
Correct <a> tag links and implement responsive design with grid and two breakpoints
Change footer to 5 sections: logo, activity, about, project and contact us.
Additionally, ensure footer columns wrap on smaller screens.