Unverified Commit 0c949c78 authored by KlaraSkinner's avatar KlaraSkinner Committed by GitHub
Browse files

Merge pull request #12 from electricbookworks/landing-page

Landing page CSS
parents 12fcfc24 1daf0dc3
......@@ -160,7 +160,9 @@ exclude:
- /*/styles/app*
# Books
# - book
# - samples
# - book/text
# - book/images
# - book/fonts
# - assets
# Files to keep from the last Jekyll build
......@@ -171,7 +173,9 @@ exclude:
# The file path is relative to the _site directory.
keep_files:
# - book
# - samples
# - book/text
# - book/images
# - book/fonts
# - assets
# HTML compression
......
......@@ -5,7 +5,7 @@
# Replace the values here with your project` information.
project:
# The name of the organisation or entity that owns this project
organisation: "Shuttleworth Foundation"
organisation: "The Shuttleworth Foundation"
# A live web address for the organisation
url: "http://shuttleworthfoundation.org"
# The default contact email address
......
<div class="landing-page-buttons">
<div class="landing-page-buttons-main">
<a href="{{ path-to-root-directory }}{{ include.read }}" class="button landing-page-buttons-read-online">Read online</a>
</div>
<div class="landing-page-buttons-secondary">
<a href="{{ path-to-root-directory }}{{ include.pdf }}" class="landing-page-buttons-pdf">PDF</a>
<a href="{{ path-to-root-directory }}{{ include.epub }}" class="landing-page-buttons-epub">EPUB</a>
<a href="{{ include.buy }}" class="landing-page-buttons-buy">Buy the book</a>
</div>
</div>
{% include metadata %}
<div class="landing-page-titles">
<div class="landing-page-image">
{% include image file="sf-converse.jpg" path="assets/images/web" %}
</div>
<div class="landing-page-creator">
{% if include.creator %}
{{ include.creator }}
{% else %}
{{ project-organisation }}
{% endif %}
</div>
<div class="landing-page-title">
{% if include.title %}
{{ include.title | markdownify | replace: '<p>', '' | replace: '</p>', '' }}
{% else %}
{{ project-name }}
{% endif %}
</div>
<div class="landing-page-subtitle">
{{ include.subtitle }}
</div>
</div>
#footer {
p, ul, ol {
a {
text-decoration: none;
}
}
}
.home {
.masthead {
display: none;
}
.landing-page-titles {
margin-bottom: 2em;
text-align: center;
.landing-page-image {
margin-left: -100em;
margin-right: -100em;
z-index: -1;
img {
display: block;
margin: 0 auto;
max-height: 100vw; // vw so this is square
object-fit: cover;
object-position: 0 80%;
width: $max-width-default; // fallback when vw isn't supported
width: 100vw;
}
@media only screen and (min-width: $break-width-small) {
img {
max-height: 40vh;
object-position: 0 90%;
}
}
}
.landing-page-creator {
color: white;
font-family: $font-display-main;
font-size: 140%;
font-weight: 700;
letter-spacing: 0.05em;
margin-bottom: 2em;
margin-top: -2.5em;
text-shadow: 1px 1px 1px grey;
text-transform: uppercase;
@media only screen and (min-width: $break-width-small) {
margin-bottom: 2em;
margin-top: -2em;
}
@media only screen and (min-width: $break-width-medium) {
text-align: left;
}
}
.landing-page-title {
font-family: $font-display-main;
font-size: 350%;
font-weight: 400;
letter-spacing: 0.05em;
line-height: 1;
margin-bottom: 0.15em;
text-transform: uppercase;
strong {
color: $green;
font-weight: 600;
}
@media only screen and (min-width: $break-width-medium) {
font-size: 490%; // magic number for this font
text-align: left;
}
}
.landing-page-subtitle {
color: $black-50;
font-family: $font-display-main;
font-size: 140%;
text-transform: uppercase;
letter-spacing: 0.05em;
@media only screen and (min-width: $break-width-medium) {
text-align: right;
}
}
}
.landing-page-buttons {
font-family: $font-display-main;
margin-bottom: 1.5em;
text-align: center;
.landing-page-buttons-main {
margin-bottom: 0.75em;
.landing-page-buttons-read-online {
letter-spacing: 0.05em;
padding: 0.75em 1em;
}
}
.landing-page-buttons-secondary {
[class^="landing-page-buttons-"] {
display: inline-block;
letter-spacing: 0.05em;
margin-right: 0.25em;
text-transform: uppercase;
&:last-child {
margin-right: 0;
}
&::after {
content: "\2022";
color: $black-30;
display: block;
line-height: 0;
}
&:hover {
&::after {
color: $black-70;
font-weight: 600;
}
}
}
}
@media only screen and (min-width: $break-width-medium) {
align-items: center;
display: flex;
justify-content: center;
// Add space between flex items
margin-left: -1em;
margin-right: -1em;
.landing-page-buttons-main {
padding-left: 1em;
padding-right: 1em;
a {
margin-right: 0.5em;
}
}
.landing-page-buttons-secondary {
a {
padding-right: 0.5em;
}
&:last-child {
padding-right: 1em;
}
}
}
}
.intro {
font-size: 125%;
line-height: 1.4;
}
}
// Green alternative
.home.green {
#wrapper {
background-color: $green;
}
.landing-page-title strong {
color: white;
}
.landing-page-subtitle {
color: white;
}
.landing-page-buttons-read-online {
background-color: white;
color: $green;
&:hover {
background-color: $black-70;
}
}
.landing-page-buttons-secondary a {
color: white
}
.intro {
color: white;
}
#footer {
background-color: $black;
color: $black-30;
a {
color: $green;
}
}
}
......@@ -68,7 +68,7 @@ $color-mid: #9c9c9c !default;
$color-accent: $green !default;
$color-links: $green !default;
$color-buttons: $color-accent !default;
$color-buttons-hover: darken( $color-buttons, 20% ) !default;
$color-buttons-hover: $black-70 !default;
$color-highlight: #ffd54d !default;
$color-notification-low-text: $color-light !default;
$color-notification-medium-text: $color-light !default;
......@@ -234,7 +234,7 @@ $web-reset-sequences: true !default; // This should stay last in the @import lis
// Import font files (@font-face) for fonts you specify
// ----------------------------------------------------
@import url('https://fonts.googleapis.com/css?family=Barlow+Condensed:300,300i,400,400i|EB+Garamond:400,400i,700,700i&display=swap');
@import url('https://fonts.googleapis.com/css?family=Barlow+Condensed:300,300i,400,400i,600|EB+Garamond:400,400i,700,700i&display=swap');
// ---------------------
// Theme modules
......@@ -316,6 +316,8 @@ $web-reset-sequences: true !default; // This should stay last in the @import lis
@import "custom/web-toc";
@import "custom/web-images";
@import "custom/web-search";
@import "custom/web-landing-page";
@import "custom/web-footer";
// Logic (if this then that)
@import "partials/web-reset-sequences"; // This should stay last in the @import list
---
title: Home
style: home
---
# 50 Shades of Green
{% include metadata %}
This is where the front of the book will go.
{% include landing-page-titles
creator = project-organisation
title = "Shades of **green**"
subtitle = "Reimagining philanthropy"
%}
{% include landing-page-buttons
read="book/text/0-4-about.html"
pdf="downloads/shades-of-green.pdf"
epub="downloads/shades-of-green.epub"
buy="https://www.amazon.com/Fifty-Shades-Green-Reimagining-Philanthropy/dp/1694497119"
%}
The Shuttleworth Foundation funds those who are not only brave enough to reimagine the future, but also brave enough to try. And we challenge ourselves to do the same.
{:.intro}
When the goal is to create something that is beneficial for the world, rather than beneficial for the market, everything gets reconsidered. This has become our way of life. Practising philanthropy as a vision, not an intervention, means we question every rule, examine every outcome and discard any process that no longer serves our core mission. We are the long game – looking beyond today’s politics and daily headlines and the technology trends of the moment to those things that are more fundamental, more systemic. Reactionary funding is shortsighted. We are interested in ripple effects that are felt for decades. These are building blocks, not photo ops. We refuse to shortchange our future. In practice this means we have moved away from giving grants and creating arbitrary metrics for change. We no longer accept project proposals, nor do we drive ideas internally. We have moved towards partnership; towards a shared vision for how change can be effected across domains. This book will explore these ideas and how we have applied them.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment