Introducing main.sass stylesheet

Blender Cloud used main.css from Pillar

As we try to strip Blender Cloud-specific content from Pillar,
this commit brings three .sass files over to this repository.

There are still plenty of Blender Cloud classes all over Pillar,
they will be brought here over time.
This commit is contained in:
2017-11-07 16:56:45 +01:00
parent 97dff66159
commit c00121d71c
5 changed files with 1414 additions and 1 deletions

1078
src/styles/_homepage.sass Normal file

File diff suppressed because it is too large Load Diff

39
src/styles/_services.sass Normal file
View File

@@ -0,0 +1,39 @@
.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

270
src/styles/_welcome.sass Normal file
View File

@@ -0,0 +1,270 @@
.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%

26
src/styles/main.sass Normal file
View File

@@ -0,0 +1,26 @@
@import ../../../pillar/src/styles/_normalize
@import ../../../pillar/src/styles/_config
@import ../../../pillar/src/styles/_utils
/* Generic styles (comments, notifications, etc) come from base.css */
/* Blender Cloud specific styles */
@import ../../../pillar/src/styles/_project
@import ../../../pillar/src/styles/_project-sharing
@import ../../../pillar/src/styles/_project-dashboard
@import ../../../pillar/src/styles/_user
@import _welcome
@import _homepage
@import _services
@import _stats
@import ../../../pillar/src/styles/_search
@import ../../../pillar/src/styles/_organizations
/* services, about, etc */
@import ../../../pillar/src/styles/_pages
/* plugins are included here, don't include in base unless needed by other pillar apps */
@import ../../../pillar/src/styles/plugins/_jstree
@import ../../../pillar/src/styles/plugins/_js_select2
/* CSS for pillar-font comes from fontello.com using static/assets/font/config.json */

View File

@@ -55,7 +55,7 @@ html(lang="en")
| {% if title == 'blog' %}
link(href="{{ url_for('static_pillar', filename='assets/css/blog.css', v=17320171) }}", rel="stylesheet")
| {% else %}
link(href="{{ url_for('static_pillar', filename='assets/css/main.css', v=17320171) }}", rel="stylesheet")
link(href="{{ url_for('static', filename='cloud/assets/css/main.css', v=17320171) }}", rel="stylesheet")
| {% endif %}
| {% endblock css %}