use sass to group css rules and asign name to color used in the website

yuhaoyann · Sep 28, 2021 · 8bbff0e · 8bbff0e
1 parent c76e3ef
commit 8bbff0e
Show file tree

Hide file tree

Showing 17 changed files with 427 additions and 49 deletions.
diff --git a/package.json b/package.json
@@ -6,7 +6,8 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "start": "node server/index.js",
-    "local": "./node_modules/.bin/nodemon --watch server -e js server/index.js"
+    "local": "./node_modules/.bin/nodemon --watch server -e js server/index.js",
+    "sass-watch": "sass sass:public/styles --watch --poll --no-source-map"
   },
   "author": "Lighthouse Labs",
   "license": "ISC",

diff --git a/public/styles/article.css b/public/styles/article.css
@@ -5,21 +5,18 @@ article {
   border-width: 5px;
   margin-top: 2em;
 }
-
-article header{
+article header {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   margin: 0.5em;
 }
-
-article footer{
+article footer {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   margin: 0.5em;
 }
-
 article img {
   display: flex;
   vertical-align: middle;
@@ -44,7 +41,7 @@ article img {
 .tweet-header-handle {
   display: flex;
   align-items: center;
-  color:rgb(142, 164, 172);
+  color: #8ea4ac;
   font-family: sans-serif;
   font-weight: 400;
   margin: 0em;
@@ -75,5 +72,5 @@ article img {
 }
 
 .tweet-footer-logo {
-  color: rgb(45, 19, 68);
-}
+  color: #2d1344;
+}
diff --git a/public/styles/header.css b/public/styles/header.css
@@ -1,8 +1,8 @@
 #header-main {
   height: 400px;
   width: 100%;
-  position:relative;
-  background-color:rgb(201, 153, 64);
+  position: relative;
+  background-color: #c99940;
   background-image: url("https://www.transparenttextures.com/patterns/asfalt-dark.png");
 }
 
@@ -23,4 +23,4 @@
   margin-top: 0px;
   margin-bottom: 0px;
   color: white;
-}
+}
diff --git a/public/styles/layout.css b/public/styles/layout.css
@@ -6,19 +6,19 @@
 html {
   box-sizing: border-box;
 }
+
 *, *:before, *:after {
   box-sizing: inherit;
 }
 
 /*
  * Global layout stuff
  */
-
 body {
   color: #545149;
   background-color: #f4f1ec;
   font-size: 24px;
-  font-family: 'Source Sans Pro', sans-serif;
+  font-family: "Source Sans Pro", sans-serif;
 }
 
 main {
@@ -30,7 +30,6 @@ main {
   background-color: #f4f1ec;
 }
 
-
 /*
  * Additional CSS can be defined below or in other CSS files, as per instructions
- */
+ */
diff --git a/public/styles/main.css b/public/styles/main.css
@@ -1,7 +1,7 @@
 .main-circle-arrow {
   display: flex;
   position: fixed;
-  justify-content:center;
+  justify-content: center;
   align-items: center;
   right: 2em;
   bottom: 2em;
@@ -22,4 +22,4 @@
 
 #main-hide {
   display: none;
-}
+}
diff --git a/public/styles/nav.css b/public/styles/nav.css
@@ -1,21 +1,18 @@
 nav {
   height: 120px;
   width: 100%;
-  /* background-color: #4056A1; */
   color: white;
   position: absolute;
   top: 0;
   z-index: 1;
-  background-color:rgb(201, 153, 64);
+  background-color: #c99940;
   background-image: url("https://www.transparenttextures.com/patterns/asfalt-dark.png");
 }
-
 nav span {
-  font-family: 'Bungee', cursive;
+  font-family: "Bungee", cursive;
   padding-left: 1.5em;
   padding-right: 1.5em;
 }
-
 nav div {
   display: flex;
   flex-direction: column;
@@ -57,9 +54,9 @@ nav div {
   color: white;
   font-family: sans-serif;
   font-weight: 200;
-  background-color: rgb(201, 153, 64);
+  background-color: #c99940;
   border: solid;
-  border-color:rgb(201, 153, 64);
+  border-color: #c99940;
   background-image: url("https://www.transparenttextures.com/patterns/asfalt-dark.png");
 }
 
@@ -73,4 +70,4 @@ nav div {
 
 nav i {
   color: red;
-}
+}
diff --git a/public/styles/new-tweets.css b/public/styles/new-tweets.css
@@ -1,28 +1,27 @@
-#tweet-new-form {
-  display: none;
-}
-
 main section form {
   display: flex;
   flex-direction: column;
   margin: 0.5em;
 }
-
 main section form label {
   margin-top: 2em;
   font-family: sans-serif;
-  font-weight: 600
+  font-weight: 600;
 }
 
 .new-tweet {
   display: flex;
   flex-direction: column;
 }
 
+#tweet-new-form {
+  display: none;
+}
+
 #tweet-text {
   padding-left: 0.5em;
   padding-right: 0.5em;
