autotopia: Reduce main section css min-size
This commit is contained in:
parent
b9e9552243
commit
5390ce0d3c
|
|
@ -4,9 +4,18 @@
|
|||
<page pagetitle="Start" title="Autotopia">
|
||||
<input type="radio" id="lang-de" name="langselect" checked="" />
|
||||
<input type="radio" id="lang-en" name="langselect"/>
|
||||
<image class="vertical-header" title="Autotopia, Vertical Header" alt="Autotopia, Vertical Header">autotopia_vertical_header.svg</image>
|
||||
<div class="a-content">
|
||||
<div class="a-content-item">
|
||||
<div class="a-content vertical-header">
|
||||
<div class="a-item">
|
||||
<label lang="en" for="lang-de">Auf deutsch anzeigen</label>
|
||||
<label lang="de-DE" for="lang-en">Switch to english</label>
|
||||
</div>
|
||||
<image title="Autotopia, Vertical Header" alt="Autotopia, Vertical Header" class="vertical-header-image">
|
||||
autotopia_header_vertical.svg
|
||||
</image>
|
||||
</div>
|
||||
<div class="a-content a-main">
|
||||
<div class="a-item">
|
||||
<span class="header">call for participation</span>
|
||||
<p lang="en"> Beginning with the industrial revolution, and the massive impact it had far into the 20th century, we can see again and again how advances in automation provoke social upheaval. By means of technological progress, fueled by a globally connected economy, disruptive technologies impact our lives and communities more and more frequently.
|
||||
</p>
|
||||
<p lang="de-DE">
|
||||
|
|
@ -55,22 +64,18 @@ Lebensbereiche?</li>
|
|||
Egal ob nerdig oder allgemeinverständlich, künstlerisch oder wissenschaftlich... Wir würden uns sehr freuen wenn du einen Beitrag leisten könntest!
|
||||
</p>
|
||||
</div>
|
||||
<p class="a-content-item" lang="en">
|
||||
<h2>news</h2>
|
||||
<news-list prefix="autotopia-en" details="all"/>
|
||||
</p>
|
||||
<p class="a-content-item" lang="de-DE">
|
||||
<h2>neuigkeiten</h2>
|
||||
<news-list prefix="autotopia-de" details="all"/>
|
||||
</p>
|
||||
<div class="a-item" lang="en">
|
||||
<span class="header">news</span>
|
||||
<news-list prefix="autotopia-en" details="all"/>
|
||||
</div>
|
||||
<div class="a-item" lang="de-DE">
|
||||
<span class="header">neuigkeiten</span>
|
||||
<news-list prefix="autotopia-de" details="all"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="a-panel a-content">
|
||||
<p class="a-content-item">
|
||||
<label for="lang-de" lang="en">Auf deutsch anzeigen</label>
|
||||
<label for="lang-en" lang="de-DE">Switch to english</label>
|
||||
</p>
|
||||
<div class="a-content-item">
|
||||
<p>meta</p>
|
||||
<div class="a-item">
|
||||
<span class="header">meta</span>
|
||||
<p>
|
||||
<link href="https://wiki.c3d2.de/GesellschaftMachtTechnik">wiki</link>
|
||||
|
|
||||
|
|
@ -93,34 +98,75 @@ Lebensbereiche?</li>
|
|||
twitter: <link href="https://twitter.com/hashtag/AutotopiaDD?src=hash">#AutotopiaDD</link> via <link href="https://twitter.com/AutotopiaDD">@AutotopiaDD</link>
|
||||
</p>
|
||||
</div>
|
||||
<div class="a-content-item">
|
||||
<p lang="en">events</p>
|
||||
<p lang="de-DE">veranstaltungen</p>
|
||||
<div class="a-item">
|
||||
<span lang="en" class="header">events</span>
|
||||
<span lang="de-DE" class="header">veranstaltungen</span>
|
||||
<table>
|
||||
<tr lang="en"><th>when</th><th>what</th></tr>
|
||||
<tr lang="de-DE"><th>wann</th><th>was</th></tr>
|
||||
<tr lang="en"><td>01.05.</td><td>Movie screening and discussion</td></tr>
|
||||
<tr lang="de-DE"><td>01.05.</td><td>Filmvorführung und Diskussion</td></tr>
|
||||
<tr lang="en"><td>02.05</td><td>Interactive workshop <q>Critical making with the community</q></td></tr>
|
||||
<tr lang="de-DE"><td>02.05</td><td>Interaktiver Workshop <q>Critical making with the community</q></td></tr>
|
||||
<tr lang="en"><td>03.05.</td><td>Movie screening and discussion</td></tr>
|
||||
<tr lang="de-DE"><td>03.05.</td><td>Filmvorführung und Diskussion</td></tr>
|
||||
<tr lang="en"><td>04.05.</td><td>Talk <q>Analysis of historical economic crisis and automation as an internal contradiction of capitalism</q></td></tr>
|
||||
<tr lang="de-DE"><td>04.05.</td><td>Vortrag <q>Historische Krisenprozesse und Automatisierung als innerer Widerspruch des Kapitals</q></td></tr>
|
||||
<tr lang="en"><td>04.05.</td><td>Talk <q>On socioecologic collapse, zombie-capitalism and transitions towards a <q>society of liberated lifetime</q>. Automation and digitization as factors of global crisis economy and prerequisites for social appropriation in post-capitalistic societies.</q></td></tr>
|
||||
<tr lang="de-DE"><td>04.05.</td><td>Vortrag <q>Zwischen sozialökologischem Kollaps, Zombiekapitalismus und Übergängen zur 'Gesellschaft der befreiten Zeit'? Automatisierung und Digitalisierung als Faktoren globaler Kriseneskalationen und Möglichkeitsbedingungen postkapitalistischer Vergesellschaftung.</q></td></tr>
|
||||
<tr lang="en"><td>04.05.</td><td>Panel/Fishbowl discussion on <q>Socio-economic consequences and agency in the age of automation</q></td></tr>
|
||||
<tr lang="de-DE"><td>04.05.</td><td>Panel/Fishbowl-Diskussion zu <q>Sozio-ökonomische Konsequenzen und Handlungsmöglichkeiten des Automatisierungszeitalters</q></td></tr>
|
||||
<tr lang="en"><td>05.05</td><td>Lightningtalks</td></tr>
|
||||
<tr lang="de-DE"><td>05.05</td><td>Lightningtalks</td></tr>
|
||||
<tr lang="en"><td>09.05</td><td>Talk/discussion on Predictive Policing</td></tr>
|
||||
<tr lang="de-DE"><td>09.05</td><td>Vortrag-/Diskussion zu <q>präventiver Polizeiarbeit</q></td></tr>
|
||||
<tr lang="en"><td>09.05</td><td>Book reading and discussion</td></tr>
|
||||
<tr lang="de-DE"><td>09.05</td><td>Lese- und Diskussionsabend</td></tr>
|
||||
<tr lang="en"><td>11.05.</td><td>Talk/discussion on <q>Robot ethics</q></td></tr>
|
||||
<tr lang="de-DE"><td>11.05.</td><td>Vortrag/Diskussion zu <q>Roboterethik</q></td></tr>
|
||||
<tr lang="en"><td>12.05.</td><td>Talk/discussion on <q>Digital vs. appropriate education: discovery of technology</q></td></tr>
|
||||
<tr lang="de-DE"><td>12.05.</td><td>Vortrag/Diskussion zu <q>Digitale vs. zeitgemäße Bildung: die Entdeckung der Technik</q></td></tr>
|
||||
<tr>
|
||||
<td>01.05</td>
|
||||
<td></td>
|
||||
<td lang="en">Movie screening and discussion</td>
|
||||
<td lang="de-DE">Filmvorführung und Diskussion</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>02.05</td>
|
||||
<td>Regina M. Sipos</td>
|
||||
<td lang="en">Interactive workshop <q>Critical making with the community</q></td>
|
||||
<td lang="de-DE">Interaktiver Workshop <q>Critical making with the community</q></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>03.05</td>
|
||||
<td></td>
|
||||
<td lang="en">Movie screening and discussion</td>
|
||||
<td lang="de-DE">Filmvorführung und Diskussion</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>04.05</td>
|
||||
<td>Tomasz Konicz</td>
|
||||
<td lang="en">Talk <q>Analysis of historical economic crisis and automation as an internal contradiction of capitalism</q></td>
|
||||
<td lang="de-DE">Vortrag <q>Historische Krisenprozesse und Automatisierung als innerer Widerspruch des Kapitals</q></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>04.05</td>
|
||||
<td>Tino Heim</td>
|
||||
<td lang="en">Talk <q>On socioecologic collapse, zombie-capitalism and transitions towards a <q>society of liberated lifetime</q>. Automation and digitization as factors of global crisis economy and prerequisites for social appropriation in post-capitalistic societies.</q></td>
|
||||
<td lang="de-DE">Vortrag <q>Zwischen sozialökologischem Kollaps, Zombiekapitalismus und Übergängen zur 'Gesellschaft der befreiten Zeit'? Automatisierung und Digitalisierung als Faktoren globaler Kriseneskalationen und Möglichkeitsbedingungen postkapitalistischer Vergesellschaftung.</q></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>04.05</td>
|
||||
<td>Tomasz Konicz, Tino Heim</td>
|
||||
<td lang="en">Panel/Fishbowl discussion on <q>Socio-economic consequences and agency in the age of automation</q></td>
|
||||
<td lang="de-DE">Panel/Fishbowl-Diskussion zu <q>Sozio-ökonomische Konsequenzen und Handlungsmöglichkeiten des Automatisierungszeitalters</q></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>05.05</td>
|
||||
<td></td>
|
||||
<td>Lightningtalks</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>09.05</td>
|
||||
<td>Ulrike Heitmüller</td>
|
||||
<td lang="en">Talk/discussion on Predictive Policing</td>
|
||||
<td lang="de-DE">Vortrag-/Diskussion zu <q>präventiver Polizeiarbeit</q></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>09.05</td>
|
||||
<td></td>
|
||||
<td lang="en">Book reading and discussion</td>
|
||||
<td lang="de-DE">Lese- und Diskussionsabend</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>11.05</td>
|
||||
<td>Henning Lübbecke</td>
|
||||
<td lang="en">Talk/discussion on <q>Robot ethics</q></td>
|
||||
<td lang="de-DE">Vortrag/Diskussion zu <q>Roboterethik</q></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>12.05</td>
|
||||
<td>Maximilian Voigt</td>
|
||||
<td lang="en">Talk/discussion on <q>Digital vs. appropriate education: discovery of technology</q></td>
|
||||
<td lang="de-DE">Vortrag/Diskussion zu <q>Digitale vs. zeitgemäße Bildung: die Entdeckung der Technik</q></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-family: "URW Gothic l";
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
*{
|
||||
transition:all 2s ease-out;
|
||||
-webkit-transition:all 2s ease-out;
|
||||
-moz-transition:all 2s ease-out;
|
||||
-o-transition:all 2s ease-out;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -15,7 +16,6 @@ body {
|
|||
background-size: 50%;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
/* margin: 0.5em auto;*/
|
||||
/* max-width: 560px;*/
|
||||
|
|
@ -26,68 +26,90 @@ body {
|
|||
/* position: relative;*/
|
||||
}
|
||||
|
||||
article {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.vertical-header{
|
||||
width:20%;
|
||||
min-width:150px;
|
||||
float:left;
|
||||
flex: 1 1 20%;
|
||||
}
|
||||
|
||||
|
||||
.vertical-header-image{
|
||||
width:100%;
|
||||
min-width:300px;
|
||||
}
|
||||
|
||||
.a-content{
|
||||
width:40%;
|
||||
min-width:20em;
|
||||
max-width:90em;
|
||||
float:left;
|
||||
border-width: 2px;
|
||||
border-left-style:solid;
|
||||
line-height: 150%;
|
||||
border-width: 2px;
|
||||
border-bottom-style:solid;
|
||||
padding-bottom: 2em;
|
||||
flex-direction:column;
|
||||
}
|
||||
|
||||
.a-main{
|
||||
flex: 1 1 40%;
|
||||
min-width:20em;
|
||||
max-width:90em;
|
||||
border-width: 2px;
|
||||
border-left-style:solid;
|
||||
line-height: 150%;
|
||||
}
|
||||
.a-main p,ul{
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
.a-panel{
|
||||
width:20%;
|
||||
min-width:25em;
|
||||
max-width:35em;
|
||||
padding-left: 4em;
|
||||
font-size: medium;
|
||||
border-left-style:none;
|
||||
flex: 1 1 35%;
|
||||
min-width:25em;
|
||||
}
|
||||
|
||||
.a-content-item{
|
||||
min-height: 1rlh;
|
||||
border-width: 2px;
|
||||
border-right-style:solid;
|
||||
border-bottom-style:solid;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
background-color: rgba(240,240,250,0.2);
|
||||
text-align: justify;
|
||||
.a-item{
|
||||
border-width: 2px;
|
||||
border-right-style:solid;
|
||||
border-bottom-style:solid;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
background-color: rgba(240,240,250,0.2);
|
||||
text-align: justify;
|
||||
margin-right: 2em;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
.a-item > .header{
|
||||
margin-top: 1em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Language selection */
|
||||
|
||||
input[name=langselect] {
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
left: -9999px;
|
||||
/* For mobile, it's typically better to position checkbox on top of clickable
|
||||
area and turn opacity to 0 instead. */
|
||||
position: absolute;
|
||||
top: -9999px;
|
||||
left: -9999px;
|
||||
/* For mobile, it's typically better to position checkbox on top of clickable
|
||||
area and turn opacity to 0 instead. */
|
||||
}
|
||||
|
||||
label {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
font-size:larger;
|
||||
}
|
||||
input[id=lang-en]:checked ~ .a-content :lang(de-DE) {
|
||||
visibility: hidden;
|
||||
display:none;
|
||||
visibility: hidden;
|
||||
display:none;
|
||||
}
|
||||
input[id=lang-de]:checked ~ .a-content :lang(en) {
|
||||
visibility: hidden;
|
||||
display:none;
|
||||
visibility: hidden;
|
||||
display:none;
|
||||
}
|
||||
|
||||
/* Other tags */
|
||||
|
||||
tr{
|
||||
flex-direction: column; /*!!!does not work*/
|
||||
}
|
||||
td {
|
||||
vertical-align: top;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
nav ul, nav ul li {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 181 KiB After Width: | Height: | Size: 181 KiB |
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
|
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 37 KiB |
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 30 KiB |
Loading…
Reference in New Issue