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

Style tweaks on projects

Browse Source 
Plus re-ordering and minor cleanup
This commit is contained in:
Pablo Vazquez
2017-09-17 20:11:04 +02:00
parent 53ac29cfd1
commit b2cfe46438
6 changed files with 58 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/styles/_comments.sass
View File

@@ -2,7 +2,6 @@ $comments-width-max: 710px
#comments-container #comments-container
position: relative position: relative
min-height: 170px
&.texture &.texture
border-top: none border-top: none

8
src/styles/_config.sass
View File

@@ -1,10 +1,10 @@
$color-background: #eaebec $color-background: #eaebec
$color-background-light: lighten($color-background, 5%) $color-background-light: lighten($color-background, 5%)
$color-background-dark: darken($color-background, 5%) $color-background-dark: darken($color-background, 5%)
$color-background-nav: hsl(hue($color-background), 20%, 25%) $color-background-nav: hsl(hue($color-background), 25%, 35%)
$color-background-nav-light: hsl(hue($color-background), 20%, 40%) $color-background-nav-light: hsl(hue($color-background), 25%, 45%)
$color-background-nav-dark: hsl(hue($color-background), 20%, 15%) $color-background-nav-dark: hsl(hue($color-background), 25%, 15%)
$color-background-active: #dff5f6 // background colour for active items. $color-background-active: #dff5f6 // background colour for active items.
$color-background-active-dark: hsl(hue($color-background-active), 50%, 50%) $color-background-active-dark: hsl(hue($color-background-active), 50%, 50%)
@@ -115,7 +115,7 @@ $node-type-comment: #66ccbd
$node-type-group: #c3a280 $node-type-group: #c3a280
$node-type-post: #647bce $node-type-post: #647bce
$list-node-children-item-width: 200px $list-node-children-item-width: 220px
$list-node-children-item-width_list: 60px $list-node-children-item-width_list: 60px
$list-node-children-item-width_square: 160px $list-node-children-item-width_square: 160px
$z-index-base: 13 $z-index-base: 13

8
src/styles/_homepage.sass
View File

@@ -722,6 +722,14 @@
&.what &.what
text-transform: capitalize text-transform: capitalize
&.project
padding: 10px 15px
a.title
font-size: 1.3em
a.random-asset__list-thumbnail
border-radius: 3px
&.featured &.featured
align-items: flex-start align-items: flex-start
flex-direction: column flex-direction: column

49
src/styles/_project.sass
View File

