Merge branch 'main' of https://github.com/processing/p5.js-website into exampleFixes

Author: aceslowman

README.md

@@ -4,7 +4,7 @@
 
 ## How To Contribute
 
-Known bugs and intended new features are tracked using [GitHub issues](https://github.com/processing/p5.js-website/issues). If you'd like to start working on an existing issue, comment on the issue that you plan to work on it so other contributors know it's being handled and can offer help. Once you have completed your work on this issue, [submit a pull request (PR)](https://github.com/processing/p5.js/blob/main/contributor_docs/preparing_a_pull_request.md) against the p5.js main branch. In the description field of the PR, include "resolves #XXXX" tagging the issue you are fixing. If the PR addresses the issue but doesn't completely resolve it (ie the issue should remain open after your PR is merged), write "addresses #XXXX".
+Known bugs and intended new features are tracked using [GitHub issues](https://github.com/processing/p5.js-website/issues). If you'd like to start working on an existing issue, comment on the issue that you plan to work on it so other contributors know it's being handled and can offer help. Once you have completed your work on this issue, [submit a pull request (PR)](https://github.com/processing/p5.js/blob/main/contributor_docs/contributor_guidelines.md#pull-requests) against the p5.js main branch. In the description field of the PR, include "resolves #XXXX" tagging the issue you are fixing. If the PR addresses the issue but doesn't completely resolve it (ie the issue should remain open after your PR is merged), write "addresses #XXXX".
 
 If you discover a bug or have an idea for a new feature you'd like to add, begin by submitting an issue. Please do not simply submit a pull request containing the fix or new feature without making an issue first, we will probably not be able to accept it. Once you have gotten some feedback on the issue and a go ahead to address it, you can follow the process above to add the fix or feature.
 

i18n-tracking.yml

@@ -82,12 +82,12 @@
     "lodash": "^4.17.21",
     "mkdirp": "^0.5.5",
     "moment": "^2.29.4",
-    "ms": "^0.7.3",
+    "ms": "^2.0.0",
     "prettier": "^1.19.1",
-    "qs": "^6.10.1",
+    "qs": "^6.10.3",
     "send": "^0.16.2",
     "serve-index": "^1.9.1",
-    "simple-git": "^3.5.0",
+    "simple-git": "^3.16.0",
     "time-grunt": "^1.4.0",
     "uglify-js": "^2.8.29",
     "yaml": "^1.10.2"

package-lock.json

@@ -1416,6 +1416,7 @@ h2.featuring {
 }
 
 #teach-page .heading {
+    width: 100%;
     font: 400 1.4rem "Montserrat", sans-serif;
     color: black;
     line-height: 1.2em;
@@ -1427,6 +1428,84 @@ h2.featuring {
     margin-top: 3em;
 }
 
+/*workshop contents*/
+
+#teach-page section.workshopS{
+    overflow: auto;
+}
+
+#teach-page .workshop-content{
+    padding: 0.6em;
+}
+
+#teach-page ul.workshops{
+    padding-top: .4em;
+    width: 41%;
+    float: left;
+}
+
+#teach-page .btn{
+    margin-bottom: 0.8em;
+    padding-bottom: .4em;
+
+    font: 400 0.9rem "Times", sans-serif;
+    line-height: 1.2em;
+
+    border-bottom: 0.1em dashed #ffe8e8;
+}
+
+#teach-page li.workshop .active,li.workshop p:hover{
+    margin-bottom: 0.8em;
+    padding-bottom: .4em;
+
+    font: 400 0.9rem "Times", sans-serif;
+    line-height: 1.2em;
+    color: #ed225d;
+
+    border-bottom: 0.1em dashed #ffe8e8;
+}
+
+/*workshop banners*/
+
+#teach-page .upcoming-banners{
+    width: 59%;
+    float: right;
+    padding-top: 0.8em;
+    padding-left: 1em;
+    border: none;
+
+}
+
+#teach-page .banner2, .banner3, .time2, .time3{
+    display: none;
+}
+
+#teach-page .banner1:hover, .banner2:hover, .banner3:hover{
+    border: none;
+}
+
+#teach-page .banner-img{
+    float: left;
+    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.1);
+    border-radius: 5px;
+    border: none;
+}
+
+#teach-page .banner-img:hover{
+    box-shadow: 0px 0px 5px 2px #e088a1;
+    border-radius: 5px;
+    border: none;
+}
+
+#teach-page .upcoming-time p{
+    float: right;
+    margin-bottom: 0.8em;
+    padding-bottom: .4em;
+
+    font: 400 0.8rem "Times", sans-serif;
+    line-height: 0.01em;
+}
+
 /*search-filter label*/
 
 #teach-page .search-filter {
@@ -1815,9 +1894,9 @@ h2.featuring {
 }
 
 #teach-page .case-list {
-
     margin-bottom: 0.8em;
     padding-bottom: .4em;
+    display:flex;
 
     font: 400 1.0rem "Times", sans-serif;
     line-height: 1.2em;
@@ -1826,6 +1905,44 @@ h2.featuring {
 
 }
 
+#teach-page .labels {
+    width: 40%;
+}
+
+#teach-page .tags.selected{
+    display: inline-block;
+    margin-left: 2em;
+    margin-right: 2em;
+    margin: 2px 2px;
+    padding: 5px 8px;
+    border-radius: 25px;
+    font: 200 0.7rem "Montserrat", sans-serif;
+    color: white;
+    white-space: nowrap;
+    background: #ed225d;
+}
+
+#teach-page .caseBtn {
+    padding-top: 0.2em;
+    padding-bottom:0.2em;
+    width: 60%;
+    height:max-content;
+    float: left;
+}
+
+#teach-page .case-list label {
+    display: inline-block;
+    margin-left: 2em;
+    margin-right: 2em;
+    margin: 2px 2px;
+    padding: 5px 8px;
+    border-radius: 25px;
+    font: 200 0.7rem "Montserrat", sans-serif;
+    color: black;
+    white-space: nowrap;
+    background: #fafafa;
+}
+
 /* ==========================================================================
    Author's custom styles
    ========================================================================== */
@@ -2706,6 +2823,34 @@ iframe {
     width: 100px;
     height: auto;
 }
+/* teach page */
+
+@media (max-width: 780px) {
+ 
+    #teach-page ul.workshops{
+        width: 100%;
+    }
+    
+     #teach-page .upcoming-banners{
+        width: 100%;
+        float: left;
+        padding-top: 0em;
+        padding-left: 0em;
+        border: none;
+    }
+
+    #teach-page .case-list {
+        display:block;
+    }
+    
+    #teach-page .labels {
+        min-width: 100%;
+    }
+
+    #teach-page .caseBtn {
+        min-width: 100%;
+    }
+}
 
 /*
   //////////////////////////////////////////////////