Frontend first layout

pull/1/head
Trivernis 5 years ago
parent 9d26d248d7
commit 4179aac231

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

@ -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

@ -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

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

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

@ -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

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

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

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

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