templates/pys%C3%A4kki.html

<html>
<head>
	<link rel="icon" type="image/png" href="/static/favicon.png" />
	<meta charset='UTF-8' />

	<style>
	body
	{
		font-family: "Oxygen-Sans", "Latin Modern Sans", Tahoma, FreeSans, Arial, sans-serif;
		background: white;
		color: black;
		margin: 0;
		padding: 0;
		font-size: 24pt;
	}
	a
	{
		color: inherit;
		text-decoration: none;
	}
	a:hover
	{
		text-decoration: underline;
	}
	h1
	{
		padding-top: 10pt;
		padding-bottom: 10pt;
		text-align: center;
		background: #dc9e00;
		background: linear-gradient(to bottom, #dc9e00 0%,#eaaf19 49%,#dc9e00 92%,#906700 100%);
		color: white;
	}
	#aikataulu
	{
		width:100%;
		margin: auto;
	}
	
	.sarake-aika, .sarake-linja
	{
		text-align: center;
	}
	
	.sarake-määränpää
	{
		text-align: left;
	}
	
	td, th, body
	{
		font-size: 24pt;
	}
	
	.sarake-aika, .sarake-linja
	{
		width: 25%;
	}
	
	h1
	{
		font-variant: small-caps;
	}
	
	.sarake-määränpää a
	{
		white-space: pre-wrap;
	}
	
	#aikataulu tr td
	{
		padding-bottom: 10px;
		padding-top: 10px;
		padding-left: 0px;
		padding-right: 0px;
		margin: 0px;
		border-top: 1px solid gray;
	}
	
	#aikataulu tr:nth-child(even) {
		background-color: #F8F8F8;
	}
	
	#aikataulu tr.yö td
	{
		/*
		background-color: #d8d8ff;
		color: #008;
		border-bottom: 1px solid #00A;
		*/
		background-color: #004;
		color: #bef;
		border-top: 1px solid #008;
	}
	
	#aikataulu tr.yö:nth-child(even) td
	{
		background-color: #003;
	}
	
	#pysäkki-info
	{
		text-align: center
	}
	
	.pysäkki-sijainti
	{
		font-size: smaller;
	}
	
	.sarake-määränpää
	{
		text-align: center;
	}
	</style>
	<title>{{viite}} {{nimi}}</title>
</head>
<body>
	<h1>{{viite}} {{nimi}}</h1>
	<p id="pysäkki-info">
	{{alue or ""}}
	—
	<a class="pysäkki-sijainti" href="{{linkki_karttaan}}" target="_blank">📌 ({{sijainti}})</a>
	</p>
	<table id='aikataulu' cellspacing="0">
		<tr>
			<th class='sarake-aika'>Aika</th>
			<th class='sarake-linja'>Linja</th>
			<th class='sarake-määränpää'>Määränpää</th>
		</tr>
		{% for rivi in aikataulu %}
		<tr class="{% if rivi['yö'] %} yö {% endif %}">
			<td class='sarake-aika'>{{rivi['aika']}}</td>
			<td class='sarake-linja linja'>
				<a href="/ajovuoro/{{rivi['ajovuoro']}}">{{rivi['linja']}}</a>
			</td>
			<td class='sarake-määränpää'>
				<a href="/ajovuoro/{{rivi['ajovuoro']}}">{{rivi['kyltti']}}</a>
			</td>
		</tr>
		{% endfor %}
	</table>
</body>
</html>