From ff2107f362c9f79b2d22b8b37295bb455720d6bf Mon Sep 17 00:00:00 2001 From: Paul Cuciureanu Date: Sat, 16 Apr 2016 19:42:01 -0400 Subject: [PATCH] Restyling basic components and fixing errors introduced by recent changes, refactoring out merging of foreign activity, improves #60 --- _config.yml | 5 -- _includes/header.html | 32 ++++++++-- _includes/merge/activity.html | 13 ++++ _layouts/activity.html | 4 +- _layouts/default.html | 4 +- _layouts/location.html | 4 +- _layouts/node.html | 4 +- _layouts/page.html | 4 +- _layouts/post.html | 4 +- _sass/_activity.scss | 13 ---- _sass/_base.scss | 24 +++++++- _sass/_layout.scss | 102 +++++++++++++++----------------- _sass/_post.scss | 13 ---- _sass/_syntax-highlighting.scss | 28 ++++----- css/main.scss | 10 ++-- en/about.md | 4 +- en/blog.html | 2 +- en/create.md | 3 - en/locations.html | 2 +- en/network.html | 2 +- en/welcome.html | 74 ++++++++++++++++------- fr/a-propos.md | 1 - fr/blogue.html | 2 +- fr/creer.md | 5 +- fr/endroits.html | 2 +- fr/reseau.html | 2 +- index.html | 34 +++-------- 27 files changed, 210 insertions(+), 187 deletions(-) create mode 100644 _includes/merge/activity.html diff --git a/_config.yml b/_config.yml index 40cae1b..bb116c0 100644 --- a/_config.yml +++ b/_config.yml @@ -77,11 +77,6 @@ title: en: BetterMTL fr: CapMTL -# What is the name of the events or talks you would like to host? (Example Brownbags, Talks, Lighting Talks) -event_label: - en: Activity - fr: Activité - description: en: BetterMTL is free and open-source.
Run by contributors. fr: CapMTL est un logiciel libre.
Géré par contributeurs. diff --git a/_includes/header.html b/_includes/header.html index 32a8812..187cdcc 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -27,11 +27,35 @@
{% assign activities=site.activities | where: "ref", page.ref | sort: 'lang' %} - {% for activity in activities %} {{ activity.lang }} {% endfor %} + {% for activity in activities %} + {% if activity.lang == page.lang %} +

{{ activity.lang }}

+ {% else %} + {{ activity.lang }} + {% endif %} + {% endfor %} {% assign posts=site.posts | where: "ref", page.ref | sort: 'lang' %} - {% for post in posts %} {{ post.lang }} {% endfor %} + {% for post in posts %} + {% if post.lang == page.lang %} +

{{ post.lang }}

+ {% else %} + {{ post.lang }} + {% endif %} + {% endfor %} {% assign pages=site.pages | where: "ref", page.ref | sort: 'lang' %} - {% for page in pages %} {{ page.lang }} {% endfor %} + {% for post in pages %} + {% if post.lang == page.lang %} +

{{ post.lang }}

+ {% else %} + {{ post.lang }} + {% endif %} + {% endfor %} {% assign locations=site.locations | where: "ref", page.ref | sort: 'lang' %} - {% for location in locations %} {{ location.lang }} {% endfor %} + {% for location in locations %} + {% if location.lang == page.lang %} +

{{ location.lang }}

+ {% else %} + {{ location.lang }} + {% endif %} + {% endfor %}
diff --git a/_includes/merge/activity.html b/_includes/merge/activity.html new file mode 100644 index 0000000..82cd225 --- /dev/null +++ b/_includes/merge/activity.html @@ -0,0 +1,13 @@ +{% assign activ = nil %} +{% if page.lang == include.act.lang %} + {% assign activ = include.act %} +{% else %} + {% assign activ=site.activities | where: "ref", include.act.ref | where: "lang", page.lang | first %} + {% unless activ %} + {% assign activ=site.activities | where: "ref", include.act.ref | where: "lang", site.lang.primary | first %} + {% endunless %} + {% unless activ %} + {% assign activ=site.activities | where: "ref", include.act.ref | where: "lang", site.lang.secondary | first %} + {% endunless %} +{% endif %} +{{activ.ref}},{{activ.lang}} diff --git a/_layouts/activity.html b/_layouts/activity.html index 96ac140..2210de7 100644 --- a/_layouts/activity.html +++ b/_layouts/activity.html @@ -8,7 +8,7 @@
 Improve this page
