build up publication structure

marquee · Jun 3, 2015 · 344c964 · 344c964
1 parent 7153132
commit 344c964
Show file tree

Hide file tree

Showing 14 changed files with 155 additions and 15 deletions.
diff --git a/assets/_config.sass b/assets/_config.sass
@@ -9,6 +9,10 @@ $palette-dark_gray      : #333
 
 // Fonts
 
-$font-stack-sans_serif  : "Helvetica", "Verdana", sans-serif
-$font-stack-serif       : "Georgia", "Times New Roman", serif
+$font-stack-title       : "Abril Fatface", sans-serif
+$font-stack-sans_serif  : "Open Sans", "Helvetica", "Verdana", sans-serif
+$font-stack-serif       : "Gentium Book Basic", "Times New Roman", serif
 $font-stack-monospace   : "Menlo", "Courier", monospace
+
+// Sizing
+$gutter: 15px
diff --git a/assets/components/_EntryCard-laf.sass b/assets/components/_EntryCard-laf.sass
@@ -0,0 +1,12 @@
+$corner-curve : 0.6em
+
+.EntryCard
+    background-color : $palette-white
+    border           : 1px solid $palette-light_gray
+    border-radius    : $corner-curve
+
+    ._EntryCover__
+
+        .Cover
+            text-decoration : none
+            border-radius   : $corner-curve
diff --git a/assets/components/_EntryCard.sass b/assets/components/_EntryCard.sass
@@ -0,0 +1,14 @@
+.EntryCard
+    padding: $gutter
+
+    .Cover
+        position   : relative
+        display    : block
+
+    ._Info
+        +vertically-center
+        position : relative
+        width    : 100%
+
+    ._Title
+        margin-bottom : 0
diff --git a/assets/layouts/_EntryCover-laf.sass b/assets/layouts/_EntryCover-laf.sass
@@ -0,0 +1,11 @@
+._EntryCover__
+    text-align : center
+
+    ._Title
+        color           : rgba(255,255,255,0.85)
+        font-family     : $font-stack-title
+        font-weight     : 700
+        font-size       : 4em
+        line-height     : 1em
+        text-align      : left
+        text-transform  : uppercase
diff --git a/assets/layouts/_EntryCover.sass b/assets/layouts/_EntryCover.sass
@@ -0,0 +1,10 @@
+._EntryCover__
+
+    ._Info
+        +vertically-center
+        margin-left: auto
+        margin-right: auto
+
+    ._Title
+        margin: 0
+        padding: $gutter
diff --git a/assets/style.sass b/assets/style.sass
@@ -4,8 +4,19 @@
 // Marquee styles that generate classes
 @import "marquee/classes"
 
-// Variable definitions shared across the project
+// Project Configuration
 @import "_config.sass"
 
-// Our project's views
+// Project Components
+@import "./components/_EntryCard.sass"
+@import "./components/_EntryCard-laf.sass"
+
+// Project Layouts
+@import "./layouts/_EntryCover.sass"
+@import "./layouts/_EntryCover-laf.sass"
+
+// Project Views
 @import "./views/_Entry.sass"
+@import "./views/_Entry-laf.sass"
+@import "./views/_Home.sass"
+@import "./views/_Home-laf.sass"
diff --git a/assets/views/_Entry-laf.sass b/assets/views/_Entry-laf.sass
@@ -0,0 +1,16 @@
+.Entry__
+
+    ._EntryCover__
+
+        ._Title
+            font-size: 6.4em
+            line-height: 0.95em
+
+    ._EntryContent__
+        background-color : $palette-white
+        box-shadow      : 0 0 ($gutter * 2) 0 rgba(0,0,0,0.8)
+
+        .TextBlock
+            font-family  : $font-stack-serif
+            font-size    : 1.5em
+            line-height  : 2em
diff --git a/assets/views/_Entry.sass b/assets/views/_Entry.sass
@@ -1,4 +1,29 @@
+$cover-height : 80vh
+
 .Entry__
 
     ._EntryCover__
