From e9519cb483704cc9158cb3646c80fabe1e57aa4b Mon Sep 17 00:00:00 2001 From: Philip Chimento Date: Fri, 18 Oct 2013 13:56:58 -0700 Subject: wikipedia: Use Lato fonts Fonts are changed according to the conversion table. It turns out that what we thought was the "Benton Sans correction" does not only apply to Benton Sans - I think it is due to GTK's lack of baseline alignment, something that has been rectified in GTK 3.10. [endlessm/eos-sdk#361] --- data/css/eos-wikipedia-domain.css | 19 +++++++------------ wikipedia/PrebuiltCategoryPage.js | 1 - wikipedia/widgets/ListTextButton.js | 2 +- wikipedia/widgets/category_button.js | 10 ++++++---- 4 files changed, 14 insertions(+), 18 deletions(-) diff --git a/data/css/eos-wikipedia-domain.css b/data/css/eos-wikipedia-domain.css index 5e42acd..80e275d 100644 --- a/data/css/eos-wikipedia-domain.css +++ b/data/css/eos-wikipedia-domain.css @@ -1,9 +1,9 @@ * { - font-family: "Source Sans Pro"; + font-family: Lato; } .title { - font-family: "BentonSans ExtraLight"; + font-family: "Lato Light"; color: #ffffff; text-shadow: 0px 1px 0px alpha(#23326e, 0.15); padding-top: 15px; @@ -14,8 +14,7 @@ } .title.category.front-page { - font-size: 40px; - padding-top: 9px; + font-size: 42px; } Gjs_ArticleList{ @@ -27,9 +26,8 @@ Gjs_ArticleList .button { padding-right: 25px; padding-top: 15px; padding-bottom: 15px; - font-size: 15px; + font-size: 14px; color: #464646; - font-family: "Source Sans Pro"; background-image: url('resource:///com/endlessm/wikipedia-domain/assets/submenu_bg_normal.jpg'); background-size: cover; } @@ -59,8 +57,7 @@ Gjs_ArticleList .scrollbar.slider { .category-page #category_description{ color:rgba(255, 255, 255, 1.0); background-color: rgba(0, 0, 0, 0); - font-size: 12px; - font-family: "Source Sans Pro"; + font-size: 11px; } .category-page #category_scrolled_window .scrollbar.slider { @@ -69,10 +66,8 @@ Gjs_ArticleList .scrollbar.slider { } .category-page #category_title{ - /* Top padding is hack because we have bad version of BentonSans */ - padding-top: 20px; - font-family: "BentonSans ExtraLight"; - font-size: 52px; + font-family: "Lato Light"; + font-size: 50px; color: rgba(255, 255, 255, 0.9); } diff --git a/wikipedia/PrebuiltCategoryPage.js b/wikipedia/PrebuiltCategoryPage.js index 3ad3ebf..bb9da5b 100644 --- a/wikipedia/PrebuiltCategoryPage.js +++ b/wikipedia/PrebuiltCategoryPage.js @@ -94,7 +94,6 @@ const PrebuiltCategoryPage = new Lang.Class({ this._description_text_view = new FixedSizeTextView.FixedSizeTextView({ name:"category_description", - margin_left: 6, // stupid Benton Sans correction sensitive: false, editable: false, cursor_visible: false diff --git a/wikipedia/widgets/ListTextButton.js b/wikipedia/widgets/ListTextButton.js index a3a141b..b676b8c 100644 --- a/wikipedia/widgets/ListTextButton.js +++ b/wikipedia/widgets/ListTextButton.js @@ -6,7 +6,7 @@ const Pango = imports.gi.Pango; // This is an approximate number of characters that will keep the label from // going over its specified width -const ARTICLE_LABEL_MAX_WIDTH_CHARS = 24; +const ARTICLE_LABEL_MAX_WIDTH_CHARS = 22; const ListTextButton = new Lang.Class({ Name: 'EndlessListTextButton', diff --git a/wikipedia/widgets/category_button.js b/wikipedia/widgets/category_button.js index ade1f21..54f0b79 100644 --- a/wikipedia/widgets/category_button.js +++ b/wikipedia/widgets/category_button.js @@ -10,8 +10,10 @@ const CATEGORY_LABEL_LEFT_MARGIN = 25; // pixels const CATEGORY_LABEL_BOTTOM_MARGIN = 20; // pixels const CATEGORY_BUTTON_RIGHT_MARGIN = 20; // pixels const CATEGORY_BUTTON_BOTTOM_MARGIN = 20; // pixels -const CATEGORY_LABEL_BENTON_SANS_CORRECTION = 0; // pixels -const CATEGORY_BUTTON_BENTON_SANS_CORRECTION = 10; // pixels +// The following two are corrections because GTK 3.8 doesn't have baseline +// alignment. Remove and align properly in GTK 3.10. FIXME +const CATEGORY_LABEL_BASELINE_CORRECTION = 0; // pixels +const CATEGORY_BUTTON_BASELINE_CORRECTION = 10; // pixels const _HOVER_ARROW_URI = '/com/endlessm/wikipedia-domain/assets/category_hover_arrow.png'; const MAIN_CATEGORY_SCREEN_WIDTH_PERCENTAGE = 0.37; @@ -71,7 +73,7 @@ const CategoryButton = new Lang.Class({ }); this._label = new Gtk.Label({ margin_left: CATEGORY_LABEL_LEFT_MARGIN, - margin_bottom: CATEGORY_LABEL_BOTTOM_MARGIN - CATEGORY_LABEL_BENTON_SANS_CORRECTION, + margin_bottom: CATEGORY_LABEL_BOTTOM_MARGIN - CATEGORY_LABEL_BASELINE_CORRECTION, hexpand: true, halign: Gtk.Align.START, xalign: 0.0, // deprecated Gtk.Misc properties; necessary because @@ -80,7 +82,7 @@ const CategoryButton = new Lang.Class({ this._arrow = new Gtk.Image({ resource: _HOVER_ARROW_URI, margin_right: CATEGORY_BUTTON_RIGHT_MARGIN, - margin_bottom: CATEGORY_BUTTON_BOTTOM_MARGIN + CATEGORY_BUTTON_BENTON_SANS_CORRECTION, + margin_bottom: CATEGORY_BUTTON_BOTTOM_MARGIN + CATEGORY_BUTTON_BASELINE_CORRECTION, halign: Gtk.Align.END, valign: Gtk.Align.END, opacity: 0 -- cgit v1.2.3