Minor layout and graphics tweaks #18
Conversation
harding
left a comment
harding
left a comment
There was a problem hiding this comment.
Thanks for doing this! One noteworthy comment below about the page header image size on mobiles, and a several other comments about minutia that you should feel free to ignore.
assets/css/main.scss
Outdated
| } | ||
|
|
||
| a.site-title { | ||
| width: 30%; |
There was a problem hiding this comment.
I think you want to use a width defined in either px that displays at the same size everywhere or in em that only changes when the user changes the font size. Otherwise, this can be a bit wussy-looking on narrow mobile screens:
There was a problem hiding this comment.
Good catch, thanks!
assets/css/main.scss
Outdated
| margin-top: 2em; | ||
|
|
||
| > .logo { | ||
| width: 30%; |
There was a problem hiding this comment.
If you put min-width: 10em; below the existing width line, the graphic will be shown a bit larger on narrow mobiles but will be the same size on the widest displays.
| @@ -0,0 +1,18 @@ | |||
| --- | |||
| # Forked from the default minima layout to include our main.css | |||
There was a problem hiding this comment.
It already did that on my system, were you having problems? I don't see any layout-affecting differences when diffing a copy of the _site dir generate with this file to one generated without it, nor do I on a visual inspection of the rendered site.
OTOH, even if creating this file now is unnecessary, it's likely something that we'll end up customizing later anyway, so I'm not opposed to this.
There was a problem hiding this comment.
Oh, I see, the CSS file was moved from its default location in d091a44 and only the homepage layout was updated to reflect that, so without this file, the newsletters don't get style changes.
This is fine. An alternative is to move the css file back to its original location in /assets/ and drop the special code from the home layout. I don't think it matters long term if this site is continued to be customized.
There was a problem hiding this comment.
Yup; I prefer to keep _layout/page.html bundled as it's convenient to have the code ready at hand for modification, as well as for easier discovery - had to google around a bit to figure out where the page template lived beforehand.
index.md
Outdated
| {:style="text-align: center"} | ||
|  | ||
|
|
||
| <div class="logo"> |
There was a problem hiding this comment.
I don't have any problem with using HTML here (or anywhere, really), but FYI you can apply a CSS class to a block element in Kramdown like this:
{:.logo}
That will create:
<p class="logo"><img src="/img/logos/optech.png" alt="OpTech Logo" /></p>
Other things you can do:
{#custom-id}{:custom-tag: "custom-value}- Plus other fancier stuff, see the manual
assets/css/main.scss
Outdated
| margin-bottom: 2em; | ||
| } | ||
|
|
||
| div#sponsors { |
There was a problem hiding this comment.
If this vertical whitespace looks good over the top of the Sponsors <h3>, you might want to consider applying it to every <h3> on the website, both for consistency and for the avoidance of having too many ad hoc rules that may making figuring out style things later harder.
|
Requires rebase (and addressing harding's comments). |
- Add a horizontal logo - Reposition a few elements on the home page
|
I've incorporated @harding's good feedback (thanks, Dave) and I've changed the inline logo to remove the text, as it felt like we were repeating "Bitcoin Optech" a bit too much graphically. I can revert if you guys don't like this. The new PNG also has a transparent background (instead of the slightly-off white).
|
|
0c25896 LGTM. |
Thanks! That was bugging me 🙂 |
|
0c25896 LGTM 🚀 |
Newsletters: add #18 (2018-10-23)
Newsletter #18: fix broken link
Before
After