-  padding-bottom: 0.5emem;
+  padding-bottom: 0.5em;
   padding-top: 0em;
   border-top-width: 0px;
   border-left-width: 0px;
@@ -47,7 +46,7 @@ main section form label {
 #tweet-button button {
   background-color: #4056A1;
   color: white;
-  font-family: 'Bungee', cursive;
+  font-family: "Bungee", cursive;
   padding-top: 0.1em;
   padding-bottom: 0.1em;
   padding-left: 0.5em;
@@ -57,7 +56,7 @@ main section form label {
 }
 
 #tweet-button output {
-  font-family: 'Bungee', cursive;
+  font-family: "Bungee", cursive;
 }
 
 #error-message {

diff --git a/public/styles/responsive-design.css b/public/styles/responsive-design.css
@@ -1,5 +1,13 @@
 @media only screen and (min-width: 1024px) {
-  nav {
+  html {
+    width: 100%;
+  }
+  html main {
+    width: 55%;
+    margin-right: 2em;
+    float: right;
+  }
+  html nav {
     background-color: #4056A1;
     background-image: none;
   }
@@ -10,10 +18,6 @@
     border-color: #4056A1;
   }
 
-  html {
-    width: 100%;
-  }
-
   #header-main {
     height: 300px;
     margin: 2em;
@@ -30,10 +34,4 @@
     display: flex;
     margin-top: 5em;
   }
-
-  main {
-    width: 55%;
-    margin-right: 2em;
-    float: right;
-  }
-}
+}
diff --git a/sass/_base.scss b/sass/_base.scss
@@ -0,0 +1,5 @@
+$main-color-yellow: rgb(201, 153, 64);
+$main-color-black: #545149;
+$main-color-white: #f4f1ec;
+$main-color-blue: #4056A1;
+$main-back-texture: url("https://www.transparenttextures.com/patterns/asfalt-dark.png");
diff --git a/sass/article.scss b/sass/article.scss
@@ -0,0 +1,79 @@
+article {
+  display: flex;
+  flex-direction: column;
+  border-style: solid;
+  border-width: 5px;
+  margin-top: 2em;
+
+  header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin: 0.5em;
+  }
+
+  footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin: 0.5em;
+  }
+
+  img {
+    display: flex;
+    vertical-align: middle;
+    height: 50px;
+    width: 50px;
+  }
+}
+
+.tweet-header-left {
+  display: flex;
+  align-content: center;
+}
+
+.tweet-header-name {
+  display: flex;
+  align-items: center;
+  font-family: sans-serif;
+  font-weight: 100;
+  margin: 0em;
+  padding-left: 0.5em;
+}
+
+.tweet-header-handle {
+  display: flex;
+  align-items: center;
+  color:rgb(142, 164, 172);
+  font-family: sans-serif;
+  font-weight: 400;
+  margin: 0em;
+  padding-right: 0.3em;
+}
+
+.tweet-article-content {
+  border-style: solid;
+  border-top-width: 0px;
+  border-left-width: 0px;
+  border-right-width: 0px;
+  border-bottom-width: 5px;
+  margin: 0.5em;
+  font-family: sans-serif;
+  font-weight: 400;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  padding-bottom: 1.2em;
+  padding-top: 0em;
+  word-wrap: break-word;
+}
+
+.tweet-footer-time {
+  font-family: sans-serif;
+  font-weight: 100;
+  font-size: 0.8em;
+  margin-left: 0.7em;
+}
+
+.tweet-footer-logo {
+  color: rgb(45, 19, 68);
+}
diff --git a/sass/header.scss b/sass/header.scss
@@ -0,0 +1,28 @@
+@use 'base';
+
+#header-main {
+  height: 400px;
+  width: 100%;
+  position: relative;
+  background-color: base.$main-color-yellow;
+  background-image: base.$main-back-texture;
+}
+
+#header-element {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+#header-avator {
+  padding-top: 120px;
+  width: 150px;
+  height: auto;
+}
+
+#header-word {
+  margin-top: 0px;
+  margin-bottom: 0px;
+  color: white;
+}