Преглед изворни кода

Finalized colors, fixed few bugs, and tweaked some styles.

Markus Ochel пре 12 година
родитељ
комит
edf592f979

+ 8 - 1
admin/controllers/authors.coffee

@@ -20,6 +20,8 @@ class AuthorForm extends Spine.Controller
 
   events:
     'submit form':              'preventSubmit'
+    'change *[name]':           'markAsDirty'
+    'keyup *[name]':            'markAsDirty'
     'click .save-button':       'save'
     'click .cancel-button':     'cancel'
     'click .delete-button':     'destroy'
@@ -31,6 +33,7 @@ class AuthorForm extends Spine.Controller
     @active @render
 
   render: (params) ->
+    @dirtyForm = false
     @editing = params.id?
     if @editing
       @copying = params.id.split('-')[0] is 'copy'
@@ -102,10 +105,14 @@ class AuthorForm extends Spine.Controller
       @item.destroy()
       @back()
 
+  markAsDirty: ->
+    @dirtyForm = true
+    @saveButton.addClass('glow')
+
   cancel: (e) ->
     e.preventDefault()
     if @dirtyForm
-      if confirm "You may have some unsaved changes.\nAre you sure you want to cancel?"
+      if confirm "You may have some unsaved changes.\nAre you sure you want to proceed?"
         @back()
     else
       @back()

+ 8 - 1
admin/controllers/blocks.coffee

@@ -23,6 +23,8 @@ class BlockForm extends Spine.Controller
 
   events:
     'submit form':              'preventSubmit'
+    'change *[name]':           'markAsDirty'
+    'keyup *[name]':            'markAsDirty'
     'click .save-button':       'save'
     'click .cancel-button':     'cancel'
     'click .delete-button':     'destroy'
@@ -33,6 +35,7 @@ class BlockForm extends Spine.Controller
     @active @render
 
   render: (params) ->
+    @dirtyForm = false
     @editing = params.id?
     if @editing
       @copying = params.id.split('-')[0] is 'copy'
@@ -106,10 +109,14 @@ class BlockForm extends Spine.Controller
       @item.destroy()
       @back()
 
+  markAsDirty: ->
+    @dirtyForm = true
+    @saveButton.addClass('glow')
+
   cancel: (e) ->
     e.preventDefault()
     if @dirtyForm
-      if confirm "You may have some unsaved changes.\nAre you sure you want to cancel?"
+      if confirm "You may have some unsaved changes.\nAre you sure you want to proceed?"
         @back()
     else
       @back()

+ 8 - 1
admin/controllers/collections.coffee

@@ -27,6 +27,8 @@ class CollectionForm extends Spine.Controller
 
   events:
     'submit form':              'preventSubmit'
+    'change *[name]':           'markAsDirty'
+    'keyup *[name]':            'markAsDirty'
     'click .save-button':       'save'
     'click .cancel-button':     'cancel'
     'click .delete-button':     'destroy'
@@ -38,6 +40,7 @@ class CollectionForm extends Spine.Controller
     @active @render
 
   render: (params) ->
+    @dirtyForm = false
     @editing = params.id?
     if @editing
       @copying = params.id.split('-')[0] is 'copy'
@@ -117,10 +120,14 @@ class CollectionForm extends Spine.Controller
       @item.destroy()
       @back()
 
+  markAsDirty: ->
+    @dirtyForm = true
+    @saveButton.addClass('glow')
+
   cancel: (e) ->
     e.preventDefault()
     if @dirtyForm
-      if confirm "You may have some unsaved changes.\nAre you sure you want to cancel?"
+      if confirm "You may have some unsaved changes.\nAre you sure you want to proceed?"
         @back()
     else
       @back()

+ 8 - 1
admin/controllers/contacts.coffee

@@ -17,6 +17,8 @@ class ContactForm extends Spine.Controller
 
   events:
     'submit form':          'preventSubmit'
+    'change *[name]':           'markAsDirty'
+    'keyup *[name]':            'markAsDirty'
     'click .save-button':   'save'
     'click .cancel-button': 'cancel'
     'click .delete-button': 'destroy'
@@ -26,6 +28,7 @@ class ContactForm extends Spine.Controller
     @active @render
 
   render: (params) ->
+    @dirtyForm = false
     @editing = params.id?
     if @editing
       @copying = params.id.split('-')[0] is 'copy'
@@ -66,11 +69,15 @@ class ContactForm extends Spine.Controller
     if @item and confirm "Are you sure you want to delete this #{@item.constructor.name}?"
       @item.destroy()
       @back()
+
+  markAsDirty: ->
+    @dirtyForm = true
+    @saveButton.addClass('glow')
   
   cancel: (e) ->
     e.preventDefault()
     if @dirtyForm
-      if confirm "You may have some unsaved changes.\nAre you sure you want to cancel?"
+      if confirm "You may have some unsaved changes.\nAre you sure you want to proceed?"
         @back()
     else
       @back()

+ 8 - 1
admin/controllers/essays.coffee

@@ -39,6 +39,8 @@ class EssayForm extends Spine.Controller
 
   events:
     'submit form':              'preventSubmit'
+    'change *[name]':           'markAsDirty'
+    'keyup *[name]':            'markAsDirty'
     'click .save-button':       'save'
     'click .cancel-button':     'cancel'
     'click .delete-button':     'destroy'
@@ -52,6 +54,7 @@ class EssayForm extends Spine.Controller
     @active @render
 
   render: (params) ->
+    @dirtyForm = false
     @editing = params.id?
     if @editing
       @copying = params.id.split('-')[0] is 'copy'
@@ -207,10 +210,14 @@ class EssayForm extends Spine.Controller
       @item.destroy()
       @back()
 
+  markAsDirty: ->
+    @dirtyForm = true
+    @saveButton.addClass('glow')
+
   cancel: (e) ->
     e.preventDefault()
     if @dirtyForm
-      if confirm "You may have some unsaved changes.\nAre you sure you want to cancel?"
+      if confirm "You may have some unsaved changes.\nAre you sure you want to proceed?"
         @back()
     else
       @back()

+ 8 - 1
admin/controllers/scenes.coffee

@@ -39,6 +39,8 @@ class SceneForm extends Spine.Controller
 
   events:
     'submit form':              'preventSubmit'
+    'change *[name]':           'markAsDirty'
+    'keyup *[name]':            'markAsDirty'
     'click .save-button':       'save'
     'click .cancel-button':     'cancel'
     'click .delete-button':     'destroy'
@@ -52,6 +54,7 @@ class SceneForm extends Spine.Controller
     @active @render
 
   render: (params) ->
+    @dirtyForm = false
     @editing = params.id?
     if @editing
       @copying = params.id.split('-')[0] is 'copy'
@@ -207,10 +210,14 @@ class SceneForm extends Spine.Controller
       @item.destroy()
       @back()
 
+  markAsDirty: ->
+    @dirtyForm = true
+    @saveButton.addClass('glow')
+
   cancel: (e) ->
     e.preventDefault()
     if @dirtyForm
-      if confirm "You may have some unsaved changes.\nAre you sure you want to cancel?"
+      if confirm "You may have some unsaved changes.\nAre you sure you want to proceed?"
         @back()
     else
       @back()

+ 29 - 5
admin/controllers/sites.coffee

@@ -15,20 +15,25 @@ class SiteForm extends Spine.Controller
     'form':               'form'
     'input[name=_id]':    'formSiteId'
     'select[name=theme]': 'formTheme'
+    '.social-links-list': 'socialLinksList'
     '.save-button':       'saveButton'
     '.cancel-button':     'cancelButton'
 
   events:
-    'submit form':          'preventSubmit'
-    'click .save-button':   'save'
-    'click .cancel-button': 'cancel'
-    'click .delete-button': 'destroy'
+    'submit form':            'preventSubmit'
+    'change *[name]':         'markAsDirty'
+    'keyup *[name]':          'markAsDirty'
+    'click .save-button':     'save'
+    'click .cancel-button':   'cancel'
+    'click .delete-button':   'destroy'
+    'click .add-social-link': 'addSocialLink'
 
   constructor: ->
     super
     @active @render
 
   render: (params) ->
+    @dirtyForm = false
     @editing = params.id?
     if @editing
       @copying = params.id.split('-')[0] is 'copy'
@@ -51,6 +56,12 @@ class SiteForm extends Spine.Controller
     if @editing
       @formTheme.val(@item.theme)
       @formSiteId.prop('readonly', true)
+    else:
+      @addSocialLink()
+
+  addSocialLink: (e) ->
+    e?.preventDefault()
+    @socialLinksList.append templates.render('partials/link-form.html', {}, {})
 
   save: (e) ->
     e.preventDefault()
@@ -58,6 +69,15 @@ class SiteForm extends Spine.Controller
       @item.fromForm(@form)
     else
       @item = new Site().fromForm(@form)
+
+    # Construct the social links list object
+    links = []
+    @socialLinksList.find('.social-link-form').each ->
+      label = $.trim $(@).find('input[name=link_label]').val()
+      url = $.trim $(@).find('input[name=link_url]').val()
+      if label and url
+        links.push label: label, url: url
+    @item.social_links = links
     
     # Save the item and make sure it validates
     if @item.save()
@@ -75,11 +95,15 @@ class SiteForm extends Spine.Controller
     if @item and confirm "Are you sure you want to delete this #{@item.constructor.name}?"
       @item.destroy()
       @back()
+
+  markAsDirty: ->
+    @dirtyForm = true
+    @saveButton.addClass('glow')
   
   cancel: (e) ->
     e.preventDefault()
     if @dirtyForm
-      if confirm "You may have some unsaved changes.\nAre you sure you want to cancel?"
+      if confirm "You may have some unsaved changes.\nAre you sure you want to proceed?"
         @back()
     else
       @back()

+ 8 - 1
admin/controllers/sponsors.coffee

@@ -23,6 +23,8 @@ class SponsorForm extends Spine.Controller
 
   events:
     'submit form':          'preventSubmit'
+    'change *[name]':       'markAsDirty'
+    'keyup *[name]':        'markAsDirty'
     'click .save-button':   'save'
     'click .cancel-button': 'cancel'
     'click .delete-button': 'destroy'
@@ -32,6 +34,7 @@ class SponsorForm extends Spine.Controller
     @active @render
 
   render: (params) ->
+    @dirtyForm = false
     @editing = params.id?
     if @editing
       @copying = params.id.split('-')[0] is 'copy'
@@ -90,11 +93,15 @@ class SponsorForm extends Spine.Controller
     if @item and confirm "Are you sure you want to delete this #{@item.constructor.name}?"
       @item.destroy()
       @back()
+
+  markAsDirty: ->
+    @dirtyForm = true
+    @saveButton.addClass('glow')
   
   cancel: (e) ->
     e.preventDefault()
     if @dirtyForm
-      if confirm "You may have some unsaved changes.\nAre you sure you want to cancel?"
+      if confirm "You may have some unsaved changes.\nAre you sure you want to proceed?"
         @back()
     else
       @back()

+ 1 - 1
admin/kanso.json

@@ -39,6 +39,6 @@
   "app": {
     "dev_host": "admin.kleks.local",
     "prod_host": "kleks.markuso.com",
-    "themes": ["default","blue","green","brown","teal","grey"]
+    "themes": ["default","blue","green","brown","teal","aqua","purple"]
   }
 }

+ 2 - 2
admin/lib/utils.coffee

@@ -6,10 +6,10 @@ exports.msg = {
 }
 
 exports.cleanCode = (code) ->
