-
Notifications
You must be signed in to change notification settings - Fork 25.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add variable for max-width #2093
Add variable for max-width #2093
Conversation
$x-large: 1280px !default; | ||
$max-width: 1280px !default; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Having done a similar set of changes to my own fork of 'minimal-mistakes', perhaps this assignment should be written '$max-width: $x-large !default' so that overriding '$x-large' has the effect of also overriding the default value of 'max-width' as well.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I had something similar on my fork too, but then I realize that it's better that max-width has it's own entity, either similar as x-large if you want that way or some other larger if you want it.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We definitely need both $x-large and $max-width to be separate variables for exactly the reasons you state. My use, for example, is to leave $x-large at its current value and set $max-width to 100% (uses all the screen you paid for). My suggested change to your pull request aims to ensure that projects that currently override $x-large continue to behave as they always have. Currently, setting '$x-large' has the effect of changing both the breakpoint and the 'max-width' of a number of elements. As your pull request is written, existing projects that override '$x-large' will continue to override the breakpoint but will see the 'max-width' of elements that used to be set to their '$x-large' override now set to '1280px'.
b09ebe2
to
acc3861
Compare
@@ -137,7 +137,7 @@ $medium-wide: 900px !default; | |||
$large: 1024px !default; | |||
$large-wide: 1160px !default; | |||
$x-large: 1280px !default; | |||
$max-width: 1400px !default; | |||
$max-width: $x-large !default; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@MichaelJCaruso this way you mean I guess.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes
Can you post some screenshot examples of these? I'd like to see how bad things can look before committing to adding another breakpoint. |
Since Luis took the initiative to add the breakpoints, I expect he will have a better idea of the boundary conditions he fixed. I have, however, observed jumpy behavior as boundaries appear to be crossed. I'll see what I can put together. If you're interested in trying some of this for yourself, you can check out the non-trivial pages in https://michaeljcaruso.github.io/vision/ to see if anything jumps out at you. I'm not using Luis' fork, but I am using a fork that provides for separate override of $max-width (called $x-large-max-width in my world). |
Ok, so the content isn't really breaking. This is more of "I'm the sort of person who goes to websites and resizes the browser to see how responsive they are" rather than a normal use case of reading the page as presented. 😉 Still not completely convinced this is a problem worth solving for by adding complexity of another breakpoint. |
LOL!! 😂 Yeah!! it’s totally that!! To be honest I told you upfront that I really didn’t know if this was going to be useful for you. For me the main issue here is the content should be always smaller / narrower as the browser window get smaller / narrower. It’s true that one usually doesn’t change the browser window size, but I sometimes do... (to fit more than one window in the screen) and screens computers and resolutions really varies. The aim of the pull is consistency in the way smaller screen always smaller content. I understand that you want to keep the theme as simple as possible, though. Sent with GitHawk |
Fair enough. |
If I can chime in as an interested third party, while in the process of deploying a significant GitHub pages documentation site using minimal-mistakes, tuning the presentation of my own material led me to Luis' PR. While change dynamics are always going to be a matter of aesthetics and boundary behavior, one aspect of Luis' change that attracted my attention was its simple $max-width parameterization of screen width utilization. While we can always customize that in a fork (and I have), I'd like to upvote the inclusion of that feature in minimal-mistakes, especially given the way approaches to the correct solutions have changed in response to major rewrites of libraries like _sass. My two cents, for what it's worth (-: yes, I know, 2 cents :-) |
I see value in adding the The other adjustments to fine tune the sidebar widths for @luispuerto If you want to retool the PR (or submit another one) with just the |
3e2ca2f
to
8de700a
Compare
@mmistakes we can use this PR, I don't have a problem. The modifications have been done 🙂 |
Perhaps for reference sake I'm going to drop here a link to the commit on my fork where I did the changes |
Looks good @luispuerto, thanks. |
* Update last modified time * Added missing ref attribute (mmistakes#1959) As suggested by @mmistakes in mmistakes#1948 (comment) * Use privacy aware embed options for YouTube & Vimeo (mmistakes#1964) * Update CHANGELOG and history * Punjabi Translation of ui-text (mmistakes#1962) * Punjabi Translation of ui-text There are more than 100 million native speakers of Punjabi language. I am one of them. More details about [punjabi on wikipedia](https://en.wikipedia.org/wiki/Punjabi_language). All the punjabi translations are perfect with the following exceptions- - in the variable name (_config.yml and words_per_minute) which are intentionally left in english. - meta_label is empty * Update CHANGELOG and history * Add support for utterances (mmistakes#1966) * Add support for utterances * Add utterances config documentation * Update CHANGELOG and history Close mmistakes#1909 * Update localized text list * Update README.md * Update theme documentation * Increase font-size * Increase padding * Add focus color * Adjust navigation toggles * Use dark syntax highlighting * Update CHANGELOG and history * Add Google Drive as video provider (mmistakes#1967) * Add Google Drive provider documentation * Update CHANGELOG and history * Changed schema.org to secure links (https) (mmistakes#1969) * Update CHANGELOG and history * Prevent current post from showing in the "You may also enjoy" (related (mmistakes#1976) posts) section * Update CHANGELOG and history * Change teaser image * Disable comments * Add hover state * Release 4.14.0 💎 * Update CHANGELOG * Fix closed navicon on hover * Release 4.14.1 gem * Update NPM dependencies cc/ mmistakes#1977 * Change remaining schema.org markup to `https` (mmistakes#1978) * Update CHANGELOG and history * Update about.md (mmistakes#1981) Just a minor addition, the word Hindi written in devnagri script (the script used for this language). Makes it easier to visually understand what script we are talking about. * Update README.md (mmistakes#1982) Just a minor addition, the word Hindi written in devnagri script (the script used for this language). Makes it easier to visually understand what script we are talking about. * Fix function name for Google Custom Search (mmistakes#1983) fbafe58 renamed the function in the scripts file, but did not rename the call sites. * Update CHANGELOG and history * Allow sidebar navs with custom sidebar content Multiple sidebar navs can also be included on a page: ``` sidebar: - title: Navigation 1 nav: nav1 - title: Navigation 2 nav: nav2 ``` Fixes mmistakes#1986 * Update test post * Update CHANGELOG and history * Update YAML example * Fix broken image Close mmistakes#1994 * Fix broken image * HTTPS Twitter short link (mmistakes#2001) * Fixed Netlify typo (mmistakes#2013) * update font awesome (mmistakes#1995) REF: https://fontawesome.com/changelog/latest * Update CHANGELOG and history * Remove unused variables (mmistakes#1996) * Update CHANGELOG and history * [Bug fix]: Added missing Staticman Spanish UI text (mmistakes#1997) Taken from line 91 of 5d-eu/messages.php@ec56008 * Update CHANGELOG and history * Persian Translation of UI Elements (mmistakes#2004) * Add Persian translation to ui-text.yml * Mention the added Persian translation in the documentation * Update CHANGELOG and history * shorter IE conditional statement (mmistakes#2006) saves 5 bytes :-) * Update CHANGELOG and history * Fix typo * lunr 2.3.5 update (mmistakes#2010) * Update CHANGELOG and history * Fix wide tables that overflow parent container Close mmistakes#2008 * Accessibility: Add aria-label to the search button (mmistakes#2014) * Accessibility: Add aria-label to the search button * Update button aria text * Add aria text to menu toggle * Add span for search toggle * Update span for menu label & remove aria * Update ui-text.yml to add search_label * Update * Update CHANGELOG and history * Update copyright year * Release 4.14.2 💎 * Bump version to 4.14.2 * Clicking TOC links changes hash fragment (mmistakes#2019) * Fix smooth scroll breaking back button mmistakes#1767 * Change URL's hash fragment when clicking on TOC * Switch from hashchange to popstate event handler This seems to have better behavior with the Forward button, on page load, and always scrolls in the right direction. Close mmistakes#1767 * Update CHANGELOG and history * Scrollspy-style updating of hash and TOC highlighting * Use jQuery throttle library * Define $active-color in terms of $primary-color * Update CHANGELOG and history * assign canonical directly if custom value exists (mmistakes#2021) * Update CHANGELOG, history, and `canonical_url` documentation * Add support to customize `issue-term` (mmistakes#2022) Current we hardcoded the `pathname` for `issue-term` when we are using utterances comment provider. It would be better for let users customize it by setting a `site.comments.utterances.issue_term` in their `_config.yml`. * Update * Fix scrollspy on link clicking, and # for top of page (mmistakes#2023) * Update CHANGELOG and history * Add logo and title customization to the masthead (mmistakes#2026) * Add logo and title customization to the masthead * Adjust config description * Add test site logo to `/test` * Document `site.logo` and `site.masthead_title` * Update CHANGELOG and history * Release 4.15.0 💎 * Fix empty `<img>` when `site_logo` is not assigned Ref: mmistakes#2026 (comment) * Update test post * Add empty `alt` attribute to img tag with logo (mmistakes#2035) * Provide empty alt attribute (alt="") for logo image, because it does not provide information * Update CHANGELOG and history * Fix `site.logo` false positives * Update ui-text.yml (mmistakes#2037) Add Malayalam localized UI text strings * Add Malayalam localized UI text strings * Update CHANGELOG, history, and docs * Improve Staticman v3 documentation (mmistakes#2043) * Corrected Staticman v3 info * Added a link to eduardoboucas/staticman#219 * Fix typo * Remove 'www' from Stack Overflow URL (mmistakes#2054) Stack Overflow is no longer including `www` in its URLs. * [fix] syntax error of non-english character (mmistakes#2042) * Dear the make of one of the world's greatest jekyll theme. [problem] I found that 'Syntax Error' occurs when non-english character is included in some html elements(e.g h2, h3 ...) and 'toc' is generated based of that elements. [debug] Click the any element of auto generated 'toc' in the below link. https://aliwo.github.io/swblog/series/principles_of_python/object/#%EA%B0%9D%EC%B2%B4%EC%99%80-%ED%81%B4%EB%9E%98%EC%8A%A4%EC%9D%98-%EC%A0%95%EC%9D%98 [fix] This happens because escaped url string get right in to jquery. So I fixed it with javascript's 'decodeURI' function! :) * rollback unnecessary changes * Compile main.min.js * Update CHANGELOG and history * update Font Awesome (mmistakes#2053) * update Font Awesome REF: https://fontawesome.com/changelog/latest * Update _includes/scripts.html Co-Authored-By: coliff <christianoliff@yahoo.com> * Update CHANGELOG and history * Updated swedish translations. (mmistakes#2056) * Update Swedish localized UI text strings * Update CHANGELOG and history * Fix bad YAML Remove comma * Add Staticman app endpoint to docs site * Revert "Add Staticman app endpoint to docs site" This reverts commit 67c08a0. * exit search screen with Esc key (mmistakes#2055) * exit search with esc key feature is added * closing search screen with esc key feature is added to _main.js * Update CHANGELOG and history * Update history page * Add link to issue * Release 4.15.2 💎 * Add missing translation of chinese (mmistakes#2072) Add missing Chinese text strings * Update CHANGELOG and history * Fix indendation Close mmistakes#2078 * Fix indents * Loosen Bundler dependency for theme gem * Remove Google+ Google+ is being shutdown on April 2, 2019. Social sharing buttong, comment provider, and author link configs have been removed from the theme. ref: https://support.google.com/plus/answer/9195133 * Update CHANGELOG * Add tip on how to start a YouTube embed at a given timestamp (mmistakes#2077) Close mmistakes#2077 * Update Google Universal Analytics to load async (mmistakes#2079) * Update CHANGELOG and history * Adjust wording * Add styling for GFM task lists Close mmistakes#2092 * Add GFM task list example to post * Replace jQuery Smooth Scroll with Smooth Scroll + Gumshoe (mmistakes#2082) * Replace jQuery Smooth Scroll with Smooth Scroll + Gumshoe * Change smooth scrolling speed * Set maximum smooth scroll duration * Remove Font Awesome CSS Ppseudo elements attribute from JS script Close mmistakes#2050, close mmistakes#2075 * Update CHANGELOG and history * Fix figures when they are inside of a list (mmistakes#2094) * Update CHANGELOG and hsitory * Fix French translation typo (mmistakes#2096) * Update CHANGELOG and history * Updated vi-VN for some missing terms (mmistakes#2097) ```yml search_placeholder_text : "Nhập từ khóa cần tìm..." results_found : "Kết quả tìm được" back_to_top : "Về đầu trang" ``` * Update CHANGELOG and history * Typos fix and including more words for pt-br (mmistakes#2098) I just fixed some typos PT-BR, included translations for words that were not translated and changed some words to better describe the tag's meaning. This is how I use it in my Portuguese blog. * Update CHANGELOG and history * Update Font Awesome (mmistakes#2102) REF: https://github.com/FortAwesome/Font-Awesome/blob/master/CHANGELOG.md * Update CHANGELOG and history * Added missing Hindi Translation of ui-text (mmistakes#2105) Due to unknown reason, Hindi translation of ui-text was missing (mmistakes#2101) I have added it back from a previous pull request (mmistakes#1888) * Added missing Hindi Translation of ui-text ( for docs folder) (mmistakes#2106) Due to unknown reason, Hindi translation of ui-text was missing (mmistakes#2101) I have added it back from a previous pull request (mmistakes#1888) * Update CHANGELOG and history * Add UI Text for Thai Language (mmistakes#2111) * Update `/docs` text strings * Add reference to Thai UI text strings * Fix table of contents active link styling * Add `max-width` Sass variable (mmistakes#2093) * Update CHANGELOG and history * Allow adding JavaScript files after the theme's (mmistakes#2116) Allow adding JavaScript files after those bundled in the theme Close mmistakes#2110 * Update CHANGELOG and history * Improve search `input` semantics (mmistakes#2123) * Update search_form.html Updates Issue mmistakes#2122 by adding the correct input type and aria label. * update search_form.html should be area-placeholder. My mistake. Updates Issue mmistakes#2122 * fix aria-placeholder Updates issue mmistakes#2123 with a typo found by @mmistakes for liquid syntax. Close mmistakes#2122 * Update CHANGELOG and history * Release 4.16.0 💎 * Made Gumshoe contingent upon a TOC being present. This prevents a console error on pages without a TOC. (mmistakes#2124) * Update CHANGELOG and history * Update jquery v3.3.1 to v3.4.0 (mmistakes#2129) * Update jquery v3.3.1 to v3.4.0 * Update `main.min.js` Close mmistakes#2127 * Update CHANGELOG and history * Update layout compress from v3.0.2 to v3.1.0 (mmistakes#2128) * Update CHANGELOG and history * Add link to MM remote theme starter * Release 4.16.1 💎 * Revert back to jQuery v3.3.1 3.4.0 causes issues with older jQuery plugins that haven't been updated to support it. * Release 4.16.2 💎 * Update Gumshoe to v5.1.1 Fixes mmistakes#2140 * Update CHANGELOG and history * Update jQuery to v3.4.1 ref mmistakes#2137 * Update JavaScript listing * Update CHANGELOG and history * Reset positioning of `rel="permalink"` anchors * Release 4.16.3 💎 * Fix permalink stacking order * Update CHANGELOG and history * add www to facebook.com link (mmistakes#2160) * Change permalink * Fix pound symbol not displaying properly for post categories and tags Fixes mmistakes#2156 * Add edge case * Update CHANGELOG and history * Create FUNDING.yml * Fix and complete Spanish localization (mmistakes#2149) * Update CHANGELOG and history * update Font Awesome (mmistakes#2150) REF: https://fontawesome.com/changelog/latest * Update CHANGELOG and history * Fix and improve pt-BR localization. (mmistakes#2162) * Update CHANGELOG and history * Arithmetic fix in _form.scss (mmistakes#2169) * Update CHANGELOG and history * Release 4.16.4 💎 * Remove duplicate UI text file in `/docs` * Add skip links Close mmistakes#2182 * Remove extra `{` Fixes mmistakes#2192 * Low hanging fruit (mmistakes#2186) * Update 05-configuration.md - fix dead Twitter Dev docs url - slight clarification re: Player Card approval - fix Jekyll docs url * Update 2013-01-10-markup-image-alignment.md - fix the/re typo * Update CHANGELOG and history * Fix broken Flickr images * remove unneeded type="text/javascript" (mmistakes#2190) REF: - https://google.github.io/styleguide/htmlcssguide.html#type_Attributes - https://codeguide.co/#html-style-script - https://developers.google.com/analytics/devguides/collection/analyticsjs/ * Update CHANGELOG and history * Fix missing fallback title for table of contents * Remove unecessary console.log in `lunr-en.js` and `lunr-gr.js` JavaScript Close mmistakes#2193 * Use Font Awesome Kits to use the latest version of icons Close mmistakes#2184 * Complete missing parts of Korean locale. (mmistakes#2209) search_placeholder_text, results_found, and back_to_top * Update CHANGELOG and history * Display site subtitle in masthead (mmistakes#2205) * Add site subtitle * Tabs vs spaces - the ancient conflict * updates cfr PR mmistakes#2205 * Perhaps also add the closing anchor * Make sure we check for the right variables... * Brown paper bag - subtitle, not description * Use `span` instead of `div` element * Document `site.subtitle` * Update CHANGELOG and history * Add site subtitle * Fixes aria issues on search form (mmistakes#2211) * Fixes aria issues on search form * Swapping aria-label for <label> tag in search * Removing background gray caused by adding <form> tag to search * Removing redundant space * Making form not submit if key is enter Close mmistakes#2180 * Add localized text string * Update CHANGELOG and history * Updated localized text string for "Punjabi" and "Hindi" language (mmistakes#2212) * Update CHANGELOG and history * Release 4.16.5 💎 * Allow Markdown in author bio (mmistakes#2215) * enable markdown in author bio added the markdownify liquid filter * Add markdown to bio in _config.yml * add markdown to bio in /test/ _config.yml * Change <p> to <div> * Add note about allowed Markdown in `author.bio` * Update CHANGELOG and history * Add emphasis * Fix overlapping links in post link type Close mmistakes#2222 * Fix default site.author in seo.html (mmistakes#2230) * Update CHANGELOG and history * Complete Spanish localization (mmistakes#2229) * Update CHANGELOG and history * Remove fullstop in some Staticman UI text (mmistakes#2220) In this UI text, the 2nd sentence is not finished. comment_form_info : "Your email address will not be published. Required fields are marked" * Update CHANGELOG and history * Fix typos * Harmonize `site.url` for Organization JSON-LD schema * Fix `site.url` in Organization/Person JSON-LD schema Close mmistakes#1906 * Update history * Relax Jekyll dependency to allow for version 4.0 * Ignore Jekyll cache * Remove jemoji gem * Bump dependencies * Remove jemoji gem * Update documentation * Release 4.16.6 💎 * Translate into Catalan (mmistakes#2237) * Translate into Catalan * Translate missing key * Pluralize key * Update CHANGELOG, history, and docs * Update onchange development dependency in package.json Close mmistakes#2241 * Fix typo in config comment (mmistakes#2243) * Update CHANGELOG and history * Fix http links to use https (mmistakes#2244) Every site should support https by now. Better to link the https sites right away. Both sites do support https at the time I checked. * Update CHANGELOG and history * Allow per-page override of words_per_minute (mmistakes#2250) Different languages usually have different read speeds. This change is useful for sites with multi-lingual content * Document `page.words_per_minute` * Update CHANGELOG and history * Show a permalink anchor when hovering over headings in main content (mmistakes#2251) * Implement heading permalinks, close mmistakes#2246 Thanks to jekyll/jekyll for CSS. Link anchor is visible when the mouse hovers over the title line. * Build the updated _main.js * Update CHANGELOG and history * remove extraneous space from IE conditional statement (mmistakes#2273) * Update CHANGELOG and history * Release 4.17.0 (mmistakes#2275) * Release 4.17.0 💎 * Update CHANGELOG and history * MAINT: remove LICENSE * BUG: remove typo * MAINT: remove docs dir * STY: stylistic chages * MAINT: remove vendor/bundle
This is an enhancement or feature.
Summary
I really don't know if you are interested in adding this to the theme. It comes to resolve a problem that is mainly there when you change the size of the browser in computers, o you have a small screen computer or an iPad. It felt that sometimes in smaller browser sizes some content was bigger, wider, than in bigger ones for no reason.
Create a new breakpoint in between "large" and "x-large" so the size changes are a little bit more fluid.
Tune-up how the right and left sidebars and the post/page content behaves. It feels more fluid now and usually when the size of the browser decreases the content decreases. Before at some breakpoints the content was bigger than in the wider breakpoint.
Create a $max-width variable, so know the content can be wider than the larger breakpoint. This variable is applied to page, search and masthead "__inner-wrap".