diff --git a/_includes/feature_row_pyos b/_includes/feature_row_pyos index e2bfa35a..2924327c 100644 --- a/_includes/feature_row_pyos +++ b/_includes/feature_row_pyos @@ -4,11 +4,13 @@ {% assign feature_row = page.feature_row %} {% endif %} -
+
+ {% for f in feature_row %} +
{% if f.image_path %} -
+
{% if f.alt %}{{ f.alt }}{% endif %} {% if f.image_caption %} @@ -17,23 +19,22 @@
{% endif %}
-
{% if f.title %}

{{ f.title }}

{% endif %} {% if f.excerpt %} -
+
{{ f.excerpt | markdownify }}
{% endif %} - - {% if f.url %} -

{{ f.btn_label | default: site.data.ui-text[site.locale].more_label | default: "Learn More" }}

- {% endif %} -
+
+ {% if f.url %} + {{ f.btn_label | default: site.data.ui-text[site.locale].more_label | default: "Learn More" }} + {% endif %} +
+
{% endfor %} -
diff --git a/_includes/pyos-blockquote.html b/_includes/pyos-blockquote.html index 9cf9aa56..210c04ad 100644 --- a/_includes/pyos-blockquote.html +++ b/_includes/pyos-blockquote.html @@ -7,5 +7,6 @@ {% if include.author %}~{{ include.author }}{% endif %}{% if include.event %}, {{ include.event }}{% endif %} +
{% endif %} diff --git a/_pages/home.md b/_pages/home.md index 7beba985..f6f64c2f 100644 --- a/_pages/home.md +++ b/_pages/home.md @@ -29,14 +29,14 @@ peer-review: title: "Community Partnerships" excerpt: "We partner with domain-specific scientific Python communities such as [Pangeo](https://www.pyopensci.org/software-peer-review/partners/pangeo.html) who want to review affiliated packages. Through this collaboration, we develop community-specific standards that are used in our reviews to evaluate whether a package meets affiliation requirements. This removes the need for communities to develop their own peer review process." url: https://www.pyopensci.org/partners.html - btn_label: "> Learn More About Our Community Partners" + btn_label: "> Learn About Community Partners" btn_class: btn--inverse - image_path: images/python-packaging-guide.png title: "Simplifying Packaging" alt: Light purple image that says python packaging guide and below it says simplifying python packaging. The background is a grey laptop with a hand looking down at the laptop the above. excerpt: "We are creating a beginner-friendly, **community-driven Python packaging guide**. Our guide is reviewed by members of the Python Packaging Authority, maintainers of core packaging tools and members of the scientific Python community. It recommends best practices for you to follow when creating a Python package." url: https://www.pyopensci.org/python-package-guide/ - btn_label: "> Check out our Python packaging guide" + btn_label: "> Read our packaging guide" btn_class: btn--inverse --- @@ -86,14 +86,14 @@ peer-review: {% assign blog_posts = site.posts | where_exp: "item", "item.categories contains 'blog-post'" %} -
+
## Recent blog posts & updates -
+
{% for post in blog_posts limit:3 %}
-

{{ post.title }}

+

{{ post.title }}

{{ post.excerpt | markdownify }}