-

{{ page.title }}

+

{{ page.title }}

{% if page.author %} • {% endif %} {{ page.start_time }} - {{ page.end_time }}

{{ location_title }}, @@ -18,7 +18,7 @@

{% if organizer.photo %}
{% endif %} -
+
{{content}}
diff --git a/_layouts/default.html b/_layouts/default.html index e96bbf5..d99222c 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -5,9 +5,9 @@ {% include header.html %} {% include merge/page-cover.html %} {% if page_cover %} -
+
{% else %} -
+
{% endif %}
diff --git a/_layouts/location.html b/_layouts/location.html index 6c6aab0..4ac02e6 100644 --- a/_layouts/location.html +++ b/_layouts/location.html @@ -7,7 +7,7 @@
 Improve this page
-

{{ page.title }}

+

{{ page.title }}

{% if organizer.photo %}

By {{organizer.name}}

{% endif %} @@ -15,7 +15,7 @@

By {{organizer.name}}

{% if organizer.photo %}
{% endif %} -
+
{{content}}
diff --git a/_layouts/node.html b/_layouts/node.html index 08cfcf3..027dd60 100644 --- a/_layouts/node.html +++ b/_layouts/node.html @@ -6,7 +6,7 @@
 Improve this page
-

{{ page.title }}

+

{{ page.title }}

{% if organizer.photo %}

By {{organizer.name}}

{% endif %} @@ -14,7 +14,7 @@

By {{organizer.name}}

{% if organizer.photo %}
{% endif %} -
+
{{content}}
diff --git a/_layouts/page.html b/_layouts/page.html index 60cc81f..c8faeac 100644 --- a/_layouts/page.html +++ b/_layouts/page.html @@ -6,9 +6,9 @@
 Improve this page
-

{{ page.title }}

+

{{ page.title }}

-
+
{{ content }}
diff --git a/_layouts/post.html b/_layouts/post.html index 2fee938..99b18a4 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -8,10 +8,10 @@
 Improve this page
-

{{ page.title }}

+

{{ page.title }}

{% if page.author %} • {% endif %}

