source: t29-www/shared/css-v6/modules/27-kursseiten.css @ 1313

Last change on this file since 1313 was 1313, checked in by sven, 7 years ago

Physical-Computing: "Club der digitalen Denker"-Überschrift für Tablets und Laptops/Computerbildschirme so wie vorher gemacht, dafür für Mobile kein Hintergrund mehr (normale Überschrift).

File size: 4.2 KB
Line 
1/**
2 * Layout in diesem Modul wird auf den Seiten
3 *  - robotik-ferienkurs
4 *  - physical-computing
5 * verwendet. Das war bis Dez 2016 als pagestyle umgesetzt,
6 * da es aber jetzt mehrere Seiten sind, als Modul.
7 *
8 **/
9
10/*section.sidebar a.button.termine {
11        display: none !important;
12}*/
13
14/* Ein Logo ohne */
15body.kursseite h1 a {
16        background-image: url("/shared/img-v6/banner.png");
17}
18
19
20/* Neues Design ab Juni 2015, Experiment-Styles */
21
22body.kursseite section.sidebar a.termine {
23        /* zugehoerig zur normalen Homepage */
24        display: none;
25}
26
27/* teaser, von devzone kopiert */
28body.kursseite header.teaser {
29        position: relative;
30        overflow: hidden;
31        margin: 30px -40px 30px;
32}
33
34/* Wenn mehrere dieser Teaser auf einer Seite (eine verrueckte Sache, die Berti
35   im Sept 2017 ploetzlich wollte: Nur den ersten mit dem fancigen Margin aussatten) */
36body.kursseite header.teaser.seitenstart {
37        margin: -60px -40px 40px;
38}
39
40
41body.kursseite header.teaser h2,    /*Robotik*/
42body.kursseite #content header.teaser h2 {
43        border: none !important;
44        position: absolute;
45        bottom: 0; left: 0;
46        width: 80%;     
47        padding: 0.3em 10%;
48        margin: 0;
49        background-color: rgba(255,255,255,.6); 
50        color: #0006ff;     
51       
52       
53        font-size: 280%;    /* vorher 250%;*/
54        text-align: center;
55}
56
57body.kursseite header.teaser h2 span.subtext {
58        display: block;
59        font-size: 60%;
60        line-height: 100%;
61       
62}
63
64@media all and (min-width: 940px) {
65        body.kursseite header.teaser-nicht-mobil {
66                position: relative;
67                overflow: hidden;
68                margin: 30px -40px 30px;
69        }
70
71        body.kursseite header.teaser-nicht-mobil h2,    /*Robotik*/
72        body.kursseite #content header.teaser-nicht-mobil h2 {
73                border: none !important;
74                position: absolute;
75                bottom: 0; left: 0;
76                width: 80%;     
77                padding: 0.3em 10%;
78                margin: 0;
79                background-color: rgba(255,255,255,.6); 
80                color: #0006ff;     
81       
82       
83                font-size: 280%;    /* vorher 250%;*/
84                text-align: center;
85        }
86
87        /* Physical-Computing */
88        body.kursseite #content header.teaser-nicht-mobil.physical-computing h2 {
89                color: #0006ff;
90                background-color: rgba(224, 242, 254, .7);/*vorher .8*/
91        }
92
93        /* Zwischenueberschrift: "Club der digitalen Denker" */
94        body.kursseite #content header.teaser-nicht-mobil.digitale-denker h2 { 
95                font-size: 180%;
96                color: white;
97                background: linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 0%,rgba(0,0,0,1) 100%);
98        }
99
100        body.kursseite header.teaser-nicht-mobil.physical-computing::before {
101                /* css3 hack to get img inset box-shadow */
102                display:block;
103                content:'';
104                position:absolute;
105                width:100%;
106                height:100%;
107                box-shadow: 0 -20px 59px -4px rgba(0, 0, 0, 0.35) inset;
108        }
109}/* media min-width: mobile */
110@media all and (max-width: 940px) {
111        body.kursseite header.teaser-nicht-mobil img {
112                display: none;
113        }
114}
115
116
117/* sidebar */
118body.kursseite section.sidebar div.text-block,
119body.kursseite section.sidebar div.bild-block {
120        margin-top: 2em;
121        margin-bottom: 2em;
122}
123
124body.kursseite section.sidebar div.text-block a,
125body.kursseite section.sidebar div.bild-block a {
126        display: inline !important;
127}
128
129body.kursseite section.sidebar div.text-block {
130        margin: -15px -25px 15px;
131        padding: 35px 25px;
132}
133
134body.kursseite section.sidebar div.bild-block img {
135        width: 100%;
136        max-width: 300px; /* tablet */
137}
138
139body.kursseite section.sidebar div.bild-block .bildtext {
140        margin-top: .5em;
141}
142
143body.kursseite section.sidebar div.alertbox {
144        background-color: #edf0f2;
145        margin: -35px -25px 15px;
146}
147
148body.kursseite section.sidebar div.text-block li {
149        display: block;
150        margin: .4em 0;
151}
152
153/* Auf Wunsch von Heribert sollen Kursseiten-Floatbilder weniger Abstand
154   drumherum haben. Das liegt daran, weil sie so klein sind. Ist ein
155   ziemlich kruder Design-Fix */
156body.kursseite #content .left img,
157body.kursseite #content .right img {
158        margin-bottom: 1em; /* Standard in Bildboxen sind 2em */
159}
160
161/* Mobile Sidebar, nur auf senkrechtem Tablet... */
162@media all and (max-width: 940px) and (min-width: 600px) {
163        body.kursseite section.sidebar div.text-block,
164        body.kursseite section.sidebar div.bild-block {
165                margin: .5em;
166                padding: .5em;
167                width: 300px;
168                /*outline: 1px solid red;*/
169
170                display: inline-block;
171                vertical-align: top;
172        }
173}
174
175/* Wie auf Startseite */
176body.kursseite #content h3 {
177    border: medium none;
178    color: #1a5160;
179    font-family: inherit;
180    font-size: 113%;
181    font-weight: bold;
182}
183
Note: See TracBrowser for help on using the repository browser.
© 2008 - 2013 technikum29 • Sven Köppel • Some rights reserved
Powered by Trac
Expect where otherwise noted, content on this site is licensed under a Creative Commons 3.0 License