diff --git a/_posts/2019-10-26-pyos-min-mistakes-theme.md b/_posts/2019-10-26-pyos-min-mistakes-theme.md index 446c94ed..2e30bb95 100644 --- a/_posts/2019-10-26-pyos-min-mistakes-theme.md +++ b/_posts/2019-10-26-pyos-min-mistakes-theme.md @@ -117,13 +117,16 @@ You can also adjust the width inline: ### Figure -- align right -And now we're going to shift things to the **right align**. Again, there should be plenty of room above, below, and to the left of the image. Just look at him there --- Hey guy! Way to rock that right side. I don't care what the left aligned image says, you look great. Don't let anyone else tell you differently. +Below is a right aligned image
A timeline showing the growth of pyOpenSci from 2019 to 2024.
Growth of pyOpenSci from 2019 to 2024 Growth of pyOpenSci from 2019 to 2024 Growth of pyOpenSci from 2019 to 2024 Growth of pyOpenSci from 2019 to 2024
+ +And now we're going to shift things to the **right align**. Again, there should be plenty of room above, below, and to the left of the image. Just look at him there --- Hey guy! Way to rock that right side. I don't care what the left aligned image says, you look great. Don't let anyone else tell you differently. + The html looks like this: @@ -184,23 +187,53 @@ The image below should extend outside of the parent container on right. > meaningful progress. {: .highlight-quote } + +### Quotes using include files + You can also create blockquotes using include files. Below is a green and magenta version of the same quote -``` +````html +{% raw %} {% include pyos-blockquote.html quote="[*I want to... *] Streamline the development of good quality, socially responsible, and easily shareable software." author="Anonymous" event="AGU 2019 Townhall" class="highlight magenta" %} -``` +{% endraw %} +```` {% include pyos-blockquote.html quote="[*I want to... *] Streamline the development of good quality, socially responsible, and easily shareable software." author="Anonymous" event="AGU 2019 Townhall" class="highlight magenta" %} +```markdown +{% raw %} +{% include pyos-blockquote.html quote="[*I want to... *] Streamline the development of good quality, socially responsible, and easily shareable software." author="Anonymous" event="AGU 2019 Townhall" class="highlight purple" %} +{% endraw %} +``` + +{% include pyos-blockquote.html quote="[*I want to... *] Streamline the development of good quality, socially responsible, and easily shareable software." author="Anonymous" event="AGU 2019 Townhall" class="highlight purple" %} + The default color for the quotes is the pyos teal green. ``` +{% raw %} {% include pyos-blockquote.html quote="[*I want to... *] Streamline the development of good quality, socially responsible, and easily shareable software." author="Anonymous" event="AGU 2019 Townhall" class="highlight" %} +{% endraw %} ``` {% include pyos-blockquote.html quote="[*I want to... *] Streamline the development of good quality, socially responsible, and easily shareable software." author="Anonymous" event="AGU 2019 Townhall" class="highlight" %} +### Quotes in notice blocks + +``` +
+{% raw %} +{% include pyos-blockquote.html quote="[*I want to... *] Streamline the development of good quality, socially responsible, and easily shareable software." author="Anonymous" event="AGU 2019 Townhall" class="highlight" %} +{% endraw %} +
+``` + +
+{% include pyos-blockquote.html quote="[*I want to... *] Streamline the development of good quality, socially responsible, and easily shareable software." author="Anonymous" event="AGU 2019 Townhall" class="highlight" %} + +
+ ## Buttons Make any link standout more when applying the `.btn .btn--primary` classes. diff --git a/_posts/2024-08-30-pyopensci-monumental-growth-2024.md b/_posts/2024-08-30-pyopensci-monumental-growth-2024.md index bac862ed..0a67ef15 100644 --- a/_posts/2024-08-30-pyopensci-monumental-growth-2024.md +++ b/_posts/2024-08-30-pyopensci-monumental-growth-2024.md @@ -216,8 +216,7 @@ I will leave web and social media growth, which have also shown extraordinary gr The success of our packaging guide has been remarkable, thanks to the tremendous input and feedback from the community. What began as a simple guide has evolved into a collaborative project, with enthusiastic participation from contributors worldwide. -> @leahawasser @pyOpenSci clicking through and eventually found myself looking at "what is a python package" [www.pyopensci.org] and involuntarily performed a standing ovation. bookmarked it as an example of great docs for an incredibly complex subject with many meanings in many different contexts -{: .highlight-quote } +{% include pyos-blockquote.html quote="@leahawasser @pyOpenSci clicking through and eventually found myself looking at 'what is a Python package' and involuntarily performed a standing ovation. bookmarked it as an example of great docs for an incredibly complex subject with many meanings in many different contexts" author="Mastodon Toot" class="highlight" %} [View toot on mastodon](https://circumstances.run/@hipsterelectron/112557545629456885) diff --git a/_sass/minimal-mistakes/_base.scss b/_sass/minimal-mistakes/_base.scss index d6478442..13a55eb0 100644 --- a/_sass/minimal-mistakes/_base.scss +++ b/_sass/minimal-mistakes/_base.scss @@ -15,6 +15,7 @@ body { font-family: $global-font-family; line-height: 1.6; weight: $weight-3; + font-size: 1em; &.overflow--hidden { /* when primary navigation is visible, the content in the background won't scroll */ @@ -131,62 +132,81 @@ blockquote { } } +%quote-style { + font-weight: bold; + font-size: 100px; + color: $pyos-teal; + line-height: 0; +} + /* Block quote with bigger quotes*/ blockquote.highlight-quote { border: none; font-family: Georgia, "Times New Roman", Times, serif; - margin-bottom: 130px; - margin-top: 110px; - padding: 0 80px 0 30px; - max-width: 35rem; + margin-top: 6rem; + margin-bottom: 4rem; + padding: 0 2rem; + max-width: $medium; footer { - text-align: left; font-style: italic; font-weight: 500; text-align: right; } + &:after{ + @extend %quote-style; + position: absolute; + content: close-quote; + right: 4rem; + margin-top:2rem; + } + & > div.end { + position: relative; + } + + & > div.end:after { + @extend %quote-style; + content: close-quote; + position: absolute; + right: 0; + margin-top:2.8rem; + } + p { - font-size: 21px; + font-size: 1.3rem; position: relative; - margin-bottom: 10px; - - &:before, - &:after { - font-weight: bold; - font-size: 100px; - color: $pyos-teal; - line-height: 0; - } + margin-bottom: 0.63rem; &:before { + @extend %quote-style; position: absolute; content: open-quote; left: 0; top: -20px; } - - &:after { - content: close-quote; - position: absolute; - right: 0; - bottom: -80px; - } } - // Success class (magenta) - &.magenta p { - &:before, - &:after { + + &.magenta { + & > div.end:after, + p:before, + p:after { color: $pyos-magenta; } } - &.purple p { - &:before, - &:after { + + &.purple { + & > div.end:after, + p:before, + p:after { color: $pyos-mediumpurple; } } + + @include breakpoint('max-width: #$mobile') { + padding: 0; + //font-size: 2rem; + } } /* links */ diff --git a/_sass/minimal-mistakes/_mixins.scss b/_sass/minimal-mistakes/_mixins.scss index 53bb0bfc..a18aea62 100644 --- a/_sass/minimal-mistakes/_mixins.scss +++ b/_sass/minimal-mistakes/_mixins.scss @@ -90,3 +90,11 @@ background-color: $background-color; color: yiq-contrast-color($background-color, $dark, $light, $threshold); } + + +// breakpoint max width mixin +@mixin breakpoint-max-width($max-width) { + @media screen and (max-width: #{$max-width}) { + @content; + } +} diff --git a/_sass/minimal-mistakes/_navigation.scss b/_sass/minimal-mistakes/_navigation.scss index 4ea67406..a211dbca 100644 --- a/_sass/minimal-mistakes/_navigation.scss +++ b/_sass/minimal-mistakes/_navigation.scss @@ -514,6 +514,7 @@ border-radius: $border-radius; -webkit-box-shadow: $box-shadow; box-shadow: $box-shadow; + max-width: $medium; .nav__title { color: #fff; @@ -527,22 +528,24 @@ .active a { @include yiq-contrasted($active-color); } -} -ul.toc__menu li ul li a { - font-size: 1.2em; + @include breakpoint($large) { + max-width: $medium; + font-size: $type-size-4; + } } + // Force the sub menu in a toctree to be the same size as the main menu .toc__menu { margin: 0; padding: 0; width: 100%; list-style: none; - font-size: $type-size-6; + font-size: $type-size-5; @include breakpoint($large) { - font-size: $type-size-7; + font-size: $type-size-6; } a { @@ -565,7 +568,6 @@ ul.toc__menu li ul li a { li ul li ul > li a { padding-left: 1.75rem; - font-size: 1.2em; } li ul li ul li ul > li a { diff --git a/_sass/minimal-mistakes/_notices.scss b/_sass/minimal-mistakes/_notices.scss index e30c2e3d..ab816fd7 100644 --- a/_sass/minimal-mistakes/_notices.scss +++ b/_sass/minimal-mistakes/_notices.scss @@ -70,6 +70,9 @@ margin-bottom: 0; /* override*/ } } + @include breakpoint-max-width($mobile) { + padding: 0.5em; + } } /* Default notice */ @@ -108,27 +111,32 @@ @include notice($danger-color); } - .notice-highlight { background-color: $background-block; padding: 1em; h2 { margin-top: 1em; - } } /* Quotes in notice blocks */ .notice blockquote { - font-size: 1.5em; - margin: 5em 2em; + font-size: 1.5rem; + margin: 7em 2em; max-width: 100%; &.highlight-quote { + margin: 7em .5em; + padding: 0; + max-width: $medium; + p { - margin-bottom: 3px; + margin-bottom: 1rem; + } + &::after { + margin: 2rem; } footer { @@ -136,3 +144,53 @@ } } } + +/* Notice elements with figures */ +.notice { + border-radius: 15px !important; + box-shadow: 0 1px 1px rgba(189, 193, 196, 0.25) !important; + padding: 3em; + + p, li { + font-size: 1.1em!important; + } + + h2, h3 { + margin-top: 0 !important; + } + + figcaption { + font-family: $body-font; + font-size: 1.2em; // This will override the previous 1.3em + } + + &--info { + .btn.btn--info { + color: #fff; + } + + .archive__item-excerpt { + font-size: 0.95em; + } + + h2 { + font-size: 1.5em; + } + + h3 a, + h2 a:visited { + font-size: 1.5em; + text-decoration: none; + } + } +} +/* max 480 px */ +@media screen and (max-width: 480px) { + .notice { + padding: .5em; + } + + blockquote.highlight-quote>div.end:after { + margin-top: 3rem; + } +} diff --git a/_sass/minimal-mistakes/_page.scss b/_sass/minimal-mistakes/_page.scss index c6cd0289..3337108f 100644 --- a/_sass/minimal-mistakes/_page.scss +++ b/_sass/minimal-mistakes/_page.scss @@ -94,7 +94,8 @@ body { } p, - li { + li, + pre { max-width: $medium; font-weight: $weight-4; } @@ -594,3 +595,63 @@ body { } } } + +/* Media queries */ + +@media screen and (max-width: 768px) { + .page__content, .archive__item { + font-size: 1.1em + } + + .element-item { + width:calc(90% - 10px)!important; + } + + .narrow p { + font-size: 0.9em!important; + } + .narrow { + font-size: 0.9em!important; + } + + .page__meta.contributors { + font-size: .9em !important; + } + + h2.archive__item-title, h3.archive__item-title { + font-size: 1.3em!important; + } + + + .feature__item--center .archive__item-body, .archive__item-body { + width: 100%!important; + padding: 0!important; + } + + .wide #main { + padding-left: 2em; + } + .feature__item { + width: 95%!important; + } + .cards { + margin-right: auto!important; + margin-left: auto!important; + } + + .wide__p_text { + max-width: 90%!important; + } + ol { + font-size: 1em; + } +} + +/* End media query 48em / 768 px */ + +/* max 480 px */ +@media screen and (max-width: 480px) { + body{ + font-size: 1.4em; + } +} diff --git a/_sass/minimal-mistakes/_pyos-grid.scss b/_sass/minimal-mistakes/_pyos-grid.scss index 35d1278e..22d7584d 100644 --- a/_sass/minimal-mistakes/_pyos-grid.scss +++ b/_sass/minimal-mistakes/_pyos-grid.scss @@ -24,7 +24,7 @@ $colors: ( // Include the mixin -@include generate-color-styles($colors); +//@include generate-color-styles($colors); .clearfix::after { @@ -70,10 +70,16 @@ $colors: ( } } - +.grid-item { + background: #f9f9f9; + border: 1px solid #ddd; + border-radius: 8px; + overflow: hidden; + display: flex; + flex-direction: column; + } /* Blog grid styles */ - .blog__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); @@ -113,10 +119,7 @@ $colors: ( } } -/* Package cards splash */ -.cards h2.archive__item-title { - font-size: 1.1em!important; -} + .bubble:before { content: ""; @@ -135,108 +138,185 @@ $colors: ( // Cards are also used to style the isotope layout // do not adjust the display or structure of the cards element. +/* Package cards splash */ .cards { - top: 0px; - position: relative; - // max-width: 362px; - background-color: #fcfbf5;; - border-radius: 4px; - text-decoration: none; - z-index: 0; + top: 0px; + position: relative; + background-color: #fcfbf5; + border-radius: 4px; + text-decoration: none; + z-index: 0; + overflow: hidden; + border: 1px solid #ccc; + font-size: .8em; + + @include breakpoint-max-width(480px) { + padding: 2em; + } + + &__image { + max-height: calc($small / 3); overflow: hidden; - border: 1px solid #f2f8f9; - font-size: .8em; + border-radius: 10px; + } - &__image { - max-height: calc($small/3); - overflow: hidden; - border-radius: 10px; + &:hover { + transition: all 0.2s ease-out; + box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2); + top: -4px; + border: 1px solid #cccccc; + background-color: white; + cursor: pointer; + } + + &:hover:before { + transform: scale(2.15); + } + + p { + font-size: .9em; + } + + h2 { + a { + text-decoration: none; + font-size: 1.2em; } - &.highlight div { - padding:0; + &.archive__item-title { + font-size: 1.1em !important; } + } - &.highlight { - background-color:#f0f0f0!important; - padding: 0; + h3.card__title.no_toc, + .card__title.no_toc { + margin-top: .3em; + font-size: 1.5em; + color: #320a44; + } - &:before { - background-color: #fff; - } + .page__meta.contributors { + font-size: .7em; + } - &:hover { - cursor:default; - } + .contributors a { + text-decoration: none; + } + ul { + font-size: .8em; + list-style-type: none; + margin-left: 0; + padding: .2em; + } - .card-body { - margin: .2em; - padding: 1.2em; + ul a { + text-decoration: none; + } +} - p { - font-size: 1.2em; - } +.grid h3.card-title a { + margin-top: .3em; + font-size: 1.3em; + color: $pyos-darkpurple; + margin-top: 0; + margin-bottom: 0; + border-bottom: none; +} - .card-title { - margin-top: 0; - margin-bottom: 0; - border-bottom: none; - } - } - } +.feature-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 20px; + //padding: 20px; + width: 100%; + box-sizing: border-box; - &:hover { - transition: all 0.2s ease-out; - box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2); - top: -4px; - border: 1px solid #cccccc; - background-color: white; - cursor: pointer; - } + .grid-item { + display: flex; + flex-direction: column; + background: #f9f9f9; + border: 1px solid #ddd; + border-radius: 8px; + overflow: hidden; + } - &:hover:before { - transform: scale(2.15); - } + div>div { + padding:0; + } +} - p { - font-size: .9em +// Highlight is used for the home page highlight feature cards +.cards.highlight { + display: flex; + flex-direction: column; + height: 100%; + + .cards__image { + max-height: 200px; + overflow: hidden; + + img { + width: 100%; + height: auto; + object-fit: cover; } + } - h2 a { - text-decoration: none; - font-size: 1.2em; + &:before { + background-color: #fff; + } + + &:hover { + cursor: default; + } + + .card-body { + display: flex; + flex-direction: column; + flex-grow: 1; + padding: 15px; + + h2.card-title { + margin:0; } - h3.card__title.no_toc, .card__title.no_toc { - margin-top: .3em; - font-size: 1.5em; - color: #320a44; + .card-content { + flex-grow: 1; } - .page__meta.contributors { - font-size: .7em; + .card-footer { + padding: 15px; + text-align: center; + + a.btn { + margin-top: auto + } } - .contributors a { - text-decoration: none; + /* Ensure content is spaced properly and button stays at the bottom */ + > div { + display: flex; + flex-direction: column; + flex-grow: 1; + justify-content: space-between; /* Distribute content vertically */ } - ul { - font-size: .8em; - list-style-type: none; - margin-left: 0; - padding: .2em; + /* Style for the p containing the button */ + p { + font-size: 1.2em; + margin-bottom: 0.5em; } - ul a { - text-decoration: none; + /* Ensure the button is pushed to the bottom */ + p a.btn { + margin-top: auto; /* This ensures the button stays at the bottom */ + border: 1px solid yellow; + align-self: flex-start; /* Optional, to align the button to the left */ } } - - - +} /* Blog & event grid styles*/ .blog__grid .cards { @@ -308,8 +388,8 @@ $colors: ( } - /* Adjust font size on cards */ - .narrow { +/* Adjust font size on cards */ +.narrow { font-size: .8em!important; } @@ -332,6 +412,5 @@ $colors: ( grid-gap: 1rem; grid-template-columns: repeat(3, 1fr); grid-auto-flow: unset; - } } diff --git a/_sass/minimal-mistakes/_pyos-main.scss b/_sass/minimal-mistakes/_pyos-main.scss index b6909e3a..692f7f53 100644 --- a/_sass/minimal-mistakes/_pyos-main.scss +++ b/_sass/minimal-mistakes/_pyos-main.scss @@ -70,38 +70,6 @@ h2.clearall { clear: both; } - -.notice figcaption, figcaption { - font-family: $body-font; -} -.notice figcaption { - -} -.notice { - border-radius: 15px!important; - box-shadow: 0 1px 1px rgba(189,193,196,0.25)!important; - padding: 3em!important; - - p, li { - font-size: 1.1em!important; - } - - h2, h3 { - margin-top:0!important; - } - - figcaption { - font-size: 1.3em; - } -} - -/* Fix buttons and text in notice boxes */ -.notice figcaption { - font-size: 1.2em; -} - - - /* Sidebar author with circle font and header font adjustment */ .sidebar .author__name { font-family: $header-font!important; @@ -109,30 +77,10 @@ h2.clearall { } -// /* */ - .wide .archive { width: calc(100% - 100px); } -.notice--info .btn.btn--info { - color:#fff; -} - -.notice--info .archive__item-excerpt { - font-size: .95em; -} - -.notice--info h2 { - font-size: 1.5em; -} - -.notice--info h3 a, .notice--info h2 a:visited { - font-size: 1.5em; - text-decoration: none; - font-size: 1.0em; -} - .wide__p_text { -webkit-box-flex: 0; -webkit-flex: 0 0 66.66667%; @@ -141,58 +89,6 @@ h2.clearall { max-width: 66.66667%; } -@media screen and (max-width: 768px) { - - .element-item { - width:calc(90% - 10px)!important; - } - - .narrow p { - font-size: 0.9em!important; - } - .narrow { - font-size: 0.9em!important; - } - - .page__meta.contributors { - font-size: .9em !important; - } - - h2.archive__item-title, h3.archive__item-title { - font-size: 1.3em!important; - } - - .page__content, .archive__item { - font-size: 1em - } - - .feature__item--center .archive__item-body, .archive__item-body { - width: 100%!important; - padding: 0!important; - } - - .wide #main { - padding-left: 2em; - } - .feature__item { - width: 95%!important; - } - .cards { - margin-right: auto!important; - margin-left: auto!important; - } - - .wide__p_text { - max-width: 90%!important; - } - ol { - font-size: 1em; - - } -} - -/* End media query 48em / 768 px */ - /* max 480 px */ @media screen and (max-width: 480px) { @@ -247,12 +143,6 @@ h2.clearall { font-size: 1.3em; } - .cards { - padding: 10px!important; - - - } - .contrib_org, .ppl_social { font-size: .9em !important; } diff --git a/_sass/minimal-mistakes/_reset.scss b/_sass/minimal-mistakes/_reset.scss index ec3e8820..73fc9274 100644 --- a/_sass/minimal-mistakes/_reset.scss +++ b/_sass/minimal-mistakes/_reset.scss @@ -1,5 +1,5 @@ /* ========================================================================== - STYLE RESETS + Media queries for responsive queries ========================================================================== */ * { box-sizing: border-box; } @@ -8,18 +8,18 @@ html { /* apply a natural box layout model to all elements */ box-sizing: border-box; background-color: $background-color; - font-size: 15px; + font-size: 1rem; @include breakpoint($medium) { - font-size: 17px; + font-size: 1.2625rem; // 17px / 16px = 1.0625rem } @include breakpoint($large) { - font-size: 19px; + font-size: 1.1875rem; // 19px / 16px = 1.1875rem } @include breakpoint($x-large) { - font-size: 21px; + font-size: 1.3125rem; // 21px / 16px = 1.3125rem } -webkit-text-size-adjust: 100%; diff --git a/_sass/minimal-mistakes/_syntax.scss b/_sass/minimal-mistakes/_syntax.scss index 13d7e43e..64395ef7 100644 --- a/_sass/minimal-mistakes/_syntax.scss +++ b/_sass/minimal-mistakes/_syntax.scss @@ -12,6 +12,7 @@ figure.highlight { font-size: $type-size-6; line-height: 1.8; border-radius: $border-radius; + max-width: $medium; > pre, pre.highlight { diff --git a/_sass/minimal-mistakes/_variables.scss b/_sass/minimal-mistakes/_variables.scss index d0d70f80..66204dbf 100644 --- a/_sass/minimal-mistakes/_variables.scss +++ b/_sass/minimal-mistakes/_variables.scss @@ -57,10 +57,10 @@ $type-size-1: 2.441em !default; // ~39.056px $type-size-2: 1.953em !default; // ~31.248px $type-size-3: 1.563em !default; // ~25.008px $type-size-4: 1.25em !default; // ~20px -$type-size-5: 0.85em !default; // ~16px -$type-size-6: 0.65em !default; // ~12px main body font -$type-size-7: 0.6875em !default; // ~11px -$type-size-8: 0.625em !default; // ~10px +$type-size-5: 0.85em !default; // ~13.6px +$type-size-6: 0.75em !default; // ~12px main body font +$type-size-7: 0.64em !default; // ~10.24px +$type-size-8: 0.635em !default; // ~10.16px /* headline scale */ $h-size-1: 1.563em !default; // ~25.008px @@ -176,9 +176,9 @@ $base0f: #ff5370 !default; /* Breakpoints ========================================================================== */ - +$mobile: 480px !default; $small: 600px !default; -$medium: 34rem !default; +$medium: 768px !default; $medium-wide: 900px !default; $large: 1024px !default; $x-large: 1280px !default;