update css for img

oberlab · Apr 27, 2021 · 5aad921 · 5aad921
1 parent e59c653
commit 5aad921
Show file tree

Hide file tree

Showing 19 changed files with 31 additions and 55 deletions.
diff --git a/content/img/kurse/wasseranalyse_process.png b/content/img/kurse/wasseranalyse_process.png
diff --git a/content/img/kurse/wasseranalyse_result.png b/content/img/kurse/wasseranalyse_result.png
diff --git a/content/portfolio/02_Calliope_programmieren.md b/content/portfolio/02_Calliope_programmieren.md
@@ -33,7 +33,3 @@ Computerprogramme unter anderem machen genau das, was ihr ihnen sagt, das sie ma
 :::special_notes
 Beim Programmieren gibt es keine Grenzen. Der Kurs kann angepasst werden, sodass sowohl Anfänger als auch Fortgeschrittene auf ihre Kosten kommen.
 :::
-
-:::curriculum  
-
-:::
diff --git a/content/portfolio/03_JeanCloud.md b/content/portfolio/03_JeanCloud.md
@@ -33,7 +33,3 @@ In diesem Kurs lernst du mit einem Grafikprogramm einfache Vektorzeichnungen zu
 :::special_notes
 Nach unserem Workshop ist natürlich nicht Schluss. Ihr könnt euren eine Code entwickeln um die Funktionen von JeanCloud anzupassen und zu erweitern
 :::
-
-:::curriculum
-
-:::
diff --git a/content/portfolio/04_Badefiguren.md b/content/portfolio/04_Badefiguren.md
@@ -33,7 +33,3 @@ Es müssen nicht teure Pflegeprodukte mit vielen Inhaltsstoffen eingekauft werde
 :::special_notes  
 Eure Badefiguren werden in eine von euch ausgewählte Silikonform in Form gebracht. Ihr habt die Wahl aus verschiedenen Tierformen. So könnt ihr zum Beispiel einen Flamingo- oder Raupenbadefigur mit nach Hause nehmen.
 :::
-
-:::curriculum  
-
-:::
diff --git a/content/portfolio/05_Wasseranalyse.md b/content/portfolio/05_Wasseranalyse.md
@@ -33,7 +33,3 @@ In diesem Workshop werdet ihr experimentell beweisen, dass das Wasser, das ihr t
 :::special_notes  
 An besonders schönen Tagen verbinden wir die Analyse mit einer kleinen Wanderung zum Tegernsee, um dort Wasserproben zu nehmen.
 :::
-
-:::curriculum  
-
-:::
diff --git a/content/portfolio/06_Paper_Circuits.md b/content/portfolio/06_Paper_Circuits.md
@@ -33,7 +33,3 @@ Dass das Licht zu Hause angeht, wenn man den Lichtschalter betätigt ist mit Sic
 :::special_notes  
 Ihr habt die Wahl aus einem Creeper-, einem Super-Mario-Geist-, oder einem Kürbisstromkreis, den ihr mit nach Hause nehmen könnt, um euer Zimmer zu erhellen.
 :::
-
-:::curriculum  
-
-:::
diff --git a/content/portfolio/07_Bristlebots.md b/content/portfolio/07_Bristlebots.md
@@ -33,7 +33,3 @@ Egal ob im Handy, in Controllern von Spielekonsolen oder elektrischen Zahnbürst
 :::special_notes  
 Der Sockel, in dem die Batterie angebracht wird, wurde von uns designed und 3D-gedruckt.
 :::
-
-:::curriculum  
-
-:::
diff --git a/content/portfolio/08_3D-Design_und_Druck.md b/content/portfolio/08_3D-Design_und_Druck.md
@@ -33,7 +33,3 @@ Wenn ihr eine coole Idee für eine Figur oder sogar ein ganzes Modell in eurem K
 :::special_notes  
 Beim 3D-Druck gibt es quasi keine Grenzen. Der Kurs kann angepasst werden, sodass sowohl Anfänger als auch Fortgeschrittene auf ihre Kosten kommen.
 :::
-
-:::curriculum    
-
-:::
diff --git a/content/portfolio/09_kisten_lasern.md b/content/portfolio/09_kisten_lasern.md
@@ -33,7 +33,3 @@ In diesem Kurs lernt ihr wie ein Lasercutter funktioniert und wie man mit einem
 :::special_notes
 Die Detailtiefe bei dem Entwurf der Vorlage und der Grafikbearbeitung wird an die Altersstufe angepasst.
 :::