-
+
{{content}}
diff --git a/_sass/_activity.scss b/_sass/_activity.scss index a1d61ed..b40c922 100644 --- a/_sass/_activity.scss +++ b/_sass/_activity.scss @@ -1,16 +1,3 @@ -.langs { - text-align: right; - height: 0; // the magic happens here - font-size: 0; - .lang { - background-color: rgba(255, 255, 255, 0.8); - top: 0; - font-size: $base-font-size; - margin: 0px; - padding: 7px; - } -} - article.post { .improve { margin-top: 2px; diff --git a/_sass/_base.scss b/_sass/_base.scss index b01588b..39615d9 100644 --- a/_sass/_base.scss +++ b/_sass/_base.scss @@ -6,6 +6,7 @@ p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; + font-size: $base-font-size; } /** @@ -72,6 +73,24 @@ li { */ h1, h2, h3, h4, h5, h6 { font-weight: $base-font-weight; + font-size: $base-font-size; +} + +h1 { + font-weight: 900; + color: lighten(black, 10%); +} +h2 { + font-weight: 900; + color: lighten(black, 20%); +} +h3 { + font-weight: 700; + color: lighten(black, 30%); +} +h4 { + font-weight: 300; + color: lighten(black, 40%); } /** @@ -96,8 +115,7 @@ blockquote { color: $grey-color; border-left: 4px solid $grey-color-light; padding-left: $spacing-unit / 2; - font-size: 18px; - letter-spacing: -1px; + font-size: $base-font-size; font-style: italic; > :last-child { margin-bottom: 0; @@ -109,7 +127,7 @@ blockquote { */ pre, code { - font-size: 15px; + font-size: $base-font-size; border: 1px solid $grey-color-light; border-radius: 3px; background-color: #eef; diff --git a/_sass/_layout.scss b/_sass/_layout.scss index 9dba75a..0e091e2 100644 --- a/_sass/_layout.scss +++ b/_sass/_layout.scss @@ -9,7 +9,7 @@ } .site-title { - font-weight: bold; + font-weight: 600; line-height: $nav-line-height; float: left; &, @@ -32,7 +32,7 @@ nav li { nav li.current a { color: #333; - font-weight: bold; + font-weight: 600; } nav ul { @@ -98,6 +98,19 @@ nav ul { } } +.langs { + text-align: right; + height: 0; // push langs over cover magic + font-size: 0; + p, .lang { + display: inline; + background-color: rgba(255, 255, 255, 0.8); + top: 0; + font-size: $base-font-size; + padding: 6px; + } +} + /** * Site footer */ @@ -113,7 +126,7 @@ nav ul { } .footer-heading { - font-size: 18px; + font-size: $base-font-size; margin-bottom: $spacing-unit / 2; } @@ -124,7 +137,7 @@ nav ul { } .footer-col-wrapper { - font-size: 15px; + font-size: $base-font-size; color: $grey-color; margin-left: -$spacing-unit / 2; @extend %clearfix; @@ -175,7 +188,7 @@ nav ul { } .page-heading { - font-size: 20px; + font-size: $base-font-size; } .post{ @@ -197,11 +210,11 @@ nav ul { .post-link { display: block; - font-size: 24px; + font-size: $base-font-size; } .post-organizers-name{ - color:grey; + color: grey; } /** @@ -211,13 +224,12 @@ nav ul { margin-bottom: $spacing-unit; } -.post-date{ +.post-date { margin: 10px 0 0 0; padding: 0; } -.post-time{ - line-height: 18px; +.post-time { } .post-time, .post-organizers-name{ @@ -225,16 +237,11 @@ nav ul { color: #A6A6A6; } -.post-title { - font-size: 42px; - letter-spacing: -1px; - line-height: 1; +.title { word-wrap: break-word; - padding:0; - margin:0; width: 75%; @include media-query($on-laptop) { - font-size: 36px; + font-size: $base-font-size; width: 70%; } @include media-query($on-palm) { @@ -242,29 +249,26 @@ nav ul { } } -.post-content { +.content { margin-bottom: $spacing-unit; h2 { - font-size: 32px; - @include media-query($on-laptop) { - font-size: 28px; - } + font-size: $base-font-size; + font-weight: 900; + color: lighten(white, 20%); } h3 { - font-size: 26px; - @include media-query($on-laptop) { - font-size: 22px; - } + font-size: $base-font-size; + font-weight: 700; + color: lighten(black, 30%); } h4 { - font-size: 20px; - @include media-query($on-laptop) { - font-size: 18px; - } + font-size: $base-font-size; + font-weight: 300; + color: lighten(black, 40%); } } -.clearfix{ +.clearfix { &:before, &:after { content: " "; /* 1 */ display: table; /* 2 */ @@ -274,7 +278,7 @@ nav ul { } } -.blog-cover{ +.cover { height: 180px; background-size: cover; background-position: center center; @@ -302,18 +306,20 @@ nav ul { height: 180px; border-radius: 3px; background-color: #333; - box-shadow: 0 0 1px rgba(0,0,0,.05); + box-shadow: 0 0 1px rgba(0, 0, 0, .05); border: 1px solid #ddd; -webkit-tap-highlight-color: transparent; h2 { + font-weight: $base-font-weight; position: absolute; + color: darken(white, 5%); bottom: 0px; left: 10px; - font-size: 20px; z-index: 3; - span{ - font-size: 14px; + span { display: block; + font-size: $small-font-size; + color: darken(white, 25%); } } } @@ -339,10 +345,10 @@ nav ul { position: absolute; bottom: 0px; left: 10px; - font-size: 20px; + font-size: $base-font-size; z-index: 3; span{ - font-size: 14px; + font-size: $base-font-size; display: block; } } @@ -355,11 +361,10 @@ nav ul { left: 0px; height: 100%; width: 100%; - line-height: 25px; word-wrap: break-word; background-color: rgba(0, 0, 0, 0); - background-image: -webkit-linear-gradient(rgba(15, 20, 31, 0) 0, rgba(15, 20, 31, .1) 25%, rgba(15, 20, 31, .8) 100%); - background-image: linear-gradient(rgba(15, 20, 31, 0) 0, rgba(15, 20, 31 ,.1) 25%, rgba(15, 20, 31, .8) 100%); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0, rgba(15, 20, 31, .1) 25%, rgba(15, 20, 31, .8) 100%); + background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0, rgba(15, 20, 31 ,.1) 25%, rgba(15, 20, 31, .8) 100%); } .activity-card-foreign-overlay { @@ -369,11 +374,10 @@ nav ul { left: 0px; height: 100%; width: 100%; - line-height: 25px; word-wrap: break-word; background-color: rgba(0, 0, 0, 0); - background-image: -webkit-linear-gradient(rgba(15, 20, 31, 0) 0, rgba(15, 255, 31, .1) 25%, rgba(100, 100, 100, .8) 100%); - background-image: linear-gradient(rgba(15, 20, 31, 0) 0, rgba(15, 255, 31 ,.1) 25%, rgba(100, 100, 100, .8) 100%); + background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.3) 0, rgba(100, 100, 100, .5) 50%, rgba(100, 100, 100, .8) 100%); + background-image: linear-gradient(rgba(255, 255, 255, 0.8) 0, rgba(100, 100, 100,.5) 50%, rgba(100, 100, 100, .8) 100%); } .location-card-overlay { @@ -383,7 +387,6 @@ nav ul { left: 0px; height: 100%; width: 100%; - line-height: 25px; word-wrap: break-word; background-color: rgba(0, 0, 0, 0); background-image: -webkit-linear-gradient(rgba(15, 20, 31, 0) 0, rgba(15, 20, 31, .3) 75%, rgba(15, 20, 31, .8) 100%); @@ -427,12 +430,3 @@ nav ul { width: calc(100% - (#{$spacing-unit} / 2)); } } - -.event-time-heading.fix-top{ - margin-top:-10px; -} - -.event-time-heading{ - margin-bottom:0px; - margin-top:20px; -} diff --git a/_sass/_post.scss b/_sass/_post.scss index a1d61ed..b40c922 100644 --- a/_sass/_post.scss +++ b/_sass/_post.scss @@ -1,16 +1,3 @@ -.langs { - text-align: right; - height: 0; // the magic happens here - font-size: 0; - .lang { - background-color: rgba(255, 255, 255, 0.8); - top: 0; - font-size: $base-font-size; - margin: 0px; - padding: 7px; - } -} - article.post { .improve { margin-top: 2px; diff --git a/_sass/_syntax-highlighting.scss b/_sass/_syntax-highlighting.scss index 37f1a4e..7c6d3d7 100644 --- a/_sass/_syntax-highlighting.scss +++ b/_sass/_syntax-highlighting.scss @@ -9,12 +9,12 @@ } .c { color: #998; font-style: italic } // Comment .err { color: #a61717; background-color: #e3d2d2 } // Error - .k { font-weight: bold } // Keyword - .o { font-weight: bold } // Operator + .k { font-weight: 600 } // Keyword + .o { font-weight: 600 } // Operator .cm { color: #998; font-style: italic } // Comment.Multiline - .cp { color: #999; font-weight: bold } // Comment.Preproc + .cp { color: #999; font-weight: 600 } // Comment.Preproc .c1 { color: #998; font-style: italic } // Comment.Single - .cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special + .cs { color: #999; font-weight: 600; font-style: italic } // Comment.Special .gd { color: #000; background-color: #fdd } // Generic.Deleted .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific .ge { font-style: italic } // Generic.Emph @@ -24,27 +24,27 @@ .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific .go { color: #888 } // Generic.Output .gp { color: #555 } // Generic.Prompt - .gs { font-weight: bold } // Generic.Strong + .gs { font-weight: 600 } // Generic.Strong .gu { color: #aaa } // Generic.Subheading .gt { color: #a00 } // Generic.Traceback - .kc { font-weight: bold } // Keyword.Constant - .kd { font-weight: bold } // Keyword.Declaration - .kp { font-weight: bold } // Keyword.Pseudo - .kr { font-weight: bold } // Keyword.Reserved - .kt { color: #458; font-weight: bold } // Keyword.Type + .kc { font-weight: 600 } // Keyword.Constant + .kd { font-weight: 600 } // Keyword.Declaration + .kp { font-weight: 600 } // Keyword.Pseudo + .kr { font-weight: 600 } // Keyword.Reserved + .kt { color: #458; font-weight: 600 } // Keyword.Type .m { color: #099 } // Literal.Number .s { color: #d14 } // Literal.String .na { color: #008080 } // Name.Attribute .nb { color: #0086B3 } // Name.Builtin - .nc { color: #458; font-weight: bold } // Name.Class + .nc { color: #458; font-weight: 600 } // Name.Class .no { color: #008080 } // Name.Constant .ni { color: #800080 } // Name.Entity - .ne { color: #900; font-weight: bold } // Name.Exception - .nf { color: #900; font-weight: bold } // Name.Function + .ne { color: #900; font-weight: 600 } // Name.Exception + .nf { color: #900; font-weight: 600 } // Name.Function .nn { color: #555 } // Name.Namespace .nt { color: #000080 } // Name.Tag .nv { color: #008080 } // Name.Variable - .ow { font-weight: bold } // Operator.Word + .ow { font-weight: 600 } // Operator.Word .w { color: #bbb } // Text.Whitespace .mf { color: #099 } // Literal.Number.Float .mh { color: #099 } // Literal.Number.Hex diff --git a/css/main.scss b/css/main.scss index cd613e5..55d7eab 100644 --- a/css/main.scss +++ b/css/main.scss @@ -5,13 +5,13 @@ // Our variables $base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -$base-font-size: 16px; -$base-font-weight: 400; +$base-font-size: 1rem; +$base-font-weight: normal; $small-font-size: $base-font-size * 0.875; -$base-line-height: 1.5; -$nav-line-height: 2em; +$base-line-height: 1.5rem; +$nav-line-height: 2rem; -$spacing-unit: 30px; +$spacing-unit: 20px; $text-color: #111; $background-color: #fdfdfd; diff --git a/en/about.md b/en/about.md index 3455285..11b5c43 100644 --- a/en/about.md +++ b/en/about.md @@ -1,6 +1,5 @@ --- layout: page -navigation_title: About title: About BetterMTL permalink: /about/ ref: about @@ -49,11 +48,10 @@ We can rally groups of organizers-admins-curators. E.g. here are **independently 1. *Any of these sources might propagate errors instead of propagating the right (newly changed) copy of your event* -# Summary +# Summary If you have all these calendars feeding your personal .ics calendar, great! If you read them all - comparing and contrasting - and if you're happy doing that work, then you don't need this BetterMtl project. But, if you find it to be a mess, then contribute to this project. # To contribute big-time Fork, modify, send us pull-requests. Or, star ★ [bettermtl.github.io](https://github.com/bettermtl/bettermtl.github.io) repo. Show you care - about the success of this project. It motivates us. Thank you because we appreciate your vote of confidence! - diff --git a/en/blog.html b/en/blog.html index b20cdf9..edc6872 100644 --- a/en/blog.html +++ b/en/blog.html @@ -5,7 +5,7 @@ lang: en ---
-

Posts

+

Posts