From 8a1c9d1248ca9fb69bf199e60da19e2b1b77c690 Mon Sep 17 00:00:00 2001 From: Leah Wasser Date: Sat, 7 Sep 2024 20:49:02 -0600 Subject: [PATCH 1/5] fix(css): wonky responsive blockquotes and cleanup --- _includes/pyos-blockquote.html | 1 + _sass/minimal-mistakes/_base.scss | 59 ++++++++------ _sass/minimal-mistakes/_notices.scss | 74 ++++++++++++++++- _sass/minimal-mistakes/_page.scss | 70 ++++++++++++++++ _sass/minimal-mistakes/_pyos-main.scss | 106 ------------------------- 5 files changed, 175 insertions(+), 135 deletions(-) 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/_sass/minimal-mistakes/_base.scss b/_sass/minimal-mistakes/_base.scss index d6478442..63a35758 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 */ @@ -135,10 +136,10 @@ blockquote { 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; @@ -147,43 +148,51 @@ blockquote.highlight-quote { text-align: right; } + %quote-style { + font-weight: bold; + font-size: 100px; + color: $pyos-teal; + line-height: 0; + } + & > 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; position: relative; margin-bottom: 10px; - &:before, - &:after { - font-weight: bold; - font-size: 100px; - color: $pyos-teal; - line-height: 0; - } - &: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 class + &.purple { + & > div.end:after, + p:before, + p:after { color: $pyos-mediumpurple; } } diff --git a/_sass/minimal-mistakes/_notices.scss b/_sass/minimal-mistakes/_notices.scss index e30c2e3d..da24ac07 100644 --- a/_sass/minimal-mistakes/_notices.scss +++ b/_sass/minimal-mistakes/_notices.scss @@ -108,14 +108,12 @@ @include notice($danger-color); } - .notice-highlight { background-color: $background-block; padding: 1em; h2 { margin-top: 1em; - } } @@ -123,12 +121,19 @@ .notice blockquote { font-size: 1.5em; - margin: 5em 2em; + 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 +141,64 @@ } } } + +/* Notice elements with figures */ + +.notice figcaption, figcaption { + font-family: $body-font; +} + +.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-size: 1.3em; + } +} + +/* Fix buttons and text in notice boxes */ +.notice figcaption { + font-size: 1.2em; +} + + + +.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; +} + + +/* max 480 px */ +@media screen and (max-width: 480px) { + .notice { + padding: 1.8em; + } + + 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..1e882762 100644 --- a/_sass/minimal-mistakes/_page.scss +++ b/_sass/minimal-mistakes/_page.scss @@ -594,3 +594,73 @@ body { } } } + +/* Media queries */ + +@media screen and (max-width: 768px) { + .page__content, .archive__item { + font-size: 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; + } + + .toc__menu { + font-size: .85em; + + li ul > li a { + padding-left: 1rem; + } + + } + +} diff --git a/_sass/minimal-mistakes/_pyos-main.scss b/_sass/minimal-mistakes/_pyos-main.scss index b6909e3a..9913412f 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) { @@ -249,8 +145,6 @@ h2.clearall { .cards { padding: 10px!important; - - } .contrib_org, .ppl_social { From 561288d5e64640d4ec8bc93b557c39cfe55b183c Mon Sep 17 00:00:00 2001 From: Leah Wasser Date: Sun, 8 Sep 2024 14:13:37 -0600 Subject: [PATCH 2/5] fix(css): more edits to align responsive styles --- _pages/home.md | 2 +- _posts/2019-10-26-pyos-min-mistakes-theme.md | 39 +++++++++++- ...-08-30-pyopensci-monumental-growth-2024.md | 3 +- _sass/minimal-mistakes/_base.scss | 27 ++++++--- _sass/minimal-mistakes/_mixins.scss | 8 +++ _sass/minimal-mistakes/_navigation.scss | 14 +++-- _sass/minimal-mistakes/_notices.scss | 60 ++++++++----------- _sass/minimal-mistakes/_page.scss | 13 +--- _sass/minimal-mistakes/_pyos-grid.scss | 14 +++-- _sass/minimal-mistakes/_pyos-main.scss | 4 -- _sass/minimal-mistakes/_reset.scss | 10 ++-- _sass/minimal-mistakes/_syntax.scss | 1 + _sass/minimal-mistakes/_variables.scss | 12 ++-- 13 files changed, 122 insertions(+), 85 deletions(-) diff --git a/_pages/home.md b/_pages/home.md index 7beba985..6041ff6f 100644 --- a/_pages/home.md +++ b/_pages/home.md @@ -86,7 +86,7 @@ peer-review: {% assign blog_posts = site.posts | where_exp: "item", "item.categories contains 'blog-post'" %} -
+
## Recent blog posts & updates
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 63a35758..4655d8cb 100644 --- a/_sass/minimal-mistakes/_base.scss +++ b/_sass/minimal-mistakes/_base.scss @@ -132,6 +132,13 @@ 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; @@ -142,17 +149,17 @@ blockquote.highlight-quote { max-width: $medium; footer { - text-align: left; font-style: italic; font-weight: 500; text-align: right; } - %quote-style { - font-weight: bold; - font-size: 100px; - color: $pyos-teal; - line-height: 0; + &:after{ + @extend %quote-style; + position: absolute; + content: close-quote; + right: 4rem; + margin-top:2rem; } & > div.end { position: relative; @@ -179,7 +186,7 @@ blockquote.highlight-quote { top: -20px; } } - // Success class (magenta) + &.magenta { & > div.end:after, p:before, @@ -188,7 +195,6 @@ blockquote.highlight-quote { } } - // Purple class &.purple { & > div.end:after, p:before, @@ -196,6 +202,11 @@ blockquote.highlight-quote { 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 da24ac07..a4a827d7 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 */ @@ -143,59 +146,48 @@ } /* Notice elements with figures */ - -.notice figcaption, figcaption { - font-family: $body-font; -} - .notice { - border-radius: 15px!important; - box-shadow: 0 1px 1px rgba(189,193,196,0.25)!important; + 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; + font-size: 1.1em !important; } h2, h3 { - margin-top:0!important; + margin-top: 0 !important; } figcaption { - font-size: 1.3em; + font-family: $body-font; + font-size: 1.2em; // This will override the previous 1.3em } -} -/* Fix buttons and text in notice boxes */ -.notice figcaption { - font-size: 1.2em; -} - - - -.notice--info .btn.btn--info { - color:#fff; -} + &--info { + .btn.btn--info { + color: #fff; + } -.notice--info .archive__item-excerpt { - font-size: .95em; -} + .archive__item-excerpt { + font-size: 0.95em; + } -.notice--info h2 { - font-size: 1.5em; -} + 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; + h3 a, + h2 a:visited { + font-size: 1.5em; + text-decoration: none; + } + } } - - /* max 480 px */ @media screen and (max-width: 480px) { .notice { - padding: 1.8em; + padding: .5em; } blockquote.highlight-quote>div.end:after { diff --git a/_sass/minimal-mistakes/_page.scss b/_sass/minimal-mistakes/_page.scss index 1e882762..24a9f1ca 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; } @@ -653,14 +654,4 @@ body { body{ font-size: 1.4em; } - - .toc__menu { - font-size: .85em; - - li ul > li a { - padding-left: 1rem; - } - - } - } diff --git a/_sass/minimal-mistakes/_pyos-grid.scss b/_sass/minimal-mistakes/_pyos-grid.scss index 35d1278e..1c4d384a 100644 --- a/_sass/minimal-mistakes/_pyos-grid.scss +++ b/_sass/minimal-mistakes/_pyos-grid.scss @@ -138,15 +138,20 @@ $colors: ( .cards { top: 0px; position: relative; - // max-width: 362px; background-color: #fcfbf5;; border-radius: 4px; text-decoration: none; z-index: 0; overflow: hidden; - border: 1px solid #f2f8f9; + border: 1px solid #ccc; font-size: .8em; + @include breakpoint-max-width(480px) { + .cards { + padding: 2em; + } + } + &__image { max-height: calc($small/3); overflow: hidden; @@ -308,8 +313,8 @@ $colors: ( } - /* Adjust font size on cards */ - .narrow { +/* Adjust font size on cards */ +.narrow { font-size: .8em!important; } @@ -332,6 +337,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 9913412f..692f7f53 100644 --- a/_sass/minimal-mistakes/_pyos-main.scss +++ b/_sass/minimal-mistakes/_pyos-main.scss @@ -143,10 +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..d0f31ae3 100644 --- a/_sass/minimal-mistakes/_reset.scss +++ b/_sass/minimal-mistakes/_reset.scss @@ -1,5 +1,5 @@ /* ========================================================================== - STYLE RESETS + Media queries for responsive desitn ========================================================================== */ * { 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.0625rem; // 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; From 6f844c3c0d830fef4979552cafb1a702b0720d83 Mon Sep 17 00:00:00 2001 From: Leah Wasser Date: Sun, 8 Sep 2024 18:17:18 -0600 Subject: [PATCH 3/5] fix(css): home grid alignment fixes --- _includes/feature_row_pyos | 21 +-- _pages/home.md | 8 +- _sass/minimal-mistakes/_pyos-grid.scss | 239 ++++++++++++++++--------- 3 files changed, 172 insertions(+), 96 deletions(-) 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/_pages/home.md b/_pages/home.md index 6041ff6f..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 --- @@ -89,11 +89,11 @@ peer-review:
## Recent blog posts & updates -
+
{% for post in blog_posts limit:3 %}
-

{{ post.title }}

+

{{ post.title }}

{{ post.excerpt | markdownify }}

diff --git a/_sass/minimal-mistakes/_pyos-grid.scss b/_sass/minimal-mistakes/_pyos-grid.scss index 1c4d384a..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,113 +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; - 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 #ccc; - font-size: .8em; + border-radius: 10px; + } - @include breakpoint-max-width(480px) { - .cards { - padding: 2em; - } - } + &: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; + } - &__image { - max-height: calc($small/3); - overflow: hidden; - border-radius: 10px; + &: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 { From 208299e6f1fbe3b12c82658af864a121d7ae2966 Mon Sep 17 00:00:00 2001 From: Leah Wasser Date: Sun, 8 Sep 2024 18:25:08 -0600 Subject: [PATCH 4/5] Update _sass/minimal-mistakes/_reset.scss --- _sass/minimal-mistakes/_reset.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_sass/minimal-mistakes/_reset.scss b/_sass/minimal-mistakes/_reset.scss index d0f31ae3..4072839d 100644 --- a/_sass/minimal-mistakes/_reset.scss +++ b/_sass/minimal-mistakes/_reset.scss @@ -1,5 +1,5 @@ /* ========================================================================== - Media queries for responsive desitn + Media queries for responsive queries ========================================================================== */ * { box-sizing: border-box; } From 3394e10772e57d5cacf6019a9999384c599afc6c Mon Sep 17 00:00:00 2001 From: Leah Wasser Date: Mon, 9 Sep 2024 09:14:44 -0600 Subject: [PATCH 5/5] fix(css): a few last style tweaks --- _sass/minimal-mistakes/_base.scss | 4 ++-- _sass/minimal-mistakes/_notices.scss | 4 ++-- _sass/minimal-mistakes/_page.scss | 2 +- _sass/minimal-mistakes/_reset.scss | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/_sass/minimal-mistakes/_base.scss b/_sass/minimal-mistakes/_base.scss index 4655d8cb..13a55eb0 100644 --- a/_sass/minimal-mistakes/_base.scss +++ b/_sass/minimal-mistakes/_base.scss @@ -174,9 +174,9 @@ blockquote.highlight-quote { } p { - font-size: 21px; + font-size: 1.3rem; position: relative; - margin-bottom: 10px; + margin-bottom: 0.63rem; &:before { @extend %quote-style; diff --git a/_sass/minimal-mistakes/_notices.scss b/_sass/minimal-mistakes/_notices.scss index a4a827d7..ab816fd7 100644 --- a/_sass/minimal-mistakes/_notices.scss +++ b/_sass/minimal-mistakes/_notices.scss @@ -123,7 +123,7 @@ /* Quotes in notice blocks */ .notice blockquote { - font-size: 1.5em; + font-size: 1.5rem; margin: 7em 2em; max-width: 100%; @@ -152,7 +152,7 @@ padding: 3em; p, li { - font-size: 1.1em !important; + font-size: 1.1em!important; } h2, h3 { diff --git a/_sass/minimal-mistakes/_page.scss b/_sass/minimal-mistakes/_page.scss index 24a9f1ca..3337108f 100644 --- a/_sass/minimal-mistakes/_page.scss +++ b/_sass/minimal-mistakes/_page.scss @@ -600,7 +600,7 @@ body { @media screen and (max-width: 768px) { .page__content, .archive__item { - font-size: 1em + font-size: 1.1em } .element-item { diff --git a/_sass/minimal-mistakes/_reset.scss b/_sass/minimal-mistakes/_reset.scss index d0f31ae3..a4075f0a 100644 --- a/_sass/minimal-mistakes/_reset.scss +++ b/_sass/minimal-mistakes/_reset.scss @@ -11,7 +11,7 @@ html { font-size: 1rem; @include breakpoint($medium) { - font-size: 1.0625rem; // 17px / 16px = 1.0625rem + font-size: 1.2625rem; // 17px / 16px = 1.0625rem } @include breakpoint($large) {