Blog: Style tweaks and minor cleanup

Mainly removing unused classes such as blog_post-container
This commit is contained in:
Pablo Vazquez 2017-10-25 16:01:53 +02:00
parent 5fbe62105a
commit bb33ddd9fb
5 changed files with 485 additions and 497 deletions

View File

@ -99,7 +99,7 @@ $screen-md-max: $screen-lg-min - 1 !default
$sidebar-width: 50px !default
/* Project specifics */
$project_nav-width: 240px !default
$project_nav-width: 250px !default
$project-sidebar-width: 50px !default
$project_header-height: 50px !default
$project_footer-height: 30px !default
@ -120,9 +120,6 @@ $list-node-children-item-width_square: 160px !default
$z-index-base: 13 !default
.container
@media (min-width: $screen-sm-min)
width: 750px
@media (min-width: $screen-md-min)
width: 1100px

View File

@ -10,6 +10,12 @@ body.workshops
body.blog
background-color: white
#project_nav,
#project_nav-container
+media-xs
width: 100%
width: $project_nav-width * 1.5
#project-container
display: flex
flex-direction: row
@ -40,9 +46,8 @@ body.blog
text-align: left
#project_nav-container
position: fixed
z-index: $z-index-base + 5
width: $project_nav-width
+media-lg
width: $project_nav-width * 1.33
+media-xs
display: block
@ -50,6 +55,11 @@ body.blog
position: relative
height: initial !important
position: fixed
z-index: $z-index-base + 5
width: $project_nav-width
#project_sidebar
width: $project-sidebar-width
z-index: $z-index-base + 6
@ -125,14 +135,23 @@ body.blog
&.active
background-color: $color-background-nav-light
// The tiny triangle
&:after
content: ''
+media-xs
border-top-color: $project-sidebar-background
border-right-color: transparent
left: 50%
right: initial
transform: translateX(-50%)
top: 0
border: 7px solid transparent
border-right-color: $project-sidebar-background
content: ''
display: block
position: absolute
top: 50%
right: 0
top: 50%
transform: translateY(-50%)
a
@ -174,20 +193,23 @@ body.blog
/* Container for navigation on the left */
#project_nav
+media-lg
width: $project_nav-width * 1.33
+media-xs
width: initial
background-color: $project-sidebar-background
display: block
left: 0
position: relative
visibility: visible
width: $project_nav-width
position: relative
background-color: $project-sidebar-background
left: 0
&.about
display: none
visibility: hidden
+media-xs
width: initial
/* Header with name and node edit tools */
#project_nav-header,
@ -714,12 +736,15 @@ ul.project_nav-edit-list
/* The actual navigation tree container */
#project_tree
padding: 0 0 5px 0// some padding on top/bottom of jstree
position: relative
margin-top: $project_header-height
+media-xs
margin-top: 0
background-color: $project-sidebar-background
border-right: thin solid $color-background
margin-top: $project_header-height
overflow-y: auto
padding: 0 0 5px 0// some padding on top/bottom of jstree
position: relative
&.edit
margin-top: 0
@ -2669,8 +2694,7 @@ section.node-children
#project_context
#blog_container
padding: 0
#blog_index-container,
#blog_post-container
#blog_index-container
width: 100%
padding: 0
border: none

View File

