mirror of
https://github.com/voc/streaming-website
synced 2024-09-20 06:22:03 +00:00
more startpage styling
This commit is contained in:
MaZderMind
parent
96fae0eb5b
commit
c75a5565ef
7 changed files with 77 additions and 31 deletions
|
|
@ -5533,32 +5533,49 @@ a.inverted {
|
|||
overflow: hidden;
|
||||
margin-bottom: 2em; }
|
||||
.rooms .room-group h2 {
|
||||
margin: 0.6em 1.2em; }
|
||||
margin: 0.6em 1.2em 0.3em; }
|
||||
.rooms .room-group ul {
|
||||
list-style-type: none;
|
||||
padding: 0 0 5px 0;
|
||||
margin: 0 -5px; }
|
||||
.rooms .room-group li {
|
||||
padding: 5px !important; }
|
||||
.rooms .room-group li .title {
|
||||
font-size: 1.75em;
|
||||
font-weight: bold;
|
||||
padding-bottom: 20px; }
|
||||
.rooms .room-group li a {
|
||||
background-color: #333333;
|
||||
color: white;
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 2em;
|
||||
text-align: center; }
|
||||
height: 120px;
|
||||
padding: .5em;
|
||||
text-align: center;
|
||||
font-size: 2.75em; }
|
||||
.rooms .room-group li a:hover {
|
||||
background-color: #1a1a1a;
|
||||
text-decoration: none; }
|
||||
.rooms .program-teaser {
|
||||
color: #eeeeee;
|
||||
text-align: center; }
|
||||
.rooms .program-teaser .hidden {
|
||||
visibility: hidden; }
|
||||
.rooms .room-group li a .teaser {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0; }
|
||||
.rooms .room-group li a .title {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 60px;
|
||||
font-weight: bold;
|
||||
padding-bottom: 20px; }
|
||||
.rooms .room-group li a .program-teaser {
|
||||
color: #eeeeee;
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
left: 230px;
|
||||
font-size: 14px; }
|
||||
.rooms .room-group li a .program-teaser strong {
|
||||
display: block; }
|
||||
.rooms .room-group li a .program-teaser .next-talk {
|
||||
display: block;
|
||||
margin-top: 10px; }
|
||||
.rooms .room-group li a .program-teaser .hidden {
|
||||
visibility: hidden; }
|
||||
|
||||
.room.lq .player-wrap {
|
||||
padding: 32px 0; }
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -328,7 +328,7 @@ a.inverted {
|
|||
margin-bottom: 2em;
|
||||
|
||||
h2 {
|
||||
margin: 0.6em 1.2em;
|
||||
margin: 0.6em 1.2em 0.3em;
|
||||
}
|
||||
|
||||
ul {
|
||||
|
|
@ -340,35 +340,57 @@ a.inverted {
|
|||
li {
|
||||
padding: 5px !important;
|
||||
|
||||
.title {
|
||||
font-size: 1.75em;
|
||||
font-weight: bold;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: $gray-dark;
|
||||
color: white;
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 2em;
|
||||
height: 120px;
|
||||
padding: .5em;
|
||||
text-align: center;
|
||||
|
||||
font-size: 2.75em;
|
||||
|
||||
&:hover {
|
||||
background-color: #1a1a1a;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.teaser {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 60px;
|
||||
|
||||
font-weight: bold;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.program-teaser {
|
||||
color: $gray-lighter;
|
||||
text-align: left;
|
||||
position: absolute;
|
||||
left: 230px;
|
||||
font-size: 14px;
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
}
|
||||
.next-talk {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.hidden { visibility: hidden; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.program-teaser {
|
||||
color: $gray-lighter;
|
||||
text-align: center;
|
||||
|
||||
.hidden { visibility: hidden; }
|
||||
}
|
||||
}
|
||||
|
||||
.room {
|
||||
|
|
|
|||
2
assets/img/rooms/.gitignore
vendored
Normal file
2
assets/img/rooms/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
*.png
|
||||
|
||||
BIN
assets/img/rooms/placeholder.png
Normal file
BIN
assets/img/rooms/placeholder.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 636 B |
|
|
@ -359,6 +359,7 @@ $(function() {
|
|||
|
||||
});
|
||||
|
||||
var s = new Date(nextTalk.start*1000);
|
||||
$lecture.find('.'+room)
|
||||
.find('.current-talk')
|
||||
.removeClass('hidden')
|
||||
|
|
@ -368,6 +369,9 @@ $(function() {
|
|||
.end()
|
||||
.find('.next-talk')
|
||||
.toggleClass('hidden', !nextTalk || nextTalk.special || (nextTalk.start - now > 60*60))
|
||||
.find('strong')
|
||||
.text(s.getHours()+':'+(s.getMinutes() < 10 ? '0' : '')+s.getMinutes())
|
||||
.end()
|
||||
.find('.t')
|
||||
.text(nextTalk ? nextTalk.title : '')
|
||||
.end()
|
||||
|
|
|
|||
|
|
@ -8,14 +8,15 @@
|
|||
|
||||
<ul class="row">
|
||||
<? foreach(array('saal1', 'saal2', 'saalg', 'saal6') as $room): ?>
|
||||
<li class="<?=h($room)?> col-sm-6">
|
||||
<li class="<?=h($room)?> col-md-6 col-sm-12">
|
||||
<a href="<?=h(link_room($room))?>">
|
||||
<img class="teaser" src="assets/img/rooms/<?=h($room)?>.png" alt="" width="213" height="120" />
|
||||
<div class="title"><?=h($rooms[$room])?></div>
|
||||
|
||||
<div class="program-teaser">
|
||||
|
||||
<span class="current-talk hidden">
|
||||
<strong>Current Talk:</strong>
|
||||
<strong>Now:</strong>
|
||||
<span class="t">none</span>
|
||||
</span>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue