From 1015254d936d65c4f0a619c5631a58c8cd9dc488 Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Fri, 14 Sep 2018 17:13:23 +0200 Subject: [PATCH] Bring project-main from Pillar Rename project-landing, to _project-landing and include it in project-main. It's just a few lines of code to be worth keeping as a separate CSS. --- src/styles/_project-landing.sass | 219 +++++++++++++++++ src/styles/project-landing.sass | 381 ----------------------------- src/styles/project-main.sass | 86 +++++++ src/templates/projects/landing.pug | 2 +- src/templates/projects/view.pug | 2 +- 5 files changed, 307 insertions(+), 383 deletions(-) create mode 100644 src/styles/_project-landing.sass delete mode 100644 src/styles/project-landing.sass create mode 100644 src/styles/project-main.sass diff --git a/src/styles/_project-landing.sass b/src/styles/_project-landing.sass new file mode 100644 index 0000000..fde8288 --- /dev/null +++ b/src/styles/_project-landing.sass @@ -0,0 +1,219 @@ +$node-latest-thumbnail-size: 160px +$node-latest-gallery-thumbnail-size: 200px + +.landing + .node-details-description + iframe + max-width: 100% + + .node-extra + display: flex + flex-direction: column + 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 + + .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) + + + .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% diff --git a/src/styles/project-landing.sass b/src/styles/project-landing.sass deleted file mode 100644 index 051e75e..0000000 --- a/src/styles/project-landing.sass +++ /dev/null @@ -1,381 +0,0 @@ -// Bootstrap variables and utilities. -@import "../../../pillar/node_modules/bootstrap/scss/functions" -@import "../../../pillar/node_modules/bootstrap/scss/variables" -@import "../../../pillar/node_modules/bootstrap/scss/mixins" - -// Pillar variables and utilities. -@import "../../../pillar/src/styles/config" -@import "../../../pillar/src/styles/utils" - -// Bootstrap components. -@import "../../../pillar/node_modules/bootstrap/scss/root" -@import "../../../pillar/node_modules/bootstrap/scss/reboot" - -@import "../../../pillar/node_modules/bootstrap/scss/type" -@import "../../../pillar/node_modules/bootstrap/scss/images" - -@import "../../../pillar/node_modules/bootstrap/scss/code" -@import "../../../pillar/node_modules/bootstrap/scss/grid" -@import "../../../pillar/node_modules/bootstrap/scss/tables" -@import "../../../pillar/node_modules/bootstrap/scss/forms" -@import "../../../pillar/node_modules/bootstrap/scss/buttons" -@import "../../../pillar/node_modules/bootstrap/scss/transitions" -@import "../../../pillar/node_modules/bootstrap/scss/dropdown" -@import "../../../pillar/node_modules/bootstrap/scss/button-group" -@import "../../../pillar/node_modules/bootstrap/scss/input-group" -@import "../../../pillar/node_modules/bootstrap/scss/custom-forms" - -@import "../../../pillar/node_modules/bootstrap/scss/nav" -@import "../../../pillar/node_modules/bootstrap/scss/navbar" - -@import "../../../pillar/node_modules/bootstrap/scss/card" -@import "../../../pillar/node_modules/bootstrap/scss/breadcrumb" -@import "../../../pillar/node_modules/bootstrap/scss/pagination" -@import "../../../pillar/node_modules/bootstrap/scss/badge" -@import "../../../pillar/node_modules/bootstrap/scss/jumbotron" -@import "../../../pillar/node_modules/bootstrap/scss/alert" -@import "../../../pillar/node_modules/bootstrap/scss/progress" -@import "../../../pillar/node_modules/bootstrap/scss/media" -@import "../../../pillar/node_modules/bootstrap/scss/list-group" -@import "../../../pillar/node_modules/bootstrap/scss/close" -@import "../../../pillar/node_modules/bootstrap/scss/modal" -@import "../../../pillar/node_modules/bootstrap/scss/tooltip" -@import "../../../pillar/node_modules/bootstrap/scss/popover" -@import "../../../pillar/node_modules/bootstrap/scss/carousel" - -@import "../../../pillar/node_modules/bootstrap/scss/utilities" -@import "../../../pillar/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 - - .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% diff --git a/src/styles/project-main.sass b/src/styles/project-main.sass new file mode 100644 index 0000000..9801e1b --- /dev/null +++ b/src/styles/project-main.sass @@ -0,0 +1,86 @@ +// Bootstrap variables and utilities. +@import "../../../pillar/node_modules/bootstrap/scss/functions" +@import "../../../pillar/node_modules/bootstrap/scss/variables" +@import "../../../pillar/node_modules/bootstrap/scss/mixins" + +// Pillar variables and utilities. +@import "../../../pillar/src/styles/_config" +@import "../../../pillar/src/styles/_utils" + +// Bootstrap components. +@import "../../../pillar/node_modules/bootstrap/scss/root" +@import "../../../pillar/node_modules/bootstrap/scss/reboot" + +@import "../../../pillar/node_modules/bootstrap/scss/type" +@import "../../../pillar/node_modules/bootstrap/scss/images" + +@import "../../../pillar/node_modules/bootstrap/scss/code" +@import "../../../pillar/node_modules/bootstrap/scss/grid" +@import "../../../pillar/node_modules/bootstrap/scss/tables" +@import "../../../pillar/node_modules/bootstrap/scss/forms" +@import "../../../pillar/node_modules/bootstrap/scss/buttons" +@import "../../../pillar/node_modules/bootstrap/scss/transitions" +@import "../../../pillar/node_modules/bootstrap/scss/dropdown" +@import "../../../pillar/node_modules/bootstrap/scss/button-group" +@import "../../../pillar/node_modules/bootstrap/scss/input-group" +@import "../../../pillar/node_modules/bootstrap/scss/custom-forms" + +@import "../../../pillar/node_modules/bootstrap/scss/nav" +@import "../../../pillar/node_modules/bootstrap/scss/navbar" + +@import "../../../pillar/node_modules/bootstrap/scss/card" +@import "../../../pillar/node_modules/bootstrap/scss/breadcrumb" +@import "../../../pillar/node_modules/bootstrap/scss/pagination" +@import "../../../pillar/node_modules/bootstrap/scss/badge" +@import "../../../pillar/node_modules/bootstrap/scss/jumbotron" +@import "../../../pillar/node_modules/bootstrap/scss/alert" +@import "../../../pillar/node_modules/bootstrap/scss/progress" +@import "../../../pillar/node_modules/bootstrap/scss/media" +@import "../../../pillar/node_modules/bootstrap/scss/list-group" +@import "../../../pillar/node_modules/bootstrap/scss/close" +@import "../../../pillar/node_modules/bootstrap/scss/modal" +@import "../../../pillar/node_modules/bootstrap/scss/tooltip" +@import "../../../pillar/node_modules/bootstrap/scss/popover" +@import "../../../pillar/node_modules/bootstrap/scss/carousel" + +@import "../../../pillar/node_modules/bootstrap/scss/utilities" +@import "../../../pillar/node_modules/bootstrap/scss/print" + +// Pillar components. +@import "../../../pillar/src/styles/apps_base" +@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/forms" +@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/_comments" + +@import "../../../pillar/src/styles/_project" +@import "../../../pillar/src/styles/_project-sharing" +@import "../../../pillar/src/styles/_project-dashboard" +@import "../../../pillar/src/styles/_error" + +@import "../../../pillar/src/styles/_search" + +@import "../../../pillar/src/styles/plugins/_jstree" +@import "../../../pillar/src/styles/plugins/_js_select2" + +// Cloud components. +@import "_project-landing" diff --git a/src/templates/projects/landing.pug b/src/templates/projects/landing.pug index 7ed9e6a..b4f6a1d 100644 --- a/src/templates/projects/landing.pug +++ b/src/templates/projects/landing.pug @@ -79,7 +79,7 @@ script(src="{{ url_for('static_pillar', filename='assets/js/vendor/videojs-hotke | {% block css %} link(href="{{ url_for('static_pillar', filename='assets/css/font-pillar.css') }}", rel="stylesheet") -link(href="{{ url_for('static_cloud', filename='assets/css/project-landing.css') }}", rel="stylesheet") +link(href="{{ url_for('static_cloud', filename='assets/css/project-main.css') }}", rel="stylesheet") | {% endblock %} | {% block body %} diff --git a/src/templates/projects/view.pug b/src/templates/projects/view.pug index f15046c..e8da29c 100644 --- a/src/templates/projects/view.pug +++ b/src/templates/projects/view.pug @@ -81,7 +81,7 @@ script(src="{{ url_for('static_pillar', filename='assets/js/video_plugins.min.js | {% block css %} link(href="{{ url_for('static_pillar', filename='assets/css/font-pillar.css') }}", rel="stylesheet") -link(href="{{ url_for('static_pillar', filename='assets/css/project-main.css') }}", rel="stylesheet") +link(href="{{ url_for('static_cloud', filename='assets/css/project-main.css') }}", rel="stylesheet") | {% endblock %} | {% block navigation_tabs %}