user blogging WIP

app/views/ublog/post.scala

@@ -21,13 +21,6 @@ object post {
         header(cls := "ublog-post__header")(
           a(href := routes.Ublog.index(user.username))(
             s"${user.username}' Blog"
-          ),
-          ctx.is(user) option a(
-            href := editUrlOf(post),
-            cls := "button button-empty text",
-            dataIcon := ""
-          )(
-            "Edit your blog post"
           )
         ),
         ctx.is(user) option standardFlash(),
@@ -36,10 +29,20 @@ object post {
           span(cls := "ublog-post__meta__author")("by ", userLink(user)),
           post.liveAt map { date =>
             span(cls := "ublog-post__meta__date")(semanticDate(date))
-          }
+          },
+          ctx.is(user) option frag(
+            (if (post.live) goodTag else badTag)(cls := "ublog-post__meta__publish")(
+              if (post.live) "This post is published" else "This is a draft"
+            ),
+            a(
+              href := editUrlOf(post),
+              cls := "button button-empty text",
+              dataIcon := ""
+            )("Edit")
+          )
         ),
         div(cls := "ublog-post__image-wrap")(
-          imageOf(post, 400)(cls := "ublog-post__image", heightA := 400)
+          imageOf(post, 500)(cls := "ublog-post__image")
         ),
         strong(cls := "ublog-post__intro")(post.intro),
         div(cls := "ublog-post__markup")(markup)

ui/site/css/ublog/_markup.scss

@@ -0,0 +1,73 @@
+.ublog-post__markup {
+  @extend %break-word;
+  font-size: 1.2em;
+  cursor: initial;
+  line-height: 1.8;
+
+  strong {
+    font-weight: bold;
+  }
+
+  em {
+    font-style: italic;
+  }
+
+  .block-img {
+    text-align: center;
+  }
+
+  .block-img + p > em:first-child {
+    margin-top: -20px;
+    display: block;
+    font-size: 0.8em;
+    text-align: center;
+  }
+
+  ol,
+  ul {
+    margin: 25px;
+  }
+
+  li {
+    list-style: disc outside;
+  }
+
+  h2 {
+    border-bottom: 1px solid $c-border;
+    margin: 1.6em 0 1em 0;
+  }
+
+  h3 {
+    @include fluid-size('font-size', 18px, 30px);
+
+    font-weight: bold;
+    margin: 1.6em 0 1em 0;
+  }
+
+  h4 {
+    font-size: 1.4em;
+  }
+
+  img {
+    padding: 5px;
+    border: 1px solid $c-border;
+  }
+
+  pre {
+    white-space: pre-wrap;
+    font-size: 0.9em;
+    line-height: 1.2;
+    border: 1px solid $c-border;
+    padding: 1em;
+  }
+
+  .embed {
+    @extend %video;
+
+    &--game {
+      @extend %game-embed;
+    }
+
+    margin: $block-gap auto;
+  }
+}

ui/site/css/ublog/_ublog.scss

@@ -1,5 +1,6 @@
 @import 'card';
 @import 'form';
+@import 'markup';
 
 .ublog {
   &-index {
@@ -8,6 +9,7 @@
     }
   }
   &-post {
+    @include fluid-size('--box-padding', 25px, 100px);
     &__header {
       @extend %flex-between;
     }
@@ -18,13 +20,13 @@
     &__meta {
       text-align: center;
       margin-bottom: 6vh;
-      &__date {
-        margin-left: 3em;
+      > * {
+        margin: 0 1em;
       }
     }
     &__image {
       max-width: 100%;
-      height: 30vh;
+      max-height: 80vh;
       background: #888;
       margin: 0 auto 6vh auto;
       &-wrap {
@@ -36,8 +38,5 @@
       margin-bottom: 4vh;
       display: block;
     }
-    &__markup {
-      font-size: 1.2em;
-    }
   }
 }