diff --git a/src/styles/_homepage.sass b/src/styles/_homepage.sass deleted file mode 100644 index 6ed30c47..00000000 --- a/src/styles/_homepage.sass +++ /dev/null @@ -1,1061 +0,0 @@ -.dashboard-container - display: flex - justify-content: space-around - align-items: flex-start - align-content: center - word-break: break-word - - +container-behavior - - +media-xs - flex-direction: column - - section#main - +container-box - margin: 20px auto - width: 52% - - +media-xs - width: 100% - border-radius: 0 - - section#side - width: 46% - flex-direction: column - margin-right: auto - - +media-xs - width: 100% - - section.announcement, - section#blog-stream, - section#random-asset - +container-box - margin: 20px auto - - +media-xs - border-radius: 0 - - span.section-lead - display: block - padding: 10px 0 10px 15px - color: $color-text-dark-secondary - - section#main, - section#side - h3 - margin: 0 - padding: 15px - cursor: default - font: - family: $font-body - size: 1.4em - - a - color: $color-text-dark - &:hover - color: $color-primary - cursor: pointer - - section#nav-tabs, - section#sub-nav-tabs - ul#nav-tabs__list, - ul#sub-nav-tabs__list - margin: 0 - padding: 0 - list-style: none - border-bottom: thin solid $color-background - +clearfix - - li.nav-tabs__list-tab - float: left - font: - size: 1.2em - weight: 400 - border: none - border-bottom: 3px solid transparent - color: $color-text-dark-primary - user-select: none - - &:hover - border-color: rgba($color-secondary, .3) - cursor: pointer - color: $color-text-dark - a - color: $color-text-dark - - a - display: block - text-decoration: none - padding: 15px 20px 10px 20px - color: $color-text-dark-primary - - i - margin-right: 5px - color: $color-text-dark-secondary - font-size: .9em - - &.pi-blender - margin-right: 10px - - span - color: $color-text-dark-hint - margin-left: 5px - - &.active - border-color: $color-secondary - color: $color-secondary-dark - a, i - color: $color-secondary-dark - - &.disabled - border-color: $color-background-light - color: $color-text-dark-hint - cursor: default - a, i - color: $color-text-dark-hint - - &:hover - border-color: $color-background-light - pointer-events: none - - li.create - float: right - cursor: pointer - font: - size: 1.2em - weight: 400 - display: inline-block - padding: 10px 10px - - a - color: $color-success - text-decoration: none - - &.disabled - cursor: wait - border-color: $color-success - opacity: .8 - a - cursor: wait - - section#stream - position: relative - background-color: $color-background-light - border-bottom-left-radius: 3px - border-bottom-right-radius: 3px - - h3 - padding: - top: 25px - left: 15px - bottom: 0 - span - padding-left: 5px - color: $color-text-dark-secondary - - ul#activity-stream__list - margin: 0 - padding: 15px 0 - list-style: none - - $activity-stream-thumbnail-size: 110px - li.activity-stream__list-item - position: relative - display: flex - margin: 0 10px 5px - background-color: white - border-radius: 3px - box-shadow: 0 0 0 1px rgba(black, .05), 0 2px 2px rgba(black, .1) - overflow: hidden - - &.active .activity-stream__list-details .title - color: $color-primary - - &:hover - .title - text-decoration: underline - &.video - border-color: $node-type-asset_video - a.image - &:hover - i - font-size: 3.5em - img - opacity: .9 - img - opacity: .7 - z-index: 0 - transition: opacity 150ms ease-in-out - - i - +position-center-translate - z-index: 1 - color: rgba(white, .6) - font-size: 3em - transition: font-size 100ms ease-in-out - - &.image - border-color: $node-type-asset_image - - &.file - border-color: $node-type-asset_file - - &.comment - .activity-stream__list-thumbnail - background: transparent - border-color: $node-type-comment - color: $node-type-comment - font-size: 1.2em - box-shadow: none - - i - +position-center-translate - left: 22px - top: 19px - - .activity-stream__list-details - padding: 0 - .title - color: $color-text-dark - padding: 7px 10px 2px 10px - font-size: 1em - margin: 0 - - ul.meta - padding: 0 10px 7px 10px - - li - &.where-parent:before - content: '\e83a' - font-family: 'pillar-font' - - &.what:before - display: none - - &.post - .activity-stream__list-thumbnail - border-color: $node-type-post - background-color: $node-type-post - .activity-stream__list-details .title - color: darken($node-type-post, 15%) - font: - size: 1.3em - weight: 500 - - &.asset, &.comment, &.post - &:hover - cursor: pointer - &.empty - display: none - color: $color-text-dark-primary - padding: 20px - text-align: center - span - color: $color-primary - &:hover - text-decoration: underline - cursor: pointer - - &.with-picture - min-height: $activity-stream-thumbnail-size - - .activity-stream__list-thumbnail - background-color: black - width: $activity-stream-thumbnail-size * 1.69 - min-width: $activity-stream-thumbnail-size * 1.69 - - .activity-stream__list-thumbnail-icon - position: absolute - top: 0 - left: 0 - right: 0 - bottom: 0 - font-size: 1.3em - text-shadow: 1px 1px 0 rgba(black, .2) - background-image: linear-gradient(10deg, rgba(black, .5) 0%, transparent 40%) - - i - position: absolute - bottom: -8px - left: 20px - top: initial - right: initial - color: white - - .activity-stream__list-thumbnail - position: relative - display: flex - justify-content: center - align-items: center - overflow: hidden - width: 35px - height: auto - min-width: 35px - min-height: auto - - +media-xs - display: none - - - &.image i - color: $node-type-asset_image - &.file i - color: $node-type-asset_file - &.video i - color: $node-type-asset_video - - i - +position-center-translate - left: 23px - top: 21px - font-size: 1.1em - - img - max-height: $activity-stream-thumbnail-size - +position-center-translate - - .activity-stream__list-details - display: flex - flex-direction: column - justify-content: space-around - flex: 1 - overflow: hidden - position: relative - max-width: 100% - margin-right: auto - padding: 10px 0 - - +media-xs - margin-left: 0 - - .ribbon - +ribbon - right: -47px - top: 5px - font: - size: 12px - weight: 500 - - span - padding: 1px 50px - - .title - display: inline-block - padding: 0 10px - color: $color-text-dark - font-size: 1.1em - - span - @include badge(hsl(hue($color-success), 60%, 45%), 3px) - font-size: .7em - padding: 1px 5px - margin-right: 5px - - ul.meta - +list-meta - padding: 5px 10px 0 10px - font-size: .85em - color: $color-text-dark-secondary - display: flex - white-space: nowrap - - &.extra - margin-top: auto - - li - padding-left: 10px - &:before - left: -5px - &.where-project - +text-overflow-ellipsis - - ul#activity-stream__filters - margin: 0 - padding: 0 - list-style: none - position: absolute - top: 20px - right: 15px - border-radius: 3px - - li - float: left - padding: 5px - cursor: pointer - border: thin solid $color-background - border-right: none - background-color: white - color: $color-text-dark-primary - - &:hover - color: $color-primary - - /* First is the 'filter by' label */ - &:first-child - border: none - background-color: transparent - border-top-left-radius: 3px - border-bottom-left-radius: 3px - color: $color-text-dark-hint - font-size: .9em - - &:nth-child(2) - border-top-left-radius: 3px - border-bottom-left-radius: 3px - - &:last-child - border-right: thin solid $color-background - border-top-right-radius: 3px - border-bottom-right-radius: 3px - - &:active - background-color: $color-background-dark - - &.active - background-color: $color-background - - &.clear:hover - color: $color-danger - - section#blog-stream - position: relative - - .feed - position: absolute - top: 10px - right: 10px - font-size: 1.4em - color: lighten($color-text-dark-hint, 10%) - - &:hover - color: $color-primary - - ul#blog-stream__list - background-color: $color-background-light - margin: 0 - padding: 0 - list-style: none - border: - top: thin solid $color-background - bottom-left-radius: 3px - bottom-right-radius: 3px - - .blog-stream__list-item - display: flex - padding: 7px 15px - border-top: thin solid $color-background - - &:first-child - border-top: none - &:last-child - border: - bottom-left-radius: 3px - bottom-right-radius: 3px - - &.more - font-size: .9em - a - width: 100% - text-align: right - color: $color-text-dark-secondary - &:hover - color: $color-primary - - .blog-stream__list-thumbnail - display: block - position: relative - width: 50px - min-width: 50px - height: 50px - min-height: 50px - margin-right: 15px - background-color: $node-type-post - border-radius: 50% - overflow: hidden - - img - width: 100% - - i - +position-center-translate - font-size: 1.6em - color: $color-text-light-primary - - .blog-stream__list-details - .title - display: block - color: $color-text-dark-primary - &:hover - color: $color-primary - - ul.meta - +list-meta - padding-top: 5px - font-size: .9em - color: $color-text-dark-secondary - - li - padding-left: 10px - &:before - left: -5px - - &.featured - flex-direction: column - padding: 0 - - a.title - font-size: 1.1em - padding: 10px 0 0 15px - display: block - color: $color-text-dark-primary - &:hover - color: $color-primary - - a.blog-stream__thumbnail - display: block - position: relative - img - width: 100% - - ul.meta - +list-meta - padding: 5px 15px 10px 15px - font-size: .9em - - - - section.announcement - border-bottom: thin solid $color-background - - .header-icons - display: flex - align-items: center - justify-content: center - padding: 20px 0 5px 0 - - i - font-size: 2.5em - color: $color-info - - &.pi-heart-filled - color: $color-danger - margin-left: 5px - - img.header - width: 100% - margin: 0 auto - border-top-left-radius: 3px - border-top-right-radius: 3px - - iframe - width: 100% - position: relative - left: 15px - margin: 25px auto - - +media-sm - height: 500px - +media-md - height: 520px - +media-lg - height: 580px - - .text - padding: 15px - - .title - padding-bottom: 10px - font: - family: $font-body - size: 1.4em - weight: 300 - - +media-xs - font-size: 1.4em - - strong - color: $color-primary-dark - - a - color: $color-text-dark-primary - - .lead - font-size: 1em - +list-bullets - - ul - margin-top: 10px - padding-left: 10px - - hr - border: none - height: 1px - width: 100% - margin: 10px 0 - background-color: $color-background - clear: both - - +media-xs - padding-left: 10px - - - .buttons - margin: 15px auto 0 auto - display: flex - align-items: center - justify-content: space-around - flex-wrap: wrap - - a - +button($color-text-light, 3px) - padding: 5px 0 - margin: - bottom: 5px - right: auto - left: auto - font-size: .9em - opacity: 1 - flex: 1 - - +media-xs - margin: 10px auto - width: 100% - - &:first-child - margin-right: 15px - - &.blue - +button(hsl(hue($color-info), 60%, 45%), 3px) - - &.orange - +button(hsl(hue($color-secondary), 50%, 50%), 3px) - padding: 5px 15px - - &.green - +button(hsl(hue($color-success), 60%, 40%), 3px, true) - - section#random-asset - - h3 - padding-bottom: 0 - - ul.random-asset__list - border-top: thin solid $color-background - background-color: $color-background-light - border-bottom-left-radius: 3px - border-bottom-right-radius: 3px - padding: 0 - margin: 0 - list-style: none - - .random-asset__list-item - display: flex - align-items: center - padding: 7px 15px - border-top: thin solid $color-background - position: relative - overflow: hidden - - &:first-child - border-top: none - - .ribbon - +ribbon - right: -47px - top: 5px - font: - size: 12px - weight: 500 - - span - padding: 1px 50px - - .random-asset__list-thumbnail - width: 50px - min-width: 50px - height: 50px - min-height: 50px - margin-right: 15px - background-color: $color-background - - border-radius: 50% - overflow: hidden - display: block - position: relative - - img - width: 100% - - i - +position-center-translate - font-size: 1.6em - color: $color-text-light - - &.image - background-color: $node-type-asset_image - &.file - background-color: $node-type-asset_file - font-size: .8em - &.video - background-color: $node-type-asset_video - font-size: .8em - &.None - background-color: $node-type-group - - .random-asset__list-details - .title - display: block - font-size: 1em - color: $color-text-dark-primary - &:hover - color: $color-primary - - ul.meta - +list-meta - padding-top: 5px - font-size: .9em - - li - &:before - left: -5px - &.what - text-transform: capitalize - - &.project - padding: 10px 15px - - a.title - font-size: 1.2em - - a.random-asset__list-thumbnail - border-radius: 3px - - ul.meta - padding-top: 0 - - li.what - text-transform: initial - - a - color: $color-text-dark-primary - - &:hover - color: $color-text-dark-primary - text-decoration: none - - &.featured - align-items: flex-start - flex-direction: column - padding: 0 - - a.title - font-size: 1.1em - padding: 10px 0 0 15px - display: block - color: $color-text-dark-primary - &:hover - color: $color-primary - - a.random-asset__thumbnail - display: block - position: relative - width: 100% - - &.video - background-color: black - img - opacity: .7 - - img - width: 100% - transition: opacity 150ms ease-in-out - - i - +position-center-translate - color: white - font-size: 3em - text-shadow: 0 0 25px black - transition: font-size 150ms ease-in-out - - &:hover - i - font-size: 3.5em - img - opacity: .85 - - ul.meta - +list-meta - padding: 5px 15px 10px 15px - font-size: .9em - - li.what - text-transform: capitalize - - -/* Sections for the non-logged in */ -section.pricing - padding: 50px 0 - margin-bottom: 25px - background-color: $color-background-light - +clearfix - +media-xs - padding: 0 - - h2 - text-align: center - font-size: 2.3em - text-shadow: 1px 1px 0 white - margin: - top: 10px - bottom: 50px - padding: 0 - - +media-xs - font-size: 1.6em - - .box - margin-top: 40px - padding: 20px 20px 60px 20px - border: 1px solid $color-text-dark-hint - background-color: white - min-height: 340px - position: relative - text-align: center - border-top: 3px solid rgba($color-text-dark-secondary, .5) - border-bottom-left-radius: 3px - border-bottom-right-radius: 3px - - +media-xs - margin-bottom: 15px - - &.yearly - border-top: 3px solid $color-info - transform: scale(1.1) - - +media-xs - transform: scale(1) - - a.sign-up-now - +button($color-primary, 3px, true) - - &:hover - +button($color-success, 3px, true) - - &.education - .pricing-caption - padding: 25px - font-size: 1.1em - transition: color 100ms ease-in-out - - &:hover - .pricing-caption - color: $color-text-dark-primary - - a.sign-up-now - width: 70% - - h3 - font: - size: 1.8em - family: $font-body - padding-bottom: 0 - margin: 25px 0 0 10px - - - .pricing-display - position: relative - color: $color-info - padding: 10px 0 - - .currency-sign, - .digit-dec - font-size: 1.7em - position: relative - top: -25px - font-weight: 100 - - .digit-int - font-size: 4.5em - font-weight: 100 - - .pricing-caption - color: $color-text-dark - text-align: center - padding-bottom: 0 - - ul - text-align: left - - +list-bullets - - ul - color: $color-text-dark-primary - padding-left: 10px - margin-top: 15px - - li - padding-bottom: 8px - - .sign-up-now - position: absolute - bottom: 25px - width: 65% - left: 50% - transform: translateX(-50%) - font-size: 1.2em - - +button($color-primary, 3px) - padding: 5px 25px - white-space: nowrap - text-align: center - - &:hover - .sign-up-now - +button($color-success, 3px, true) - - -section.supported-by - padding: 50px 0 - text-align: center - background-color: $color-background - border-top: 5px solid $color-background-dark - - img.logos - max-height: 500px - padding: 60px 0 100px 0 - - +media-xs - max-width: 100% - - -section.team - background: - color: white - size: cover - position: 50% 50% - padding: 50px 0 40px 0 - text-align: center - - h2 - padding-bottom: 30px - font-size: 2.2em - color: $color-text-light - - .people-container - max-width: $screen-lg - margin: 0 auto 60px auto - - .people-intro - opacity: 1 - position: relative - top: 0 - transition: opacity 100ms ease-in-out, top 150ms ease-out - - &.active - opacity: 0 - top: 15px - - h3 - font: - family: $font-body - color: $color-danger - - span - color: $color-text-light-primary - - .people-faces - padding-top: 40px - display: flex - flex: row flex - flex-wrap: wrap - margin: 0 auto - align-items: center - justify-content: center - width: 100% - max-width: 750px - - .face - background-color: $color-background - border-radius: 50% - padding: 4px - - opacity: 1 - width: 120px - height: 120px - margin: 7px 15px - z-index: 0 - position: relative - transition: transform 100ms ease-in-out, background-color 100ms ease-in-out, opacity 100ms ease-in-out - - +media-xs - height: initial - margin-top: 20px - - &:hover - transform: scale(1.1) - z-index: 1 - background-color: $color-primary - - img - opacity: .8 - - img - position: relative - width: 100% - border-radius: 50% - transition: opacity 150ms ease-in-out - - - .people-bio - display: block - width: 100% - position: relative - - +media-xs - display: none - - - .bio - opacity: 0 - visibility: hidden - margin: 0 - padding: 0 - position: absolute - top: -370px - left: 50% - transform: translateX(-50%) - - transition: opacity 180ms ease-in-out, top 150ms ease-out - - &.active - top: -370px - opacity: 1 - visibility: visible - - h3 - position: relative - top: -18px - font-family: $font-body - color: $color-info - - small - position: absolute - left: 50% - transform: translateX(-50%) - bottom: -22px - white-space: nowrap - font-size: .6em - color: $color-text-light-primary - span - color: $color-text-light-hint - - &.online - .people-faces - max-width: 1000px - - .people-bio - .bio - top: -250px - &.active - top: -240px diff --git a/src/styles/_services.sass b/src/styles/_services.sass deleted file mode 100644 index 9ab382ac..00000000 --- a/src/styles/_services.sass +++ /dev/null @@ -1,39 +0,0 @@ -.services - #page-header - text-shadow: 1px 1px 0 rgba(black, .2) - border-bottom: none - align-items: initial - - .page-title - text-align: left - font-size: 3em - margin: 0 - - .page-title-summary - max-width: 900px - text-align: left - font-size: 1.4em - - .page-card-side - img - max-width: 100% - border-radius: 3px - - .tip - margin-top: 15px - color: $color-text-dark-secondary - font-size: .8em - - a - color: $color-primary - text-decoration: underline - - span.text-background - +text-background(white, #358, 2px, 5px 0) - - .navbar-backdrop-overlay - background-image: linear-gradient(rgba(black, .3), rgba(black, .8)) - - #blender-sync - small strong - color: $color-success diff --git a/src/styles/_stats.sass b/src/styles/_stats.sass deleted file mode 100644 index 6135c8cd..00000000 --- a/src/styles/_stats.sass +++ /dev/null @@ -1,2 +0,0 @@ -#stats-container - +container-box diff --git a/src/styles/_welcome.sass b/src/styles/_welcome.sass deleted file mode 100644 index e2703b8d..00000000 --- a/src/styles/_welcome.sass +++ /dev/null @@ -1,270 +0,0 @@ -.join - position: relative - - nav.navbar - background-color: white - - .navbar-brand - color: $color-text - - li a.navbar-item - color: $color-text - - .navbar-container - +container-behavior - - #page-header - +media-lg - min-height: 600px - +media-xs - background-size: cover - background-position: right - min-height: 500px - - .page-title, - .page-title-summary - line-height: 1.2em - text-align: left - text-shadow: 1px 1px 0 rgba(black, .5), 0 0 25px rgba(black, .5) - - .page-title-summary - font-size: 1.4em - - li.special - color: $color-success - font-weight: bold - - .page-card - &:nth-child(even) - background-color: white - - &-header - margin-bottom: 0 - - &-side - +media-xs - width: 100% - max-width: 100% - - &.text - +media-xs - padding-left: 50px - padding: - bottom: 150px - top: 150px - - &.right - background-color: $color-background-light - - .page-card-title, - .page-card-summary - padding-left: 25px - - .page-card-title:after - left: 25px - - .text - +media-xs - padding-left: 25px - - &.intro - +media-xs - margin-left: 50px - - .page-card-side - +media-sm - max-width: 500px - max-width: 600px - - padding: - bottom: 0 - top: 50px - - &+.page-card-header - padding-top: 0 - - .page-card-summary - font-size: 1.2em - - .page-card-image - align-items: center - display: flex - height: 100% - justify-content: center - - &.light - overflow: hidden - position: relative - - .learn - color: white - text-decoration: underline - - .page-card - &-title - color: white - font-weight: bold - - &:after - border-color: white - - &-summary - color: white - position: relative - text-shadow: 1px 1px 0 rgba(black, .5), 0 0 25px rgba(black, .2) - z-index: 1 - - p - font-size: .9em - - &.summary-action - font-size: .8em - - a.page-card-cta - font-size: .9em - - a - color: white - text-decoration: underline - - - a.page-card-cta - background: #ff4970 - border-radius: 3px - border: none - box-shadow: 1px 1px 0 rgba(black, .2) - font-weight: bold - margin-right: 15px - margin-top: 25px - padding: 7px 20px - text-decoration: none - text-shadow: none - - &:hover - background: lighten(#ff4970, 5%) - - .page-card-image - img - +media-xs - display: none - max-width: initial - position: absolute - width: initial - z-index: 0 - - &.training - margin-top: 45px - - a.page-card-cta - background: #0082ff - - .page-card-image - img - right: 50px - top: 50% - transform: translateY(-50%) - - &.open-movies - .page-card-image - img - top: 50px - left: 50px - - &.services - .page-card-image - img - left: 50px - - &.subscribe - padding: 40px 0 - text-align: center - - span strong - color: $color-danger - - .page-card-side - width: 100% - max-width: 100% - - .page-card-title - line-height: 1.5em - color: white - text-align: center - padding-bottom: 15px - - &:after - border: none - - .page-card-summary - color: $color-text-light-primary - - .page-card-cta - text-align: center - font-size: 1.3em - padding: 7px 35px - margin-right: initial - border: thin solid rgba(white, .8) - border-radius: 3px - - - .training-other - color: $color-text-dark-secondary - font-size: .9em - padding: 30px - text-align: center - - a - color: $color-text-dark-secondary - text-decoration: underline - - &:hover - color: $color-text-dark-primary - - .pricing - +media-xs - padding-top: 30px - margin-bottom: 0 - padding-bottom: 100px - - .supported-by - img - max-width: 100% - - .assets - padding-bottom: 80px - - .flex - +media-xs - flex-direction: column - - display: flex - - .box - flex: 1 - margin: 20px - - .page-triplet-container - .triplet-card - +media-xs - margin-top: 20px - - .navbar - .nav-item-sign-in - a.navbar-item - background-color: $color-primary - border: none - border-radius: 3px - color: white - height: auto - font-weight: bold - margin-top: 5px - margin-left: 10px - padding: 10px 20px - - &:hover - background-color: lighten($color-primary, 10%) - box-shadow: none - -.container.wide-on-sm - +media-sm - width: 100% diff --git a/src/styles/main.sass b/src/styles/main.sass index c364f535..060b8dab 100644 --- a/src/styles/main.sass +++ b/src/styles/main.sass @@ -4,15 +4,10 @@ /* Generic styles (comments, notifications, etc) come from base.css */ -/* Blender Cloud specific styles */ @import _project @import _project-sharing @import _project-dashboard @import _user -@import _welcome -@import _homepage -@import _services -@import _stats @import _search @import _organizations