updates on Teach page 210302

Author: yinhwa

i18n-tracking.yml

@@ -1385,7 +1385,7 @@ h2.featuring {
   margin-top: 3em;
 }
 
-/*search-filter label*/
+/*Search-filter Button*/
 
 #teach-page .search-filter {
   display: inline;
@@ -1428,6 +1428,32 @@ h2.featuring {
 }
 
 
+/*Filter Panel*/
+
+#teach-page .filter-panel {
+  padding: 0px;
+  background-color: white;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.2s ease-out;
+  margin-bottom: 0.8em;
+  padding-bottom: .4em;
+
+}
+
+
+
+#teach-page .filter-panel p {
+  margin: 0;
+  color: #333;
+  font-size: .83em;
+  height: 50px;
+  padding-top:20px;
+  transition: all 0.5s ease-in-out;
+}
+
+
+
 #teach-page ul.filters p.filter-title {
   font: 400 0.83rem "Montserrat", sans-serif;
   color: #ed225d;
@@ -1467,6 +1493,8 @@ h2.featuring {
     background: #fafafa;
 }
 
+
+
 #teach-page ul.filters li label {
     padding: 6px 12px;
     cursor: pointer;
@@ -1504,38 +1532,77 @@ h2.featuring {
 }
 
 
-/*Filter Panel*/
 
-#teach-page .filter-panel {
-  padding: 0px;
-  background-color: white;
-  max-height: 0;
-  overflow: hidden;
-  transition: max-height 0.2s ease-out;
+ /*p5 workshop and class title*/
+
+#teach-page .teach-intro p {
+  font: 400 1.2rem "Times", sans-serif;
+  line-height: 1.5em;
+}
+
+/*teach case list*/
+
+#teach-page li.case-list{
+
   margin-bottom: 0.8em;
   padding-bottom: .4em;
+  padding-top: .4em;
+  margin: 3px 0px;
+
+  font: 200 1.0rem "Times", sans-serif;
+  line-height: 1.2em;
+
+  border-bottom: 0.1em dashed #ffe8e8;
 
 }
 
+#teach-page li.case-list label.case-list-title{
+
+  
+  margin: 0px 0px 10px 0px;
+  padding-right: 10px;
+
+  font: 200 1.0rem "Times", sans-serif;
+  line-height: 1.2em;
 
 
-#teach-page .filter-panel p {
-  margin: 0;
-  color: #333;
-  font-size: .83em;
-  height: 50px;
-  padding-top:20px;
-  transition: all 0.5s ease-in-out;
 }
 
 
- /*p5 workshop and class title*/
-#teach-page .teach-intro p {
-  font: 400 1.2rem "Times", sans-serif;
-  line-height: 1.5em;
+#teach-page li.case-list label.case-list-name {
+    display: inline-block;
+    border-radius: 25px;
+    font: 200 0.7rem "Montserrat", sans-serif;
+    white-space: nowrap;
+    margin: 0px 0px 0px 0px;
+    padding: 10px 5px 0px 0px;
+    color: black;
+    background: white;
+    text-align: center;
+    
+
 }
 
 
+#teach-page li.case-list label.case-list-year {
+    display: inline-block;
+    border-radius: 25px;
+    font: 200 0.7rem "Montserrat", sans-serif;
+    
+    white-space: nowrap;
+    margin: 5px 0px 0px 0px;
+    padding: 6px 12px;
+    /*color: #ed225d;*/
+    color: black;
+    background: #fafafa;
+    text-align: center;
+    /*margin-bottom: .6em;*/
+    /*margin-top: .6em;*/
+
+}
+
+
+
 /*modal box*/
 
 #teach-page .modal-title{
@@ -1692,10 +1759,6 @@ h2.featuring {
   margin-bottom: 0.8em;
 }
 
-/*#teach-page .modal-body p{
-  border-bottom: 0.1em dashed rgba(237, 34, 93, 0.15);
-
-}*/
 
 #teach-page .modal-body:-webkit-scrollbar{
   display: none;
@@ -1765,18 +1828,6 @@ h2.featuring {
 
 }
 
