Merge branch 'main' of https://git.xpub.nl/XPUB/SI20

carddeck1/fonts/worksans/stylesheet.css

@@ -0,0 +1,161 @@
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-Black.woff2') format('woff2'),
+        url('WorkSans-Black.woff') format('woff');
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-ExtraBoldItalic.woff2') format('woff2'),
+        url('WorkSans-ExtraBoldItalic.woff') format('woff');
+    font-weight: bold;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-Bold.woff2') format('woff2'),
+        url('WorkSans-Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-ExtraBold.woff2') format('woff2'),
+        url('WorkSans-ExtraBold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-BlackItalic.woff2') format('woff2'),
+        url('WorkSans-BlackItalic.woff') format('woff');
+    font-weight: 900;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-BoldItalic.woff2') format('woff2'),
+        url('WorkSans-BoldItalic.woff') format('woff');
+    font-weight: bold;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-Italic.woff2') format('woff2'),
+        url('WorkSans-Italic.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-ExtraLightItalic.woff2') format('woff2'),
+        url('WorkSans-ExtraLightItalic.woff') format('woff');
+    font-weight: 200;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-Light.woff2') format('woff2'),
+        url('WorkSans-Light.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-MediumItalic.woff2') format('woff2'),
+        url('WorkSans-MediumItalic.woff') format('woff');
+    font-weight: 500;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-LightItalic.woff2') format('woff2'),
+        url('WorkSans-LightItalic.woff') format('woff');
+    font-weight: 300;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-Medium.woff2') format('woff2'),
+        url('WorkSans-Medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-ExtraLight.woff2') format('woff2'),
+        url('WorkSans-ExtraLight.woff') format('woff');
+    font-weight: 200;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-SemiBoldItalic.woff2') format('woff2'),
+        url('WorkSans-SemiBoldItalic.woff') format('woff');
+    font-weight: 600;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-Thin.woff2') format('woff2'),
+        url('WorkSans-Thin.woff') format('woff');
+    font-weight: 100;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-ThinItalic.woff2') format('woff2'),
+        url('WorkSans-ThinItalic.woff') format('woff');
+    font-weight: 100;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-Regular.woff2') format('woff2'),
+        url('WorkSans-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-SemiBold.woff2') format('woff2'),
+        url('WorkSans-SemiBold.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}

carddeck1/stylesheet.css

@@ -1,3 +1,13 @@
+@font-face {
+    font-family: Consolation;
+    src: url(./font/Consolation014.woff) format('woff');
+    font-weight:normal;
+}
+body {
+    font-family: Consolation;
+    text-transform: uppercase;
+    letter-spacing: 1.5;
+}
 .card
 {
     width: 7.5cm;
@@ -16,7 +26,7 @@
    top: 10mm; 
    border-radius: 10px;
    z-index: -1;
-    /* display: none; */
+   display: none;
 }
 .card > h2{
     top: 5mm;
@@ -26,7 +36,7 @@
     padding-top: 3mm;
     font-size: 13px;
     font-family:monospace;
-    /* display: none;  */
+    display: none;
 }
 .card > p.text {
     width: 50mm;
@@ -36,8 +46,7 @@
     left: 10mm;
     text-align: center; 
     margin: 0;
-    font-family: monospace;
-    /* display: none;  */
+    display: none;
  }
  .card > p.textnoimage {
     width: 60mm;
@@ -48,6 +57,5 @@
     right: 5mm;
     text-align: center;
     font-size: 6.5;
-    font-family: monospace;
-    /* display: none;   */
+    display: none; 
  }

ogcardeck/cards.html

@@ -12,134 +12,132 @@
     <section>
 
     <div class="card">
-        <p id="up" class="up">'o ccafè</p>
-        <p id="down" class="down">the coffee</p>
+        <p id="up" class="up">'o &nbsp; ccafè</p>
+        <p id="down" class="down">42.the &nbsp; coffee</p>
         <img src='./images/1.coffee.png'>
     </div>
 
     <div class="card">
-        <p id="up" class="up">e ddoie zetelle</p>
-        <p id="down" class="down">the spinsters</p>
+        <p id="up" class="up">e &nbsp; ddoie &nbsp; zetelle</p>
+        <p id="down" class="down">66.the &nbsp; spinsters</p>
         <img src='./images/2.spinsters.png'>
     </div>
 
     <div class="card">
-        <p id="up" class="up">'a sposa</p>
-        <p id="down" class="down">the bride</p>
+        <p id="up" class="up">'a &nbsp; sposa</p>
+        <p id="down" class="down">63.the &nbsp; bride</p>
         <img src='./images/3.bride.png'>
     </div>
 
     <div class="card">
-        <p id="up" class="up">'a mamma</p>
-        <p id="down" class="down">the mother</p>
+        <p id="up" class="up">'a &nbsp; mamma</p>
+        <p id="down" class="down">52.the &nbsp; mother</p>
         <img src='./images/4.mother.png'>
     </div>
 
     <div class="card">
-        <p id="up" class="up">'a chiesa</p>
-        <p id="down" class="down">the church</p>
+        <p id="up" class="up">'a &nbsp; chiesa</p>
+        <p id="down" class="down">84.the &nbsp; church</p>
         <img src='./images/5.church.png'>
     </div>
 
     <div class="card">
-        <p id="up" class="up">sott'e ncoppa</p>
-        <p id="down" class="down">the upside down</p>
+        <p id="up" class="up">sott'e &nbsp; ncoppa</p>
+        <p id="down" class="down">69.the &nbsp; upside &nbsp; down</p>
         <img src='./images/6.upsidedown.png'>
     </div>
 
 
     <div class="card">
-        <p id="up" class="up">'o ccafè</p>
-        <p id="down" class="down">the bird</p>
+        <p id="up" class="up">l'aucelluzz</p>
+        <p id="down" class="down">35.the &nbsp; bird</p>
         <img src='./images/7.bird.png'>
     </div>
     
     <div class="card">
-        <p id="up" class="up">'o ccafè</p>
-        <p id="down" class="down">the breasts</p>
+        <p id="up" class="up">'e &nbsp; zzizze</p>
+        <p id="down" class="down">28.the &nbsp; breasts</p>
         <img src='./images/8.tits.png'>
     </div>
 
     <div class="card">
-        <p id="up" class="up">'o ccafè</p>
-        <p id="down" class="down">the crying</p>
+        <p id="up" class="up">'o &nbsp; chianto</p>
+        <p id="down" class="down">65.the &nbsp; crying</p>
         <img src='./images/9.crying.png'>
     </div>
     
     <div class="card">
-        <p id="up" class="up">'o ccafè</p>
-        <p id="down" class="down">the set table</p>
+        <p id="up" class="up">'a &nbsp; tavula &nbsp; mbandita</p>
+        <p id="down" class="down">82.the &nbsp; set &nbsp; table</p>
         <img src='./images/10.settable.png'>
     </div>
     
     <div class="card">
-        <p id="up" class="up">'o ccafè</p>
-        <p id="down" class="down">the coffee</p>
+        <p id="up" class="up">se &nbsp; lamenta</p>
+        <p id="down" class="down">60.the &nbsp; lament</p>
         <img src='./images/11.lament.png'>
     </div>
     
     <div class="card">
-        <p id="up" class="up">'o ccafè</p>
-        <p id="down" class="down">purgatory's souls</p>
+        <p id="up" class="up">ll'aneme &nbsp; o &nbsp; priatorio</p>
+        <p id="down" class="down">85.purgatory's &nbsp; souls</p>
         <img src='./images/12.purgatory.png'>
     </div>
     
     <div class="card">
-        <p id="up" class="up">'o ccafè</p>
-        <p id="down" class="down">the talking dead</p>
+        <p id="up" class="up">'o &nbsp; muorto &nbsp; che &nbsp; pparla</p>
+        <p id="down" class="down">48.the &nbsp; talking &nbsp; dead</p>
         <img src='./images/13.talkingdead.png'>
     </div>
     
     <div class="card">
-        <p id="up" class="up">'o ccafè</p>
-        <p id="down" class="down">the warm soup</p>
+        <p id="up" class="up">'a &nbsp; zuppa &nbsp; cotta</p>
+        <p id="down" class="down">68.the &nbsp; warm &nbsp; soup</p>
         <img src='./images/14.warmsoup.png'>
     </div>
     
     <div class="card">
-        <p id="up" class="up">'o ccafè</p>
-        <p id="down" class="down">the devils</p>
+        <p id="up" class="up">'e &nbsp; riavule</p>
+        <p id="down" class="down">77.the &nbsp; devils</p>
         <img src='./images/15.devils.png'>
     </div>
     
     <div class="card">
-        <p id="up" class="up">'o ccafè</p>
-        <p id="down" class="down">the storm</p>
+        <p id="up" class="up">'o &nbsp; maletiempo</p>
+        <p id="down" class="down">83.the &nbsp; storm</p>
         <img src='./images/16.storm.png'>
     </div>
     
     <div class="card">
-        <p id="up" class="up">'o ccafè</p>
-        <p id="down" class="down">christmas</p>
+        <p id="up" class="up">natale</p>
+        <p id="down" class="down">25.christmas</p>
         <img src='./images/17.christmas.png'>
     </div>
     
     <div class="card">
-        <p id="up" class="up">'o ccafè</p>
-        <p id="down" class="down">blood</p>
+        <p id="up" class="up">'o sangue</p>
+        <p id="down" class="down">18.blood</p>
         <img src='./images/18.blood.png'>
     </div>
     
     <div class="card">
-        <p id="up" class="up">'o ccafè</p>
-        <p id="down" class="down">laughter</p>
+        <p id="up" class="up">'a resata</p>
+        <p id="down" class="down">19.laughter</p>
         <img src='./images/19.laughter.png'>
     </div>
     
     <div class="card">
-        <p id="up" class="up">'o ccafè</p>
-        <p id="down" class="down">the gossiping woman</p>
+        <p id="up" class="up">'a &nbsp; donna &nbsp; o' &nbsp; barcone</p>
+        <p id="down" class="down">43.the &nbsp; gossiping &nbsp; woman</p>
         <img src='./images/20.gossiping.png'>
     </div>
     
     <div class="card">
-        <p id="up" class="up">'o ccafè</p>
-        <p id="down" class="down">the good wine</p>
+        <p id="up" class="up">'o &nbsp; vino</p>
+        <p id="down" class="down">45.the &nbsp; good &nbsp; wine</p>
         <img src='./images/21.goodwine.png'>
     </div>
 
-    
-
     </section>
 </body> 
 <script>

ogcardeck/deck1.py

@@ -47,11 +47,9 @@ html = f"""
 <html>
     <head>
         <meta charset="utf-8">
-        <title>flex card</title>
         <link href="stylesheet.css" rel="stylesheet">
     </head>
     <body>
-<h1>gardening cards for lil gardeners</h1>
     <section>
     { all_cards }
     </section>

ogcardeck/fonts/worksans/stylesheet.css

@@ -0,0 +1,161 @@
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-Black.woff2') format('woff2'),
+        url('WorkSans-Black.woff') format('woff');
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-ExtraBoldItalic.woff2') format('woff2'),
+        url('WorkSans-ExtraBoldItalic.woff') format('woff');
+    font-weight: bold;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-Bold.woff2') format('woff2'),
+        url('WorkSans-Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-ExtraBold.woff2') format('woff2'),
+        url('WorkSans-ExtraBold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-BlackItalic.woff2') format('woff2'),
+        url('WorkSans-BlackItalic.woff') format('woff');
+    font-weight: 900;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-BoldItalic.woff2') format('woff2'),
+        url('WorkSans-BoldItalic.woff') format('woff');
+    font-weight: bold;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-Italic.woff2') format('woff2'),
+        url('WorkSans-Italic.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-ExtraLightItalic.woff2') format('woff2'),
+        url('WorkSans-ExtraLightItalic.woff') format('woff');
+    font-weight: 200;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-Light.woff2') format('woff2'),
+        url('WorkSans-Light.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-MediumItalic.woff2') format('woff2'),
+        url('WorkSans-MediumItalic.woff') format('woff');
+    font-weight: 500;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-LightItalic.woff2') format('woff2'),
+        url('WorkSans-LightItalic.woff') format('woff');
+    font-weight: 300;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-Medium.woff2') format('woff2'),
+        url('WorkSans-Medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-ExtraLight.woff2') format('woff2'),
+        url('WorkSans-ExtraLight.woff') format('woff');
+    font-weight: 200;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-SemiBoldItalic.woff2') format('woff2'),
+        url('WorkSans-SemiBoldItalic.woff') format('woff');
+    font-weight: 600;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-Thin.woff2') format('woff2'),
+        url('WorkSans-Thin.woff') format('woff');
+    font-weight: 100;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-ThinItalic.woff2') format('woff2'),
+        url('WorkSans-ThinItalic.woff') format('woff');
+    font-weight: 100;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-Regular.woff2') format('woff2'),
+        url('WorkSans-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Work Sans';
+    src: url('WorkSans-SemiBold.woff2') format('woff2'),
+        url('WorkSans-SemiBold.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+    font-display: swap;
+}