@@ -1,4 +1,5 @@
$project-sidebar-background: lighten($color-background, 5%) $project-sidebar-background: lighten($color-background, 5%)
$node-latest-thumbnail-size: 160px
body.open-projects, body.open-projects,
body.courses, body.courses,
@@ -197,17 +198,20 @@ body.blog
position: relative position: relative
#project_context-header #project_context-header
z-index: $z-index-base + 3 align-items: center
position: fixed background-color: white
top: $project_header-height background-color: $color-background-light
border-bottom: thin solid lighten($color-text-dark-hint, 10%)
box-shadow: none
color: $color-text-dark-secondary
display: flex
height: $project_header-height height: $project_header-height
min-height: $project_header-height min-height: $project_header-height
width: auto position: fixed
color: $color-text-dark-secondary top: $project_header-height
border-bottom: thin solid lighten($color-text-dark-hint, 10%)
background-color: $color-background-light
box-shadow: none
transition: box-shadow 250ms ease-in-out transition: box-shadow 250ms ease-in-out
width: auto
z-index: $z-index-base + 3
&.is-offset &.is-offset
box-shadow: 0 0 25px rgba(black, .2) box-shadow: 0 0 25px rgba(black, .2)
@@ -786,8 +790,7 @@ $node-preview-max-height-lg: 700px
height: 250px height: 250px
top: -10px top: -10px
left: -10px left: -10px
// We can't have nice things because of Edge filter: blur(10px)
// filter: blur(10px)
&:after &:after
content: '' content: ''
@@ -971,8 +974,6 @@ section.node-preview
cursor: zoom-in cursor: zoom-in
+media-sm
max-height: $node-preview-max-height-sm
+media-md +media-md
max-height: $node-preview-max-height-md max-height: $node-preview-max-height-md
+media-lg +media-lg
@@ -981,13 +982,12 @@ section.node-preview
img img
display: block display: block
max-height: $node-preview-max-height-lg max-height: $node-preview-max-height-lg
margin: 0 auto max-width: 100%
object-fit: scale-down
+media-xs +media-xs
width: 100% width: 100%
+media-sm
max-height: $node-preview-max-height-sm
+media-md +media-md
max-height: $node-preview-max-height-md max-height: $node-preview-max-height-md
+media-lg +media-lg
@@ -1585,7 +1585,6 @@ a.learn-more
border-color: $node-type-asset_video border-color: $node-type-asset_video
background-color: hsl(hue($node-type-asset_video), 20%, 55%) background-color: hsl(hue($node-type-asset_video), 20%, 55%)
$node-latest-thumbnail-size: 160px
.image .image
width: 100% width: 100%
height: $node-latest-thumbnail-size height: $node-latest-thumbnail-size
@@ -1799,9 +1798,9 @@ section.node-children
background-color: black background-color: black
.cloud-logo .cloud-logo
font-size: 4em
color: darken($color-background, 60%)
+position-center-translate +position-center-translate
font-size: 4em
color: $color-background-dark
left: $list-node-children-item-width / 2 - 10 left: $list-node-children-item-width / 2 - 10
/* Browse group as list */ /* Browse group as list */
@@ -1913,14 +1912,14 @@ section.node-children
margin-right: 5px margin-right: 5px
& .list-node-children-item-thumbnail .list-node-children-item-thumbnail
display: flex display: flex
align-items: center align-items: center
justify-content: center justify-content: center
width: $list-node-children-item-width width: $list-node-children-item-width
height: $list-node-children-item-width / 1.69 height: $list-node-children-item-width / 1.69
background-color: darken($color-background, 55%) background-color: $color-background
position: relative position: relative
overflow: hidden overflow: hidden
@@ -1928,7 +1927,7 @@ section.node-children
height: 100% height: 100%
+position-center-translate +position-center-translate
& .list-node-children-item-thumbnail-icon .list-node-children-item-thumbnail-icon
position: absolute position: absolute
top: 0 top: 0
left: 0 left: 0
@@ -1965,12 +1964,10 @@ section.node-children
display: flex display: flex
align-items: center align-items: center
color: $color-text-light background-color: $color-background
text-shadow: 1px 1px 0 rgba(black, .2)
background-color: darken($color-background, 60%)
padding: 5px 10px padding: 5px 12px
font-size: .85em font-size: .9em
width: $list-node-children-item-width width: $list-node-children-item-width
max-width: $list-node-children-item-width max-width: $list-node-children-item-width

1
src/styles/_utils.sass
View File

@@ -383,7 +383,6 @@
h1, h2, h3, h4, h5, h6 h1, h2, h3, h4, h5, h6
padding: padding:
top: 20px top: 20px
left: 20px
right: 20px right: 20px
blockquote blockquote

59
src/styles/base.sass
View File