-#teach-page .case-list{
-
-  margin-bottom: 0.8em;
-  padding-bottom: .4em;
-
-  font: 400 1.0rem "Times", sans-serif;
-  line-height: 1.2em;
-
-  border-bottom: 0.1em dashed #ffe8e8;
-
-}
-
 /* ==========================================================================
    Author's custom styles
    ========================================================================== */

src/assets/css/main.css

@@ -1513,7 +1513,7 @@ teach:
   teach-case-subtitle3: Level of Difficulty
   teach-case-subtitle4: Goals
   teach-case-subtitle5: Method & Materials
-  teach-case1-title: p5.js à l'Ubuntu Party!
+  teach-case1-title: p5.js at Ubuntu Party!
   teach-case1-lead-name: Basile Pesin
   teach-case1-content1: '2020 Ubuntu Party '
   teach-case1-content1-1: 'Cité des Sciences et de l''Industrie, Paris, France'
@@ -1543,8 +1543,8 @@ teach:
     To explore generative art & design and recreate some classical works
     with p5.js. 
   teach-case2-content5: 'Methods: In-person, collaborative, hands-on workshop.'
-  teach-case2-content5-1: 'Materials: '
-  teach-case2-content5-2: 'course page '
+  teach-case2-content5-1: ''
+  teach-case2-content5-2: 'Course page '
   teach-case2-content5-3: 'linking to sketches on the p5 editor, '
   teach-case2-content5-4: 'interactive reference guide '
   teach-case2-content5-5: to p5 basics
@@ -1567,7 +1567,7 @@ teach:
   teach-case3-content5-1: CC Fest Lessons page
   teach-case3-content5-2: ' for teaching materials'
   teach-case3-content5-3: More photos
-  teach-case4-title: Taller Introducción a la Programación Creativa con p5.js
+  teach-case4-title: Introduction to Creative Programming with p5.js
   teach-case4-lead-name: Aarón Montoya-Moraga
   teach-case4-speech: 'p5.js is my happy place '
   teach-case4-content1: ' PlusCode Media Arts Festival, Buenos Aires, Argentina & Virtual-Online '
@@ -1714,3 +1714,92 @@ teach:
     coding concepts.
   teach-case12-content5-1: Syllabus & Material
   teach-case12-content5-2: More photos