-        text-align: center
+        position: fixed
+        top: 0
+        left: 0
+        width: 100%
+
+        .Cover
+            height: 100vh
+
+        ._Title
+            margin : 0 auto
+            max-width  : $Block-column-width--text
+
+
+    ._EntryContent__
+        position    : absolute
+        top: 90vh
+        margin-bottom : 40vh
+        padding-top : $gutter * 3
+        left        : 2vw
+        right       : 2vw
+
+        .TextBlock
+            line-height: 1.5em
+            margin-bottom: $gutter * 4
diff --git a/assets/views/_Home-laf.sass b/assets/views/_Home-laf.sass
@@ -0,0 +1,8 @@
+.Home__
+
+    ._EntryList__
+
+        .EntryCard
+
+            ._Title
+                font-size: 4em
diff --git a/assets/views/_Home.sass b/assets/views/_Home.sass
@@ -0,0 +1,11 @@
+.Home__
+
+    ._EntryList__
+        margin: 0 auto
+        max-width: $Block-column_width--text
+
+        .EntryCard
+            margin : $gutter
+
+            .Cover
+                height : 50vh
diff --git a/components/EntryCard.cjsx b/components/EntryCard.cjsx
@@ -1,13 +1,17 @@
-React       = require 'react'
-Card        = require 'marquee-static-sdk/components/Card'
+React = require 'react'
+Card  = require 'marquee-static-sdk/components/Card'
 
-EntryCover  = require '../layouts/EntryCover.cjsx'
+EntryCover = require '../layouts/EntryCover.cjsx'
 
 
 module.exports = React.createClass
     displayName: 'EntryCard'
     render: ->
 
         <Card className='EntryCard'>
-            <EntryCover title={@props.entry.title} link={@props.entry.link} />
+            <EntryCover
+                image = { @props.entry.cover_image.w(800) }
+                title = { @props.entry.title }
+                link  = { @props.entry.link }
+            />
         </Card>
diff --git a/layouts/EntryCover.cjsx b/layouts/EntryCover.cjsx
@@ -11,7 +11,7 @@ module.exports = React.createClass
     render: ->
 
         <div className='_EntryCover__'>
-            <Cover link={ @props.link }>
+            <Cover link={ @props.link } image={ @props.image }>
                 <Info>
                     <Title title={ @props.title } level={ @props.level } />
                 </Info>

diff --git a/views/Entry.cjsx b/views/Entry.cjsx
@@ -9,6 +9,10 @@ module.exports = React.createClass
     render: ->
 
         <Base page='Entry'>
-            <EntryCover title={ @props.entry.title } level="1" />
+            <EntryCover
+                level = "1"
+                title = { @props.entry.title }
+                image = { @props.entry.cover_image.w(1280) }
+            />
             <EntryContent content={ @props.entry.content } />
         </Base>
diff --git a/views/_Base.cjsx b/views/_Base.cjsx
@@ -1,18 +1,28 @@
 React   = require 'react'
 
-Asset   = require 'marquee-static-sdk/base/Asset'
-Favicon = require 'marquee-static-sdk/base/Favicon'
+{
+    Asset
+    Favicon
+    GoogleFonts
+} = require 'marquee-static-sdk/base'
 
 module.exports = React.createClass
     displayName: 'Base'
-    render: ->        
+    render: ->
 
         <html>
             <head>
                 <title>Marquee SDK Example</title>
 
-                <Favicon name='images/favicon.ico' />
                 <Asset path='style.sass' />
+
+                <GoogleFonts fonts={
+                    'Abril Fatface': [400]
+                    'Gentium Book Basic': [400,700]
+                    'Open Sans': [300,400,700]
+                }/>
+
+                <Favicon name='images/favicon.ico' />
             </head>
             <body className="Site__ #{ @props.page }__">
                 {@props.children}