Astro
b1d15226f3
[02:13:32] <john> kann man das hinbekommen, das im fahrplan um die titel der veranstaltungen, nicht aber um die speaker ein <h4> </h4> kommt? [02:13:50] <john> dafür dann im css die normalschrift auf nicht fett... [02:13:55] <john> das wär cool [02:14:16] <john> und besser für blinde ...
263 lines
4.7 KiB
CSS
263 lines
4.7 KiB
CSS
|
|
/* placement */
|
|
body {
|
|
width: 100%;
|
|
}
|
|
|
|
#device {
|
|
width: 800px;
|
|
padding: 5pt;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
#screen {
|
|
margin-top: 1em;
|
|
margin-bottom: 45pt;
|
|
}
|
|
#content, #device-2 {
|
|
padding: 0.5em;
|
|
}
|
|
/**/
|
|
|
|
/* borders */
|
|
#device {
|
|
border: 0pt solid #CCC;
|
|
border-radius: 3.5em;
|
|
}
|
|
#device-2 {
|
|
border: 10pt solid black;
|
|
border-radius: 3em;
|
|
}
|
|
#screen {
|
|
border: 2pt solid black;
|
|
}
|
|
/**/
|
|
|
|
/* font */
|
|
* {
|
|
font-family: sans-serif;
|
|
}
|
|
#head {
|
|
text-align: center;
|
|
}
|
|
#head h1, #head h2 {
|
|
margin: 0px;
|
|
}
|
|
/**/
|
|
|
|
/* menu */
|
|
#menu {
|
|
display: table;
|
|
width: 100%;
|
|
}
|
|
#menu > * {
|
|
display: table-cell;
|
|
padding: 5pt;
|
|
vertical-align: top;
|
|
width: 15%;
|
|
}
|
|
#menu * {
|
|
text-align: center;
|
|
font-size: 87%;
|
|
}
|
|
#battery, #c3d2 { width: auto; }
|
|
#c3d2 { text-align: right; }
|
|
/**/
|
|
|
|
/* polish */
|
|
#device {
|
|
background: #bbb;
|
|
box-shadow: 0em -0.1em 0.4em #CCC;
|
|
}
|
|
#device-2 {
|
|
/* bark!! */
|
|
background: #222;
|
|
background: -moz-linear-gradient(
|
|
200deg,
|
|
rgb(174, 188, 191) 0,
|
|
rgb(110, 119, 116) 230pt,
|
|
rgb(26, 30, 26) 231pt,
|
|
rgb(10, 8, 9) 100%); /* FF3.6+ */
|
|
background: -webkit-gradient(
|
|
linear,
|
|
right top,
|
|
left bottom,
|
|
color-stop(0, rgb(174, 188, 191)),
|
|
color-stop(230pt, rgb(110, 119, 116)),
|
|
color-stop(231pt, rgb(26, 30, 26)),
|
|
color-stop(100%, rgb(10, 8, 9))); /* Chrome,Safari4+ */
|
|
background: -webkit-linear-gradient(
|
|
200deg,
|
|
rgb(174, 188, 191) 0,
|
|
rgb(110, 119, 116) 230pt,
|
|
rgb(26, 30, 26) 231pt,
|
|
rgb(10, 8, 9) 100%); /* Chrome10+,Safari5.1+ */
|
|
background: -o-linear-gradient(
|
|
200deg,
|
|
rgb(174, 188, 191) 0,
|
|
rgb(110, 119, 116) 230pt,
|
|
rgb(26, 30, 26) 231pt,
|
|
rgb(10, 8, 9) 100%); /* Opera 11.10+ */
|
|
background: -ms-linear-gradient(
|
|
200deg,
|
|
rgb(174, 188, 191) 0,
|
|
rgb(110, 119, 116) 230pt,
|
|
rgb(26, 30, 26) 231pt,
|
|
rgb(10, 8, 9) 100%); /* IE10+ */
|
|
background: linear-gradient(
|
|
200deg,
|
|
rgb(174, 188, 191) 0,
|
|
rgb(110, 119, 116) 230pt,
|
|
rgb(26, 30, 26) 231pt,
|
|
rgb(10, 8, 9) 100%); /* W3C */
|
|
}
|
|
#screen { background: white; }
|
|
#screen-top { min-height: 1000px; }
|
|
.date {
|
|
float: right;
|
|
color: #999;
|
|
font-size: 80%;
|
|
}
|
|
#content p { text-align: justify; }
|
|
a {
|
|
text-decoration: none;
|
|
color: #335;
|
|
font-weight: bold;
|
|
}
|
|
#head * {
|
|
color: #CCC;
|
|
font-weight: 300;
|
|
}
|
|
/**/
|
|
|
|
/* footer */
|
|
#footer {
|
|
border-top: 1px solid black;
|
|
text-align: center;
|
|
margin: 0 auto;
|
|
padding: 0.8em 0;
|
|
font-size: 85%;
|
|
}
|
|
#oldds {
|
|
padding-left: 0px;
|
|
margin: 0;
|
|
}
|
|
#oldds li {
|
|
list-style: none;
|
|
display: inline;
|
|
margin: 0 0.5em;
|
|
}
|
|
|
|
/* debug */
|
|
nothing { display: none; }
|
|
nothing { border: 1px solid red; }
|
|
|
|
/* videos */
|
|
section.resource {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
border: 2pt solid black;
|
|
border-radius: 8pt;
|
|
padding: 10pt;
|
|
margin-bottom: 5pt;
|
|
display: inline-block;
|
|
max-width: 336px;
|
|
text-align: center;
|
|
}
|
|
section.resource > h4 {
|
|
margin: 0pt 1em;
|
|
text-align: center;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
min-height: 3em;
|
|
font: 120%/1.5;
|
|
}
|
|
section.resource > .preview {
|
|
position: relative; /* to place .play */
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
section.resource > .preview > img,
|
|
section.resource video {
|
|
width: 100%;
|
|
}
|
|
section.resource > .preview > p.play {
|
|
position: absolute;
|
|
left: 40%;
|
|
top: 30%;
|
|
margin: 0;
|
|
padding: 0.42em 0.5em 0.58em;
|
|
color: white;
|
|
font-size: 300%;
|
|
cursor: pointer;
|
|
line-height: 0.5em;
|
|
width: 0.5em;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
border-radius: 100%;
|
|
}
|
|
section.resource > ul.links {
|
|
list-style-type: none;
|
|
margin: 0.2em 0;
|
|
padding: 0;
|
|
text-align: center;
|
|
font-size: 80%;
|
|
}
|
|
section.resource > ul.links > li {
|
|
display: inline-block;
|
|
margin: 0 1em;
|
|
}
|
|
section.resource > ul.links .size {
|
|
margin: 0 0 0 0.5em;
|
|
font-size: 80%;
|
|
color: #333;
|
|
}
|
|
|
|
/* info */
|
|
#info {
|
|
position: absolute;
|
|
color: #CCC;
|
|
font-weight: 300;
|
|
padding-left: 0;
|
|
list-style-type: none;
|
|
margin-left: 7pt;
|
|
margin-top: 5pt;
|
|
}
|
|
|
|
/* Fahrplan */
|
|
|
|
.scheduletitle {
|
|
text-align: center;
|
|
color: #333;
|
|
}
|
|
.schedulehead {
|
|
color: #333;
|
|
}
|
|
|
|
.schedule .timeslot {
|
|
font-size: 80%;
|
|
color: #999;
|
|
}
|
|
table.schedule {
|
|
border-spacing: 4px 2px;
|
|
}
|
|
.schedule td {
|
|
margin: 2px 4px;
|
|
}
|
|
.schedule td.event {
|
|
border: 2pt solid black;
|
|
border-radius: 8pt;
|
|
padding: 0.5em 1em;
|
|
}
|
|
.schedule h4 {
|
|
margin: 0;
|
|
}
|
|
.schedule ul {
|
|
padding: 0;
|
|
margin: 1em 0;
|
|
list-style-type: none;
|
|
font-size: 80%;
|
|
}
|
|
.schedule ul li {
|
|
display: inline-block;
|
|
margin-right: 2em;
|
|
} |