385 lines
8.5 KiB
Sass
385 lines
8.5 KiB
Sass
// Bootstrap variables and utilities.
|
|
@import "../../node_modules/bootstrap/scss/functions"
|
|
@import "../../node_modules/bootstrap/scss/variables"
|
|
@import "../../node_modules/bootstrap/scss/mixins"
|
|
|
|
// Pillar variables and utilities.
|
|
@import "../../../pillar/src/styles/config"
|
|
@import "../../../pillar/src/styles/utils"
|
|
|
|
// Bootstrap components.
|
|
@import "../../node_modules/bootstrap/scss/root"
|
|
@import "../../node_modules/bootstrap/scss/reboot"
|
|
|
|
@import "../../node_modules/bootstrap/scss/type"
|
|
@import "../../node_modules/bootstrap/scss/images"
|
|
|
|
@import "../../node_modules/bootstrap/scss/code"
|
|
@import "../../node_modules/bootstrap/scss/grid"
|
|
@import "../../node_modules/bootstrap/scss/tables"
|
|
@import "../../node_modules/bootstrap/scss/forms"
|
|
@import "../../node_modules/bootstrap/scss/buttons"
|
|
@import "../../node_modules/bootstrap/scss/transitions"
|
|
@import "../../node_modules/bootstrap/scss/dropdown"
|
|
@import "../../node_modules/bootstrap/scss/button-group"
|
|
@import "../../node_modules/bootstrap/scss/input-group"
|
|
@import "../../node_modules/bootstrap/scss/custom-forms"
|
|
|
|
@import "../../node_modules/bootstrap/scss/nav"
|
|
@import "../../node_modules/bootstrap/scss/navbar"
|
|
|
|
@import "../../node_modules/bootstrap/scss/card"
|
|
@import "../../node_modules/bootstrap/scss/breadcrumb"
|
|
@import "../../node_modules/bootstrap/scss/pagination"
|
|
@import "../../node_modules/bootstrap/scss/badge"
|
|
@import "../../node_modules/bootstrap/scss/jumbotron"
|
|
@import "../../node_modules/bootstrap/scss/alert"
|
|
@import "../../node_modules/bootstrap/scss/progress"
|
|
@import "../../node_modules/bootstrap/scss/media"
|
|
@import "../../node_modules/bootstrap/scss/list-group"
|
|
@import "../../node_modules/bootstrap/scss/close"
|
|
@import "../../node_modules/bootstrap/scss/modal"
|
|
@import "../../node_modules/bootstrap/scss/tooltip"
|
|
@import "../../node_modules/bootstrap/scss/popover"
|
|
@import "../../node_modules/bootstrap/scss/carousel"
|
|
|
|
@import "../../node_modules/bootstrap/scss/utilities"
|
|
@import "../../node_modules/bootstrap/scss/print"
|
|
|
|
|
|
// Pillar components.
|
|
@import "../../../pillar/src/styles/apps_base"
|
|
@import "../../../pillar/src/styles/error"
|
|
|
|
@import "../../../pillar/src/styles/components/base"
|
|
|
|
@import "../../../pillar/src/styles/components/jumbotron"
|
|
@import "../../../pillar/src/styles/components/alerts"
|
|
@import "../../../pillar/src/styles/components/navbar"
|
|
@import "../../../pillar/src/styles/components/dropdown"
|
|
@import "../../../pillar/src/styles/components/footer"
|
|
@import "../../../pillar/src/styles/components/shortcode"
|
|
@import "../../../pillar/src/styles/components/statusbar"
|
|
@import "../../../pillar/src/styles/components/search"
|
|
|
|
@import "../../../pillar/src/styles/components/flyout"
|
|
@import "../../../pillar/src/styles/components/inputs"
|
|
@import "../../../pillar/src/styles/components/buttons"
|
|
@import "../../../pillar/src/styles/components/popover"
|
|
@import "../../../pillar/src/styles/components/tooltip"
|
|
@import "../../../pillar/src/styles/components/checkbox"
|
|
@import "../../../pillar/src/styles/components/overlay"
|
|
@import "../../../pillar/src/styles/components/card"
|
|
|
|
@import "../../../pillar/src/styles/notifications"
|
|
|
|
@import "../../../pillar/src/styles/_search"
|
|
|
|
$node-latest-thumbnail-size: 160px
|
|
$node-latest-gallery-thumbnail-size: 200px
|
|
|
|
nav.navbar
|
|
.navbar-header
|
|
+media-xs
|
|
width: 100%
|
|
|
|
.navbar-toggle
|
|
border: none
|
|
color: $color-text
|
|
position: absolute
|
|
right: 10px
|
|
|
|
.navbar-nav
|
|
+media-xs
|
|
padding: 10px
|
|
|
|
.search-input
|
|
display: none
|
|
|
|
.node-details-container
|
|
max-width: 620px
|
|
font-size: 1.3em
|
|
line-height: 1.5em
|
|
margin: 0 auto 40px auto
|
|
padding-bottom: 40px
|
|
|
|
+media-xs
|
|
padding-left: 10px
|
|
padding-right: 10px
|
|
|
|
p
|
|
margin-bottom: 1.3em
|
|
|
|
header
|
|
display: flex
|
|
flex-direction: column /* stack flex items vertically */
|
|
position: relative
|
|
img.header
|
|
width: 100%
|
|
flex-direction: column /* stack flex items vertically */
|
|
position: relative
|
|
a.page-card-cta
|
|
position: absolute
|
|
left: 76%
|
|
top: 50%
|
|
transform: translate(-50%, -50%)
|
|
color: white
|
|
font-weight: bold
|
|
background: #ff4970
|
|
border-radius: 3px
|
|
border: none
|
|
box-shadow: 1px 1px 0 rgba(black, .2)
|
|
padding: 7px 20px
|
|
text-decoration: none
|
|
text-shadow: none
|
|
|
|
&:hover
|
|
background: lighten(#ff4970, 5%)
|
|
|
|
.landing
|
|
h2
|
|
text-align: center
|
|
margin-bottom: 40px
|
|
|
|
section
|
|
max-width: 1024px
|
|
padding-top: 20px
|
|
border-top: thin solid $color-background
|
|
margin: 0 auto
|
|
|
|
.navbar-secondary
|
|
max-width: 620px
|
|
margin: 0 auto
|
|
|
|
.navbar-collapse
|
|
padding-left: 0
|
|
|
|
li
|
|
a
|
|
padding-left: 20px
|
|
padding-right: 20px
|
|
color: $color-text
|
|
&:hover
|
|
&.active
|
|
background: none
|
|
color: black
|
|
box-shadow: 0px 2px 0 rgba(red, .8)
|
|
|
|
.node-extra
|
|
display: flex
|
|
flex-direction: column
|
|
|
|
//padding: 0 20px
|
|
width: 100%
|
|
|
|
|
|
.node-updates
|
|
flex: 1
|
|
font-size: 1.1em
|
|
|
|
ul
|
|
padding: 0
|
|
margin: 0 0 15px 0
|
|
display: flex
|
|
flex-direction: row
|
|
flex-wrap: wrap
|
|
|
|
li
|
|
display: flex
|
|
flex-direction: column
|
|
list-style: none
|
|
padding: 5px
|
|
cursor: pointer
|
|
width: 33.3333%
|
|
|
|
+media-xs
|
|
width: 100%
|
|
|
|
&.texture, &.group_texture
|
|
width: 25%
|
|
|
|
&:hover
|
|
img
|
|
opacity: .9
|
|
a.title
|
|
//color: $color-primary
|
|
text-decoration: underline
|
|
|
|
&.post
|
|
.info .title
|
|
//color: $node-type-post
|
|
font-size: 1.1em
|
|
a.image
|
|
border: none
|
|
//border-color: $node-type-post
|
|
background-color: hsl(hue($node-type-post), 20%, 55%)
|
|
|
|
&.asset.image a.image
|
|
border-color: $node-type-asset_image
|
|
background-color: hsl(hue($node-type-asset_image), 20%, 55%)
|
|
&.asset.file a.image
|
|
border-color: $node-type-asset_file
|
|
background-color: hsl(hue($node-type-asset_file), 20%, 55%)
|
|
&.asset.video a.image
|
|
border-color: $node-type-asset_video
|
|
background-color: hsl(hue($node-type-asset_video), 20%, 55%)
|
|
|
|
.image
|
|
width: 100%
|
|
height: $node-latest-thumbnail-size
|
|
min-height: $node-latest-thumbnail-size
|
|
max-height: $node-latest-thumbnail-size
|
|
background-color: $color-background
|
|
margin: 5px auto 10px auto
|
|
position: relative
|
|
overflow: hidden
|
|
border-radius: 0
|
|
|
|
img
|
|
max-height: $node-latest-thumbnail-size
|
|
+position-center-translate
|
|
|
|
i
|
|
color: rgba(white, .9)
|
|
font-size: 1.8em
|
|
position: absolute
|
|
bottom: 3px
|
|
left: 5px
|
|
text-shadow: 1px 1px 0 rgba(black, .2)
|
|
|
|
&.pi-file-archive
|
|
font-size: 1.5em
|
|
bottom: 5px
|
|
&.pi-newspaper
|
|
font-size: 1.6em
|
|
left: 7px
|
|
|
|
.ribbon
|
|
+ribbon
|
|
|
|
.info
|
|
width: 100%
|
|
height: 100%
|
|
display: flex
|
|
flex-direction: column
|
|
justify-content: space-between
|
|
word-break: break-word
|
|
|
|
.description
|
|
font-size: 1em
|
|
line-height: 1.8em
|
|
padding-top: 8px
|
|
color: $color-text-dark-primary
|
|
|
|
.title
|
|
display: block
|
|
font-size: 1.3em
|
|
color: $color-text-dark
|
|
font-weight: 600
|
|
+clearfix
|
|
+text-overflow-ellipsis
|
|
|
|
span.details
|
|
width: 100%
|
|
display: block
|
|
font-size: 1em
|
|
line-height: 1.2em
|
|
padding: 5px 0
|
|
color: $color-text-dark-secondary
|
|
+clearfix
|
|
|
|
.who
|
|
margin-left: 3px
|
|
.what
|
|
text-transform: capitalize
|
|
|
|
|
|
$bg-color: #444
|
|
$bg-color2: #666
|
|
$yellow: rgb(249,229,89)
|
|
$almost-white: rgb(255,255,255)
|
|
$btn-transparent-color: rgba(249,229,89,1)
|
|
$btn-transparent-bg: rgba(249,229,89,0)
|
|
|
|
|
|
section.gallery
|
|
max-width: 1024px
|
|
margin: 60px auto 0 auto
|
|
text-align: center
|
|
padding-bottom: 40px
|
|
|
|
p
|
|
color: $almost-white
|
|
padding: 0 40px
|
|
|
|
|
|
.thumbnail
|
|
float: left
|
|
position: relative
|
|
width: 23%
|
|
padding-bottom: 23%
|
|
margin: 0.83%
|
|
overflow: hidden
|
|
&:hover
|
|
box-shadow: 2px 2px 50px 0 rgba(0,0,0,0.3)
|
|
|
|
.img-container
|
|
position: absolute
|
|
width: 100%
|
|
height: 100%
|
|
|
|
img
|
|
width: 300%
|
|
transform: translate(-20%,-10%)
|
|
|
|
&:hover .img-caption
|
|
top: 0
|
|
left: 0
|
|
.btn-trans
|
|
background: rgba(255,255,255,0.4)
|
|
|
|
.img-caption
|
|
position: absolute
|
|
width: 100%
|
|
height: 100%
|
|
background: rgba(0, 0, 0, 0.3)
|
|
text-align: center
|
|
|
|
.table
|
|
display: table
|
|
.table-cell
|
|
display: table-cell
|
|
vertical-align: bottom
|
|
border: none
|
|
|
|
@media screen and (max-width: 992px)
|
|
.thumbnail
|
|
width: 22%
|
|
padding-bottom: 22%
|
|
margin: 1.5%
|
|
|
|
.img-container:hover .img-caption
|
|
top: 0
|
|
left: 0
|
|
|
|
.img-caption
|
|
position: absolute
|
|
width: 100%
|
|
height: 100%
|
|
background: rgba(0, 0, 0, .7)
|
|
text-align: center
|
|
a
|
|
color: $yellow
|
|
|
|
@media screen and (max-width: 720px)
|
|
.thumbnail
|
|
width: 29%
|
|
padding-bottom: 29%
|
|
margin: 2.16%
|
|
|
|
@media screen and (max-width: 470px)
|
|
.thumbnail
|
|
width: 44%
|
|
padding-bottom: 44%
|
|
margin: 3%
|