Improve the templates.

This commit is contained in:
Niels G. W. Serup 2016-08-25 01:26:17 +02:00
parent 398b84cd75
commit 207b0e5a18
4 changed files with 23 additions and 13 deletions

View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>media.metanohi.name</title> <title>media.metanohi.name</title>
<link href="style.css" type="text/css" rel="stylesheet"> <link href="{style_url}" type="text/css" rel="stylesheet">
</head> </head>
<body> <body>
<div id="body-behind"><div></div></div> <div id="body-behind"><div></div></div>

View File

@ -1,4 +1,6 @@
<div class="video-section"> <div class="video-section">
<h2><a href="{link}">{title}</a></h2> <h2><a href="{link}">{title}</a></h2>
<div>
<a href="{link}"><img src="{thumbnail}" alt="Thumbnail"></a> <a href="{link}"><img src="{thumbnail}" alt="Thumbnail"></a>
</div> </div>
</div>

View File

@ -1,4 +1,7 @@
<div class="video-showing"> <div class="video-showing">
<h2>{title}</h2> <h2>{title}</h2>
<h3>{year}</h3>
<p>{description}</p>
{video} {video}
</div> </div>

View File

@ -5,21 +5,21 @@ body {
} }
#body { #body {
width: 40em; width: 600px;
padding: 0.5em; padding: 20px;
margin: 0 auto; margin: 0 auto;
} }
/* BEGIN HACK */ /* BEGIN HACK */
#body-behind { #body-behind {
margin: 0 auto; margin: 0 auto;
width: calc(41em + (100% - 41em) / 3); width: calc(640px + (100% - 640px) / 3);
} }
#body-behind > div { #body-behind > div {
position: fixed; position: fixed;
top: 0; top: 0;
width: calc(41em + (100% - 41em) / 3); width: calc(640px + (100% - 640px) / 3);
height: 100%; height: 100%;
z-index: -1; z-index: -1;
transform: skewX(-2deg); transform: skewX(-2deg);
@ -30,7 +30,7 @@ body {
header { header {
background-color: #FF00D3; background-color: #FF00D3;
padding: 0.5em; padding: 20px;
} }
header a, header a:visited { header a, header a:visited {
@ -40,17 +40,22 @@ header a, header a:visited {
.video-section { .video-section {
background-color: #2EE2FF; background-color: #2EE2FF;
margin-top: 1em; margin-top: 20px;
padding: 0.5em; padding: 20px;
}
.video-section > div {
text-align: center;
height: [thumbnail_height]px
} }
.video-showing { .video-showing {
background-color: #FF8C00; background-color: #FF8C00;
margin-top: 1em; margin-top: 20px;
padding: 0.5em; padding: 20px;
position: absolute; position: absolute;
left: calc((100% - 58em) / 2); left: calc((100% - 800px) / 2);
width: 57em; width: 760px;
} }
p.signature { p.signature {