+
## Recent blog posts & updates
@@ -135,7 +135,7 @@ peer-review:
{% assign packages_sorted = site.data.packages | sort_natural: 'date_accepted' | reverse %}
- {% for apackage in packages_sorted limit:4 %}
+ {% for apackage in packages_sorted limit:3 %}
{% include package-grid.html %}
{% endfor %}
diff --git a/_posts/2019-10-26-pyos-min-mistakes-theme.md b/_posts/2019-10-26-pyos-min-mistakes-theme.md
index 236c318a..3755c353 100644
--- a/_posts/2019-10-26-pyos-min-mistakes-theme.md
+++ b/_posts/2019-10-26-pyos-min-mistakes-theme.md
@@ -11,6 +11,7 @@ toc: true
categories:
- docs
- blog-post
+classes: wide
---
@@ -300,22 +301,22 @@ Call attention to a block of text.
| Success | `.notice--success` |
| Danger | `.notice--danger` |
-**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice}` class. The purpose of this test paragraph is to check how different styles are applied across various sections of text. You can [highlight](#) certain words or phrases, adjust the [font size](#), or change the [text color](#) to see how the styling adapts. Additionally, experimenting with [different classes](#) and observing the effects on alignment, spacing, and other typographic elements will help ensure that your CSS is applied consistently and effectively across your site.
+**Technical and social skills go hand in hand.** Open source communities are most productive when contributors and maintainers recognize this balance between the technical and social skills associated with contributing. In most cases, all of the people involved in the project are volunteers with varying priorities, skillsets, and motivations to participate.
{: .notice}
-**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice--primary}` class.
+**Watch out!** This paragraph of text has been emphasized with the `{: .notice--primary}` class.
{: .notice--primary}
-**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice--info}` class.
+**Watch out!** This paragraph of text has been emphasized with the `{: .notice--info}` class.
{: .notice--info}
-**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice--warning}` class.
+**Watch out!** This paragraph of text has been emphasized with the `{: .notice--warning}` class.
{: .notice--warning}
-**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice--success}` class.
+**Watch out!** This paragraph of text has been emphasized with the `{: .notice--success}` class.
{: .notice--success}
-**Watch out!** This paragraph of text has been [emphasized](#) with the `{: .notice--danger}` class.
+**Watch out!** This paragraph of text has been emphasized with the `{: .notice--danger}` class.
{: .notice--danger}
@@ -350,6 +351,25 @@ Which will render like this
+
+#### Notice Headline
+{: .no_toc }
+
+here is some html text.
+
+Testing a div with a h4 header
+
+````html
+
+#### Notice Headline
+{: .no_toc }
+
+This is how you generate a div using markdown
+
+
+````
+
+
Using the Kramdown Markdown renderer with Jekyll allows you to add [block](http://kramdown.gettalong.org/quickref.html#block-attributes) and [inline attributes](http://kramdown.gettalong.org/quickref.html#inline-attributes). This is nice if you want to add custom styling to text and image, and still write in Markdown.
diff --git a/_sass/minimal-mistakes/_base.scss b/_sass/minimal-mistakes/_base.scss
index 8d27faf0..eb17137c 100644
--- a/_sass/minimal-mistakes/_base.scss
+++ b/_sass/minimal-mistakes/_base.scss
@@ -150,9 +150,10 @@
%quote-style {
font-weight: bold;
- font-size: 100px;
+ //font-size: $type-size-2;
color: $pyos-teal;
line-height: 0;
+ font-size: 5rem;
}
/* Block quote with bigger quotes*/
@@ -190,7 +191,8 @@
}
p {
- font-size: 1.3rem;
+ font-size: $type-size-3;
+ line-height: 2.8rem;
position: relative;
margin-bottom: 0.63rem;
diff --git a/_sass/minimal-mistakes/_notices.scss b/_sass/minimal-mistakes/_notices.scss
index 0af5b858..ee042472 100644
--- a/_sass/minimal-mistakes/_notices.scss
+++ b/_sass/minimal-mistakes/_notices.scss
@@ -10,19 +10,67 @@
*
*/
+
+
+/* Notice elements with figures */
+.notice {
+
+
+
+ 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;
+ }
+ }
+}
+
+
@mixin notice($notice-color) {
- margin: 2em 0 !important; /* override*/
- padding: 1em;
+ margin: 2rem 0 !important; /* override*/
+ padding: 3rem;
color: $text-color;
font-family: $global-font-family;
- font-size: $type-size-6 !important;
+ font-size: $type-size-4 !important;
+ font-weight: 300!important;
text-indent: initial; /* override*/
background-color: mix($background-color, $notice-color, $notice-background-mix);
border-radius: $border-radius;
- box-shadow: 0 1px 1px rgba($notice-color, 0.25);
+ box-shadow: 0 1px 1px rgba(darken($notice-color, 20%), 0.25);
+ line-height: 1.7rem!important;
+
+ // We might want a header like element in a notice but not an actual h4 etc
+ // this style mimicks a header within a notice block.
+ .header {
+ font-size: 1.5rem!important;
+ font-weight: 700;
+ margin-bottom: 1rem;
+ }
h4 {
- margin-top: 0 !important; /* override*/
+ margin-top: 0 !important;
margin-bottom: 0.75em;
line-height: inherit;
}
@@ -33,7 +81,14 @@
font-size: 1.6em;
}
+ p, li {
+ font-size: $type-size-6!important;
+ font-weight: 300;
+ }
+
p {
+ line-height: 1.6rem;
+
&:last-child {
margin-bottom: 0 !important; /* override*/
}
@@ -81,11 +136,6 @@
@include notice($light-gray);
}
-.notice .header {
- font-size: 1.5rem!important;
- font-weight: 700;
- margin-bottom: 1rem;
-}
/* Primary notice */
@@ -117,15 +167,6 @@
@include notice($danger-color);
}
-.notice-highlight {
- background-color: $background-block;
- padding: 1em;
-
- h2 {
- margin-top: 1em;
- }
-}
-
/* Quotes in notice blocks */
.notice blockquote {
@@ -134,12 +175,13 @@
max-width: 100%;
&.highlight-quote {
- margin: 7em .5em;
+ margin: 3rem .5em;
padding: 0;
max-width: $medium;
p {
margin-bottom: 1rem;
+ font-size: 1.5rem!important;
}
&::after {
margin: 2rem;
@@ -151,50 +193,6 @@
}
}
-/* Notice elements with figures */
-.notice {
- border-radius: 15px !important;
- box-shadow: 0 1px 1px rgba(189, 193, 196, 0.25) !important;
- padding: 3rem;
-
- font-size: 1.7rem !important;
- font-weight: 700;
- margin-bottom: 1rem;
-
- p, li {
- font-size: 1.1rem!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) {
diff --git a/_sass/minimal-mistakes/_pyos-grid.scss b/_sass/minimal-mistakes/_pyos-grid.scss
index 068a4c48..ce5217b7 100644
--- a/_sass/minimal-mistakes/_pyos-grid.scss
+++ b/_sass/minimal-mistakes/_pyos-grid.scss
@@ -21,12 +21,9 @@ $colors: (
}
}
-
-
// Include the mixin
//@include generate-color-styles($colors);
-
.clearfix::after {
content: "";
display: table;
@@ -143,11 +140,12 @@ $colors: (
.cards {
top: 0px;
position: relative;
- background-color: #fcfbf5;
+ background-color: #fff;//#fcfbf5;
text-decoration: none;
z-index: 0;
overflow: hidden;
font-size: .8em;
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
margin-right: auto!important;
margin-left: auto!important;
@@ -159,7 +157,8 @@ $colors: (
&:hover {
transition: all 0.2s ease-out;
- box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.2);
+ transform: translateY(-3px);
+ box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);
top: -4px;
border: 1px solid #cccccc;
background-color: white;
@@ -197,7 +196,8 @@ $colors: (
}
.page__meta.contributors {
- font-size: .9em;
+ font-size: .95rem;
+ line-height: 1.3rem;
}
.contributors a {
@@ -205,16 +205,19 @@ $colors: (
}
ul {
- font-size: .8em;
list-style-type: none;
margin-left: 0;
padding: .2em;
- }
- ul a {
- text-decoration: none;
- font-size: 1.2em
+ li {
+ font-size: 1rem;
+ a {
+ text-decoration: none;
+ //font-size: 1.2em
+ }
+ }
}
+
}
.grid h3.card-title a {
@@ -379,14 +382,42 @@ $colors: (
}
}
- .grid__wrapper {
- display: flex;
+.grid__wrapper {
+ display: flex;
+}
+
+.cards {
+ h2 a {
+ text-decoration: none;
+ font-size: 1.2em;
}
+ // Card listing fonts
+ h4.person_name {
+ margin-top: 0.6em;
+ margin-bottom: 0;
+ font-size: 1.4rem;
- .cards h2 a {
- text-decoration: none;
- font-size: 1.2em;
+ a {
+ text-decoration: none;
+ }
+ }
+
+ .contrib_org,.ppl_social {
+ font-size: 1rem;
+ font-weight:normal;
+ margin-bottom: 0!important;
+ }
+ .package_description {
+ font-size: .95rem;
+ line-height: 1.5rem;
}
+}
+
+// Adjust cards within a notice block
+.notice .cards p {
+ font-size: 1rem !important;
+ line-height: 1.3rem;
+}
/* author list */
diff --git a/_sass/minimal-mistakes/_pyos-isotope.scss b/_sass/minimal-mistakes/_pyos-isotope.scss
index b06032b7..a9d53826 100644
--- a/_sass/minimal-mistakes/_pyos-isotope.scss
+++ b/_sass/minimal-mistakes/_pyos-isotope.scss
@@ -114,8 +114,7 @@ input[type="text"] {
.element-item {
position: relative;
float: left;
- //height: 400px;
- width: calc(23% - 13.3px);
+ width: calc(31% - 13.3px);
margin: 5px;
padding: 10px;
}
diff --git a/_sass/minimal-mistakes/_pyos-main.scss b/_sass/minimal-mistakes/_pyos-main.scss
index a9221597..cc2f2025 100644
--- a/_sass/minimal-mistakes/_pyos-main.scss
+++ b/_sass/minimal-mistakes/_pyos-main.scss
@@ -33,14 +33,6 @@ img {
text-align: center;
}
-h4.person_name {
- margin-top: 0.6em;
- margin-bottom: 0;
- font-size: 1.3em;
- a {
- text-decoration: none;
- }
-}
.person_img {
-webkit-filter: drop-shadow(3px 3px 3px #999);
@@ -55,10 +47,7 @@ div > div {
padding: 10px;
}
-.contrib_org {font-weight:normal;
- font-size:70%!important;
- margin-bottom: 0!important;
-}
+
/* Fix people page - allow for tall images */
@@ -123,9 +112,9 @@ h2.clearall {
}
}
- .grid-isotope {
- font-size: 1.3em;
- }
+ // .grid-isotope {
+ // font-size: 1.3em;
+ // }
.contrib_org, .ppl_social {
font-size: .9em !important;
diff --git a/_sass/minimal-mistakes/_tables.scss b/_sass/minimal-mistakes/_tables.scss
index 025a9768..b7311c2d 100644
--- a/_sass/minimal-mistakes/_tables.scss
+++ b/_sass/minimal-mistakes/_tables.scss
@@ -7,7 +7,7 @@ table {
margin-bottom: 1em;
width: 100%;
font-family: $global-font-family;
- font-size: $type-size-6;
+ font-size: $type-size-5;
border-collapse: collapse;
overflow-x: auto;
diff --git a/_sass/minimal-mistakes/_variables.scss b/_sass/minimal-mistakes/_variables.scss
index 8b919bed..80c0a821 100644
--- a/_sass/minimal-mistakes/_variables.scss
+++ b/_sass/minimal-mistakes/_variables.scss
@@ -54,22 +54,22 @@ $header-font: "Poppins", san-serif !default;
$body-font: "Nunito Sans", sans-serif !default;
/* type scale */
-$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.95em !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
+$type-size-1: 2.441rem !default; // ~39.056px
+$type-size-2: 1.953rem !default; // ~31.248px
+$type-size-3: 1.563rem !default; // ~25.008px
+$type-size-4: 1.25rem !default; // ~20px
+$type-size-5: 1.1rem !default; // ~13.6px
+$type-size-6: 0.75rem !default; // ~12px main body font
+$type-size-7: 0.64rem !default; // ~10.24px
+$type-size-8: 0.635rem !default; // ~10.16px
/* headline scale */
-$h-size-1: 1.563em !default; // ~25.008px
-$h-size-2: 2.6em !default; // ~20px H2 increased 2.0
-$h-size-3: 2.0em !default; // ~18px
-$h-size-4: 1.5em !default; // ~17px
-$h-size-5: 1.03125em !default; // ~16.5px
-$h-size-6: 1em !default; // ~16px
+$h-size-1: 1.563rem !default; // ~25.008px
+$h-size-2: 2.6rem !default; // ~20px H2 increased 2.0
+$h-size-3: 2.0rem !default; // ~18px
+$h-size-4: 1.5rem !default; // ~17px
+$h-size-5: 1.43125rem !default; // ~16.5px
+$h-size-6: 1.2rem !default; // ~16px
/* kbd colors */
$kbd-color-background: #bbbdc3;
@@ -204,7 +204,7 @@ $right-sidebar-width-wide: 400px !default;
Other
========================================================================== */
-$border-radius: 4px !default;
+$border-radius: 15px !default;
$box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125) !default;
$nav-height: 2em !default;
$nav-toggle-height: 2rem !default;
diff --git a/assets/js/dropdown.js b/assets/js/dropdown.js
index 1526a53f..69d9dfd8 100644
--- a/assets/js/dropdown.js
+++ b/assets/js/dropdown.js
@@ -32,62 +32,67 @@ $(document).ready(function() {
- // Isotope filtering
- // This blog has a good example of smart resizing ... https://jewelfarazi.me/create-jquery-isotope-responsive-masonry-layout/
- var qsRegex;
- var buttonFilter;
+// Isotope filtering
+// This blog has a good example of smart resizing ... https://jewelfarazi.me/create-jquery-isotope-responsive-masonry-layout/
+var qsRegex;
+var buttonFilter;
- // Init Isotope
- var $grid = $('.grid-isotope').imagesLoaded(function() {
- $grid.isotope({
- itemSelector: '.element-item',
- layoutMode: 'masonry',
- masonry: {
- columnWidth: 100,
- horizontalOrder: true,
- },
- filter: function() {
- var $this = $(this);
- var searchResult = qsRegex ? $this.text().match(qsRegex) : true;
- var buttonResult = buttonFilter ? $this.is(buttonFilter) : true;
- return searchResult && buttonResult;
- }
- });
- });
+var containerWidth = $('.grid-isotope').width();
+var columns = 3; // Number of columns you want
+var columnWidth = containerWidth / columns;
- // Filter on button click
- $('#filters').on('click', 'button', function() {
- buttonFilter = $(this).attr('data-filter');
- $grid.isotope();
- });
- // Use value of search field to filter
- var $quicksearch = $('#quicksearch').keyup(debounce(function() {
- qsRegex = new RegExp($quicksearch.val(), 'gi');
- $grid.isotope();
- }));
+// Init Isotope
+var $grid = $('.grid-isotope').imagesLoaded(function() {
+ $grid.isotope({
+ itemSelector: '.element-item',
+ layoutMode: 'masonry',
+ masonry: {
+ columnWidth: columnWidth,
+ horizontalOrder: true,
+ },
+ filter: function() {
+ var $this = $(this);
+ var searchResult = qsRegex ? $this.text().match(qsRegex) : true;
+ var buttonResult = buttonFilter ? $this.is(buttonFilter) : true;
+ return searchResult && buttonResult;
+ }
+ });
+});
- // Change is-checked class on buttons
- $('.button-group').each(function(i, buttonGroup) {
- var $buttonGroup = $(buttonGroup);
- $buttonGroup.on('click', 'button', function() {
- $buttonGroup.find('.is-checked').removeClass('is-checked');
- $(this).addClass('is-checked');
- });
- });
+// Filter on button click
+$('#filters').on('click', 'button', function() {
+ buttonFilter = $(this).attr('data-filter');
+ $grid.isotope();
+});
+
+// Use value of search field to filter
+var $quicksearch = $('#quicksearch').keyup(debounce(function() {
+ qsRegex = new RegExp($quicksearch.val(), 'gi');
+ $grid.isotope();
+}));
+
+// Change is-checked class on buttons
+$('.button-group').each(function(i, buttonGroup) {
+ var $buttonGroup = $(buttonGroup);
+ $buttonGroup.on('click', 'button', function() {
+ $buttonGroup.find('.is-checked').removeClass('is-checked');
+ $(this).addClass('is-checked');
+ });
+});
- // Debounce so filtering doesn't happen every millisecond
- function debounce(fn, threshold) {
- var timeout;
- threshold = threshold || 100;
- return function debounced() {
- clearTimeout(timeout);
- var args = arguments;
- var _this = this;
+// Debounce so filtering doesn't happen every millisecond
+function debounce(fn, threshold) {
+ var timeout;
+ threshold = threshold || 100;
+ return function debounced() {
+ clearTimeout(timeout);
+ var args = arguments;
+ var _this = this;
- function delayed() {
- fn.apply(_this, args);
- }
- timeout = setTimeout(delayed, threshold);
- };
- }
+ function delayed() {
+ fn.apply(_this, args);
+ }
+ timeout = setTimeout(delayed, threshold);
+ };
+}