aheh/github-profile-readme-generator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #264 from pollyj/feature/responsive_footer

Browse Source 
[fix]: footer responsiveness
This commit is contained in:
Rahul Jain
2020-10-15 10:01:32 +05:30
committed by GitHub
parent 4a99f2f599 dd70212616
commit 9ceeeb7d4b
2 changed files with 31 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/footer.js
+30 -20
View File
@@ -6,42 +6,52 @@ import { Link } from "gatsby"
const Footer = () => { const Footer = () => {
return ( return (
<div className="bg-gray-100 p-4 flex flex-col justify-center items-center shadow-inner mt-2"> <div className="bg-gray-100 p-4 flex flex-col justify-center items-center shadow-inner mt-2">
<div className="w-full flex justify-evenly py-2"> <div className="w-full flex flex-col sm:flex-row justify-evenly py-2">
<div className="mr-6"> <div className="ml-2 sm:ml-0 sm:mr-6 order-last sm:order-none flex">
<h1 className="text-base font-bold font-title sm:text-2xl flex-col items-end"> <h1 className="text-base font-bold font-title text-xl sm:text-2xl mt-3 sm:mt-0">
<img <div className="flex sm:flex-col items-start mb-3 sm:mb-0">
src={logo} <img
className="h-24" src={logo}
alt="github profile markdown generator logo" className="hidden sm:block h-24"
/> alt="github profile markdown generator logo"
GitHub Profile README Generator />
<div className="mr-2 sm:mr-0">
GitHub Profile{" "}
<img
src={logo}
className="inline sm:hidden h-12"
alt="github profile markdown generator logo"
/>
<span className="block sm:inline">README Generator</span>
</div>
</div>
</h1> </h1>
</div> </div>
<div> <div className="text-xl sm:text-base font-light sm:font-normal">
<div className="mb-2 font-bold font-medium font-title"> <div className="font-title font-bold mb-4 sm:mb-2">
<strong>Pages</strong> <strong>Pages</strong>
</div> </div>
<div> <div className="ml-2 sm:ml-0">
<Link to={links.addons} activeStyle={{ color: "#002ead" }}> <Link to={links.addons} activeStyle={{ color: "#002ead" }}>
Addons Addons
</Link> </Link>
</div> </div>
<div> <div className="ml-2 sm:ml-0">
<Link to={links.support} activeStyle={{ color: "#002ead" }}> <Link to={links.support} activeStyle={{ color: "#002ead" }}>
Support Support
</Link> </Link>
</div> </div>
<div> <div className="ml-2 sm:ml-0">
<Link to={links.about} activeStyle={{ color: "#002ead" }}> <Link to={links.about} activeStyle={{ color: "#002ead" }}>
About About
</Link> </Link>
</div> </div>
</div> </div>
<div> <div className="text-xl sm:text-base font-light sm:font-normal">
<div className="mb-2 font-bold font-medium font-title"> <div className="font-title font-bold my-4 sm:my-0 sm:mb-2">
<strong>More</strong> <strong>More</strong>
</div> </div>
<div> <div className="ml-2 sm:ml-0">
<a <a
href="https://github.com/rahuldkjain/github-profile-readme-generator" href="https://github.com/rahuldkjain/github-profile-readme-generator"
aria-label="Github rahuldkjain/github-profile-readme-generator" aria-label="Github rahuldkjain/github-profile-readme-generator"
@@ -50,7 +60,7 @@ const Footer = () => {
Github Github
</a> </a>
</div> </div>
<div> <div className="ml-2 sm:ml-0">
<a <a
href="https://github.com/rahuldkjain/github-profile-readme-generator/releases" href="https://github.com/rahuldkjain/github-profile-readme-generator/releases"
aria-label="Releases on Github rahuldkjain/github-profile-readme-generator" aria-label="Releases on Github rahuldkjain/github-profile-readme-generator"
@@ -61,8 +71,8 @@ const Footer = () => {
</div> </div>
</div> </div>
<div> <div>
<div className="mb-2 font-bold font-medium font-title"> <div className="font-title font-bold text-xl sm:text-base my-4 sm:my-0 sm:mb-2">
<strong>Community</strong> <strong>Join Community</strong>
</div> </div>
<div> <div>
<a <a
src/pages/index.css
+1 -1
View File
@@ -1,5 +1,5 @@
@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400&display=swap");
:root { :root {
--grey-05: #f5f6f7; --grey-05: #f5f6f7;
--grey-10: #dfdfe2; --grey-10: #dfdfe2;