archive/pillar
0
0
Fork 0
Code Issues 42 Pull Requests Projects Releases Wiki Activity

Blog: Style tweaks and minor cleanup

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

665
src/styles/blog.sass
View File

@@ -8,160 +8,148 @@
#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
#blog_post-edit-form
padding: 20px
.form-group
position: relative
margin: 0 auto 30px auto
font-family: $font-body
.form-group
position: relative
margin: 0 auto 30px auto
font-family: $font-body
input, textarea, select
input, textarea, select
+input-generic
&#fileupload
color: $color-info
&.tags .select2-container
.select2-selection
+input-generic
&#fileupload
color: $color-info
select
text-transform: capitalize
&.tags .select2-container
.select2-selection
+input-generic
select
text-transform: capitalize
label
+label-generic
text-transform: capitalize
&.error
color: $color-danger
background-color: $color-background-light
padding: 10px 15px
border: thin solid lighten($color-danger, 10%)
border-top: 2px solid $color-danger
border-bottom-left-radius: 3px
border-bottom-right-radius: 3px
label
+label-generic
text-transform: capitalize
&.error
color: $color-danger
background-color: $color-background-light
padding: 10px 15px
border: thin solid lighten($color-danger, 10%)
border-top: 2px solid $color-danger
border-bottom-left-radius: 3px
border-bottom-right-radius: 3px
label
color: $color-danger
font-weight: 500
font-weight: 500
&.file
background-color: $color-background-light
padding: 10px 15px
border: thin solid $color-background
border-top: 2px solid $color-info
border-bottom-left-radius: 3px
border-bottom-right-radius: 3px
&.file
background-color: $color-background-light
padding: 10px 15px
border: thin solid $color-background
border-top: 2px solid $color-info
border-bottom-left-radius: 3px
border-bottom-right-radius: 3px
.form-upload-progress
.form-upload-progress-bar
margin-top: 5px
background-color: $color-success
height: 5px
min-width: 0
border-radius: 3px
.form-upload-progress
.form-upload-progress-bar
margin-top: 5px
background-color: $color-success
height: 5px
min-width: 0
border-radius: 3px
.form-group
.node-preview-thumbnail
display: block
.form-group
.node-preview-thumbnail
display: block
&.attachments
&.attachments
+clearfix
.form-control
padding: 0
margin: 0
border: none
list-style-type: none
+clearfix
.form-control
padding: 0
margin: 0
border: none
list-style-type: none
+clearfix
label[for^='attachments-']
margin-top: 15px
font-weight: 400
label[for^='attachments-']
margin-top: 15px
font-weight: 400
div[id^='attachments-']
margin-bottom: 15px
border-top: thin solid $color-text-dark-hint
div[id^='attachments-']
margin-bottom: 15px
border-top: thin solid $color-text-dark-hint
.form-group.description,
.form-group.summary,
.form-group.content
position: relative
.form-group.description,
.form-group.summary,
.form-group.content
position: relative
textarea
width: 100%
min-height: 220px
textarea
width: 100%
min-height: 220px
line-height: 1.5em
border: 1px solid $color-background-dark
border-radius: 3px
margin: 0 auto 10px auto
padding: 10px
color: $color-text-dark
line-height: 1.5em
border: 1px solid $color-background-dark
border-radius: 3px
margin: 0 auto 10px auto
padding: 10px
color: $color-text-dark
transition: all 300ms ease-in-out
resize: vertical
transition: all 300ms ease-in-out
resize: vertical
&:focus
border: 1px solid $color-info
outline: none
&:focus
border: 1px solid $color-info
outline: none
&.field-error
border-color: $color-danger
&.field-error
border-color: $color-danger
.md-preview-loading
.md-preview-loading
position: absolute
left: 85px
padding-top: 5px
font-size: .9em
color: $color-text-dark-secondary
display: none
.node-edit-form-md-preview
+markdown-preview-container
&:before
content: 'Live Preview'
position: absolute
left: 85px
padding-top: 5px
font-size: .9em
top: -25px
left: 20px
font-size: .7em
color: $color-text-dark-secondary
display: none
transition: color 150ms ease-in-out
.node-edit-form-md-preview
&:after
content: 'Markdown Supported'
position: absolute
top: -25px
right: 20px
font-size: .7em
color: $color-text-dark-hint
transition: color 150ms ease-in-out
+markdown-preview-container
margin:
left: -20px
right: -20px
padding:
top: 20px
left: 0
right: 0
&:before
content: 'Live Preview'
position: absolute
top: -25px
left: 20px
font-size: .7em
color: $color-text-dark-secondary
transition: color 150ms ease-in-out
&:after
content: 'Markdown Supported'
position: absolute
top: -25px
right: 20px
font-size: .7em
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,206 +159,193 @@
color: transparent
#node-edit-form-md-preview
padding: 20px
#blog_post-create-container,
#blog_post-edit-container
padding: 25px
&.post-create
flex-direction: row-reverse
#blog_index-container,
#blog_post-create-container,
#blog_post-edit-container
+container-box
width: 75%
#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
+media-xs
border-radius: 0
width: 100%
clear: both
display: block
+media-sm
width: 60%
+media-md
width: 70%
+media-lg
width: 75%
+media-xs
border-radius: 0
width: 100%
clear: both
display: block
+media-sm
width: 60%
+media-md
width: 70%
+media-lg
width: 75%
.blog_index-header
border-top-left-radius: 3px
border-top-right-radius: 3px
display: block
overflow: hidden
position: relative
text-align: center
width: 100%
.blog_index-header
img
width: 100%
.blog_index-item
+media-lg
max-width: 880px
+media-md
max-width: 880px
+media-sm
max-width: 780px
margin: 15px auto
&:hover
.item-info a
color: $color-primary
.item-picture
position: relative
width: 100%
max-height: 350px
min-height: 200px
height: auto
overflow: hidden
border-top-left-radius: 3px
border-top-right-radius: 3px
display: block
overflow: hidden
position: relative
text-align: center
width: 100%
+clearfix
img
+position-center-translate
width: 100%
.blog_index-item
+media-lg
max-width: 780px
margin: 0 auto 15px auto
&:hover
.item-info a
color: $color-primary
.item-picture
position: relative
width: 100%
max-height: 350px
min-height: 200px
height: auto
overflow: hidden
border-top-left-radius: 3px
border-top-right-radius: 3px
+clearfix
img
+position-center-translate
width: 100%
border-top-left-radius: 3px
border-top-right-radius: 3px
+media-xs
min-height: 150px
+media-sm
min-height: 150px
+media-md
min-height: 250px
+media-lg
min-height: 250px
.item-title
color: $color-text-dark
display: block
font:
family: $font-body
size: 2em
padding: 25px 25px 10px 25px
.item-info
color: $color-text-dark-secondary
font-size: 1em
padding:
left: 25px
right: 25px
a
color: $color-text-dark-secondary
&:hover
color: $color-primary
.item-content
+node-details-description
padding: 35px 25px
font-size: 1.3em
+media-xs
padding:
left: 0
right: 0
img
display: block
margin: 0 auto
.item-meta
color: $color-text-dark-secondary
padding:
left: 25px
right: 25px
+media-xs
padding:
left: 10px
right: 10px
.button-create, .button-edit
position: absolute
z-index: 2
top: 20px
right: 20px
+button($color-success, 6px, true)
.button-edit
right: 170px
top: 15px
.item-picture+.button-back+.button-edit
right: 20px
top: 20px
.comments-container
padding:
left: 20px
right: 20px
max-width: 680px
margin: 0 auto
+media-xs
min-height: 150px
+media-sm
min-height: 150px
+media-md
min-height: 250px
+media-lg
min-height: 250px
.item-title
color: $color-text-dark
display: block
font:
family: $font-body
size: 1.8em
padding-bottom: 10px
padding-top: 20px
.item-info
color: $color-text-dark-secondary
font-size: 1em
a
color: $color-text-dark-secondary
&:hover
color: $color-primary
.item-content
+node-details-description
padding: 35px 25px
font-size: 1.3em
+media-xs
padding:
left: 0
right: 0
.comment-reply-container
background-color: transparent
.comment-reply-field
textarea, .comment-reply-meta
background-color: $color-background-light
&.filled
.comment-reply-meta
background-color: $color-success
.comment-reply-form
+media-xs
padding:
left: 0
#blog_post-edit-form
padding: 0
.form-group
label
text-transform: capitalize
.form-group.content
.form-control
min-height: 350px
.form-group.url
label
text-transform: uppercase
.form-group.picture
+text-overflow-ellipsis
img
display: block
max-width: 100%
margin: 0 auto
a
display: block
padding: 10px 0
text-align: right
.item-meta
color: $color-text-dark-secondary
padding:
left: 25px
right: 25px
.original a
color: $color-info
.delete a
color: $color-danger
+media-xs
padding:
left: 10px
right: 10px
.form-upload-file-meta
width: initial
.button-create,
.button-edit
+button($color-success, 3px, true)
.item-picture+.button-back+.button-edit
right: 20px
top: 20px
.comments-container
padding:
left: 20px
right: 20px
max-width: 680px
margin: 0 auto
+media-lg
padding:
left: 0
right: 0
.comment-reply-container
background-color: transparent
.comment-reply-field
textarea, .comment-reply-meta
background-color: $color-background-light
&.filled
.comment-reply-meta
background-color: $color-success
.comment-reply-form
+media-xs
padding:
left: 0
#blog_post-edit-form
padding: 0
.form-group
label
text-transform: capitalize
.form-group.content
.form-control
min-height: 350px
.form-group.url
label
text-transform: uppercase
.form-group.picture
+text-overflow-ellipsis
img
display: block
max-width: 100%
a
display: block
padding: 10px 0
text-align: right
.original a
color: $color-info
.delete a
color: $color-danger
.form-upload-file-meta
width: initial
#blog_post-edit-title
padding: 0
@@ -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,29 +557,21 @@
a.item-title, .item-info
padding-left: 70px
#blog_index-container,
#blog_post-container
.blog_index-item
padding: 25px 10px 20px 10px
position: relative
#blog_index-container
.blog_index-item
position: relative
+media-xs
padding: 25px 0 20px 0
&.list
padding: 15px 10px
margin: 0
+media-xs
padding: 25px 0 20px 0
&.list
width: 100%
padding: 15px 10px
margin: 0 25px
+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
margin: 0
.blog-archive-navigation
@@ -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