-  code.toLowerCase().replace(/[\ \.\'\"\:\,\-]/g, '_')
+  code.toLowerCase().replace(/[\ \.\'\"\-]/g, '_').replace(/[\:\,\&]/g, '')
 
 exports.cleanSlug = (slug) ->
-  slug.toLowerCase().replace(/[\ \.\'\"\:\,]/g, '-')
+  slug.toLowerCase().replace(/[\ \.\'\"]/g, '-').replace(/[\:\,\&]/g, '')
 
 exports.cleanContent = (content) ->
   protocol = "http(s)?:\/\/"

+ 1 - 1
admin/server/shows.coffee

@@ -11,5 +11,5 @@ exports.not_found = (doc, req) ->
 exports.colors = (doc, req) ->
   title: "Color Samples"
   content: templates.render("colors.html", req, {
-    colors: ['#9EDFB5', '#DFA57C', '#E6BC7E', '#D5D298', '#98D5A7', '#98D5BA', '#61CDDB', '#8FB1DD', '#A8B5E7', '#AF9EDA', '#DA9EC7', '#DA9EAF', '#DA9EA1', '#DAA39E', '#DAAF9E', '#DABB9E', '#DAC79E', '#A5DA9E', '#9EDAB1', '#9EC4DA', '#B6B4EB', '#DD9DAC', '#BAA8E6', '#B5E6A8', '#E6D4A8', '#E6CBA8', '#E6B7A8']
+    colors: ['#BAD0EF', '#9EDFB5', '#DFA57C', '#E6BC7E', '#D5D298', '#98D5A7', '#98D5BA', '#91D6DF', '#8FB1DD', '#A8B5E7', '#AF9EDA', '#DA9EC7', '#DA9EAF', '#DA9EA1', '#DAA39E', '#DAAF9E', '#DABB9E', '#DAC79E', '#A5DA9E', '#9EDAB1', '#9EC4DA', '#B6B4EB', '#DD9DAC', '#BAA8E6', '#B5E6A8', '#E6D4A8', '#E6CBA8', '#E6B7A8', '#97BEAD']
   })

+ 4 - 1
admin/static/css/common.styl

@@ -92,7 +92,7 @@ blockquote
     font-weight: $heavyFont
 
 img
-  display: block
+  display: inline-block
   border: 0
 
 input[type='text'],
@@ -154,6 +154,9 @@ button, .button
     font-weight: $normalFont
     line-height: 1.5em
 
+  &.glow
+    outline: 4px solid rgba(yellow, 0.7)
+
 ::-webkit-input-placeholder
   color: #e3e3e3
 

+ 36 - 34
admin/static/css/mixin.styl

@@ -1,38 +1,40 @@
-$defaultColor   = #BAD0EF
+$defaultColor   = #8FB1DD
+$aquaColor      = #91D6DF
 $blueColor      = #BAD0EF
-$greenColor     = #81C977
-$brownColor     = #B4805B
-$tealColor      = #61E0DF // #97E6D3
-$greyColor      = #b4b4b4
-
-// New colors
-$aColor         = #9EDFB5
-$bColor         = #DFA57C // brown ?
-$cColor         = #E6BC7E
-$dColor         = #D5D298
-$eColor         = #98D5A7
-$fColor         = #98D5BA
-$gColor         = #61CDDB // teal ?
-$hColor         = #8FB1DD
-$iColor         = #A8B5E7
-$jColor         = #AF9EDA
-$kColor         = #DA9EC7
-$lColor         = #DA9EAF
-$mColor         = #DA9EA1 // red ?
-$nColor         = #DAA39E
-$oColor         = #DAAF9E
-$pColor         = #DABB9E
-$qColor         = #DAC79E
-$rColor         = #A5DA9E
-$sColor         = #9EDAB1
-$tColor         = #9EC4DA 
-$uColor         = #B6B4EB
-$vColor         = #DD9DAC
-$wColor         = #BAA8E6
-$xColor         = #B5E6A8
-$yColor         = #E6D4A8
-$zColor         = #E6CBA8
-$a1Color        = #E6B7A8
+$greenColor     = #B5E6A8
+$tealColor      = #97BEAD
+$purpleColor    = #B6B4EB
+$brownColor     = #DABB9E
+
+// Sample colors
+$color1         = #9EDFB5
+$color2         = #DFA57C
+$color3         = #E6BC7E
+$color4         = #D5D298
+$color5         = #98D5A7
+$color6         = #98D5BA
+$color7         = #91D6DF
+$color8         = #8FB1DD
+$color9         = #A8B5E7
+$color10        = #AF9EDA
+$color11        = #DA9EC7
+$color12        = #DA9EAF
+$color13        = #DA9EA1
+$color14        = #DAA39E
+$color15        = #DAAF9E
+$color16        = #DABB9E
+$color17        = #DAC79E
+$color18        = #A5DA9E
+$color19        = #9EDAB1
+$color20        = #9EC4DA 
+$color21        = #B6B4EB
+$color22        = #DD9DAC
+$color23        = #BAA8E6
+$color24        = #B5E6A8
+$color25        = #E6D4A8
+$color26        = #E6CBA8
+$color27        = #E6B7A8
+$color28        = #97BEAD
 
 $primaryColor   = $defaultColor
 $lightGrey      = #b0b0b0

+ 4 - 4
admin/static/css/theme.styl

@@ -1,6 +1,6 @@
 /* Admin theme.styl CSS */
 
-$availableThemeColors = 'theme-default' $defaultColor, 'theme-blue' $blueColor, 'theme-green' $greenColor, 'theme-brown' $brownColor, 'theme-teal' $tealColor, 'theme-grey' $greyColor
+$availableThemeColors = 'theme-default' $defaultColor, 'theme-blue' $blueColor, 'theme-green' $greenColor, 'theme-brown' $brownColor, 'theme-teal' $tealColor, 'theme-aqua' $aquaColor,, 'theme-purple' $purpleColor
 
 $navbarWidth  = 180px
 
@@ -135,7 +135,7 @@ span.label
     letter-spacing: -0.07em
     word-spacing: 0em
     white-space: nowrap
-    text-shadow: 0px -1px 0 rgba(0,0,0,0.2)
+    // text-shadow: 0px -1px 0 rgba(0,0,0,0.2)
 
     a
       color: #fff
@@ -143,7 +143,7 @@ span.label
   > form.login
     display: none
     padding: 20px 30px
-    text-shadow: 0px -1px 0 rgba(0,0,0,0.2)
+    // text-shadow: 0px -1px 0 rgba(0,0,0,0.2)
 
     > input
       display: inline-block
@@ -185,7 +185,7 @@ span.label
 
       &.seperator
         margin: 0.5em 0
-        border-bottom: 1px solid rgba(255,255,255,0.5)
+        border-bottom: 1px solid rgba(255,255,255,0.4)
 
   &.show-login
     top: 30%

+ 1 - 1
admin/templates/essay-form.html

@@ -29,7 +29,7 @@
         <label>Slug</label>
         <input type="text" name="slug" value="{{slug}}" placeholder="All lowercase and hyphens but NO spaces">
       </div>
-      <div class="field-right required">
+      <div class="field-right">
         <label>Author</label>
         <select name="author_id"></select>
       </div>

+ 2 - 2
admin/templates/main-nav.html

@@ -1,7 +1,7 @@
 <div class="app-logo"><a href="/">kleks</a></div>
 <form class="login">
-  <input type="text" name="username" placeholder="Username">
-  <input type="password" name="password" placeholder="Password">
+  <input type="text" name="username" placeholder="Username" spellcheck="false" autofocus>
+  <input type="password" name="password" placeholder="Password" spellcheck="false">
   <input type="submit" name="submit" value="Sign In" class="button">
 </form>
 <ul>

+ 1 - 1
admin/templates/scene-form.html

@@ -29,7 +29,7 @@
         <label>Slug</label>
         <input type="text" name="slug" value="{{slug}}" placeholder="All lowercase and hyphens but NO spaces">
       </div>
-      <div class="field-right required">
+      <div class="field-right">
         <label>Author</label>
         <select name="author_id"></select>
       </div>

+ 12 - 0
admin/templates/site-form.html

@@ -46,6 +46,18 @@
       <label>Footer HTML</label>
       <textarea name="footer_html" placeholder="Content to show on all pages in the footer">{{footer_html}}</textarea>
     </div>
+    
+    <h4 class="heading">
+      Social Links
+      <a class="button small add-social-link" href="#">+</a>
+    </h4>
+    <div class="field inline social-links-list">
+      {{#each social_links}}
+        {{{include "partials/link-form.html"}}}
+      {{/each}}
+    </div>
+    
+    <h4 class="heading">Other</h4>
     <div class="field">
       <label>CSS</label>
       <textarea name="css" placeholder="Custom CSS to override on site">{{css}}</textarea>

+ 1 - 1
site/server/views.coffee

@@ -4,7 +4,7 @@ exports.docs_for_home =
     # List of collections sorted by `pinned` then `updated_at`,
     # plus a few blocks that are needed on home page,
     # and the site configuration doc.
-    blocks = ['site_intro','site_promo']
+    blocks = ['site_intro','site_promo','site_home']
     if doc.site and doc.type is 'collection' and doc.updated_at
       pinned = if doc.pinned then 1 else 0
       timestamp = new Date(doc.updated_at).getTime()

+ 16 - 0
site/static/css/responsive.styl

@@ -37,6 +37,8 @@
   article
 
     > .photo
+    > .intro > .photo
+    > .home-block > .photo
       left: -14px
 
 // Odd one
@@ -53,6 +55,18 @@
       width: 100%
       margin: 1em auto
 
+    ul.grid-2
+      > li
+        width: 100%
+        margin: 0.8em 0 0 0
+
+  article.home
+    .collections
+      > ul
+        > li
+          width: 100%
+          margin: 0.8em 0 0 0
+
 // Landscape on larger phone to smaller tablet
 @media (min-width: 481px) and (max-width: 767px)
   
@@ -83,6 +97,8 @@
   article
 
     > .photo
+    > .intro > .photo
+    > .home-block > .photo
       left: -20px
 
 

+ 31 - 3
site/static/css/theme.styl

@@ -211,7 +211,7 @@ article
 
   > .title
     color: $textDarkColor
-    margin-bottom: 0.5em;
+    margin-bottom: 0.5em
 
     a
       color: $textDarkColor
@@ -221,17 +221,25 @@ article
       font-size: 0.5em
       margin-left: 0.5em
 
+  h3, h2
+    margin: 1em 0
+
   > .photo
+  > .intro > .photo
+  > .home-block > .photo
     position: relative
     left: -40px
     width: 105%
     max-height: 180px
-    margin: 0 0 1em 0
+    margin: 0 0 2em 0
     overflow: hidden
 
     img
       width: 100%
 
+    &.large
+      max-height: auto
+
   > .intro
     margin-bottom: 2em
     font-size: 1.125em
@@ -239,6 +247,9 @@ article
     line-height: 1.6em
     color: darken($textColor, 5%)
 
+  > .home-block
+    margin-bottom: 2em
+
   .sponsor
     float: right
     width: 300px
@@ -293,6 +304,23 @@ article
           display: inline-block
           margin-right: 2em
 
+  ul.grid-2
+    list-style-type: none
+    margin: 0
+    padding: 0
+    clearfix()
+
+    > li
+      display: inline-block
+      position: relative
+      width: 48%
+      padding: 0
+      margin: 0.8em 0.5em 0 0
+      vertical-align: top
+
+    &.with-borders > li
+      border: solid 1px $faintGrey
+
 article.home
 
   .collections
@@ -352,7 +380,7 @@ article.essay
     ol, ul
       margin: 0 0.8em
       li
-        margin-bottom: 1em
+        // margin-bottom: 0.5em
 
   .meta
     font-size: 0.875em

+ 3 - 0
site/static/css/themes/aqua.styl

@@ -0,0 +1,3 @@
+@import '../setup-theme'
+
+setupTheme($aquaColor)

+ 0 - 3
site/static/css/themes/grey.styl

@@ -1,3 +0,0 @@
-@import '../setup-theme'
-
-setupTheme($greyColor,  $lightGrey, $linkColor)

+ 3 - 0
site/static/css/themes/purple.styl

@@ -0,0 +1,3 @@
+@import '../setup-theme'
+
+setupTheme($purpleColor)

+ 1 - 1
site/static/css/themes/teal.styl

@@ -1,3 +1,3 @@
 @import '../setup-theme'
 
-setupTheme($tealColor)
+setupTheme($tealColor, $lightGrey, $linkColor)

+ 9 - 1
site/templates/base.html

@@ -1,6 +1,6 @@
 {{#if site}}
 <!DOCTYPE html>
-<html>
+<html prefix="og: http://ogp.me/ns#">
 <head>
   
   <meta charset="utf-8">
@@ -11,6 +11,14 @@
   <meta name="developer" content="Markus Ochel at Markuso Web Solutions - http://www.markuso.com">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=3.0, user-scalable=1">
   <meta name="apple-mobile-web-app-capable" content="yes">
+
+  <meta property="og:site_name" content="{{og_site_name}}">
+  <meta property="og:title" content="{{og_title}}">
+  <meta property="og:description" content="{{og_description}}">
+  <meta property="og:type" content="{{og_type}}">
+  <meta property="og:url" content="{{og_url}}">
+  <meta property="og:image" content="{{og_image}}">
+  <meta property="og:video" content="{{og_video}}">
   
   {{#if site.favicon}}
   <link rel="shortcut icon" href="{{baseURL}}/file/{{site._id}}/{{site.favicon}}">

+ 10 - 2
site/templates/home.html

@@ -4,13 +4,21 @@
 
 <article class="home">
   {{#if blocks.site_intro.enabled}}
-    <section class="intro">{{{blocks.site_intro.content}}}</section>
-
     {{#if blocks.site_intro.photo}}
     <section class="photo">
       <img src="/file/{{blocks.site_intro._id}}/{{blocks.site_intro.photo}}">
     </section>
     {{/if}}
+    <section class="intro">{{{blocks.site_intro.content}}}</section>
+  {{/if}}
+
+  {{#if blocks.site_home.enabled}}
+    {{#if blocks.site_home.photo}}
+    <section class="photo">
+      <img src="/file/{{blocks.site_home._id}}/{{blocks.site_home.photo}}">
+    </section>
+    {{/if}}
+    <section class="home-block">{{{blocks.site_home.content}}}</section>
   {{/if}}
 
   {{{include "collections.html"}}}