6.1.0

- Added Layer customization on Blog page - Added Layer customization on Single Post page
hrsetyono · Mar 22, 2020 · 9a2675a · 9a2675a
1 parent fe0594b
commit 9a2675a
Show file tree

Hide file tree

Showing 19 changed files with 310 additions and 185 deletions.
diff --git a/assets/css/app.css b/assets/css/app.css
diff --git a/assets/css/framework.css b/assets/css/framework.css
diff --git a/assets/css/my-admin.css b/assets/css/my-admin.css
@@ -1,4 +1,4 @@
 /*!
   EDJE Functional Sass v3.1.0
   Documentation: https://github.com/hrsetyono/edje/wiki
-*/.ct-layer-content{padding-bottom:0}.ct-layer-content .ct-control{margin-top:0;padding:12px !important}.ct-layer-content [data-design="inline"] .ct-option-input{max-width:150px}.ct-control[data-design="block"] .ct-option-number{margin-left:auto}
+*/.ct-layer-content{padding-bottom:0}.ct-layer-content .ct-control{margin-top:0;padding:12px !important}.ct-layer-content [data-design="inline"] .ct-option-input{max-width:150px}.ct-layer-content .ct-image-picker:not([data-columns]){grid-column-gap:12px}.ct-control[data-design="block"] .ct-option-number{margin-left:auto}
diff --git a/assets/sass/app/_blocks.sass b/assets/sass/app/_blocks.sass
@@ -35,15 +35,14 @@ article
   > * + *
     margin-top: 1.5rem
 
+.wp-block-group__inner-container,
+.wp-block-cover__inner-container,
+.wp-block-media-text__content,
+.wp-block-column
   @media ($below-l)
     padding-right: var(--gridRim)
     padding-left: var(--gridRim)
 
-    h-grid &
-      padding-top: 0
-      padding-bottom: 0
-
-
 // ALIGNMENT
 .has-text-align-right
   text-align: right
@@ -60,24 +59,45 @@ article
   margin-bottom: 2.5rem
   max-width: var(--siteWidth)
 
-  .alignfull &
-    margin-top: 0
+  &:last-child
+    margin-bottom: 0
+
+  .post-column--has-sidebar &
+    padding-right: var(--gridGap)
+    padding-left: var(--gridGap)
+
+    // nested alignwide
+    .alignwide
+      padding-right: 0
+      padding-left: 0
+
 
 .alignfull
   max-width: none
+  width: calc(100vw - var(--gridRim) - var(--gridRim))
+  margin-left: calc(-50vw + 50% + var(--gridRim))
+  margin-right: calc(-50vw + 50% + var(--gridRim))
   margin-top: 2.5rem
   margin-bottom: 2.5rem
 
   + .alignfull
     margin-top: -2.5rem
 
+  .post-column--has-sidebar &
+    width: 100%
+    margin-left: 0
+    margin-right: 0
+    padding-right: var(--gridGap)
+    padding-left: var(--gridGap)
+
+    // nested alignfull
+    .alignfull
+      padding-right: 0
+      padding-left: 0
+
   &:last-child
     margin-bottom: 0
 
-  @media ($below-l)
-    margin-right: calc(-1 * var(--gridRim) )
-    margin-left: calc(-1 * var(--gridRim) )
-
 
 // VERTICAL ALIGNMENT
 .is-vertically-aligned-top

diff --git a/assets/sass/framework.sass b/assets/sass/framework.sass
@@ -34,6 +34,7 @@
   // --letterSpacing  : 0
 
   // --fontSize       : 16px
+  --xsmallFontSize  : 12px
   // --smallFontSize  : 14px
   // --mediumFontSize : 18px
   // --largeFontSize  : 22px
@@ -100,7 +101,16 @@
 
   // OTHER
   --adminBarSize: 32px
+
+  // BLOG
   // --postsPerRow: 3
+  --archiveBg: white
+  --archivePadding: 1.5rem
+  // --archiveImageHeight: 50%
+  // --postImageHeight: 250px
+
+  --postHeroBg: #eff1f5
+  --postRelatedBg: #eff1f5
 
 
 // RESPONSIVE

diff --git a/assets/sass/framework/_post-archive.sass b/assets/sass/framework/_post-archive.sass
@@ -20,16 +20,17 @@
 
 
 .post-archives
-  --archiveBg: white
-  --archivePadding: 1.5rem
-
   display: grid
   grid-template-columns: repeat( 1, minmax(0,1fr) )
   grid-column-gap: 1rem
   grid-row-gap: 1rem
   padding-left: 0
   list-style-type: none
 
+  a:active
+    transition: none
+    transform: translateY(1px)
+
   //
   @media ($below-m)
     --archivePadding: 1rem
@@ -58,7 +59,7 @@
   box-shadow: var(--shadow0)
 
   > *
-    margin-bottom: 0.75rem
+    margin-bottom: var(--archivePadding)
   > *:last-child
     margin-bottom: 0
 
@@ -96,14 +97,14 @@
 
 // ARCHIVE FIGURE
 .archive-figure
