Merging the Design Files

Author: codingChewie

views/app.pug

@@ -0,0 +1,14 @@
+extends layout
+
+block main
+    section.namecard
+        .namecard-login
+            if name
+                p.namecard-greeting Welcome, #{name}!
+                form.namecard-exit(action='/goodbye', method='POST')
+                    button(type='submit')
+                        img(src='/static/img/close.svg')
+            else
+                p.namecard-greeting Hello, student!
+        block intro
+    block card

views/card.pug

@@ -1,11 +1,19 @@
-extends layout.pug
+extends app
 
-block content
-  section#content
-    h2= text
-    if hint
-      p
-        i Hint: #{hint}
-    a(href=`/cards/${id}?side=${sideToShow}`)= `${sideToShow.charAt(0).toUpperCase()}${sideToShow.slice(1)}`
-    br
-    a(href='/cards') Next card
+block card
+  section(class=`flashcards`)
+    .card(class=`card-${side}`)
+      .card-header
+      h1.card-title= side
+      #content
+        h2= text
+        if hint
+          p.hint
+            i= hint
+      .card-flip-wrap
+        a(href=`${id}?side=${sideToShow}`)
+          img.card-flip(src='/static/img/flip.svg')
+      .card-next
+        a(href='/cards')
+          img(src="/static/img/next.svg")
+    script(src='/static/js/app.js')

views/error.pug

@@ -1,6 +1,10 @@
-extends layout.pug
+extends layout
 
-block content
-  h1= error.message
-  h2= error.status
-  pre= error.stack
+block main
+  section.desk
+    h1= `${error.message} - Status: ${error.status}`
+    img.desk-items(src='/static/img/desk.svg')
+    a.button-primary-small(href='/') Go Home
+    .paper
+      pre.stack-trace= error.stack
+    .tear

views/hello.pug

@@ -1,7 +1,7 @@
-extends layout.pug
+extends app
 
-block content
-  form(action='/hello', method='POST')
-    label Please enter name
-      input(type='text', name='username')
-    button(type='submit') Submit
+block intro
+  form.namecard-form(action='/hello', method='post')
+    label.namecard-prompt Please enter your name:
+      input.namecard-name(type='text', name='username')
+    button.namecard-submit(type='submit') Submit

views/includes/footer.pug

@@ -1,2 +1,3 @@
 header
-  h1 Flash Cards
+  img(src='/static/img/logo.png')
+  p An app to help you study

views/includes/header.pug

@@ -1,6 +1,5 @@
-extends layout.pug
+extends app.pug
 
-block content
-  section#content
-    p
-      a(href='/cards') Begin!
+block intro
+  h1.namecard-prompt Let's get started
+  a.namecard-submit(href='/cards') Begin!

views/index.pug

@@ -2,12 +2,7 @@ doctype html
 html(lang="en")
   head
     title Flash Cards
-    link(rel='stylesheet', href="/static/stylesheets/style.css")
+    link(rel='stylesheet', href='/static/stylesheets/style.css')
   body
     include includes/header.pug
-    if name
-      h2 Welcome, #{name}!
-      form(action='/goodbye', method='POST')
-        button(type='submit') Goodbye
-    block content
-    include includes/footer.pug
+    block main