@ -158,32 +158,31 @@ strong, b
header.navbar-header
position: relative
margin: 0
z-index: 1 // to be on top of the overlay
height: 100%
z-index: 1 // to be on top of the overlay
.navbar-toggle
color: white
float: none
margin: 5px 0 0 10px
i
margin: 0
.navbar-overlay
display: none
position: absolute
top: 0
left: 0
right: 0
bottom: 0
z-index: 0
width: 100%
display: none
left: 0
height: 100%
position: absolute
right: 0
top: 0
transition: background-color 350ms ease-in-out
width: 100%
z-index: 0
&+.navbar-container
.search-input
margin: 8px 0
border-radius: 3px
border: thin solid transparent
+media-lg
border: thin solid rgba(white, .2)
@ -191,6 +190,9 @@ header.navbar-header
&::placeholder
color: rgba(white, .8)
border: thin solid transparent
border-radius: 3px
margin: 8px 0
&.is-active
background-color: $color-background-nav
@ -346,8 +348,10 @@ nav.sidebar
+position-center-translate
.navbar-brand
display: flex
+media-xs
padding-left: 10px
align-items: center
display: flex
color: white
padding:
top: 8px
@ -1037,11 +1041,6 @@ button, .btn
background-color: rgba($color-background-nav, .7)
.search-input
position: relative
float: left
padding: 0
margin: 0
+media-lg
max-width: 350px
+media-md
@ -1051,11 +1050,14 @@ button, .btn
+media-xs
display: block
margin: 0 10px
width: 75%
position: absolute
z-index: $z-index-base
top: 2px
left: 40px
right: 5px
position: relative
float: left
padding: 0
margin: 0
.search-icon
position: absolute
@ -1089,17 +1091,17 @@ button, .btn
#cloud-search, .tt-hint
+text-overflow-ellipsis
outline: none
border: thin solid $color-background-nav-light
border-radius: 3px
color: white
font:
size: 1em
weight: 400
family: $font-body
margin: 0
padding: 0 20px 0 40px
min-height: 32px
color: white
outline: none
padding: 0 20px 0 40px
transition: border 100ms ease-in-out
&:focus

View File

@ -8,15 +8,13 @@
#blog_container
padding:
top: 15px
bottom: 15px
display: flex
justify-content: center
+media-xs
flex-direction: column
padding-top: 0
display: flex
padding:
top: 15px
bottom: 15px
#blog_post-edit-form
padding: 20px
@ -133,15 +131,6 @@
+markdown-preview-container
margin:
left: -20px
right: -20px
padding:
top: 20px
left: 0
right: 0
&:before
content: 'Live Preview'
position: absolute
@ -160,8 +149,7 @@
color: $color-text-dark-hint
transition: color 150ms ease-in-out
.node-edit-form-md-preview:empty
&:empty
color: transparent
margin: 0 auto
padding: 0 10px
@ -171,18 +159,11 @@
color: transparent
#node-edit-form-md-preview
padding: 20px
&.post-create
flex-direction: row-reverse
#blog_post-create-container,
#blog_post-edit-container
padding: 25px
#blog_index-container,
#blog_post-container,
#blog_post-create-container,
#blog_post-edit-container
+container-box
@ -214,15 +195,18 @@
.blog_index-item
+media-lg
max-width: 880px
+media-md
max-width: 880px
+media-sm
max-width: 780px
margin: 0 auto 15px auto
margin: 15px auto
&:hover
.item-info a
color: $color-primary
.item-picture
position: relative
width: 100%
@ -254,15 +238,13 @@
display: block
font:
family: $font-body
size: 2em
padding: 25px 25px 10px 25px
size: 1.8em
padding-bottom: 10px
padding-top: 20px
.item-info
color: $color-text-dark-secondary
font-size: 1em
padding:
left: 25px
right: 25px
a
color: $color-text-dark-secondary
@ -294,16 +276,9 @@
left: 10px
right: 10px
.button-create, .button-edit
position: absolute
z-index: 2
top: 20px
right: 20px
+button($color-success, 6px, true)
.button-create,
.button-edit
right: 170px
top: 15px
+button($color-success, 3px, true)
.item-picture+.button-back+.button-edit
right: 20px
@ -403,9 +378,9 @@
margin: 0
.button-back
+button($color-info, 6px, true)
display: block
width: 100%
+button($color-info, 6px)
margin: 15px 0 0 0
#blog_post-edit-form
@ -478,7 +453,6 @@
transition: opacity 150ms ease-in-out
+position-center-translate
.item-info
padding: 10px 20px
background-color: white
@ -501,63 +475,33 @@
text-decoration: none
color: $color-primary
#blog_post-container
.button-create
+button($color-success, 6px)
.button-back
position: absolute
top: 15px
right: 15px
z-index: 2
+button($color-info, 6px, true)
.button-create, .button-edit
position: absolute
z-index: 2
top: 15px
right: 15px
+button($color-success, 6px, true)
.button-edit
right: 170px
top: 15px
.button-back+.button-edit
right: 15px
top: 15px
#blog_container
&.cloud-blog
#blog_index-container,
#blog_post-container,
#blog_post-create-container,
#blog_post-edit-container
width: 90%
padding: 25px 30px 20px 30px
#blog_index-container+#blog_index-sidebar,
#blog_post-container+#blog_index-sidebar
#blog_index-container+#blog_index-sidebar
display: none
&.cloud-blog #blog_index-container,
&.cloud-blog #blog_post-container,
#blog_index-container, #blog_post-container
padding: 0 0 50px 0
#blog_index-container,
&.cloud-blog #blog_index-container
+media-sm
width: 100%
padding: 25px 20px 20px 20px
+media-xs
width: 100%
padding: 0 0 20px 0
padding: 0 0 50px 0
margin: 0 auto
.blog_index-item
padding: 25px 80px 20px 80px
position: relative
+media-xs
width: 100%
padding: 25px 0 20px 0
padding: 10px 25px
&.list
margin: 0 auto
@ -613,10 +557,8 @@
a.item-title, .item-info
padding-left: 70px
#blog_index-container,
#blog_post-container
#blog_index-container
.blog_index-item
padding: 25px 10px 20px 10px
position: relative
+media-xs
@ -624,19 +566,13 @@
&.list
padding: 15px 10px
margin: 0 25px
margin: 0
+media-xs
width: 100%
padding: 15px 10px
margin: 0
&.cloud-blog #blog_post-container,
#blog_post-container
.blog_index-item
padding-top: 55px
font-size: .9em
.blog-archive-navigation
+media-xs
@ -674,3 +610,14 @@
right: 0
top: 0
z-index: 1
#project_context
.blog_index-item
+media-xs
margin-left: 0
padding: 0
margin-left: 10px
#blog_container
.comments-container
margin-left: 30px

