From: Vladimír Vondruš Date: Thu, 12 Sep 2019 19:51:04 +0000 (+0200) Subject: css: add styling for brand logo in the navbar. X-Git-Url: https://www.chiark.greenend.org.uk/ucgi/~cjwatson/git?a=commitdiff_plain;h=ef5ea359e94044f8c8c1ee1de00898fe237955fd;p=blog.git css: add styling for brand logo in the navbar. Interesting, I added support for this into the Pelican theme at the very beginning, but didn't actually get to styling or testing it at all. --- diff --git a/css/m-dark+documentation.compiled.css b/css/m-dark+documentation.compiled.css index e5d42b53..925a33c5 100644 --- a/css/m-dark+documentation.compiled.css +++ b/css/m-dark+documentation.compiled.css @@ -1832,6 +1832,12 @@ body > header > nav #m-navbar-brand, body > header > nav a#m-navbar-show, body > body > header > nav a#m-navbar-brand, body > header > nav #m-navbar-brand a { text-transform: uppercase; } +body > header > nav a#m-navbar-brand img, body > header > nav #m-navbar-brand a img { + width: 1.75rem; + height: 1.75rem; + vertical-align: -22.5%; + margin-right: 0.5rem; +} body > header > nav #m-navbar-brand a { padding-left: 0; padding-right: 0; diff --git a/css/m-dark.compiled.css b/css/m-dark.compiled.css index f10b51e0..e99f9d9e 100644 --- a/css/m-dark.compiled.css +++ b/css/m-dark.compiled.css @@ -1832,6 +1832,12 @@ body > header > nav #m-navbar-brand, body > header > nav a#m-navbar-show, body > body > header > nav a#m-navbar-brand, body > header > nav #m-navbar-brand a { text-transform: uppercase; } +body > header > nav a#m-navbar-brand img, body > header > nav #m-navbar-brand a img { + width: 1.75rem; + height: 1.75rem; + vertical-align: -22.5%; + margin-right: 0.5rem; +} body > header > nav #m-navbar-brand a { padding-left: 0; padding-right: 0; diff --git a/css/m-layout.css b/css/m-layout.css index 5d22db0e..27931ac0 100644 --- a/css/m-layout.css +++ b/css/m-layout.css @@ -78,6 +78,14 @@ body > header > nav #m-navbar-brand, body > header > nav a#m-navbar-show, body > body > header > nav a#m-navbar-brand, body > header > nav #m-navbar-brand a { text-transform: var(--nav-brand-case); } +body > header > nav a#m-navbar-brand img, body > header > nav #m-navbar-brand a img { + /* unfortuately, with SVGs, unless the size is hardcoded like this, it will + cause ugly jumps during loading :( */ + width: 1.75rem; + height: 1.75rem; + vertical-align: -22.5%; + margin-right: 0.5rem; +} body > header > nav #m-navbar-brand a { padding-left: 0; padding-right: 0; diff --git a/css/m-light+documentation.compiled.css b/css/m-light+documentation.compiled.css index 12aa5ccc..8e9fee55 100644 --- a/css/m-light+documentation.compiled.css +++ b/css/m-light+documentation.compiled.css @@ -1832,6 +1832,12 @@ body > header > nav #m-navbar-brand, body > header > nav a#m-navbar-show, body > body > header > nav a#m-navbar-brand, body > header > nav #m-navbar-brand a { text-transform: lowercase; } +body > header > nav a#m-navbar-brand img, body > header > nav #m-navbar-brand a img { + width: 1.75rem; + height: 1.75rem; + vertical-align: -22.5%; + margin-right: 0.5rem; +} body > header > nav #m-navbar-brand a { padding-left: 0; padding-right: 0; diff --git a/css/m-light.compiled.css b/css/m-light.compiled.css index b250c267..d6f156a1 100644 --- a/css/m-light.compiled.css +++ b/css/m-light.compiled.css @@ -1832,6 +1832,12 @@ body > header > nav #m-navbar-brand, body > header > nav a#m-navbar-show, body > body > header > nav a#m-navbar-brand, body > header > nav #m-navbar-brand a { text-transform: lowercase; } +body > header > nav a#m-navbar-brand img, body > header > nav #m-navbar-brand a img { + width: 1.75rem; + height: 1.75rem; + vertical-align: -22.5%; + margin-right: 0.5rem; +} body > header > nav #m-navbar-brand a { padding-left: 0; padding-right: 0; diff --git a/doc/css/page-layout-test-navbar-brand-logo.html b/doc/css/page-layout-test-navbar-brand-logo.html new file mode 100644 index 00000000..eebca6a6 --- /dev/null +++ b/doc/css/page-layout-test-navbar-brand-logo.html @@ -0,0 +1,74 @@ + + + + + Page Layout Test: navbar with a brand logo + + + + + +
+
+
+
+
+
+

+ + CSS » + Page layout » + + Test: navbar with a brand logo +

+

Shows how a navbar with a brand logo looks. +Go back.

+
+
+ + diff --git a/doc/css/page-layout-test-navbar-subsite.html b/doc/css/page-layout-test-navbar-subsite.html index 0d60d67c..5774ced7 100644 --- a/doc/css/page-layout-test-navbar-subsite.html +++ b/doc/css/page-layout-test-navbar-subsite.html @@ -37,7 +37,10 @@ https://fonts.googleapis.com/css?family=Source+Code+Pro:400,400i,600%7CSource+Sa
- Your Brand + + + Your Brand + | subsite diff --git a/doc/css/page-layout.rst b/doc/css/page-layout.rst index 7035779f..d547ea88 100644 --- a/doc/css/page-layout.rst +++ b/doc/css/page-layout.rst @@ -249,6 +249,30 @@ items and sub-menus. Doesn't do anything on the :css:`#m-navbar-brand` element. page source to see how it's done here. Don't forget to try to shrink your browser window to see its behavior in various cases. +`Brand logo`_ +------------- + +Add an :html:`` with a logo inside the :css:`a#m-navbar-brand`. It will be +a :css:`1.75rem` square vertically centered in the navbar. `See here how it looks <{filename}/css/page-layout-test-navbar-brand-logo.html>`__. + +.. code:: html + :hl_lines: 4 5 6 7 + :class: m-inverted + +
+ `Link back to main site from a subsite`_ ---------------------------------------- @@ -257,7 +281,8 @@ a forum or documentation subsite), you may want to prominently show its relation to the main site and link back to the main site as well as the subsite homepage. The markup looks like in the following snippet (note the :css:`#m-navbar-brand` is now a span containing two links and a "breadcrumb" -separator), `see here how it looks <{filename}/css/page-layout-test-navbar-subsite.html>`_. +separator), `see here how it looks <{filename}/css/page-layout-test-navbar-subsite.html>`__. The `brand logo`_ works here as well if you put it inside the +:html:``. .. code:: html :hl_lines: 4 5 6 7 8