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
position: relative
min-height: 170px
&.texture
border-top: none

8
src/styles/_config.sass
View File

@@ -1,10 +1,10 @@
$color-background: #eaebec
$color-background-light: lighten($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-dark: hsl(hue($color-background), 20%, 15%)
$color-background-nav-light: hsl(hue($color-background), 25%, 45%)
$color-background-nav-dark: hsl(hue($color-background), 25%, 15%)
$color-background-active: #dff5f6 // background colour for active items.
$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-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_square: 160px
$z-index-base: 13

8
src/styles/_homepage.sass
View File

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

49
src/styles/_project.sass
View File

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

59
src/styles/base.sass
View File

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