chore: style

Author: lencx

src/components/issues_num/index.tsx

@@ -1,5 +1,4 @@
 import React, { FC } from 'react';
-import { Link } from 'gatsby';
 import clsx from 'clsx';
 
 import { fmtIssues } from '@utils/tools';
@@ -23,13 +22,13 @@ const IssuesNum: FC<IssuesNumProps> = (props) => {
     _link = `https://github.com/${rgdData.owner}/${rgdData.repo}/discussions/${props.number}`;
   }
   return (
-    <Link
+    <a
       className={clsx('number issues-num', props.className)}
-      to={_link}
+      href={_link}
       target="_blank"
     >
       {props.len ? fmtIssues(props.number, props.len) : `#${props.number}`}
-    </Link>
+    </a>
   );
 };
 

src/hooks/useRepoLink.ts

@@ -3,22 +3,24 @@ import useRgd from './useRgd';
 export default function useRepoLink() {
   const { type, owner, repo, issues_owner, issues_repo, cname } = useRgd();
 
-  let repoLink, repoType, dataRepo;
+  let repoLink, repoType, dataRepo, repoTxt;
   const siteRepo = `https://github.com/${owner}/${repo}`;
   let rssLink = '/feed.xml';
   if (type === 'issues') {
     dataRepo = `https://github.com/${issues_owner}/${issues_repo}`;
     repoLink = `${dataRepo}/issues`;
     repoType = 'issues';
+    repoTxt = `${issues_owner}/${issues_repo}`;
   } else {
     dataRepo = siteRepo;
     repoLink = `${dataRepo}/discussions`;
     repoType = 'discussions';
+    repoTxt = `${owner}/${repo}`;
   }
 
   if (!/\.github\.io$/.test(repo) && !cname) {
     rssLink = `/${repo}/feed.xml`;
   }
 
-  return { repoLink, repoType, dataRepo, siteRepo, rssLink }
+  return { repoLink, repoType, dataRepo, siteRepo, rssLink, repoTxt }
 }

src/layouts/base.tsx

@@ -21,7 +21,7 @@ interface LayoutProps {
 export default function Layout(props: LayoutProps) {
   const data = useRgd();
   const siteData = useSite();
-  const { siteRepo } = useRepoLink();
+  const { dataRepo, repoTxt } = useRepoLink();
 
   return (
     <HelmetProvider>
@@ -50,21 +50,40 @@ export default function Layout(props: LayoutProps) {
           <div className="content">{props.children}</div>
         </main>
         <footer>
-          <a
-            rel="license"
-            href="http://creativecommons.org/licenses/by-nc-nd/4.0/"
-            target="_blank"
-          >
-            <img
-              style={{ width: 60, height: 21 }}
-              src={require('@icons/license.svg').default}
-              alt="License"
-            />
-          </a>{' '}
-          Copyright © {data?.website?.built_date || new Date().getFullYear()}
-          -present
-          <span className="owner" onClick={() => go(siteRepo)}>
-            {data.owner}/{data.repo}
+          <div className="license">
+            <a
+              rel="license"
+              href="http://creativecommons.org/licenses/by-nc-nd/4.0/"
+              target="_blank"
+            >
+              <img
+                style={{ width: 60, height: 21 }}
+                src={require('@icons/license.svg').default}
+                alt="License"
+              />
+            </a>
+          </div>
+          <div className="copyright">
+            <span>
+              Copyright ©{' '}
+              {data?.website?.built_date || new Date().getFullYear()}
+              -present
+            </span>
+            <a className="owner" href={dataRepo} target="_blank">
+              {repoTxt}
+            </a>
+            {'.'}
+          </div>
+          <span className="powered">
+            Powered by
+            <a
+              className="owner"
+              title="GG (Gatsby + GitHub) - A gatsby website builder based on github discussions"
+              href="https://github.com/lencx/gg"
+              target="_blank"
+            >
+              gg
+            </a>
           </span>
         </footer>
       </div>

src/styles/base.scss

@@ -9,7 +9,7 @@
     sans-serif;
 
   --layout-header-height: 56px;
-  --layout-footer-height: 56px;
+  --layout-footer-height: 100px;
 
   --gg-border: rgba(180, 180, 180, 0.1);
 }

src/styles/layout.scss

@@ -29,11 +29,13 @@
 
   main {
     padding-top: 80px;
-    min-height: calc(100vh - var(--layout-header-height));
+    min-height: calc(100vh - var(--layout-footer-height));
     background-color: var(--theme-content-background-color);
   }
 
   footer {
+    padding: 0 10px;
+    position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -42,17 +44,45 @@
     background-color: var(--theme-footer-background-color);
     font-size: 14px;
     color: #838c95;
-    border-top: solid 1px rgba(120, 120, 120, 0.2);
+    text-align: center;
+
+    &::after {
+      position: absolute;
+      top: 0;
+      display: block;
+      content: '';
+      height: 1px;
+      width: 100%;
+      background: radial-gradient(rgba(150, 150, 150, 0.6), transparent 80%);
+    }
 
     img {
       vertical-align: middle;
-      margin-right: 10px;
     }
 
     .owner {
       margin-left: 5px;
       color: #3486e2;
       cursor: pointer;
+      text-decoration: none;
+    }
+
+    .copyright {
+      margin-left: 10px;
+    }
+
+    .powered {
+      margin-left: 5px;
+    }
+
+    @media screen and (max-width: 720px) {
+      flex-direction: column;
+
+      .copyright,
+      .powered {
+        margin-top: 5px;
+        margin-left: 0;
+      }
     }
   }
 }

src/templates/labels.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { graphql, Link } from 'gatsby';
+import { graphql } from 'gatsby';
 
 import Layout from '@layouts/base';
 import useRepoLink from '@hooks/useRepoLink';
@@ -22,14 +22,14 @@ export default function BlogCategory(props: any) {
   return (
     <Layout className="labels-page" title={`${labelsInfo.name} | Labels`}>
       <div className="markdown-body">
-        <Link
-          to={labelsLink}
+        <a
+          href={labelsLink}
           className="labels-head"
           style={{ background: `#${labelsInfo.color}` }}
           target="_blank"
         >
           {labelsInfo.name}
-        </Link>
+        </a>
 
         {labelsInfo.description && (
           <div className="label-desc">{labelsInfo.description}</div>