Frontend first layout

src/app.ts

@@ -25,6 +25,7 @@ class App {
         await routes.ioListeners(this.io);
         this.app.set("views", path.join(__dirname, "views"));
         this.app.set("view engine", "pug");
+        this.app.use(express.static(path.join(__dirname, "public")));
         this.app.use(routes.router);
     }
 

src/public/stylesheets/sass/mixins.sass

@@ -0,0 +1,5 @@
+@mixin gridPosition($rowStart, $rowEnd, $columnStart, $columnEnd)
+  grid-row-start: $rowStart
+  grid-row-end: $rowEnd
+  grid-column-start: $columnStart
+  grid-column-end: $columnEnd

src/public/stylesheets/sass/style.sass

@@ -0,0 +1,82 @@
+@import "vars"
+@import "mixins"
+
+body
+  font-family: Arial, serif
+
+button
+  border: 2px solid $cPrimary
+  margin-top: 0.125em
+  padding: 0.125em
+  background-color: $cPrimary
+  color: $cPrimarySurface
+  font-weight: bold
+  transition-duration: 0.25s
+
+button:hover
+  background-color: lighten($cPrimary, 10%)
+  cursor: pointer
+
+button:active
+  background-color: darken($cPrimary, 5%)
+  box-shadow: inset 0.25em 0.25em 0.1em rgba(0, 0, 0, 0.25)
+
+.stylebar
+  @include gridPosition(1, 2, 1, 4)
+  display: grid
+  grid-template: 100% /25% 50% 25%
+  background-color: $cPrimary
+  color: $cPrimarySurface
+
+  h1
+    @include gridPosition(1, 2, 1, 2)
+    text-align: center
+    margin: auto
+
+#content
+  grid-template: 7.5% 92.5% / 25% 50% 25%
+  display: grid
+  width: 100%
+  height: 100%
+
+#friendscontainer
+  @include gridPosition(2, 3, 1, 2)
+  background-color: $cPrimaryBackground
+
+#feedcontainer
+  @include gridPosition(2, 3, 2, 3)
+  background-color: $cSecondaryBackground
+  .postinput
+    margin: 0.5em
+    input
+      width: 100%
+      border-radius: 0.25em
+      border: 1px solid $cPrimary
+      padding: 0.125em
+      height: 2em
+    button.submitbutton
+      border-radius: 0.25em
+      height: 2em
+
+  .feeditem
+    background-color: $cPrimaryBackground
+    min-height: 2em
+    margin: 0.5em
+    padding: 0.25em
+    border-radius: 0.25em
+    .itemhead
+      align-items: flex-start
+
+      .title, .handle, .date
+        margin: 0.125em
+      .title
+        font-weight: bold
+
+      .handle, .date
+        color: $cInactiveText
+      .handle a
+        text-decoration: none
+        color: $cInactiveText
+        font-style: normal
+      .handle a:hover
+        text-decoration: underline

src/public/stylesheets/sass/vars.sass

@@ -0,0 +1,5 @@
+$cPrimaryBackground: #fff
+$cSecondaryBackground: #ddd
+$cInactiveText: #555
+$cPrimary: #0d6b14
+$cPrimarySurface: #fff

src/views/home.pug

@@ -1,5 +0,0 @@
-html
-    head
-        title Greenvironment Network
-    body
-        h1 Greenvironment

src/views/home/feed.pug

@@ -0,0 +1,13 @@
+div#feedcontainer
+    div.postinput
+        input(type=text placeholder='Post something')
+        button.submitbutton Submit
+    div.feeditem
+        div.itemhead
+            span.title Testuser
+            span.handle
+                a(href='#') @testuser
+            span.date 23.09.19 10:07
+        p.text
+            | Example Test text.
+            | This is a test

src/views/home/friends.pug

@@ -0,0 +1 @@
+div#friendscontainer

src/views/home/index.pug

@@ -0,0 +1,9 @@
+html
+    head
+        title Greenvironment Network
+        include ../includes/head
+    body
+        div#content
+            include stylebar
+            include feed
+            include friends

src/views/home/stylebar.pug

@@ -0,0 +1,2 @@
+div.stylebar
+    h1 Greenvironment

src/views/includes/head.pug

@@ -0,0 +1 @@
+link(rel='stylesheet' href='stylesheets/style.css')