CSS changes

georgebutler · Aug 1, 2019 · 610bb34 · 610bb34
1 parent b315bc8
commit 610bb34
Show file tree

Hide file tree

Showing 14 changed files with 310 additions and 91 deletions.
diff --git a/README.md b/README.md
@@ -1 +1 @@
-# Dead Matter
+# Dead Matter
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
   "devDependencies": {
     "autoprefixer": "^9.6.1",
     "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^5.0.4",
     "css-loader": "^3.1.0",
     "extract-loader": "^3.1.0",
     "file-loader": "^4.1.0",
@@ -29,4 +30,4 @@
     "webpack-cli": "^3.3.6",
     "webpack-dev-server": "^3.7.2"
   }
-}
+}
diff --git a/postcss.config.js b/postcss.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-    plugins: {
-        'autoprefixer': {}
-    }
-}
+  plugins: {
+    autoprefixer: {}
+  }
+};
diff --git a/src/assets/img/DMLogo_Color.png b/src/assets/img/DMLogo_Color.png
diff --git a/src/index.html b/src/index.html
@@ -1,18 +1,37 @@
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title><%= htmlWebpackPlugin.options.title %></title>
-    <link rel="stylesheet" href="./static/main.bundle.css">
-</head>
-
-<body>
-    <h1>DeadMatter</h1>
-    <h3>A rogue-lite that aims to quench the community’s thirst for a title that properly balances survival mechanics
-        with gameplay. Check out the latest development vlogs or keep scrolling for more information.</h3>
-</body>
+    <link rel="stylesheet" href="./static/main.bundle.css" />
+  </head>
 
-</html>
+  <body>
+    <div class="header">
+      <div class="header-content">
+        <div class="container">
+          <img src="./static/img/DMLogo_Color.png" alt="Dead Matter" />
+          <div class="subtitle">
+            A rogue-lite that aims to quench the community’s thirst for a title
+            that properly balances survival mechanics with gameplay.
+          </div>
+          <div class="buttons">
+            <button>Check out the latest Development Vlogs</button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="section">
+      <div class="container">
+        This is a section
+      </div>
+    </div>
+    <div class="section">
+      <div class="container">
+        This is a section
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/src/js/index.js b/src/js/index.js
@@ -1 +1 @@
-import "../scss/main.scss"
+import "../scss/main.scss";
diff --git a/src/scss/_button.scss b/src/scss/_button.scss
@@ -0,0 +1,19 @@
+button {
+  background: $color-primary;
+  border-radius: $border-radius;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 1rem;
+  padding: 1rem 2rem;
+  transition: background $transition-type;
+
+  &:hover {
+    background: lighten($color-primary, 10%);
+  }
+
+  &:focus {
+    outline: 0;
+  }
+}
diff --git a/src/scss/_header.scss b/src/scss/_header.scss
@@ -0,0 +1,19 @@
+.header {
+  height: 100vh;
+
+  .title,
+  .subtitle {
+    text-transform: uppercase;
+  }
+
+  .subtitle {
+    font-size: 1.2rem;
+    max-width: 600px;
+    margin: 0 auto;
+    margin-bottom: 6rem;
+  }
+}
+
+.header-content {
+  transform: translateY(30%);
+}
diff --git a/src/scss/_section.scss b/src/scss/_section.scss
@@ -0,0 +1,8 @@
+.section {
+  padding: 1rem 0;
+  background: $color-background;
+
+  &:nth-child(odd) {
+    background: lighten($color-background, 10%);
+  }
+}
diff --git a/src/scss/_typography.scss b/src/scss/_typography.scss
@@ -1,15 +1,7 @@
-@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');
+@import url("https://fonts.googleapis.com/css?family=Oswald&display=swap");
 
 body {
-    font-family: 'Oswald', sans-serif;
-    font-size: 24px;
+  font-family: "Oswald", sans-serif;
+  font-size: 24px;
+  text-align: center;
 }
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    text-transform: uppercase;
-}
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
@@ -0,0 +1,5 @@
+$color-background: #111111;
+$color-foreground: #ffffff;
+$color-primary: #963232;
+$transition-type: 0.1s ease-out;
+$border-radius: 0.1rem;
diff --git a/src/scss/main.scss b/src/scss/main.scss
@@ -1,8 +1,30 @@
+@import "variables";
 @import "typography";
+@import "header";
+@import "button";
+@import "section";
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
 
 body {
-    background: #111;
-    color: #fff;
-    margin: 0;
-    padding: 0;
-}
+  background: $color-background;
+  color: $color-foreground;
+  margin: 0;
+  padding: 0;
+  overflow: hidden scroll;
+}
+
+img {
+  width: 100%;
+  vertical-align: middle;
+  border-style: none;
+}
+
+.container {
+  max-width: 900px;
+  margin: auto;
+}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		import "../scss/main.scss"
		import "../scss/main.scss";