Fix: style cleanup

Author: lwasser

_includes/package-grid.html

@@ -28,8 +28,8 @@ <h3 class="card__title no_toc" itemprop="name">
             {% endif %}
             </span>
         </p>
-        <span class="narrow">
-            <p class="archive__item-excerpt narrow" itemprop="description">
+        <span class="package_description">
+            <p itemprop="description">
                 {{ apackage.package_description | markdownify }}
             </p>
         </span>

_pages/home.md

@@ -103,7 +103,7 @@ peer-review:
 <!-- pull blog posts not events -->
 {% assign blog_posts = site.posts |  where_exp: "item", "item.categories contains 'blog-post'" %}
 
-<div class="notice notice-highlight" markdown="1">
+<div class="notice" markdown="1">
 
 ## Recent blog posts & updates
 
@@ -135,7 +135,7 @@ peer-review:
 {% assign packages_sorted = site.data.packages | sort_natural: 'date_accepted' | reverse %}
 
 <div class="grid">
-  {% for apackage in packages_sorted limit:4 %}
+  {% for apackage in packages_sorted limit:3 %}
     {% include package-grid.html %}
   {% endfor %}
 </div>

_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}
 
 <div class="notice" markdown="1">
@@ -350,6 +351,25 @@ Which will render like this
 </div>
 
 
+<div class="notice--info" markdown="1">
+#### Notice Headline
+{: .no_toc }
+
+here is some html text.
+
+Testing a div with a h4 header
+
+````html
+<div class="notice--info" markdown="1">
+#### Notice Headline
+{: .no_toc }
+
+This is how you generate a div using markdown
+
+</div>
+````
+</div>
+
 
 
 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.

_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;
 

_sass/minimal-mistakes/_notices.scss

@@ -10,19 +10,67 @@
  *  </div>
  */
 
+
+
+/* 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) {