-  --figureMargin: calc(-1 * var(--archivePadding))
+  --margin: calc(-1 * var(--archivePadding))
 
   width: calc( 100% + var(--archivePadding) + var(--archivePadding) )
-  margin-right: var(--figureMargin)
-  margin-left: var(--figureMargin)
+  margin-right: var(--margin)
+  margin-left: var(--margin)
 
   &:first-child
-    margin-top: var(--figureMargin)
+    margin-top: var(--margin)
 
   &:hover
     img
@@ -119,12 +120,10 @@
   //
   @media ($above-xs)
     .post-archives--default &
-      --ratioPadding: 0
-
       order: 1
       grid-row: span 5
       grid-column: span 1
       min-width: 200px
       width: 100%
       height: calc( 100% + var(--archivePadding) + var(--archivePadding) )
-      margin: var(--figureMargin) 0
+      margin: var(--margin) 0
diff --git a/assets/sass/framework/_post-single.sass b/assets/sass/framework/_post-single.sass
@@ -1,14 +1,47 @@
 
-///// SINGLE HEADER
+///// TITLE
 
-.post-header
+.post-title
   h1, h2
     margin-bottom: 0.5rem
 
+// Banner Title
 
-///// POST BANNER
+.post-hero
+  display: flex
+  align-items: flex-end
+
+  position: relative
+  min-height: 250px
+  padding-bottom: 2rem
+  background-color: var(--postHeroBg)
+
+  picture
+    +absolute-fill
+
+  picture::after
+    content: ""
+    +absolute-fill
+    z-index: 5
+    background-color: rgba(white, .5)
+
+.hero-column
+  position: relative
+  z-index: 10
+  grid-column: span 8
 
-.post-banner
+.hero-column--narrow
+  grid-column: span 12
+
+  > *
+    max-width: var(--blogWidth)
+    margin-right: auto
+    margin-left: auto
+
+
+///// POST FEATURED IMAGE
+
+.featured-image
   display: flex
   align-items: center
   padding: 0
@@ -21,43 +54,34 @@
     margin-right: auto
     margin-left: auto
 
-.post-banner--narrow
+.featured-image--narrow
   picture
     width: var(--blogWidth)
     border-radius: var(--gRadius)
 
   .image-fit--custom
     --fitHeight: var(--postImageHeight)
 
-.post-banner--wide,
-.post-banner--full
 
-  &:first-child
-    margin-top: calc(var(--postContentOffset) * -1)
+.featured-image--wide,
+.featured-image--full
 
   .image-fit
     --fitHeight: var(--postImageHeight)
 
-.post-banner--wide
+.featured-image--wide
   picture
     width: calc(var(--blogWidth) + 200px)
     max-width: 100%
 
-.post-banner--full
+.featured-image--full
   picture
     width: 100%
 
 
-///// SINGLE AUTHOR  
+///// SINGLE AUTHOR
 
 .post-author
-
-  a:active
-    transition: none
-    transform: translateY(1px)
-
-
-.author-inner-wrapper
   max-width: var(--blogWidth)
   margin: 0 auto
   padding: 1rem
@@ -66,8 +90,13 @@
 
   body.archive &
     background-color: transparent
+    margin-bottom: 2rem
     box-shadow: none
 
+  a:active
+    transition: none
+    transform: translateY(1px)
+
   //
   @media ($above-xs)
     display: grid
@@ -146,24 +175,72 @@
     transition: var(--gTransition)
 
 
+///// POST NAV
+
+.post-nav
+  display: flex
+
+  a
+    display: flex
+    flex: 1
+    align-items: center
+    padding: 0.5rem 0
+
+  a:hover
+    opacity: .75
+  a:active
+    transition: none
+    transform: translateY(1px)
+
+  img
+    width: 70px
+    height: 70px
+    margin-right: 0.5rem
+    background-color: var(--textDim)
+    border-radius: 50%
+
+  span
+    flex: 1
+    font-weight: var(--hFontWeight)
+
+  em
+    display: block
+
+    text-transform: uppercase
+    font-size: var(--xsmallFontSize)
+    font-style: normal
+    font-weight: 400
+
+  //
+  @media ($below-xs)
+    flex-wrap: wrap
+
+    a
+      flex: auto
+      width: 100%
+
+.nav-next
+  flex-direction: row-reverse
+  text-align: right
+
+  img
+    margin-right: 0
+    margin-left: 0.5rem
+
+
+
 ///// RELATED POSTS
 
 .related-posts
-  --padding: 3rem
   --blogWidth: var(--siteWidth)
 
-  padding: var(--padding) 0
-  background-color: #eff1f5
+  padding-top: 2rem
+  padding-bottom: 2rem
+  background-color: var(--postRelatedBg)
 
   .related-title
-    margin-bottom: var(--padding)
+    margin-bottom: 2rem
     font-weight: var(--fontWeight)
-    text-align: center
-    color: var(--textDim)
-
-  .post-archives
-    max-width: var(--siteWidth)
-    padding: 0 calc(var(--gridGap) / 2)
 
   .post-archive
     background-color: var(--siteBackgroundColor)
@@ -172,6 +249,7 @@
   @media ($below-s)
     --padding: 2rem
 
+
 
 ///// COMMENTS