Skip to content

Commit 7e4387c

Browse files
lwasserlwasser
committed
Add webp to feature items
1 parent 8987363 commit 7e4387c

18 files changed

+143
-64
lines changed

‎_includes/feature_row_pyos

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,16 @@
1111
<div class="cards highlight">
1212
{% if f.image_path %}
1313
<div class="cards-image">
14-
<img src="{{ f.image_path | relative_url }}"
15-
alt="{% if f.alt %}{{ f.alt }}{% endif %}">
16-
{% if f.image_caption %}
17-
<span class="archive__item-caption">{{ f.image_caption | markdownify | remove: "<p>" | remove: "</p>" }}</span>
18-
{% endif %}
14+
<picture>
15+
<source srcset="{{ f.image_path | replace: '.png', '.webp' | relative_url }}" type="image/webp">
16+
<img src="{{ f.image_path | relative_url }}"
17+
alt="{% if f.alt %}{{ f.alt }}{% endif %}">
18+
{% if f.image_caption %}
19+
<figcaption>
20+
<span class="archive__item-caption">{{ f.image_caption | markdownify | remove: "<p>" | remove: "</p>" }}</span>
21+
</figcaption>
22+
{% endif %}
23+
</picture>
1924
</div>
2025
{% endif %}
2126
<div class="card-body">

‎_pages/home.md

