Simplified landing page design and content.

botwiki · Apr 13, 2020 · 5aa9b8e · 5aa9b8e
1 parent af4d96a
commit 5aa9b8e
Show file tree

Hide file tree

Showing 10 changed files with 10,934 additions and 6,850 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,18 +4,19 @@
   "description": "Join the Botmakers community on Slack!",
   "main": "server.js",
   "dependencies": {
-    "body-parser": "^1.18.3",
-    "express": "^4.16.3",
+    "body-parser": "^1.19.0",
+    "express": "^4.17.1",
     "express-handlebars": "^2.0.1",
     "gulp": "^3.9.0",
     "gulp-cache": "^0.1.11",
     "gulp-livereload": "^1.5.0",
     "gulp-rename": "^1.2.0",
     "hbs": "^3.0.1",
-    "request": "^2.88.0"
+    "natives": "^1.1.6",
+    "request": "^2.88.2"
   },
   "devDependencies": {
-    "browser-sync": "^2.24.6",
+    "browser-sync": "^2.26.7",
     "connect-livereload": "^0.4.0",
     "gifsicle": "^3.0.4",
     "gulp": "^3.6.2",
@@ -29,7 +30,7 @@
     "gulp-less": "^1.3.9",
     "gulp-livereload": "^1.5.0",
     "gulp-minify-css": "^0.3.13",
-    "gulp-nodemon": "^2.2.1",
+    "gulp-nodemon": "^2.5.0",
     "gulp-notify": "^1.8.0",
     "gulp-rename": "^1.2.0",
     "gulp-sourcemaps": "^1.12.1",
@@ -40,7 +41,7 @@
     "imagemin-pngquant": "^5.0.0",
     "jpegtran-bin": "^3.2.0",
     "optipng-bin": "^4.0.0",
-    "pngquant-bin": "^5.0.0",
+    "pngquant-bin": "^5.0.2",
     "tiny-lr": "0.0.7"
   },
   "scripts": {

diff --git a/public/css/styles.1.28.min.css b/public/css/styles.1.28.min.css
diff --git a/public/css/styles.1.29.css b/public/css/styles.1.29.css
@@ -77,7 +77,7 @@ header .emoji {
   top: 50%;
   width: 9999px;
   height: 1px;
-  background: #170c0c;
+  background: rgba(57, 46, 46, 0.5);
 }
 .strike span:before {
   right: 100%;
@@ -206,7 +206,7 @@ twitterwidget {
   max-width: 90% !important;
 }
 footer {
-  border-top: 4px dashed #392e2e;
+  border-top: 4px dashed rgba(57, 46, 46, 0.5);
   font-size: 0.8em;
   font-weight: normal;
   margin: 0 auto;

diff --git a/public/css/styles.1.29.min.css b/public/css/styles.1.29.min.css
diff --git a/public/css/styles.1.28.css → public/css/styles.1.30.css b/public/css/styles.1.28.css → public/css/styles.1.30.css
@@ -10,7 +10,7 @@
 html,
 body {
   font-family: "Source Serif Pro", serif;
-  color: #170c0c;
+  color: #2b0940;
   background: #9156b7;
   font-size: 1.2em;
   margin: 0;
@@ -22,15 +22,13 @@ body {
   min-height: 100%;
 }
 header,
-section,
-footer {
+section {
   width: 95%;
   margin: 0 auto;
 }
 @media (max-width: 800px) {
   header,
-  section,
-  footer {
+  section {
     width: 100%;
   }
 }
@@ -62,7 +60,8 @@ header .emoji {
   text-align: center;
   overflow: hidden;
   white-space: nowrap;
-  width: 460px;
+  width: 80%;
+  max-width: 460px;
   margin: 0 auto;
 }
 .strike span {
@@ -76,7 +75,7 @@ header .emoji {
   top: 50%;
   width: 9999px;
   height: 1px;
-  background: #170c0c;
+  background: rgba(57, 46, 46, 0.5);
 }
 .strike span:before {
   right: 100%;
@@ -104,7 +103,7 @@ section#content {
   position: relative;
 }
 section#content div#content-inner {
-  max-width: 1200px;
+  max-width: 900px;
   margin: 0 auto;
 }
 form,
@@ -137,32 +136,32 @@ button {
   right: 10px;
   padding: 10px 20px;
   text-decoration: none;
-  background-color: #170c0c;
+  background-color: #2b0940;
   color: #fff;
 }
 .btn-login:hover {
   color: #fff;
-  background-color: #281d1d;
+  background-color: #3c1a51;
 }
 .btn-login,
 .btn-login:hover {
   -webkit-transition: background-color 0.1s;
   transition: background-color 0.1s;
 }
 input {
-  border: 5px solid #170c0c;
+  border: 5px solid #2b0940;
   float: none;
   width: 100%;
 }
 @media (min-width: 800px) {
   input {
-    width: 60%;
+    width: 70%;
     float: left;
     height: 3em;
   }
 }
 input:focus {
-  border-color: #4a3f3f;
+  border-color: #5e3c73;
   outline: none;
   cursor: text;
 }
@@ -174,56 +173,52 @@ input:focus {
 button {
   color: #fff;
   font-weight: bold;
-  background: #170c0c;
+  background: #2b0940;
   text-align: center;
-  border: 1px solid #170c0c;
+  border: 1px solid #2b0940;
   width: 100%;
   margin-top: 1em;
-  border: 3px solid #392e2e;
+  border: 3px solid #4d2b62;
 }
 @media (min-width: 800px) {
   button {
-    width: 40%;
+    width: 30%;
     height: 3em;
     float: right;
     margin-top: 0em;
     border: none;
   }
 }
 a {
-  color: #170c0c;
+  color: #2b0940;
   -webkit-transition: color 0.5s;
   transition: color 0.5s;
 }
 a:hover {
-  color: #281d1d;
+  color: #3c1a51;
 }
 iframe.twitter-tweet,
 blockquote.twitter-tweet,
 twitterwidget {
   margin: 2em auto !important;
+  max-width: 90% !important;
 }
 footer {
-  border-top: 4px dashed #392e2e;
-  font-size: 0.8em;
+  max-width: 900px;
+  font-size: 0.95em;
   font-weight: normal;
-  margin: 0 auto;
+  margin: 0 auto 2em;
 }
 @media (min-width: 800px) {
   footer {
     position: absolute;
     right: 0;
     bottom: 0;
     left: 0;
-    padding: 1rem;
   }
 }
 footer a {
   font-weight: bold;
-  text-decoration: none;
-}
-footer a:hover {
-  text-decoration: underline;
 }
 .chromeframe {
   margin: 0.2em 0;
@@ -235,7 +230,7 @@ img.logo {
   display: block;
   margin: 0 auto -1em;
   width: 20%;
-  max-width: 600px;
+  max-width: 450px;
 }
 @media (max-width: 800px) {
   img.logo {
@@ -260,6 +255,9 @@ a.hashtag {
 a.hashtag:hover {
   text-decoration: underline;
 }
+.text-justify {
+  text-align: justify;
+}
 .center-text {
   text-align: center;
 }

diff --git a/public/css/styles.1.30.min.css b/public/css/styles.1.30.min.css
diff --git a/src/styles/styles.1.29.less → src/styles/styles.1.30.less b/src/styles/styles.1.29.less → src/styles/styles.1.30.less
@@ -1,10 +1,10 @@
 /* Variables */
 
-@main-color: #170c0c;
-@background-color: #170c0c;
+@main-color: #2b0940;
+@background-color: #2b0940;
 @line-color: rgba(57, 46, 46, 0.5);
-@link-color: #170c0c;
-@site-width: 1200px;
+@link-color: #2b0940;
+@site-width: 900px;
 @site-width-mobile: 800px;
 
 /* Styles */
@@ -32,8 +32,7 @@ body{
 }
 
 header,
-section,
-footer{
+section{
   width: 95%;
   margin: 0 auto;
   @media (max-width: @site-width-mobile) {
@@ -180,7 +179,7 @@ input{
   width: 100%;
 
   @media(min-width: @site-width-mobile){
-    width: 60%;
+    width: 70%;
     float: left;
     height: 3em;
   }
@@ -208,7 +207,7 @@ button{
   border: 3px solid @background-color + #222;
 
   @media(min-width: @site-width-mobile){
-    width: 40%;
+    width: 30%;
     height: 3em;
     float: right;
     margin-top: 0em;
@@ -233,25 +232,22 @@ twitterwidget{
 }
 
 footer{
+  max-width: @site-width;  
+
   @media (min-width: @site-width-mobile) {
     position: absolute;
     right: 0;
     bottom: 0;
     left: 0;
-    padding: 1rem;
   }
 
-  border-top: 4px dashed @line-color;
-  font-size: 0.8em;
+  // border-top: 4px dashed @line-color;
+  font-size: 0.95em;
   font-weight: normal;
-  margin: 0 auto;
+  margin: 0 auto 2em;
 
   a{
     font-weight: bold;
-    text-decoration: none;
-    &:hover{
-      text-decoration: underline;
-    }
   }
 }
 
@@ -297,6 +293,9 @@ a{
   }
 }
 
+.text-justify{
+  text-align: justify;
+}
 
 .center-text{
   text-align: center;