Issue 10 general theming (#14)

* general theming and preliminary design system setup * linting * fix spec
AnalogStudiosRI · Jul 30, 2021 · bd4e1c3 · bd4e1c3
1 parent a44e82f
commit bd4e1c3
Show file tree

Hide file tree

Showing 11 changed files with 491 additions and 38 deletions.
diff --git a/greenwood.config.js b/greenwood.config.js
@@ -1,4 +1,5 @@
 const rollupPluginAnalyzer = require('rollup-plugin-analyzer');
+const pluginPostCss = require('@greenwood/plugin-postcss');
 const rollupPluginVisualizer = require('rollup-plugin-visualizer').default;
 
 module.exports = {
@@ -8,28 +9,31 @@ module.exports = {
       '/api': 'https://www.analogstudios.net'
     }
   },
-  plugins: [{
-    type: 'rollup',
-    name: 'rollup-plugin-analyzer',
-    provider: () => {
-      return [
-        rollupPluginAnalyzer({
-          summaryOnly: true,
-          filter: (module) => {
-            return !module.id.endsWith('.html');
-          }
-        })
-      ];
+  plugins: [
+    pluginPostCss(),
+    {
+      type: 'rollup',
+      name: 'rollup-plugin-analyzer',
+      provider: () => {
+        return [
+          rollupPluginAnalyzer({
+            summaryOnly: true,
+            filter: (module) => {
+              return !module.id.endsWith('.html');
+            }
+          })
+        ];
+      }
+    }, {
+      type: 'rollup',
+      name: 'rollup-plugin-visualizer',
+      provider: () => {
+        return [
+          rollupPluginVisualizer({
+            filename: 'reports/stats.html'
+          })
+        ];
+      }
     }
-  }, {
-    type: 'rollup',
-    name: 'rollup-plugin-visualizer',
-    provider: () => {
-      return [
-        rollupPluginVisualizer({
-          filename: 'reports/stats.html'
-        })
-      ];
-    }
-  }]
+  ]
 };
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     "test:tdd": "yarn test --watch"
   },
   "dependencies": {
+    "bootstrap": "4.0.0-alpha.4",
     "lit": "^2.0.0-rc.2",
     "lit-redux-router": "~0.19.0",
     "pwa-helpers": "^0.9.1",
@@ -42,6 +43,7 @@
     "@babel/core": "^7.14.6",
     "@esm-bundle/chai": "^4.3.4",
     "@greenwood/cli": "^0.14.2",
+    "@greenwood/plugin-postcss": "^0.14.2",
     "@ls-lint/ls-lint": "^1.9.2",
     "@storybook/addon-actions": "^6.3.2",
     "@storybook/addon-essentials": "^6.3.2",
@@ -53,6 +55,7 @@
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
     "eslint": "^6.8.0",
+    "postcss-nested": "^4.1.2",
     "rimraf": "^2.6.3",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-visualizer": "^5.5.2",

diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+    require('postcss-nested')
+  ]
+};
diff --git a/src/assets/view-banner.png b/src/assets/view-banner.png
diff --git a/src/components/header/header.js b/src/components/header/header.js
@@ -8,15 +8,15 @@ class HeaderComponent extends LitElement {
   static get styles() {
     return css`
       h1 {
-        color: var(--primary);
+        color: var(--color-font-secondary);
         text-align: center;
       }`;
   }
 
   render() {
     return html`
       <header>
-        <h1>Welcome to Analog Studios!</h1>
+        <h1>Welcome to Analog Studios</h1>
       </header>
     `;
   }

diff --git a/src/components/header/header.spec.js b/src/components/header/header.spec.js
@@ -32,7 +32,7 @@ describe('Header Component', () => {
     it('should have expected greeting text', () => {
       const text = header.shadowRoot.querySelector('h1').textContent;
 
-      expect(text).equal('Welcome to Analog Studios!');
+      expect(text).equal('Welcome to Analog Studios');
     });
   });
 

diff --git a/src/index.html b/src/index.html
@@ -7,6 +7,8 @@
     <meta property="og:title" content="Analog Studios" />
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://www.analogstudios.nety/" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700">
+
     <!-- <meta property="og:image" content="https://s3.amazonaws.com/hosted.contributary.community/media/contributary-logo-invert.png" /> -->
     <!-- <meta property="og:description" content="A project for helping connect open source with the open source community." />
     <link rel="shortcut icon" href="/assets/favicon-bg-fill.png"/>
@@ -22,19 +24,21 @@
 
   <body>
 
+    <div class="container">
       <section>
         <app-header></app-header>
       </section>
 
       <section>
-        <main>
+        <main class="router-outlet">
           <app-router-outlet></app-router-outlet>
         </main>
       </section>
 
       <section>
         <app-footer></app-footer>
       </section>
+    </div>
 
   </body>
 </html>
diff --git a/src/routes/home.js b/src/routes/home.js
diff --git a/src/styles.css b/src/styles.css
@@ -1,9 +1,57 @@
-* {
-  background-color: var(--secondary);
+body {
+  margin: 0;
+  background-image: url("./assets/view-banner.png");
+  background-size: 100% 377px;
+  background-color: var(--color-secondary);
+  background-attachment: fixed;
+  background-repeat: no-repeat;
+}
+
+h1 {
+  font-size: 2rem;
+  letter-spacing: 4px;
+}
+
+h2 {
+  font-size: 1.75rem;
+}
+
+h3 {
+  font-size: 1.5rem;
+}
+
+h4 {
+  font-size: 1.25rem;
+}
+
+h2,
+h3,
+h4 {
+  letter-spacing: 2px;
 }
 
 main {
-  margin: 0 auto;
-  width: 80%;
-  text-align: center;
+  color: var(--color-dark);
+  font-family: var(--font-family-primary);
+  font-size: 0.85rem;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  background-color: transparentize(var(----color-secondary) 0.0375);
+  box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.5);
+  min-height: 1000px;
+
+  & a {
+    color: var(--creme);
+  }
+
+  & .as-link {
+    cursor: pointer;
+    text-decoration: underline;
+    color: var(--color-dark);
+  }
+
+  & .router-outlet {
+    margin-top: 20px;
+    display: block;
+  }
 }
diff --git a/src/theme.css b/src/theme.css
@@ -1,4 +1,21 @@
+@import "../node_modules/bootstrap/dist/css/bootstrap.css";
+
 :root {
-  --primary: gray;
-  --secondary: #a48f65;
+  /* raw tokens */
+  --white: #efefef;
+  --black: #1a1a1a;
+  --gold: #a48f65;
+  --creme: #f1e7d3;
+  --blue: #316291;
+
+  /* design system - colors */
+  --color-primary: var(--black);
+  --color-secondary: var(--gold);
+  --color-light: var(--white);
+  --color-dark: var(--black);
+  --color-font-primary: var(--color-primary);
+  --color-font-secondary: var(--blue);
+
+  /* design system - typography */
+  --font-family-primary: 'Montserrat', sans-serif;
 }