+  teach-case13-title: Painting with Code
+  teach-case13-lead-name: Andreas Refsgaard
+  teach-case13-speech: >-
+    I'm working on a new series of coding class for Disabled students in South
+    Korea. I'm researching about the pedagogy and translation. I plan to hold
+    workshops in December 2020. The project is supported by the Open Society
+    Foundation Human Rights Initiative and Korea Disability Arts & Culture
+    Center.
+  teach-case13-content1: ' Copenhagen, Denmark'
+  teach-case13-content1-1: '2020 February 22'
+  teach-case13-content2: A wide range of people. 
+  teach-case13-content3: Intermediate
+  teach-case13-content4: >-
+    Get creatives, designers, artists and other people who don't typically use code introduced to p5.js.
+  teach-case13-content5: >-
+    Website, p5.js editor.
+  teach-case13-content5-1: Material
+
+  teach-case14-title: Smarter Home
+  teach-case14-lead-name: Lauren McCarthy
+  teach-case14-speech: >-
+    The Smarter Home / 더 똑똑한 집 American Arts Incubator Workshop reimagines smart homes of the future.
+  teach-case14-content1: ' Gwangju Cultural Foundation(GJCF), Gwangju, South Korea'
+  teach-case14-content1-1: '2020 April 19 - May 11'
+  teach-case14-content1-2: 'ZERO1 American Art Incubator(AAI)'
+  teach-case14-content2: '16 people (resident of Gwangju or surrounding areas)'
+  teach-case14-content3: 'Elementary & Intermediate'
+  teach-case14-content4: >-
+    To reimagine smart homes of the future, with such technologies as p5.js and ml5.js. Spending a lot of time talking about the increasing role technology is playing at home and in Korean society,
+    the workshop aimed to offer a vision of a smarter home driven by the participants' critical optimism for the future. 
+  teach-case14-content5: >-
+    p5.js, p5 web editor, ml5.js, and installations. 
+  teach-case14-content5-1: >-
+    1) We set out to prototype the concept of a “smarter home”, trying to bring technology into personal space on our own terms.
+  teach-case14-content5-2: >- 
+    2) Breaking into four teams, each selected an issue to address through a room they would create within our larger home structure.
+  teach-case14-content5-3: >-
+    3) We incorporated machine learning, audio processing, and computer vision techniques to track and respond to the presence of people. 
+  teach-case14-content5-4: >-
+    4) Together, these works make one installation, comprised of four interconnected smart rooms that each provoke discussion. 
+  teach-case14-content5-5: 'More pictures'
+  teach-case15-title: Introduction to p5js
+  teach-case15-lead-name: Bérenger Recoules (a.k.a b2renger)
+  teach-case15-content1: >-
+   L'École de Design Nantes Atlantique, France
+  teach-case15-content1-1: Since 2018 and ongoing
+  teach-case15-content2: >-
+    Students from l'école de design Nantes Atlantique'
+  teach-case15-content3: Elementary
+  teach-case15-content4: >-
+    To get to know p5.js and its functionalities (DOM, audio, WebGL, etc.) 
+  teach-case15-content5: >-
+    GitHub Readme File
+  teach-case15-content5-1: ' : a text tutorial in French'
+  teach-case16-title: >-
+    50+ Coding Club : My First Code Art with Handy(🖐) and Family
+  teach-case16-lead-name: Inhwa Yeom
+  teach-case16-speech: >-
+    This workshop was conducted in line with 'p5 for 50+' project, with supports from 2020 Processing Foundation fellowship program and Asia Culture Center (ACC).
+  teach-case16-content1: ' Asia Culture Center(ACC), Gwangju. Virtual & Online'
+  teach-case16-content1-1: '(In-Person) 2020 November 20 - 28, every Friday and Saturday; (Virtual-Online) Anytime from 2020 December on via YouTube videos'
+  teach-case16-content2: '8 people, composed of 6 older adults and their children'
+  teach-case16-content2-1: '1) Those who define themselves as older adults (age around 50 and older)'
+  teach-case16-content2-2: '2) People from any age groups who accompany a person of 1) '
+  teach-case16-content3: 'Elementary'
+  teach-case16-content4: >-
+    Addressing the digital literacy and rights of age 50+ population in a non-English-speaking country,
+    this workshop aimed to lower their physical, lingual, and emotional barriers to learning coding with smartphone-based p5.js editor.
+  teach-case16-content5: >-
+    p5for50+ web app
+  teach-case16-content5-1: >-
+   a smartphone-based web app, with p5.js web editor embedded in it. Created with the editor, the participants' p5 sketches were printed out and framed on-site, and distributed as their materialized outcomes.
+  teach-case16-content5-2: 'Curriculum'
+  teach-case16-content5-3: 'YouTube'
+  teach-case16-content5-4: 'More pictures'
+
+  teach-case17-title: Programming Applied to Visual and Interactive Art
+  teach-case17-lead-name: Sebastián Zavatarelli
+  teach-case17-speech: >-
+    The course is part of the extension courses on the trans-departmental area of multimedia arts of National University of the Arts in Argentina.
+  teach-case17-content1: ' Buenos Aires, Argentina. Virtual & Online'
+  teach-case17-content1-1: '2020 September 15 - October 14 every Wednesday 6:30-9:00 PM'
+  teach-case17-content2: 'Around 10 people. Mostly women.'
+  teach-case17-content3: 'Elementary & Intermediate'
+  teach-case17-content4: >-
+    The course is intended for artists who want to start using current technological tools for the development of their works. It can also be used by those who want to get started in computer programming through a simple, visual, accessible and fun programming environment.
+  teach-case17-content5: >-
+    p5.js web editor. Online through Zoom platform and material uploaded in Moodle.
+  teach-case17-content5-1: 'More pictures'