Changeset 1305 in t29-www

Timestamp:

Sep 15, 2017, 1:48:13 AM (2 years ago)

Author:

sven

Message:

Physical-Computing: Digitale Denker-Bild eingebunden.

Das Dilemma mit den Bildern mit ".JPG" statt ".jpg"-Endung löst man zudem einfach, indem man im HTML einfach das Bild mit .JPG-Endung einbindet.

Files:

• physical-computing/index.php (modified) (3 diffs)
• physical-computing/vorlage-1.jpg (added)
• shared/css-v6/modules/27-kursseiten.css (modified) (2 diffs)

physical-computing/index.php

@@ -38 +38 @@
 ?>
 
-<header class="teaser physical-computing">
+<header class="teaser physical-computing seitenstart">
         <h2>
         Physical-Computing &amp; Robotics
@@ -55 +55 @@
 Im Vergleich zu den ausschließlich am Bildschirm dargestellten virtuellen Simulationen, wie sie im üblichen Informatikunterricht ablaufen, werden hier physikalisch anfassbare Objekte bewegt. Diese interessanten Anwendungen sind für Jugendliche äußerst motivierend. Spielerisches Lernen wird real erfahrbar.<br>
 <div class="box center">
-        <img src="aes-1.jpg" width="402"  height="268"/> 
+        <img src="aes-1.JPG" width="402"  height="268"/> 
         Kniffliger Sketch....
 </div>
@@ -102 +102 @@
 </div><!-- /cols -->
 
-<hr>
+<div class="clear"></div>
 
-
-
-<div class="cols clear-after"><br>
+<header class="teaser digitale-denker">
+        <h2>Digitale Denker</h2>
+        <img class="no-copyright" src="vorlage-1.jpg">
+</header>
 
 Aktuelle Materialien:<br>

shared/css-v6/modules/27-kursseiten.css

@@ -27 +27 @@
 /* teaser, von devzone kopiert */
 body.kursseite header.teaser {
-        margin: -60px -40px 40px;
         position: relative;
         overflow: hidden;
+        margin: 30px -40px 30px;
 }
+
+/* Wenn mehrere dieser Teaser auf einer Seite (eine verrueckte Sache, die Berti
+   im Sept 2017 ploetzlich wollte: Nur den ersten mit dem fancigen Margin aussatten) */
+body.kursseite header.teaser.seitenstart {
+        margin: -60px -40px 40px;
+}
+
 
 body.kursseite header.teaser h2,    /*Robotik*/
@@ -57 +64 @@
 /* Physical-Computing */
 body.kursseite #content header.teaser.physical-computing h2 {
-        
         color: #0006ff;
-
         background-color: rgba(224, 242, 254, .7);/*vorher .8*/
-        
 }
 
-body.kursseite header.teaser img {
-
+body.kursseite #content header.teaser.digitale-denker h2 {
+        font-size: 180%;
+        color: white;
+        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 0%,rgba(0,0,0,1) 100%);
 }
 
+body.kursseite header.teaser img {}
 
-body.kursseite header.teaser::before {
+
+body.kursseite header.teaser.physical-computing::before {
         /* css3 hack to get img inset box-shadow */
         display:block;