Lines changed: 29 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -17,36 +17,40 @@ header:
1717
mission:
1818
- excerpt: "pyOpenSci broadens participation in scientific open source by breaking down social and technical barriers. Join our global community."
1919
peer-review:
20-
- image_path: images/software-peer-review.png
20+
- image_path: images/homepage-graphics/software-peer-review.png
2121
alt: "Light purple image that says software Peer Review. On the image is a woman at a laptop with a pyOpenSci logo on it and a cup of coffee next to her. There is a very light flower in the bottom right hand corner. "
22-
title: "Python Software Peer Review"
23-
excerpt: "We offer peer review of Python software to increase the quality, usability and long term maintenance of the open source tools that drive open science. [JOSS accepts our review as theirs](https://www.pyopensci.org/software-peer-review/partners/joss.html) so you can get the benefits of pyOpenSci and JOSS through one review."
24-
url: https://www.pyopensci.org/software-peer-review/about/benefits.html
25-
btn_label: "> Learn more about the benefits of peer review."
26-
btn_class: btn--inverse
27-
- image_path: images/community-partnerships.png
22+
title: "We Run Software Peer Review"
23+
excerpt: "We review Python packages and software with the goal of helping scientists build better, discoverable and usable software. <br><br>
24+
25+
Your package can also be published in JOSS through our review process. <br>
26+
27+
<i class='fa-solid fa-check-double'></i> Submit a package today for review today. <br>
28+
<i class='fa-solid fa-check-double'></i> Apply to become a reviewer. <br>
29+
"
30+
- image_path: images/homepage-graphics/community-partnerships.png
2831
alt: "Light purple image with a bunch from different backgrounds of stick figure people in a slightly darker color. The text on the image at the top says Community Partnerships"
29-
title: "Community Partnerships"
30-
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."
31-
url: https://www.pyopensci.org/partners.html
32-
btn_label: "> Learn About Community Partners"
33-
btn_class: btn--inverse
32+
title: "We Build Community Partnerships"
33+
excerpt: "
34+
We [partner with open source communities](https://www.pyopensci.org/partners.html) to share resources and processes such as Peer review. <br><br>
35+
36+
Learn more about our partnerships with: <br>
37+
38+
<i class='fa-solid fa-handshake'></i> [JOSS](https://www.pyopensci.org/software-peer-review/partners/joss.html) <br>
39+
<i class='fa-solid fa-handshake'></i> [Astropy](https://www.pyopensci.org/software-peer-review/partners/astropy.html) <br>
40+
"
3441
- image_path: images/homepage-graphics/simple-python-packaging-header.png
3542
title: "We Break Down Python Packaging Painpoints"
3643
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.
3744
excerpt: "
3845
39-
Check out our beginner-friendly:
46+
Check out our beginner-friendly: <br>
4047
41-
[Python Package Tutorials](https://www.pyopensci.org/python-package-guide/tutorials/intro.html)<br>
48+
<i class='fa-solid fa-book-open'></i> [Python Package Tutorials](https://www.pyopensci.org/python-package-guide/tutorials/intro.html) <br>
4249
43-
[Python packaging ecosystem overview](https://www.pyopensci.org/python-package-guide) <br><br>
50+
<i class='fa-solid fa-book-open'></i> [Python package guide](https://www.pyopensci.org/python-package-guide) <br><br>
4451
4552
All of our resources are co-developed with the broader Python community and reviewed by beginner to expert Pythonistas to ensure the material is accessible for all.
4653
"
47-
# url: https://www.pyopensci.org/python-package-guide/
48-
# btn_label: "> Read our packaging guide"
49-
# btn_class: btn--inverse
5054
---
5155

5256
{% include feature_row id="mission" type="center" %}
@@ -55,7 +59,7 @@ peer-review:
5559

5660
{% include feature_row_pyos id="peer-review"%}
5761

58-
## Building Diverse Community Around Python Scientific Software
62+
## Broadening participation in scientific open source
5963

6064
<div class="feature__wrapper" markdown="1">
6165
<div class="feature__item--left">
@@ -64,10 +68,14 @@ peer-review:
6468
<img src="/images/people/pyopensci-sprint-pycon-2023.png" alt="Image showing 3 people working at 2 computers during a spring at pyCon USA 2023.">
6569
</div>
6670
<div class="archive__item-body">
67-
<h2 class="archive__item-title">Peer review mentorship program</h2>
71+
<h3 class="archive__item-title">You don't need to be an expert to get involved </h3>
6872
<div class="archive__item-excerpt">
6973
<p>
70-
We are building diverse community around the scientific packages that drive open science. We recruit and support editors and reviewers from different backgrounds and gender-identities in each review that we perform.
74+
Are you new to software peer review but you want to get involved? We've got you!
75+
76+
We offer support and mentorship to new reviewers completing their first review.
77+
78+
All reviewers don't need to be python package experts. We welcome reviewers that focus on software accessibility and usability.
7179
</p>
7280
<p>
7381
Are you new to peer review?

‎_sass/minimal-mistakes/_buttons.scss

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
display: inline-block;
1212
margin-bottom: 0.25em;
1313
padding: 0.5em 1em;
14-
font-family: $sans-serif;
14+
font-family: $header-font; // poppins for buttons and headers
1515
font-size: $type-size-5;
1616
font-weight: 500;
1717
text-align: center;
@@ -95,3 +95,15 @@
9595
font-size: $type-size-7;
9696
}
9797
}
98+
99+
100+
/* max 480 px */
101+
@media screen and (max-width: 480px) {
102+
// large buttons are disproportionately large
103+
a.btn.btn--large {
104+
line-height: 1.1;
105+
padding: .5rem;
106+
width: 90%;
107+
font-size: 1.5rem!important;
108+
}
109+
}

‎_sass/minimal-mistakes/_notices.scss

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,11 @@
187187
/* max 480 px */
188188
@media screen and (max-width: 480px) {
189189
.notice {
190-
padding: .5em;
190+
padding: .2em;
191+
192+
h2 {
193+
padding: .1em .2em
194+
}
191195
}
192196

193197
blockquote.highlight-quote>div.end:after {

‎_sass/minimal-mistakes/_page.scss

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@
8888

8989
}
9090
.page__lead {
91-
font-family: $global-font-family;
91+
font-family: $header-font; //poppins
9292
font-size: $type-size-5;
9393
font-weight: $weight-3;
9494
}
@@ -607,6 +607,11 @@
607607
}
608608
}
609609

610+
.layout--splash .page__content h2 {
611+
width: 100%;
612+
max-width: 100%;
613+
}
614+
610615
/* Media queries */
611616

612617
@media screen and (max-width: 768px) {
@@ -645,10 +650,7 @@
645650
.feature__item {
646651
width: 95%!important;
647652
}
648-
.cards {
649-
margin-right: auto!important;
650-
margin-left: auto!important;
651-
}
653+
652654

653655
.wide__p_text {
654656
max-width: 90%!important;
@@ -662,7 +664,10 @@
662664

663665
/* max 480 px */
664666
@media screen and (max-width: 480px) {
665-
body{
667+
body {
666668
font-size: 1.4em;
667669
}
670+
#main {
671+
padding: 0 .6rem;
672+
}
668673
}

‎_sass/minimal-mistakes/_pyos-cards.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
.cards-image figure {
2+
margin: 0;
3+
}
4+
5+
16
.tutorial {
27
font-size: 1em;
38

‎_sass/minimal-mistakes/_pyos-dropdown.scss

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -37,10 +37,10 @@
3737
@media (max-width: $medium-wide) {
3838
gap: 0.5em;
3939
}
40+
}
4041

41-
/* Upon click the menu should turn into a vertical stacked menu with a soft
42-
drop shadow */
43-
&.vertical {
42+
/* NAVIGATION MOBILE vertical stacked menu with a soft drop shadow */
43+
.nav__links.vertical {
4444
position: absolute;
4545
display: flex;
4646
flex-direction: column;
@@ -81,6 +81,7 @@
8181
text-align: left;
8282
display: block;
8383
padding: 1em 0;
84+
8485
}
8586

8687
.dropdown-content {
@@ -91,7 +92,6 @@
9192
}
9293
}
9394
}
94-
}
9595

9696
/* down arrow works better with ascii vs font awesome */
9797
.downBtn {
@@ -115,7 +115,7 @@
115115
color: $nav-font-color;
116116
height: 100%;
117117
background-color: inherit;
118-
font-family: inherit;
118+
font-family: $header-font; //poppins ;
119119
margin: 0;
120120
line-height: 1em;
121121
}

‎_sass/minimal-mistakes/_pyos-grid.scss

Lines changed: 63 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -139,20 +139,17 @@ $colors: (
139139
// Cards are also used to style the isotope layout
140140
// do not adjust the display or structure of the cards element.
141141
/* Package cards splash */
142+
142143
.cards {
143144
top: 0px;
144145
position: relative;
145146
background-color: #fcfbf5;
146-
border-radius: 4px;
147147
text-decoration: none;
148148
z-index: 0;
149149
overflow: hidden;
150-
border: 1px solid #ccc;
151150
font-size: .8em;
152-
153-
@include breakpoint-max-width(480px) {
154-
padding: 2em;
155-
}
151+
margin-right: auto!important;
152+
margin-left: auto!important;
156153

157154
&__image {
158155
max-height: calc($small / 3);
@@ -369,7 +366,7 @@ $colors: (
369366
min-height: 6rem;
370367
display: flex;
371368
align-items: center; /* Vertically center the title */
372-
padding: 0 15px;
369+
padding: 0 1rem;
373370
}
374371

375372
.card-excerpt{
@@ -424,3 +421,62 @@ $colors: (
424421
grid-auto-flow: unset;
425422
}
426423
}
424+
425+
426+
427+
428+
/* max 480 px */
429+
@media screen and (max-width: 480px) {
430+
// large buttons are disproportionately large
431+
// Elements outside of notice blocks such as the blog page
432+
.blog__grid {
433+
h3.card__title-container {
434+
padding: 0;
435+
}
436+
.card-excerpt p {
437+
line-height: 1.8rem;
438+
}
439+
.card__bkg .card__title-container {
440+
padding: 0;
441+
}
442+
443+
h3.card-title {
444+
font-size: 1rem;
445+
}
446+
.card-bkg {
447+
padding:0;
448+
margin:0;
449+
}
450+
}
451+
452+
// the home page has this grid in a notice block
453+
.notice {
454+
.card-body p, .card-body h2 {
455+
line-height: 1.1;
456+
padding: 0rem 1rem;
457+
font-size: .9rem;
458+
}
459+
460+
.blog__grid {
461+
font-size: 1.3em;
462+
grid-template-columns: repeat(auto-fill, minmax(95%, 1fr))!important;
463+
grid-auto-rows: 0fr!important;
464+
grid-column-gap: 7px;
465+
grid-row-gap: 1rem!important;
466+
margin-bottom: 5rem;
467+
padding: 0;
468+
469+
.card-body {
470+
font-size: .95rem;
471+
}
472+
.cards {
473+
margin: 0 0! important;
474+
}
475+
476+
& a {
477+
font-size: 1.3em;
478+
}
479+
}
480+
481+
}
482+
}

‎_sass/minimal-mistakes/_pyos-main.scss

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -110,26 +110,10 @@ h2.clearall {
110110
.back-to-top {
111111
font-size: 1.2em!important;
112112
}
113-
.blog__grid {
114-
font-size: 1.3em;
115-
grid-template-columns: repeat(auto-fill, minmax(320px, 0fr))!important;
116-
grid-auto-rows: 0fr!important;
117-
grid-column-gap: 7px;
118-
grid-row-gap: 0px!important;
119-
margin-bottom: 20px;
120-
121-
& a {
122-
font-size: 1.3em;
123-
124-
}
125-
}
126113

127114
.card-body {
128115
padding: 0!important;
129116
}
130-
.card-title {
131-
margin-top: 1em!important;
132-
}
133117

134118
.grid {
135119
font-size: 1.2em;
@@ -169,7 +153,7 @@ h2.clearall {
169153

170154
& .archive__item-excerpt {
171155
padding:0;
172-
font-size: .8em;
156+
font-size: .7rem;
173157

174158
}
175159
}

‎_sass/minimal-mistakes/_variables.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ $indent-var: 2em !default;
2626
/* system typefaces */
2727
$serif: Georgia, Times, serif !default;
2828
$sans-serif:
29-
"Poppins",
29+
"Nunito Sans",
3030
-apple-system,
3131
BlinkMacSystemFont,
3232
"Helvetica Neue",

0 commit comments

Comments
 (0)