bigger icons

Author: drjonnicholson

.eslintignore

@@ -4,4 +4,3 @@ reports
 .env.*
 *.log
 package-lock.json
-webpack.config.js

src/components/About/About.module.css

@@ -1,5 +1,5 @@
 @value vars: "../../variables.module.css";
-@value containerWidth from vars;
+@value containerwidth from vars;
 
 .blurb {
   composes: container block from global;

src/components/Acclaim/Acclaim.module.css

@@ -1,5 +1,5 @@
 @value vars: "../../variables.module.css";
-@value surface100, surface300, surface500, surfacemixed100, containerWidth from vars;
+@value surface100, surface300, surface500, surfacemixed100, containerwidth from vars;
 
 .breakout {
   border-top: 1px solid surface100;
@@ -9,7 +9,7 @@
 
 .acclaim {
   composes: container from global;
-  padding: 1em 2em;
+  padding: 1em 2em !important;
 }
 
 .acclaim > ul {
@@ -18,7 +18,7 @@
   justify-content: space-between;
   padding: 10px 20px;
   width: 100%;
-  max-width: containerWidth;
+  max-width: containerwidth;
   overflow-x: auto;
   list-style: none;
 }

src/components/Skills/Skills.jsx

@@ -20,7 +20,7 @@ const Skills = () => {
             <li key={text}>
               <Icon
                 name={icon}
-                size="2em"
+                size="3em"
                 className={styles.skill}
                 title={text}
                 data-text={text}

src/components/Skills/Skills.module.css

@@ -1,5 +1,5 @@
 @value vars: "../../variables.module.css";
-@value primary300, surface100, surface300, surface500, surfacemixed100, containerWidth from vars;
+@value primary300, surface100, surface300, surface500, surfacemixed100, containerwidth from vars;
 
 .breakout {
   border-top: 1px solid surface100;
@@ -9,7 +9,7 @@
 
 .skills {
   composes: container from global;
-  padding: 1em 2em;
+  padding: 1em 2em !important;
 }
 
 .skills > ul {
@@ -18,7 +18,7 @@
   justify-content: space-between;
   padding: 10px 20px;
   width: 100%;
-  max-width: containerWidth;
+  max-width: containerwidth;
   overflow-x: auto;
   list-style: none;
 }

src/components/Socials/SocialLink.jsx

@@ -5,7 +5,7 @@ const SocialLink = ({ type, title, href }) => {
   return (
     <li>
       <a href={href} rel="noopener noreferrer" title={title}>
-        {<Icon name={type} size="2em" color="black" title={title} />}
+        {<Icon name={type} size="3em" color="black" title={title} />}
       </a>
     </li>
   )

src/components/Socials/Socials.module.css

@@ -1,5 +1,5 @@
 @value vars: "../../variables.module.css";
-@value surface100, surface400, containerWidth from vars;
+@value surface100, surface400, containerwidth from vars;
 
 .socials {
   display: flex;
@@ -16,7 +16,7 @@
   justify-content: space-between;
   padding: 10px 20px;
   width: 100%;
-  max-width: containerWidth;
+  max-width: containerwidth;
   overflow-x: auto;
   list-style: none;
 }

src/index.module.css

@@ -1,7 +1,7 @@
 @import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
 
 @value vars: "./variables.module.css";
-@value surface600, surface000, containerWidth from vars;
+@value surface600, surface000, containerwidth from vars;
 
 /*
 @import url(https://fonts.googleapis.com/css?family=Muli:200,300,400,700);
@@ -99,7 +99,7 @@ strong {
   margin-right: auto;
   margin-left: auto;
   padding: 0 2em;
-  max-width: containerWidth;
+  max-width: containerwidth;
 }
 
 :global .block {

src/variables.module.css

@@ -24,4 +24,4 @@
 @value surfacemixed600: #9ba3a2;
 
 /** Sizes */
-@value containerWidth: 1000px;
+@value containerwidth: 1000px;