Refactor: footer.js

MicroPasts · Dec 27, 2022 · b6732b2 · b6732b2
1 parent 8285317
commit b6732b2
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 47 deletions.
diff --git a/gatsby-browser.js b/gatsby-browser.js
@@ -1,5 +1,5 @@
 // You can delete this file if you're not using it
-
+import "./src/styles/override.scss"
 import "@popperjs/core/dist/umd/popper.min"
 import "bootstrap/dist/css/bootstrap.min.css"
 import "bootstrap/dist/js/bootstrap.min"

diff --git a/gatsby-config.js b/gatsby-config.js
@@ -21,6 +21,7 @@ module.exports = {
     siteUrl: `https://blog.micropasts.org`,
   },
   plugins: [
+    `gatsby-plugin-sass`,
     `gatsby-plugin-image`,
     {
       resolve: `gatsby-transformer-remark`,

diff --git a/src/components/layout.css b/src/components/layout.css
@@ -1,7 +1,7 @@
 :root {
   --border-radius: 4px;
   --color-text: #333;
-  --color-primary: #7026b9;
+  --color-primary: #1e0239;
   --color-code-bg: #fff4db;
   --color-code: #8a6534;
   --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
@@ -38,7 +38,6 @@ body {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   color: var(--color-text);
-  font-family: sans-serif;
   font-family: var(--font-sans);
   font-weight: normal;
   margin: 0;
@@ -47,7 +46,6 @@ body {
 a {
   background-color: transparent;
   color: var(--color-primary);
-  text-decoration: none;
   font-weight: 500;
   text-decoration: underline;
   text-decoration-thickness: 1.5px;
@@ -65,7 +63,6 @@ abbr[title] {
 }
 b,
 strong {
-  font-weight: inherit;
   font-weight: bolder;
 }
 dfn {

diff --git a/src/components/structure/authors.js b/src/components/structure/authors.js
@@ -7,8 +7,8 @@ import {Link} from "gatsby";
 const Authors = ({author}) => (
   <Row>
         {author && <Col md={12} className="mb-2">
-          {author.map((item, i) => (
-            <Link to={`/authors/${kebabCase(item)}/`} className="btn btn-dark mx-1 my-1 p-2 text-white"
+          Authored by:  {author.map((item, i) => (
+            <Link to={`/authors/${kebabCase(item)}/`} className="mx-1"
                   key={i}>{startCase(item)}</Link>
           ))}
         </Col>}

diff --git a/src/components/structure/footer.js b/src/components/structure/footer.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { Col, Container } from "react-bootstrap";
+import { Col, Container, Row } from "react-bootstrap";
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {
   faFacebook,
@@ -17,29 +17,33 @@ const Footer = () => {
       >
         <Container>
           <footer className="text-center text-lg-start text-white">
-            <section className="d-flex justify-content-between p-4">
-              <div className="me-5">
-                <span>Follow us:</span>
-              </div>
+            <section className="d-flex justify-content-between pt-4">
+              <Container>
+                <Row>
+                  <Col md={4} className="mb-4 mb-md-0">
+                    <span>Follow us:</span>
+                  </Col>
+                  <Col md={8} className="mb-4 mb-md-0">
+                    <a href="https://facebook.com/micropasts" className="text-white me-4"
+                       aria-label="Our facebook profile"><FontAwesomeIcon icon={faFacebook} size="2x" className="m-2" /></a>
+                    <a href="https://twitter.com/micropasts" className="text-white me-4"
+                       aria-label="Our twitter profile"><FontAwesomeIcon icon={faTwitter} size="2x" className="m-2"/></a>
+                    <a href="https://github.com/micropasts" className="text-white me-4"
+                       aria-label="Our GitHub account profile"><FontAwesomeIcon icon={faGithub} size="2x" className="m-2" /></a>
+                    <a href="https://www.youtube.com/@micropasts3076/" className="text-white me-4"
+                       aria-label="Our YouTube profile"><FontAwesomeIcon icon={faYoutube} size="2x" className="m-2" /></a>
+                    <a href="https://sketchfab.com/micropasts" className="text-white"
+                       aria-label="My Sketchfab account profile"><SketchfabIcon className="fa-2x m-2 svg-inline--fa" style={{ height:32, width: 32 }}/></a>
+                  </Col>
+                </Row>
+              </Container>
 
-              <div>
-                <a href="https://facebook.com/micropasts" className="text-white me-4"
-                   aria-label="Our facebook profile"><FontAwesomeIcon icon={faFacebook} size="2x" className="m-2" /></a>
-                <a href="https://twitter.com/micropasts" className="text-white me-4"
-                   aria-label="Our twitter profile"><FontAwesomeIcon icon={faTwitter} size="2x" className="m-2"/></a>
-                <a href="https://github.com/micropasts" className="text-white me-4"
-                   aria-label="Our GitHub account profile"><FontAwesomeIcon icon={faGithub} size="2x" className="m-2" /></a>
-                <a href="https://www.youtube.com/@micropasts3076/" className="text-white me-4"
-                   aria-label="Our YouTube profile"><FontAwesomeIcon icon={faYoutube} size="2x" className="m-2" /></a>
-                <a href="https://sketchfab.com/micropasts" className="text-white"
-                   aria-label="My Sketchfab account profile"><SketchfabIcon className="fa-2x m-2 svg-inline--fa" style={{ height:32, width: 32 }}/></a>
-              </div>
             </section>
 
             <section className="">
-              <div className="container text-center text-md-start mt-5">
-                <div className="row mt-3">
-                  <div className="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
+              <Container className="text-center text-md-start mt-5">
+                <Row className="mt-3">
+                  <Col md={3} lg={4} xl={3} className="cmx-auto mb-4">
                     <h6 className="text-uppercase fw-bold">MicroPasts</h6>
                     <hr className="mb-4 mt-0 d-inline-block mx-auto" />
                     <p>
@@ -49,7 +53,7 @@ const Footer = () => {
                       Join us on our mission to enable high quality digitally enabled
                       research into archaeology, history and heritage.
                     </p>
-                  </div>
+                  </Col>
 
                   <Col md={2} lg={2} xl={2} className="mx-auto mb-4">
                     <h6 className="text-uppercase fw-bold">Projects</h6>
@@ -72,8 +76,8 @@ const Footer = () => {
                     <p>Institute of Archaeology, 31-34 Gordon Square, London WC1H 0PY</p>
                     <p><a className={'text-white'} href={"mailto:[email protected]"}>[email protected]</a></p>
                   </Col>
-                </div>
-              </div>
+                </Row>
+              </Container>
             </section>
 
           </footer>

diff --git a/src/components/structure/logos.js b/src/components/structure/logos.js
@@ -5,47 +5,49 @@ import { Container, Col, Row } from "react-bootstrap";
 const Logos = () => {
   return (
     <>
-      <Col md={10} className="mx-auto pt-5">
-        <Row className="justify-content-center mb-4 ">
+      <Col md={10} className="mx-auto pt-2">
+        <Row className="justify-content-center mb-2">
           <Col md={2} sm={2} className="col-md-2 text-center mx-2">
             <a href="https://www.ucl.ac.uk/">
-              <StaticImage src={"../../images/logos/UCL-Logo.png"} alt={'UCL Logo'} className="img-fluid mx-auto "
-                           width={200} placeholder={'NONE'}/>
+              <StaticImage src={"../../images/logos/UCL-Logo.png"} alt={'UCL Logo'} className="img-fluid mx-auto mb-3"
+                           width={180} height={60} placeholder={'NONE'}/>
             </a>
           </Col>
           <Col md={2} sm={2} className="text-center mx-2">
             <a href="https://www.ed.ac.uk">
               <StaticImage src={"../../images/logos/edinburgh.png"} alt={'Edinburgh University logo'}
-                           className="img-fluid mx-auto " height={100} placeholder={'NONE'}/>
+                           className="img-fluid mx-auto mb-3" height={70} width={70} placeholder={'NONE'}/>
             </a>
           </Col>
           <Col md={2} sm={2} className="text-center mx-2">
             <a href="https://www.stir.ac.uk">
               <StaticImage src={"../../images/logos/university-of-stirling.png"} alt={'Stirling University logo'}
-                           className="img-fluid mx-auto" height={100} placeholder={'NONE'}/>
+                           className="img-fluid mx-auto mb-3"  width={160} placeholder={'NONE'}/>
             </a>
           </Col>
           <Col md={2} sm={2} className="text-center mx-2">
             <a href="https://www.britishmuseum.org">
-              <StaticImage src={"../../images/logos/british-museum-logo-vector.png"} alt={'British Museum  logo'}
-                           className="img-fluid mx-auto" height={100} placeholder={'NONE'}/>
+              <StaticImage src={"../../images/logos/british-museum-logo-vector.png"} alt={'British Museum logo'}
+                           className="img-fluid mx-auto mb-3" width={160} placeholder={'NONE'}/>
             </a>
           </Col>
           <Col md={2} sm={2} className="text-center mx-2">
             <a href="https://www.st-edmunds.cam.ac.uk/">
               <StaticImage src={"../../images/logos/Gitlab-Eddies.png"} alt={'St Edmund\'s college logo'}
-                           className="img-fluid mx-auto" height={100} placeholder={'NONE'}/>
+                           className="img-fluid mx-auto mb-3" height={70} width={70} placeholder={'NONE'}/>
             </a>
           </Col>
         </Row>
       </Col>
-      <Container fluid className="bg-white py-3">
-        <Col md={2} sm={2} className="mx-auto">
-          <a href="https://ahrc.ukri.org/">
-            <StaticImage src={"../../images/logos/AHRC_new.jpg"} alt={"\"AHRC logo"} className="img-fluid mx-auto"
-                         height={100} placeholder={'NONE'} />
-          </a>
-        </Col>
+      <Container fluid className="bg-white py-3 mb-3  ">
+        <Row className={'justify-content-center'}>
+          <Col md={2} sm={2} className="text-center mx-2">
+            <a href="https://ahrc.ukri.org/">
+              <StaticImage src={"../../images/logos/AHRC_new.jpg"} alt={"AHRC logo"} className="img-fluid mx-auto text-center"
+                           width={300} placeholder={'NONE'} backgroundColor={'white'} />
+            </a>
+          </Col>
+        </Row>
       </Container>
     </>
   );

diff --git a/src/styles/override.scss b/src/styles/override.scss
@@ -0,0 +1,4 @@
+$enable-smooth-scroll: false;
+:root {
+  scroll-behavior: auto !important;
+}
diff --git a/src/templates/authors.js b/src/templates/authors.js
@@ -14,7 +14,7 @@ const Authors = ({pageContext, data}) => {
   const {edges, totalCount} = data.allMarkdownRemark
   const tagHeader = `${totalCount} post${
     totalCount === 1 ? "" : "s"
-  } authored by "${startCase(author)}"`
+  } authored by ${startCase(author)}`
 
   return (
     <Layout>