styles fix, reduced size of pages

.github/workflows/main.yml

@@ -21,7 +21,7 @@ jobs:
       uses: appleboy/scp-action@master
       with:
         host: ${{ secrets.HOST }}
-        username: ${{ secrets.WEBMASTER_USERNAME_NEW }}
-        password: ${{ secrets.WEBMASTER_PASSWORD_NEW }}
+        username: ${{ secrets.WEBMASTER_USERNAME }}
+        password: ${{ secrets.WEBMASTER_PASSWORD }}
         source: "public/*"
         target: "/var/www/html_new/"

gatsby-ssr.js

@@ -0,0 +1,17 @@
+export const onPreRenderHTML = ({getHeadComponents}) => {
+    if (process.env.NODE_ENV !== 'production')
+        return
+
+    getHeadComponents().forEach(el => {
+        // remove inline css
+        if (el.type === 'style') {
+            el.type = 'link'
+            el.props['href'] = el.props['data-href']
+            el.props['rel'] = 'stylesheet'
+            el.props['type'] = 'text/css'
+
+            delete el.props['data-href']
+            delete el.props['dangerouslySetInnerHTML']
+        }
+    })
+}

package.json

@@ -9,15 +9,13 @@
     "gatsby": "^2.18.12",
     "gatsby-awesome-pagination": "^0.3.5",
     "gatsby-cli": "^2.8.22",
-    "gatsby-image": "^2.2.34",
     "gatsby-plugin-intl": "^0.3.2",
     "gatsby-plugin-manifest": "^2.2.31",
     "gatsby-plugin-netlify-cms": "^4.1.33",
-    "gatsby-plugin-react-helmet": "^3.1.16",
+    "gatsby-plugin-react-helmet": "^3.2.0",
     "gatsby-plugin-sharp": "^2.3.10",
     "gatsby-remark-images": "^3.1.39",
     "gatsby-remark-katex": "^3.1.20",
-    "gatsby-remark-normalize-paths": "^1.0.0",
     "gatsby-remark-relative-images": "^0.2.3",
     "gatsby-source-filesystem": "^2.1.43",
     "gatsby-source-graphql": "^2.1.29",
@@ -25,36 +23,24 @@
     "gatsby-transformer-sharp": "^2.3.7",
     "html-react-parser": "^0.10.2",
     "katex": "^0.10.0",
+    "mini-css-extract-plugin": "^0.9.0",
     "netlify-cms-app": "^2.10.1",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-bootstrap": "^1.0.0-beta.16",
-    "react-dom": "^16.12.0",
     "react-helmet": "^5.2.1",
-    "react-use": "^13.21.0",
     "vertical-timeline-component-for-react": "^1.0.6"
   },
   "devDependencies": {
-    "@types/jquery": "^3.3.31",
     "autoprefixer": "^9.7.3",
-    "babel-loader": "^8.0.6",
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^5.1.1",
-    "css-loader": "^3.4.0",
     "file-loader": "^5.0.2",
     "html-webpack-plugin": "^3.2.0",
     "imagemin-webpack-plugin": "^2.4.2",
     "img-loader": "^3.0.1",
-    "mini-css-extract-plugin": "^0.9.0",
-    "node-sass": "^4.13.1",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
-    "postcss-loader": "^3.0.0",
-    "prettier": "^1.19.1",
-    "react-hot-loader": "^4.12.18",
-    "sass-loader": "^8.0.0",
-    "style-loader": "^1.1.2",
     "uglifyjs-webpack-plugin": "^2.2.0",
-    "webpack": "^4.41.5",
+    "webpack": "^4.42.0",
     "webpack-cli": "^3.3.10",
     "webpack-dev-server": "^3.10.1"
   },

src/components/layout.js

@@ -6,7 +6,6 @@ import Navbar from "./navBar"
 import Footer from "./footer"
 import SEO from "./seo"
 
-import "../styles/bootstrap.min.css"
 import "../styles/layout.css"
 import "../styles/main.css"
 import "katex/dist/katex.min.css"

src/pages/projects/math.js

@@ -31,7 +31,7 @@ const SoftwarePage = ({ data }) => {
                 const link = node.frontmatter.shortTitle;
                 const id = node.frontmatter.id;
                 return(
-                    <li><Link to={`projects/math#${id}`}>{link}</Link></li>
+                    <li><Link to={`/projects/math#${id}`}>{link}</Link></li>
                 )
             })}
             </ul>

src/pages/projects/software.js

@@ -31,7 +31,7 @@ const SoftwarePage = ({ data }) => {
                 const link = node.frontmatter.shortTitle;
                 const id = node.frontmatter.id;
                 return(
-                    <li><Link to={`projects/software#${id}`}>{link}</Link></li>
+                    <li><Link to={`/projects/software#${id}`}>{link}</Link></li>
                 )
             })}
             </ul>

src/styles/main.css

@@ -42,10 +42,11 @@ h2 a:visited { color: rgb(0,86,179) }
   border-radius: 5px 5px 0px 0px; }
 
 .aboutButton { 
-  background-color: rgb(247,247,247); 
+  background-color: rgb(233,236,239); 
   padding-top: 5px;
   padding-bottom: 25px;
-  margin-bottom: 25px;
+  margin-bottom: 0px;
+  margin-bottom: 10px;
   border-bottom: 1.5px solid rgb(219, 219, 219); 
   border-left: 1.5px solid rgb(219, 219, 219); 
   border-right: 1.5px solid rgb(219, 219, 219); }