-
-:::curriculum
-
-:::
diff --git a/content/portfolio/10_loeten.md b/content/portfolio/10_loeten.md
@@ -33,7 +33,3 @@ In diesem Kurs lernt ihr etwas über die Grundlagen von Elektronik und dürft mi
 :::special_notes
 Unsere Platinen gibt es in unterschiedlichten Ausführungen, sowohl Anfänger als auch Fortgeschrittene kommen auf ihre Kosten.
 :::
-
-:::curriculum
-
-:::
diff --git a/content/portfolio/11_Badebomben.md b/content/portfolio/11_Badebomben.md
@@ -33,7 +33,3 @@ Ihr habt ein schlechtes Gewissen beim Kauf von Bademitteln, die eure Badewanne i
 :::special_notes  
 Ihr könnt die Badebomben mit trockener (!) Lebensmittelfarbe versehen, dann wird auch das Auge beim Baden auf Entspannungsreise geschickt.  
 :::
-
-:::curriculum  
-
-:::
diff --git a/content/portfolio/12_DNA_Isolation.md b/content/portfolio/12_DNA_Isolation.md
@@ -33,7 +33,3 @@ Ihr wolltet schon immer mal den Bauplan sehen, den eine Erdbeere erst zu einer E
 :::special_notes  
 Der ganze Vorgang funktioniert nicht nur mit Erdbeeren. Probiert es doch mal mit anderen Früchten zu Hause.  
 :::
-
-:::curriculum  
-
-:::
diff --git a/content/portfolio/13_Puzzle_lasern.md b/content/portfolio/13_Puzzle_lasern.md
@@ -37,7 +37,3 @@ euren persönlichen Stempel. Alleinstehungsmerkmal ist hier garantiert.
 :::special_notes  
 Fortgeschrittene dürfen hier ihr individuelles Design freilich am Computer entwerfen.   
 :::
-
-:::curriculum  
-
-:::
diff --git a/design/description_template.md b/design/description_template.md
@@ -15,8 +15,8 @@ curriculum_reference:
   Förderschule: Inf5-7, HSU  
   Realschule: IT 2.6  
   Gymnasium: NT6 2
-image1: Ergebnis (width 600)
-image2: Material/Prozess (800x800)
+image_result: Ergebnis (800x800)
+image_process: Material/Prozess (width 600)
 ---
 :::short_description
 300 Zeichen

diff --git a/out/assets/framework.css b/out/assets/framework.css
@@ -17,3 +17,7 @@
 .space-between {
     justify-content: space-between;
 }
+
+.items-center {
+    align-items: center;
+}
diff --git a/out/assets/portfolio/style.css b/out/assets/portfolio/style.css
@@ -111,11 +111,24 @@ ul.attributes li i {
     margin-bottom: -3mm;
 }
 
-img#result {
+#result > img {
     width: 200px;
     margin-right: 4em;
 }
 
+img#process {
+    height: 250px;
+    float: right;
+    clear: right;
+    margin-left: 1em;
+}
+#process-spacer{
+    float: right;
+    height: calc(100% - 250px);
+}
+
+
+
 
 @media screen {
     .container {

diff --git a/out/assets/portfolio/style_school.css b/out/assets/portfolio/style_school.css
@@ -7,7 +7,7 @@
 }
 
 .curriculum_reference {
-    font-size: 16pt;
+    font-size: 12pt;
     list-style-type: none;
     padding: 0;
     margin: 0;
@@ -26,6 +26,7 @@
     display: block;
     font-family: "Roboto Mono";
     font-weight: bold;
+    font-size: 12pt;
     margin-bottom: 1mm;
 
 }

diff --git a/templates/portfolio.html b/templates/portfolio.html
@@ -5,14 +5,17 @@
         </div>
         <div class="flex flex-col fw">
             <h1 class="title">{{ title }}</h1>
-            <div class="flex flex-row space-between">
+            <div class="flex flex-row space-between items-center">
                 <ul class="attributes">
                 {{#each attributes}}
                     <li class="attribute-{{ @key }}"><i class="fas fa-fw fa-{{lookup ../attributeIcons @key}}"></i>{{ this }}</li>
                 {{/each}}
                 </ul>
 
-                <img id="result" src="../content/img/kurse/wasseranalyse_process.png" alt="missing image"/>
+                <div id="result">
+                  <img src="../content/img/kurse/wasseranalyse_result.png" alt="missing image"/>
+
+                </div>
             </div>
             <div class="flex flex-row">
               <ul class="curriculum_reference">
@@ -25,6 +28,9 @@ <h1 class="title">{{ title }}</h1>
     </div>
 </div>
 <div class="page page-right">
+    <div id="process-spacer"></div>
+    <img id="process" src="../content/img/kurse/wasseranalyse_process.png" alt="missing image"/>
     {{{ content }}}
-    <img id="process" src="../content/img/kurse/wasseranalyse_result.png" alt="missing image"/>
+
+
 </div>