archive/pillar
0
0
Fork 0
Code Issues 42 Pull Requests Projects Releases Wiki Activity

Services: Re-design and welcome Flamenco!

Browse Source 
Thanks to @fsiddi for feedback
This commit is contained in:
Pablo Vazquez 2017-07-11 18:44:09 +02:00
parent 5c21443f9b
commit c9af6fe44f
4 changed files with 201 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/styles/_pages.sass
View File

@ -253,6 +253,13 @@ $page-card-icon-size: 75px
.page-card-summary
color: #ccc
.page-card-full
padding: 60px 30px
width: 100%
max-width: 1000px
position: relative
align-self: stretch
.page-card-side
width: 50%
padding: 60px 0
@ -383,6 +390,8 @@ a.page-card-cta
&.download
+button($color-success, 3px, true)
opacity: 1
padding-left: 20px
padding-right: 20px
i
position: relative

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

1
src/styles/main.sass
View File

@ -11,6 +11,7 @@
@import _user
@import _join
@import _homepage
@import _services
@import _stats
@import _search

282
src/templates/services.jade
View File

@ -5,7 +5,7 @@
| {% block og %}
meta(property="og:type", content="website")
meta(property="og:url", content="https://cloud.blender.org/services")
meta(property="og:url", content="{{ url_for('main.services') }}")
meta(property="og:title", content="Services - Blender Cloud")
meta(name="twitter:title", content="Services - Blender Cloud")
@ -18,7 +18,7 @@ meta(name="twitter:image", content="{{ url_for('static', filename='assets/img/ba
| {% block header_backdrop %}
.navbar-backdrop(
style="background-image: url({{ url_for('static', filename='assets/img/backgrounds/services_projects.jpg')}})")
.navbar-backdrop-overlay.services
.navbar-backdrop-overlay
| {% endblock %}
| {% block page_overlay %}
@ -28,16 +28,117 @@ meta(name="twitter:image", content="{{ url_for('static', filename='assets/img/ba
| {% block body %}
#page-container
#page-header
.page-title(style="text-align: left")
i.pi-blender-cloud-logo
em SERVICES
.page-title-summary
| Personal Projects · Blender Integration · Texture Browsing · Production Management
.container
#page-header
.page-title
| Blender Cloud Services
.page-title-summary
span.text-background
p.
Blender Cloud is the creative hub for your projects, powered by Free and Open Source software.
p.
On Blender Cloud you can create and share personal projects, access our texture and HDRI
library (or create your own), keep track of your production, manage your renders and much more!
- var addon_text = 'Available through the <a href="{{ url_for(\'main.services\') }}#blender-cloud-add-on">Blender Cloud add-on</a>'
#page-content
section.page-card
section#blender-cloud-add-on.page-card
.page-card-side
h2.page-card-title
| Blender Cloud add-on
.page-card-summary
p.
The Blender Cloud add-on provides access to most of our services directly within Blender.
p.
Use the add-on to share images online, submit renders to Flamenco or browse textures and HDRI libraries!
hr
small Blender Cloud add-on requires Blender 2.78 or newer
a.page-card-cta.download(
href="https://cloud.blender.org/r/downloads/blender_cloud-latest-addon.zip")
i.pi-download
| Download add-on &nbsp;<small>v</small> {{ config.BLENDER_CLOUD_ADDON_VERSION }}
.page-card-side
img(
src="{{ url_for('static', filename='assets/img/features/blender_cloud_addon_thumbnail.png')}}")
section#blender-sync.page-card.right
.page-card-side
h2.page-card-title Blender Sync
.page-card-summary
| Save your settings once. Use them anywhere.
| Carry your Blender configuration with you,
| use our add-on to sync your keymaps and preferences.
hr
small Blender Sync is <strong>free</strong> for everyone! No subscription required.
small This add-on requires Blender 2.78 or newer.
.tip !{addon_text}
a.page-card-cta(
href="https://cloud.blender.org/blog/introducing-blender-sync")
| Learn More
.page-card-side
img(
src="{{ url_for('static', filename='assets/img/features/sync_thumbnail.jpg')}}")
section#texture-browser.page-card.right
.page-card-side
h2.page-card-title Texture & HDRI Browser
.page-card-summary
p.
Access the <a href="https://cloud.blender.org/p/textures/">Blender Cloud Textures</a>
library from within Blender using our exclusive add-on.
Create, manage and share <em>your own</em> texture libraries!
.tip !{addon_text}
a.page-card-cta.js-watch-video.download(
href="https://www.youtube.com/watch?v=-srXYv2Osjw",
data-youtube-id="-srXYv2Osjw")
i.pi-play
| Watch Video
.page-card-side
img(
src="{{ url_for('static', filename='assets/img/features/tex_library_thumbnail.jpg')}}")
section#image-sharing.page-card.right
.page-card-side
h2.page-card-title Image Sharing
.page-card-summary
| Got a nice render, a Blender oddity, a cool screenshot?
| Share it instantly from within Blender to the Cloud, to the world!
.tip !{addon_text}
a.page-card-cta.download.js-watch-video(
href="https://www.youtube.com/watch?v=yvtqeMBOAyk",
data-youtube-id="yvtqeMBOAyk")
i.pi-play
| Watch Video
a.page-card-cta.outline(
href="https://cloud.blender.org/blog/introducing-image-sharing")
| Learn More
.page-card-side
img(
src="{{ url_for('static', filename='assets/img/features/image_sharing_thumbnail.jpg')}}")
section#projects.page-card.right
.page-card-side
h2.page-card-title Private Projects
.page-card-summary.
@ -49,139 +150,59 @@ meta(name="twitter:image", content="{{ url_for('static', filename='assets/img/ba
| Learn More
.page-card-side
.page-card-icon
svg(xmlns='http://www.w3.org/2000/svg', width='56', height='64', viewbox='0 0 56 64')
g(fill='#555')
path(d='M42 38H14V26h28v12zm-26-2h24v-8H16v8zm-4-5H8c-1.654 0-3-1.346-3-3V15h2v13c0 .55.45 1 1 1h4v2z')
path(d='M9.293 19.707L6 16.414l-3.293 3.293-1.414-1.414 4-4c.39-.39 1.023-.39 1.414 0l4 4-1.414 1.414zM48 31h-4v-2h4c.55 0 1-.45 1-1V15h2v13c0 1.654-1.346 3-3 3z')
path(d='M53.293 19.707L50 16.414l-3.293 3.293-1.414-1.414L50 13.586l4.707 4.707M27 15h2v9h-2z')
path(d='M31.293 19.707L28 16.414l-3.293 3.293-1.414-1.414L28 13.586l4.707 4.707M7 49H5V36c0-1.654 1.346-3 3-3h4v2H8c-.55 0-1 .45-1 1v13z')
path(d='M6 50c-.256 0-.512-.098-.707-.293l-4-4 1.414-1.414L6 47.586l3.293-3.293 1.414 1.414-4 4c-.195.195-.45.293-.707.293zm45-1h-2V36c0-.55-.45-1-1-1h-4v-2h4c1.654 0 3 1.346 3 3v13z')
path(d='M50 50.414l-4.707-4.707 1.414-1.414L50 47.586l3.293-3.293 1.414 1.414M27 40h2v9h-2z')
path(d='M28 50.414l-4.707-4.707 1.414-1.414L28 47.586l3.293-3.293 1.414 1.414M6 12c-3.31 0-6-2.692-6-6s2.69-6 6-6 6 2.692 6 6-2.69 6-6 6zM6 2C3.794 2 2 3.794 2 6s1.794 4 4 4 4-1.794 4-4-1.794-4-4-4zm22 10c-3.31 0-6-2.692-6-6s2.69-6 6-6 6 2.692 6 6-2.69 6-6 6zm0-10c-2.206 0-4 1.794-4 4s1.794 4 4 4 4-1.794 4-4-1.794-4-4-4zm22 10c-3.31 0-6-2.692-6-6s2.69-6 6-6 6 2.692 6 6-2.69 6-6 6zm0-10c-2.206 0-4 1.794-4 4s1.794 4 4 4 4-1.794 4-4-1.794-4-4-4zM6 64c-3.31 0-6-2.692-6-6s2.69-6 6-6 6 2.692 6 6-2.69 6-6 6zm0-10c-2.206 0-4 1.794-4 4s1.794 4 4 4 4-1.794 4-4-1.794-4-4-4zm22 10c-3.31 0-6-2.692-6-6s2.69-6 6-6 6 2.692 6 6-2.69 6-6 6zm0-10c-2.206 0-4 1.794-4 4s1.794 4 4 4 4-1.794 4-4-1.794-4-4-4zm22 10c-3.31 0-6-2.692-6-6s2.69-6 6-6 6 2.692 6 6-2.69 6-6 6zm0-10c-2.206 0-4 1.794-4 4s1.794 4 4 4 4-1.794 4-4-1.794-4-4-4zM27 31h2v2h-2zm-4 0h2v2h-2zm8 0h2v2h-2z')
#blender-addon.page-section-container(
style="background-image: url({{ url_for('static', filename='assets/img/backgrounds/pattern_bw_01.jpg')}})")
section.page-card-header.dark Blender Cloud Add-on
span.page-card-header_lead.dark Connect Blender with the Cloud
a.page-card-cta.download(
href="https://cloud.blender.org/r/downloads/blender_cloud-latest-addon.zip")
i.pi-download
| Download <small>v</small>{{ config.BLENDER_CLOUD_ADDON_VERSION }}
section.page-card.dark.right
.page-card-side
h2.page-card-title Blender Sync
.page-card-summary.
Save your settings once. Use them anywhere.
Carry your Blender configuration with you,
use our free add-on to sync your keymaps and preferences.
<hr/>
<small>Syncing settings is free for everyone! No subscription required.</small>
<small>This add-on requires Blender 2.78 or newer.</small>
a.page-card-cta(
href="https://cloud.blender.org/blog/introducing-blender-sync")
| Learn More
.page-card-side
.page-card-icon
svg(xmlns="http://www.w3.org/2000/svg",
width="64", height="54", viewBox="0 0 64 54")
g(fill="none", stroke="#aaa", stroke-width="2", stroke-miterlimit="10")
path(d="M29 47H5l-4-4v-2h24l2 2h2M29 3H10C8.344 3 7 4.343 7 6v32M35 51h24l4-4v-2H39l-2 2h-2M35 7h19c1.656 0 3 1.343 3 3v32M32 34v20M32 20v8M32 0v14")
g
path(d="M32 31c-3.866 0-7-3.134-7-7M32 17c3.866 0 7 3.134 7 7M32 31h8M24 17h8M36 35l4-4-4-4M28 21l-4-4 4-4")
path(d="M29 37H11V7h18M35 11h18v30H35")
img(
src="{{ url_for('static', filename='assets/img/features/projects_thumbnail.jpg')}}")
section.page-card.dark
.page-card-side
h2.page-card-title Texture Browser
.page-card-summary
p.
Access the <a href="https://cloud.blender.org/p/textures/">Blender Cloud Textures</a>
library from within Blender using our exclusive add-on.
Create, manage and share <em>your own</em> texture libraries!
a.page-card-cta.watch-video(
href="https://www.youtube.com/watch?v=-srXYv2Osjw",
data-youtube-id="-srXYv2Osjw")
i.pi-play
| Watch Video
.page-card-side
.page-card-icon
svg(xmlns="http://www.w3.org/2000/svg",
width="64", height="60",
viewBox="0 0 64 60")
g(fill="#aaa")
path(d="M32 60c-.188 0-.377-.053-.542-.16l-31-20C.173 39.656 0 39.34 0 39s.173-.656.458-.84l31-20c.33-.213.754-.213 1.084 0l31 20c.285.184.458.5.458.84s-.173.656-.458.84l-31 20c-.165.107-.354.16-.542.16zM2.845 39L32 57.81 61.155 39 32 20.19 2.845 39z")
path(d="M32 51c-.188 0-.377-.053-.542-.16l-31-20C.173 30.656 0 30.34 0 30s.173-.656.458-.84l31-20c.33-.213.754-.213 1.084 0l31 20c.285.184.458.5.458.84s-.173.656-.458.84l-31 20c-.165.107-.354.16-.542.16zM2.845 30L32 48.81 61.155 30 32 11.19 2.845 30z")
path(d="M32 42c-.188 0-.377-.053-.542-.16l-31-20C.173 21.656 0 21.34 0 21s.173-.656.458-.84l31-20c.33-.213.754-.213 1.084 0l31 20c.285.184.458.5.458.84s-.173.656-.458.84l-31 20c-.165.107-.354.16-.542.16zM2.845 21L32 39.81 61.155 21 32 2.19 2.845 21z")
path(d="M31 27h2v2h-2zm0-4h2v2h-2zm0 8h2v2h-2zm4-4h2v2h-2zm4 2h2v2h-2zm-16 0h2v2h-2zm12 2h2v2h-2zm-8-4h2v2h-2zm0 4h2v2h-2zm4 4h2v2h-2zm31 15h2v2h-2zm0-4h2v2h-2zm0 8h2v2h-2zm0 4h2v2h-2zm0-54h2v2h-2zm0-4h2v2h-2zm0 8h2v2h-2zm0 4h2v2h-2zM0 50h2v2H0zm0-4h2v2H0zm0 8h2v2H0zm0 4h2v2H0zM0 4h2v2H0zm0-4h2v2H0zm4 0h2v2H4zm4 0h2v2H8zm4 0h2v2h-2zm4 0h2v2h-2zm4 0h2v2h-2zm22 0h2v2h-2zm4 0h2v2h-2zm4 0h2v2h-2zm4 0h2v2h-2zm4 0h2v2h-2zM4 58h2v2H4zm4 0h2v2H8zm4 0h2v2h-2zm4 0h2v2h-2zm4 0h2v2h-2zm22 0h2v2h-2zm4 0h2v2h-2zm4 0h2v2h-2zm4 0h2v2h-2zm4 0h2v2h-2zM0 8h2v2H0zm0 4h2v2H0z")
section.page-card.dark.right
.page-card-side
h2.page-card-title Image Sharing
.page-card-summary.
Got a nice render, a Blender oddity, a cool screenshot?
Share it instantly from within Blender to the Cloud, to the world!
a.page-card-cta(
href="https://cloud.blender.org/blog/introducing-image-sharing")
| Learn More
.page-card-side
.page-card-icon
svg(xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64")
g(fill="none",
stroke="#aaa",
stroke-width="2",
stroke-linejoin="round",
stroke-miterlimit="10")
path(d="M1 1h62v62H1zM4 59h2M8 59h2M12 59h2M60 49H48M46 49H27M60 53H40")
path(d="M5 5h54v40H5z")
path(d="M9 45v-3c0-1.656 1.344-3 3-3h6c1.656 0 3 1.344 3 3v3M29 45v-3c0-1.656 1.344-3 3-3h6c1.656 0 3 1.344 3 3v3M13 45v-3M17 45v-3M33 45v-3M37 45v-3M22 31h-5c-2.762 0-5 2.238-5 5v3M38 39v-3c0-2.762-2.238-5-5-5h-5M31 20c0 3.313-1 9-6 9s-6-5.687-6-9c0-1 0-5 6-5s6 4 6 5z")
path(d="M29 27l-2 8h-4l-2-8M18 31c-4-3-5-9-5-9l6-3M32 31c4-3 5-9 5-9l-6-3M59 24L44 9l-8 8M44 9l8 36")
circle(cx="12", cy="12", r="3")
section.page-card.services-attract
section#attract.page-card.right
.page-card-side
h2.page-card-title
| Attract
small (soon)
.page-card-summary.
Production-management software for your film, game, or commercial projects.
a.page-card-cta.download.js-watch-video(
href="https://www.youtube.com/watch?v=b9x1rlyyt_o",
data-youtube-id="b9x1rlyyt_o")
i.pi-play
| Watch Video
a.page-card-cta(
href="https://cloud.blender.org/blog/attract-and-flamenco-public-beta",
title="Learn more about Attract")
| Learn More
.page-card-side
.page-card-icon
svg(xmlns='http://www.w3.org/2000/svg', width='56', height='64', viewbox='0 0 56 64')
path(fill='#aaa', d='M16 32C7.178 32 0 24.822 0 16S7.178 0 16 0s16 7.178 16 16-7.178 16-16 16zm0-30C8.28 2 2 8.28 2 16s6.28 14 14 14 14-6.28 14-14S23.72 2 16 2z')
path(fill='#aaa', d='M16 56c-2.757 0-5-2.243-5-5V31h2v20c0 1.654 1.346 3 3 3s3-1.346 3-3V31h2v20c0 2.757-2.243 5-5 5z')
path(fill='#aaa', d='M15 40h2v2h-2zM15 44h2v2h-2zM15 48h2v2h-2zM46.414 64H15v-6h2v4h28.586L54 53.586V8H32V6h24v48.414')
path(fill='#aaa', d='M47 63h-2V53h10v2h-8M24 24H8V8h12v2H10v12h12v-6h2')
path(fill='#aaa', d='M16 19.414l-3.707-3.707 1.414-1.414L16 16.586l6.293-6.293 1.414 1.414M29 39h-6v-6h6v6zm-4-2h2v-2h-2v2zM29 47h-6v-6h6v6zm-4-2h2v-2h-2v2zM29 55h-6v-6h6v6zm-4-2h2v-2h-2v2zM31 33h19v2H31zM31 37h19v2H31zM31 41h19v2H31zM31 45h19v2H31zM31 53h10v2H31zM31 49h19v2H31z')
g
path(fill='#aaa', d='M50 29H31v-2h17v-8H34v-2h16')
g
path(fill='#aaa', d='M48 13h2v2h-2z')
g
path(fill='#aaa', d='M44 13h2v2h-2z')
g
path(fill='#aaa', d='M40 13h2v2h-2z')
img(
src="{{ url_for('static', filename='assets/img/features/attract_thumbnail.jpg')}}")
section#flamenco.page-card.right
.page-card-side
h2.page-card-title
| Flamenco
.page-card-summary.
Take control of your computing infrastructure and get things done.
a.page-card-cta.download.js-watch-video(
href="https://www.youtube.com/watch?v=7cnFKhsM67Q",
data-youtube-id="7cnFKhsM67Q")
i.pi-play
| Watch Video
a.page-card-cta(
href="https://flamenco.io",
title="Learn more about Flamenco")
| Learn More
.page-card-side
img(
src="{{ url_for('static', filename='assets/img/features/flamenco_thumbnail.jpg')}}")
| {% if not current_user.has_role('subscriber') %}
section.page-card.subscribe(
style="background-image: url({{ url_for('static', filename='assets/img/backgrounds/background_services.jpg')}});background-size: cover")
style="background-image: url({{ url_for('static', filename='assets/img/backgrounds/pattern_01.jpg')}})")
.page-card-side
h2.page-card-title
| All of this, plus hours of training and production assets.
@ -192,6 +213,7 @@ meta(name="twitter:image", content="{{ url_for('static', filename='assets/img/ba
| Subscribe Now
| {% endif %}
| {% endblock %}
| {% block footer_scripts %}
@ -212,7 +234,7 @@ script.
}
});
$('a.watch-video').click(function(e){
$('a.js-watch-video').click(function(e){
e.preventDefault();
e.stopPropagation();