View File

@ -8,57 +8,41 @@ $tree-color-highlight-background-text: white
.jstree-default
/* list item */
.jstree-node
position: relative
max-width: 100% // Needed for ellipsis on long names
margin: 0 !important
color: $tree-color-text
background-image: none !important
transition: color 100ms ease-in-out, background-color 150ms ease-in-out
+media-xs
width: 100%
background-image: none !important
border: none
color: $tree-color-text
margin: 0 !important
max-width: 100% // Needed for ellipsis on long names
position: relative
&[data-node-type="asset"],
&[data-node-type="texture"],
&[data-node-type="hdri"]
.jstree-anchor
padding-right: 20px
&:before
font-family: 'pillar-font'
content: '\e84d'
color: $color-text-dark-hint
font-size: .8em
padding: 0 5px
position: absolute
right: 5px
&.jstree-clicked
&:before
color: $tree-color-highlight-background-text !important
&:after
display: none
&[is_free='true']
.jstree-anchor
padding-right: initial
&:before
display: none
&:after
display: none
color: $tree-color-highlight
content: '\e84e' !important
display: block
&[data-node-type="page"],
&[data-node-type="blog"]
font-size: 1.15em
color: darken($tree-color-highlight, 5%)
border-bottom: 2px solid $tree-color-highlight
&:hover
border-bottom-color: lighten($tree-color-highlight, 5%)
font-weight: bold
.jstree-anchor
padding: 5px 8px 1px 8px
&:after
top: 3px !important
.jstree-icon
display: none
@ -95,7 +79,7 @@ $tree-color-highlight-background-text: white
font-size: .85em !important
.jstree-anchor
border-left: thin solid rgba($tree-color-text, .2)
box-shadow: inset 1px 0 0 0 rgba($tree-color-text, .2)
/* Closed Folder */
// &.jstree-closed
@ -110,51 +94,58 @@ $tree-color-highlight-background-text: white
/* The text of the last level item */
.jstree-anchor
width: 100%
padding-left: 28px
padding-right: 10px
height: inherit
line-height: 26px
white-space: nowrap
text-overflow: ellipsis
overflow: hidden
border-bottom: thin solid transparent
transition: none
+media-xs
width: 98%
padding: 0 !important
border: none
height: inherit
line-height: 26px
overflow: hidden
padding-left: 28px
padding-right: 10px
text-overflow: ellipsis
transition: none
transition: color 50ms ease-in-out, background-color 100ms ease-in-out
white-space: nowrap
width: 100%
.jstree-icon
margin: 0 !important
font-size: 95% !important
color: $color-text-dark-secondary
/* Selected item */
&.jstree-clicked
background-color: $tree-color-highlight-background !important
color: $tree-color-highlight-background-text !important
.jstree-ocl, .jstree-icon
color: $tree-color-highlight-background-text !important
// Little arrow on the right
&:after
content: '\e83a'
content: '\e83a' !important
font-family: 'pillar-font'
color: $tree-color-highlight-background-text
color: white
display: none
position: absolute
right: 7px
top: 1px
li
a.jstree-anchor:after
content: ''
// Icon, not selected
.jstree-icon
color: $color-text-dark-secondary
font-size: 95% !important
margin: 0 !important
/* Selected item */
&.jstree-clicked
background-color: $tree-color-highlight-background !important
color: white !important
&:after
display: block
color: white !important
.jstree-ocl,
.jstree-icon
color: white
/* hover an active item */
&.jstree-hovered,
&.jstree-hovered .jstree-icon
color: $tree-color-highlight-background-text !important
&.jstree-hovered
background-color: lighten($tree-color-highlight-background, 10%) !important
box-shadow: none
color: white !important
&.jstree-hovered .jstree-icon
color: white !important
.jstree-hovered
background-color: rgba($tree-color-highlight, .1) !important
@ -196,45 +187,70 @@ $tree-color-highlight-background-text: white
line-height: 26px
left: 5px
&.is_subscriber .jstree-anchor
&.is_subscriber
.jstree-node
&[is_free='true']
.jstree-anchor
padding-right: initial
&:before
display: none
&:after
display: none
display: none !important
&.blog
.jstree-anchor
padding: 5px 5px 5px 10px
&:hover, &:hover i
padding: 6px 6px 6px 12px
&:hover
color: $tree-color-highlight
&.jstree-clicked .tree-item-info
color: white
&.post
border-bottom: thin solid $color-background-dark
&.jstree-clicked
&.post
background-color: transparent !important
&:after
top: 8px
color: $tree-color-highlight !important
.tree-item-info
display: block
font-size: .85em
margin-left: 40px
padding-top: 2px
line-height: 1em
color: $color-text-dark-secondary
color: $color-text
.tree-item-thumbnail
display: flex
.tree-item-title
color: $tree-color-highlight
.tree-item
line-height: initial
padding-right: 10px
&-title
font-size: 1.2em
overflow: initial
text-overflow: initial
white-space: normal
&-info
color: $color-text-dark-secondary
display: block
font-size: .8em
padding: 5px
&-thumbnail
align-items: center
justify-content: center
background-color: $color-background
width: 40px
height: 40px
float: left
margin: 0 5px 0 -5px
border-radius: 3px
color: $color-text-dark-secondary
display: flex
float: left
height: 70px
justify-content: center
margin: 0 10px 0 -5px
width: 70px
img
border-radius: 3px
width: 40px
height: 40px
height: 70px
width: 70px
.jstree-loading
@ -263,14 +279,16 @@ $tree-color-highlight-background-text: white
a.jstree-anchor.jstree-clicked+ul li a.jstree-anchor.jstree-clicked
background-color: rgba($tree-color-highlight-background, .7) !important
background-color: rgba($tree-color-highlight-background, .8) !important
color: white !important
a.jstree-anchor.jstree-clicked+ul li a.jstree-anchor.jstree-clicked+ul li a.jstree-anchor.jstree-clicked
background-color: rgba($tree-color-highlight-background, .8) !important
color: white !important
i.jstree-icon.jstree-ocl
height: 26px !important
color: rgba($tree-color-text, .5) !important
height: 26px !important
+media-xs
height: 40px !important