Bootstrap 4 refresh #53
Conversation
mattigruener
force-pushed
the
bootstrapRefresh
branch
from
2a00255 to
3bd5a08
Compare
|
Let's also see if this fixes #54. I can't test locally on Firefox, however. |
mattigruener
force-pushed
the
bootstrapRefresh
branch
from
3bd5a08 to
7a0847e
Compare
|
These failures are quite frustrating. They're caused by perfectly standard HTML inside the footer, which passes the W3C validator. Is it possible we could disable |
Hey, sorry for the late reply. So do I understand it right that the long and short of it is that we are writing valid HTML5 code, but I was to believe we turned validation on forcibly as we were regularly seeing broken links etc? Seems like giving up on that would be a step backwards. Could we instead switch to using a parser that can actually deal with HTML5? It doesn't need to be ruby based. |
Yes. Nokogiri validates against the HTML4 standard, not 5. Even so, valid HTML and working links are separate tests. Like I said, browsers are fairly forgiving of bad HTML anyway, and I can test that on my own when I make changes. What's harder to test is that every single link works with any given build. Removing the |
Oh sweet, thats perfect then! Go for it! |
|
@medubelko looks like a lot of work, nice one! Certainly looks more maintainable. Re: blog. If we're going to the separate site for less-formal posts such as tips, etc.., maybe we just want the news on there for releases/press? What do you and @johnhaddon think? Do you want general comments on the content, or more the technical migration? Is it meant to look like the old site or has the navbar/carousel been redesigned? Quick glance, a few things I noticed missing/changed on the home page:
thanks |
|
To do:
|
|
@themissingcow I've addressed everything except the floating nav bar, which I'm still mulling about. Let me know what you think. |
Thanks, sill have a look as soon as I can, don't think the nav is a blocking issue - what ever you think works best. |
There was a problem hiding this comment.
Hey,
Thanks for making those changes. The carousel looks much better now, and the extra links at the bottom really help with onwards journeys.
Theres one blocker with the documentation link (see comment) and it'd be good to highlight the links on the download page.
What do you think about making the nav bar links in bold? At present, they're the same size/weight as the body copy so perhaps read more as a tagline than a menu?
_includes/footer.html
Outdated
| <li class="mb-1"><a href="/download">Home</a></li> | ||
| <li class="mb-1"><a href="/download">Download</a></li> | ||
| <li class="mb-1"><a href="/news">News</a></li> | ||
| <li class="mb-1"><a href="https://gafferhq.org/documentation/{{ site.latest-release }}">Docs</a></li> |
There was a problem hiding this comment.
Can we add www to the docs URL? otherwise you get HTTPS errors and the 'this site is evil and will steal your cat' interstitial UX.
NET::ERR_CERT_COMMON_NAME_INVALID
download.md
Outdated
|
|
||
| **Gaffer {{ site.latest-release }}** (stable) compiled, containing [Appleseed {{ site.appleseed-version }}](https://appleseedhq.org). Compatible with Arnold {{ site.arnold-version }}, 3Delight {{ site.delight-version }}, and Tractor {{ site.tractor-version}}. | ||
|
|
||
| <a href="https://github.com/gafferhq/gaffer/releases/download/{{ site.latest-release }}/gaffer-{{ site.latest-release }}-linux.tar.gz"><i class="fa fa-arrow-down"></i> Download (.tar.gz)</a> |
There was a problem hiding this comment.
Can we make this (and the MacOS one) look like a button? It's probably the most important thing on the page, feels like it gets somewhat lost at the mo. Can we just use the styling we use on the links on the home page?
As of mid-2019, this is one of the most flexible small lightboxes.
This is the industry standard for copying data to the user's clipboard.
Latest version, and Bootstrap 4 requires it.
For MS IE compatibility. Hopefully in the not-too-distant future we can ignore IE entirely.
- `gaff-variables.scss`: Global Sass variables for use in stylings, plus overrides to Bootstrap variables and maps. - `gaff-classes.scss`: General stylings, like a regular site.css, that apply across pages. Of particular note are the styles under `main#main` and `article#article`; these should standardize the apperance of typography and images between main pages and posts. - `gaff-code-blocks.scss`: Special stylings specific to code-blocks. Isolated because they're based on Bootstrap's own website, and are likely to change as Bootstrap versions change.
- `styles.scss`: The main Sass/CSS entrypoint for Jekyll. All styling cascades from this. Per-plugin CSS should be added to this. - `imports.scss`: The master Sass stack. `gaff-variables` (global variables and overrides) loads first, because Sass overrides must apply before their targets are established. After that, Bootstrap styling is processed. Then, the site-specific stylings come in. Lastly, FontAwesome is processed.
- A small function for inserting the copyright year. - A small function that adds lightbox classes to all images for baguetteBox.js to use. - A modified Bootstrap function that adds a button to copy the text in code blocks. -TODO: Once we're far enough along in time that ES2015-compliant browser versions are well-entrenched, consider using Javascript imports to bring in all the scripts in this file, rather than relying on the Liquid layouts to specify them all.
- `footer.html`: The site footer. Removed all HTML end-matter, which should be handled in the page layout. - `embed-media.html`: Adds a generic Bootstrap-compliant media frame, for use with PDFs, videos, etc. - `vimeo.html`: Vimeo-specific embed container. - `image.html`: Base template for more complex image includes. - `image-carousel.html`: For images in the Bootstrap carousel in `index.md`. - `image-lightbox.html`: For inserting lightboxed single images (not gallereis). - `nav.html`: The site navigation bar, or header equivalent. Removed all HTML front-matter, which should be handled in the page layout. - `nav-link.html`: Convenience include for adding new pages to the nav. - `tags-sidebar.html`: For inserting a 3-Bootstrap-unit-wide container that lists all blog tags. - Removed old includes.
- `base.html`: The core HTML scaffolding that all pages use. - `default.html`: For top-level content, such as pages included in the nav (with the notable exception of the home page). - `post.html`: Made to conform to Bootstrap 4. The banner at the top of the post and thumbnail in the archive view are now the same `banner:` image in the front matter, meaning authors won't need to awkwardly mix the banner image into the content. Added includes for an author, provision for post updates, and a transcluded list of the post's tags at the end of the content.
- `index.md`: Updated to conform better to Bootstrap 4. Carousel shrunk to work better with images of various sizes. Works much better on mobile. - `download.html`: Expanded content, simplified the presentation; made it straight to the point, and covers developers' needs better. - `blog.html`/`news.html`: Replaced with `news/index.html` to conform to Jekyll blog archive requirements. Updated layout to be a little more modern, and added a list of all blog tags. - `tags.md`: Dynamic index of all tags. Stop-gap solution until Jekyll provides for automatic page creation based on categories/tags. - `community.html`/`forum.html`: Redirect straight to the Google group, since putting a Google forum in an `<iframe>` causes display issues. - Added a backup 404 page. - Switched to HTTPS links where possible.
- Update front matter and content for automatic, banner, author, update dates. - Add author. - Use includes where appropriate. - Cleanup unnecessary HTML. - Switched to HTTPS links where possible.
Keep them under `/content/images/<post-title>`.
Keep them under `/content/examples`.
- Added feed and sitemap plugins. - Added variables for 3rd-party tool versions.
- Remove background color - Make buttons fit with main theme color - Remove image alt-text
Using HTTPS without `www` causes builds to throw `NET::ERR_CERT_COMMON_NAME_INVALID` errors.
This should reduce their prominence and contrast, resulting in it stealing less of the user's attention away from the navbar links.
Made them parallel and prominent, so they serve as a proper CTA.
medubelko
force-pushed
the
bootstrapRefresh
branch
from
8736575 to
eb86e56
Compare
|
@themissingcow Rebased and addressed your online and offline suggestions. Let me know what you think of the nav links and the buttons in Download. The HTML false positives remain in the build, but I think it's good otherwise. |
Were we going to just remove
Do you want to make a separate PR for that? Then we can get that merged and be in a good place? |
Hey, looking great now, thanks. The new download page is much better. Did it just add the ext link icon to the nav links? The font seems the same. |
|
Closing: #51 |
Refreshes the website to use Bootstrap 4 with Sass, and uses more modern formatting and scripting (for the carousel, the lightbox, and code highlighting). Updates all the Javascript and CSS. Removes all redundant scripts and frameworks. Gives a basic revamp to the look of the pages for Bootstrap conformance. Adds auto-indexing tag page for blog posts. Update posts with tags.
For full details, see the commit log.
@johnhaddon @themissingcow Please give it it a whirl. I'm sure there are some changes we'll want to make to each post's tags, since I didn't follow Tom's tags PR to the T. Or, since we're adopting a separate blog, we can just drop the tag feature and move on without it.
I'm also a bit stumped as to what to put in the carousel image descriptions, other than just "lighting and lookdev on [show]" over and over. Or, we could leave that until later, when we make a proper showcase page/section.
Addresses:
Once this is merged, we can address #52 and #54.