@@ -245,7 +245,6 @@ header.navbar-header
nav.navbar, nav.sidebar nav.navbar, nav.sidebar
z-index: $z-index-base + 5 /* Flowplayer seems to take up to 11, project container is 12 */ z-index: $z-index-base + 5 /* Flowplayer seems to take up to 11, project container is 12 */
border: none border: none
border-width: 0
display: flex display: flex
align-items: center align-items: center
background-color: $color-background-nav background-color: $color-background-nav
@@ -262,45 +261,33 @@ nav.navbar, nav.sidebar
li li
user-select: none user-select: none
a.navbar-item a.navbar-item
user-select: none
color: $color-text-light-secondary
height: $navbar-height
display: flex
align-items: center align-items: center
padding: color: $color-text-light-secondary
top: 3px display: flex
bottom: 0 height: $navbar-height
left: 20px transition: color 150ms ease-in-out, box-shadow 100ms ease-in-out
right: 20px user-select: none
font-weight: 400
text-transform: uppercase
border-bottom: 3px solid transparent
transition: color 200ms ease-in-out, border-bottom 100ms ease-in-out
+media-md
padding-left: 15px
padding-right: 15px
+media-sm +media-sm
padding-left: 10px padding-left: 10px
padding-right: 10px padding-right: 10px
&:hover, &:focus &:hover, &:focus
color: $color-text-light color: $color-text-light
background-color: rgba($color-background-nav, .4) background-color: initial
border-bottom-color: $color-primary box-shadow: inset 0 -3px 0 $color-primary
&:focus &:focus
border-bottom-color: $color-primary box-shadow: inset 0 -3px 0 $color-primary
&.active &.active
color: $color-text-light color: $color-text-light
background-color: $color-background-nav box-shadow: inset 0 -3px 0 lighten($color-secondary, 10%)
border-bottom-color: lighten($color-secondary, 10%)
&:hover &:hover
border-bottom-color: lighten($color-secondary, 20%) box-shadow: inset 0 -3px 0 lighten($color-secondary, 20%)
.pi-angle-down .pi-angle-down
position: relative position: relative
@@ -349,15 +336,13 @@ nav.navbar, nav.sidebar
+position-center-translate +position-center-translate
.navbar-brand .navbar-brand
height: $navbar-height
display: flex display: flex
align-items: center align-items: center
margin-left: 0 !important
color: white color: white
padding: padding:
top: 8px top: 8px
left: 5px left: 5px
right: 20px // overrides bs right: 20px // overrides bootstrap
&:hover &:hover
span.app-logo span.app-logo
@@ -386,14 +371,13 @@ nav.navbar, nav.sidebar
transform: translate(-50%, -50%) transform: translate(-50%, -50%)
ul.dropdown-menu ul.dropdown-menu
padding-top: 0 padding: 0
li li
a a
background-color: rgba(white, .3) background-color: rgba(white, .3)
text-shadow: none text-shadow: none
height: initial height: initial
border-bottom: none
font: font:
family: $font-body family: $font-body
size: .9em size: .9em
@@ -402,6 +386,7 @@ nav.navbar, nav.sidebar
&:hover &:hover
color: $color-primary color: $color-primary
box-shadow: none
&.subitem &.subitem
font-size: .8em font-size: .8em
@@ -447,7 +432,6 @@ nav.navbar, nav.sidebar
ul.dropdown-menu ul.dropdown-menu
background-color: lighten($color-background-nav, 5%) background-color: lighten($color-background-nav, 5%)
color: white color: white
padding-top: 5px
left: 0 left: 0
right: auto right: auto
@@ -459,7 +443,12 @@ nav.navbar, nav.sidebar
color: $color-text-light-primary color: $color-text-light-primary
&:hover &:hover
color: $color-primary background-color: lighten($color-background-nav, 15%)
&:last-child a
border-bottom-left-radius: 3px
border-bottom-right-radius: 3px
&.disabled a &.disabled a
color: $color-text-dark-primary color: $color-text-dark-primary
cursor: default cursor: default
@@ -1091,10 +1080,9 @@ button, .btn
#cloud-search, .tt-hint #cloud-search, .tt-hint
+text-overflow-ellipsis +text-overflow-ellipsis
background-color: transparent
outline: none outline: none
border: thin solid transparent border: thin solid $color-background-nav-light
border-bottom: 3px solid transparent border-radius: 3px
font: font:
size: 1em size: 1em
weight: 400 weight: 400
@@ -1106,8 +1094,7 @@ button, .btn
transition: border 100ms ease-in-out transition: border 100ms ease-in-out
&:focus &:focus
border: thin solid transparent background-color: $color-background-nav-light
border-bottom: 3px solid lighten($color-primary, 5%)
outline: none outline: none
&::placeholder &::placeholder