diff options
author | Brian Anderson <banderson@mozilla.com> | 2015-07-31 11:41:49 -0700 |
---|---|---|
committer | Brian Anderson <banderson@mozilla.com> | 2015-07-31 11:41:49 -0700 |
commit | af25d61f093146b0a852c2156573e3a0067b4720 (patch) | |
tree | e935724ad08c6e0a15b4af753b96fcc464927d00 /themes | |
parent | 0cd857977dc82e304d1c3e0c88e472232e231cf1 (diff) |
Revert "Revert "Merge pull request #66 from webstream-io/rusty-makeover""
This reverts commit b11ae4d9a0ef9e122ae807e403d40785c4b6a3d6.
Diffstat (limited to 'themes')
-rw-r--r-- | themes/rusted/static/css/_base.scss | 192 | ||||
-rw-r--r-- | themes/rusted/static/css/_bootstrap-overrides.scss | 6 | ||||
-rw-r--r-- | themes/rusted/static/css/_homepage.scss | 12 | ||||
-rw-r--r-- | themes/rusted/static/css/_layout.scss | 135 | ||||
-rw-r--r-- | themes/rusted/static/css/main.scss | 46 | ||||
-rw-r--r-- | themes/rusted/templates/_post-title.html | 10 | ||||
-rw-r--r-- | themes/rusted/templates/_subscribe-form.html | 13 | ||||
-rw-r--r-- | themes/rusted/templates/archives.html | 16 | ||||
-rw-r--r-- | themes/rusted/templates/article.html | 37 | ||||
-rw-r--r-- | themes/rusted/templates/base.html | 78 | ||||
-rw-r--r-- | themes/rusted/templates/index.html | 31 | ||||
-rw-r--r-- | themes/rusted/templates/page.html | 31 |
12 files changed, 607 insertions, 0 deletions
diff --git a/themes/rusted/static/css/_base.scss b/themes/rusted/static/css/_base.scss new file mode 100644 index 0000000..2adb494 --- /dev/null +++ b/themes/rusted/static/css/_base.scss @@ -0,0 +1,192 @@ +/** + * Reset some basic elements + */ +body, h1, h2, h3, h4, h5, h6, +p, blockquote, pre, hr, +dl, dd, ol, ul, figure { + margin: 0; + padding: 0; +} + + + +/** + * Basic styling + */ +body { + font-family: $base-font-family; + font-size: $base-font-size; + line-height: $base-line-height; + font-weight: 300; + color: $text-color; + background-color: $background-color; +} + + + +/** + * Set `margin-bottom` to maintain vertycal rhythm + */ +h1, h2, h3, h4, h5, h6, +p, blockquote, pre, +ul, ol, dl, figure, +%vertical-rhythm { + margin-bottom: $spacing-unit / 2; +} + + + +/** + * Images + */ +img { + max-width: 100%; + vertical-align: middle; +} + + + +/** + * Figures + */ +figure > img { + display: block; +} + +figcaption { + font-size: $small-font-size; +} + + + +/** + * Lists + */ +ul, ol { + margin-left: $spacing-unit; +} + +li { + > ul, + > ol { + margin-bottom: 0; + } +} + + + +/** + * Headings + */ +h1, h2, h3, h4, h5, h6 { + font-weight: 300; +} + + + +/** + * Links + */ +a { + color: $brand-color; + text-decoration: none; + + &:visited { + color: darken($brand-color, 15%); + } + + &:hover { + color: $text-color; + text-decoration: underline; + } +} + + + +/** + * Blockquotes + */ +blockquote { + color: $grey-colour; + border-left: 4px solid $grey-colour-light; + padding-left: $spacing-unit / 2; + font-size: 18px; + letter-spacing: -1px; + font-style: italic; + + > :last-child { + margin-bottom: 0; + } +} + + + +/** + * Code formatting + */ +pre, +code { + font-size: 15px; + border: 1px solid $grey-colour-light; + border-radius: 3px; + background-color: #eef; +} + +code { + padding: 1px 5px; +} + +pre { + padding: 8px 12px; + overflow-x: scroll; + + > code { + border: 0; + padding-right: 0; + padding-left: 0; + } +} + + + +/** + * Wrapper + */ +.wrapper { + // don't use calc(), doesn't seem to work in minified CSS. + max-width: 800px - ($spacing-unit * 2); + margin-right: auto; + margin-left: auto; + padding-right: $spacing-unit; + padding-left: $spacing-unit; + @extend %clearfix; + + @include media-query($on-laptop) { + max-width: 800px - $spacing-unit; + padding-right: $spacing-unit / 2; + padding-left: $spacing-unit / 2; + } +} + + + +/** + * Clearfix + */ +%clearfix { + + &:after { + content: ""; + display: table; + clear: both; + } +} + + + +/** + * Text styling + */ +strong, b { + font-weight: bold; +} diff --git a/themes/rusted/static/css/_bootstrap-overrides.scss b/themes/rusted/static/css/_bootstrap-overrides.scss new file mode 100644 index 0000000..6bee3a9 --- /dev/null +++ b/themes/rusted/static/css/_bootstrap-overrides.scss @@ -0,0 +1,6 @@ + +.btn-primary { + background-color: rgb(66, 139, 202); + border-color: rgb(53, 126, 189); + color: rgb(255, 255, 255); +} diff --git a/themes/rusted/static/css/_homepage.scss b/themes/rusted/static/css/_homepage.scss new file mode 100644 index 0000000..5fa0deb --- /dev/null +++ b/themes/rusted/static/css/_homepage.scss @@ -0,0 +1,12 @@ + +.pitch { + font-size: 46px; + font-style: italic; + line-height: 1.25; + margin-bottom: 40px; + margin-top: 36px; +} + +.subtext { + +} diff --git a/themes/rusted/static/css/_layout.scss b/themes/rusted/static/css/_layout.scss new file mode 100644 index 0000000..8148717 --- /dev/null +++ b/themes/rusted/static/css/_layout.scss @@ -0,0 +1,135 @@ +/** + * Site header + */ +.site-header { + border-top: 5px solid $grey-colour-dark; + border-bottom: 1px solid $grey-colour-light; + min-height: 56px; + + // Positioning context for the mobile navigation icon + position: relative; +} + +.site-title { + font-size: 36px; + font-weight: bold; + line-height: 64px; + letter-spacing: -1px; + margin-bottom: 0; + + &, + &:visited { + color: $grey-colour-dark; + } +} + + +/** + * Site footer + */ +body > footer { + border-top: 1px solid $grey-colour-light; + padding: $spacing-unit 0; + margin-top: $spacing-unit; +} + + +/** + * Post list + */ + +.past-issues { + margin-top: 20px; + + li.nav-header h2 { + border-bottom: 1px solid $grey-colour-light; + } + + li { + line-height: 1.8; + } +} + +.time-prefix { + font-family: "Fira Mono", monospace; +} + +.post-title { + font-size: 20px; +} + + +/** + * Page content + */ +.page-content { + padding-top: $spacing-unit; +} + +.page-heading { + font-size: 20px; +} + +.post-list { + margin-left: 0; + list-style: none; + + > li { + margin-bottom: $spacing-unit; + } +} + +.post-meta { + font-size: $small-font-size; + color: $grey-colour; +} + +.post-link { + display: block; + font-size: 24px; +} + + + +/** + * Posts + */ + +.post { + margin-top: 32px; + border: 1px solid $grey-colour-light; + padding: 24px; + border-radius: 8px; +} + +.post-header { + margin-bottom: $spacing-unit; +} + +.post-content { + margin-bottom: $spacing-unit; + + h2 { + font-size: 32px; + + @include media-query($on-laptop) { + font-size: 28px; + } + } + + h3 { + font-size: 26px; + + @include media-query($on-laptop) { + font-size: 22px; + } + } + + h4 { + font-size: 20px; + + @include media-query($on-laptop) { + font-size: 18px; + } + } +} diff --git a/themes/rusted/static/css/main.scss b/themes/rusted/static/css/main.scss new file mode 100644 index 0000000..40e1ed3 --- /dev/null +++ b/themes/rusted/static/css/main.scss @@ -0,0 +1,46 @@ +@charset "utf-8"; + + +// Our variables +$base-font-family: 'Fira Sans', "Helvetica Neue", Helvetica, Arial, sans-serif; +$base-font-size: 16px; +$small-font-size: $base-font-size * 0.875; +$base-line-height: 1.5; + +$spacing-unit: 30px; + +$text-color: #444; +$background-color: #fdfdfd; +$brand-color: #2a7ae2; + +$grey-colour: #828282; +$grey-colour-light: lighten($grey-colour, 40%); +$grey-colour-dark: darken($grey-colour, 25%); + +$on-palm: 600px; +$on-laptop: 800px; + + + +// Using media queries with like this: +// @include media-query($palm) { +// .wrapper { +// padding-right: $spacing-unit / 2; +// padding-left: $spacing-unit / 2; +// } +// } +@mixin media-query($device) { + @media screen and (max-width: $device) { + @content; + } +} + + + +// Import partials +@import + "bootstrap-overrides", + "base", + "layout", + "homepage" +; diff --git a/themes/rusted/templates/_post-title.html b/themes/rusted/templates/_post-title.html new file mode 100644 index 0000000..471135d --- /dev/null +++ b/themes/rusted/templates/_post-title.html @@ -0,0 +1,10 @@ +<div class="row post-title"> + <div class="col-xs-4 col-md-4"> + <span class="small text-muted time-prefix"> + <time pubdate="pubdate" datetime="{{ article.date.isoformat() }}">{{ article.date.strftime("%d %b %Y").upper() }}</time> + </span> + </div> + <div class="col-xs-8 col-md-8 text-right"> + <a href="{{ SITEURL }}/{{ article.url }}">{{ article.title }}</a> + </div> +</div> diff --git a/themes/rusted/templates/_subscribe-form.html b/themes/rusted/templates/_subscribe-form.html new file mode 100644 index 0000000..9177ada --- /dev/null +++ b/themes/rusted/templates/_subscribe-form.html @@ -0,0 +1,13 @@ +<div class="row"> + <div class="col-md-1"></div> + <div class="col-md-10"> + <div class="input-group input-group-lg"> + <input type="email" class="form-control" placeholder="Enter your email" /> + <span class="input-group-btn"> + <input type="commit" class="btn btn-default btn-primary" value="Subscribe!" /> + </span> + </div> + <span class="help-block small text-muted">Receive a weekly newsletter, every Monday. Easy to unsubscribe and no spam, promise.</span> + </div> + <div class="col-md-1"></div> +</div> diff --git a/themes/rusted/templates/archives.html b/themes/rusted/templates/archives.html new file mode 100644 index 0000000..17ebfb1 --- /dev/null +++ b/themes/rusted/templates/archives.html @@ -0,0 +1,16 @@ +{% extends "base.html" %} + +{% block content %} +<div class="row"> + <div class="col-md-12"> + <ul class="list-unstyled past-issues"> + <li class="nav-header disabled"><h2>Past issues</h2></li> + {% for article in articles %} + <li> + {% include "_post-title.html" %} + </li> + {% endfor %} + </ul> + </div> +</div> +{% endblock content %} diff --git a/themes/rusted/templates/article.html b/themes/rusted/templates/article.html new file mode 100644 index 0000000..416f91b --- /dev/null +++ b/themes/rusted/templates/article.html @@ -0,0 +1,37 @@ +{% extends "base.html" %} + +{% block title %} +{{ article.title }} {%if article.subtitle %} - {{ article.subtitle }} {% endif %} · {{ super() }} +{% endblock title %} + +{% block head_description %} +{% if article.summary %} +{{ article.summary|striptags }} +{% endif %} +{% endblock head_description %} + +{% block meta_tags_in_head %} +{% if article.tags or article.category or article.keywords %} +<meta name="keywords" content="{{ [article.tags|join(', '), article.category, article.keywords]|join(', ') }}" /> +{% endif %} +{% endblock meta_tags_in_head %} + +{% block content %} + +<div class="row text-center"> + <h3> Like what you see? Subscribe! </h3> +</div> + +{% include "_subscribe-form.html" %} + +<div class="post"> + <header class="post-header"> + {% include "_post-title.html" %} + </header> + + <article class="post-content"> + {{ article.content }} + </article> + +</div> +{% endblock content %} diff --git a/themes/rusted/templates/base.html b/themes/rusted/templates/base.html new file mode 100644 index 0000000..a8f5606 --- /dev/null +++ b/themes/rusted/templates/base.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + + {% if article and article.author %} + <meta name="author" content="{{ article.author }}" /> + <meta name="copyright" content="{{ article.author }}" /> + {% elif page and page.author %} + <meta name="author" content="{{ page.author }}" /> + <meta name="copyright" content="{{ page.author }}" /> + {% else %} + <meta name="author" content="{{ AUTHOR }}" /> + <meta name="copyright" content="{{ AUTHOR }}" /> + {% endif %} + + {% if SITE_DESCRIPTION %} + <meta name="description" content="{% block head_description %}{{ SITE_DESCRIPTION }}{% endblock head_description %}" /> + {% endif %} + + {% block meta_tags_in_head %} + {% endblock meta_tags_in_head %} + + <title>{% block title %}{{ SITENAME|striptags }}{% endblock title %}</title> + + {% block head_links %} + {% endblock head_links %} + + <link href="{{ FEED_DOMAIN }}/{{ FEED_ALL_ATOM }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME|striptags }} - Full Atom Feed" /> + + <link href='https://fonts.googleapis.com/css?family=Fira+Sans:400,400italic,500,500italic|Fira+Mono:400' rel='stylesheet' type='text/css'> + <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> + {% assets filters="scss,cssmin", output="css/web-min.css", "css/main.scss" %} + <link rel="stylesheet" href="/{{ ASSET_URL }}"> + {% endassets %} + </head> + <body> + <header class="site-header"> + <div class="container wrapper"> + <a class="site-title" href="{{ SITEURL }}/">{{ SITENAME }}</a> + </div> + </header> + + <div class="page-content"> + <div class="container wrapper"> + {% block content %} + {% endblock content %} + </div> + </div> + + <footer> + <div class="container wrapper"> + <div class="row"> + <div class="col-md-4"> + <ul class="list-unstyled"> + <li><a href="{{ SITEURL }}/blog/archives/index.html">past issues</a></li> + <li><a href="{{ SITEURL }}/{{ FEED_ALL_ATOM }}">atom feed</a></li> + <li><a href="{{ SOURCE_URL }}">source code</a></li> + </ul> + </div> + <div class="col-md-4"> + <ul class="list-unstyled"> + <li><a href="https://twitter.com/ThisWeekInRust">twitter</a></li> + </ul> + </div> + <div class="col-md-4 text-right"> + <ul class="list-unstyled"> + <li><a href="{{ SITEURL }}/pages/privacy-policy.html">privacy policy</a></li> + <li><a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">cc-by-sa-4.0</a></li> + </ul> + </div> + </div> + </div> + </footer> + </body> +</html> diff --git a/themes/rusted/templates/index.html b/themes/rusted/templates/index.html new file mode 100644 index 0000000..43fa460 --- /dev/null +++ b/themes/rusted/templates/index.html @@ -0,0 +1,31 @@ +{% extends "base.html" %} + +{% block content %} +<div class="row"> + <div class="col-md-12 text-center"> + <h1 class="pitch">Handpicked Rust updates, <br /> delivered to your inbox.</h1> + <p class="subtext">Stay up to date with events, learning resources, and recent developments in Rust community.</p> + </div> +</div> +{% include "_subscribe-form.html" %} +<div class="row"> + <div class="col-md-12"> + <ul class="list-unstyled past-issues"> + <li class="nav-header disabled"><h2>Past issues</h2></li> + {% for article in articles %} + {% if not RECENT_ARTICLES_COUNT %} + {% set RECENT_ARTICLES_COUNT = 5 %} + {% endif %} + {% if loop.index0 < RECENT_ARTICLES_COUNT %} + <li> + {% include "_post-title.html" %} + </li> + {% endif %} + {% endfor %} + <li class="text-right"> + <a href="{{ SITEURL }}/blog/archives/index.html">View more →</a> + </li> + </ul> + </div> +</div> +{% endblock content %} diff --git a/themes/rusted/templates/page.html b/themes/rusted/templates/page.html new file mode 100644 index 0000000..a4f21f4 --- /dev/null +++ b/themes/rusted/templates/page.html @@ -0,0 +1,31 @@ +{% extends "base.html" %} + +{% block title %} +{{ page.title }} {%if page.subtitle %} - {{ page.subtitle }} {% endif %} · {{ super() }} +{% endblock title %} + +{% block head_description %} +{% if page.summary %} +{{ article.summary|striptags }} +{% endif %} +{% endblock head_description %} + +{% block meta_tags_in_head %} +{% if page.tags or page.category or page.keywords %} +<meta name="keywords" content="{{ [page.tags|join(', '), page.category, page.keywords]|join(', ') }}" /> +{% endif %} +{% endblock meta_tags_in_head %} + +{% block content %} + +<div class="post"> + <header class="post-header"> + <h1>{{ page.title }}</h1> + </header> + + <article class="post-content"> + {{ page.content }} + </article> + +</div> +{% endblock content %} |