167 lines
4.2 KiB
HTML
167 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="/css/font-awesome/css/font-awesome.min.css">
|
|
<link rel="stylesheet" href="/css/picnic.min.css">
|
|
<link rel="stylesheet" href="/css/rome.css">
|
|
<link rel="stylesheet" href="/css/simplemde.min.css">
|
|
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
|
|
<title>{% block title %}{% endblock %}</title>
|
|
|
|
<style>
|
|
.documentation > section {
|
|
background: #fff;
|
|
text-align: left;
|
|
width: 90%;
|
|
max-width: 960px;
|
|
margin: 0 auto;
|
|
padding: 80px 0 0;
|
|
}
|
|
|
|
.flex>* {
|
|
padding-right: .6em;
|
|
}
|
|
|
|
nav.transparent {
|
|
box-shadow: none;
|
|
background: none;
|
|
}
|
|
|
|
.pseudo.button {
|
|
background: transparent;
|
|
color: #111;
|
|
}
|
|
|
|
.shyButton {
|
|
font-size: .75em;
|
|
}
|
|
|
|
.shyFont {
|
|
font-size: .65em;
|
|
}
|
|
|
|
.top {
|
|
z-index: 10001;
|
|
}
|
|
|
|
.fl {
|
|
float: left;
|
|
}
|
|
|
|
.fr {
|
|
float: right;
|
|
}
|
|
|
|
td, th {
|
|
padding: .3em .45em .3em .6em;
|
|
}
|
|
|
|
.fitty {
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
line-height: 1em;
|
|
padding-bottom: .1em;
|
|
text-align: center;
|
|
}
|
|
|
|
.title {
|
|
font-family: 'Lobster', cursive;
|
|
font-size: x-large;
|
|
}
|
|
|
|
nav .menu>.navy {
|
|
color: #000;
|
|
margin-right: 2.5em;
|
|
}
|
|
|
|
.navy:hover, .title:hover {
|
|
color: rgba(17, 17, 17, .3);
|
|
}
|
|
|
|
.hidden-hover {
|
|
opacity: 0;
|
|
}
|
|
|
|
.hidden-hover:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.filter a {
|
|
text-align: center;
|
|
}
|
|
|
|
.card footer {
|
|
position: absolute;
|
|
bottom: 0;
|
|
}
|
|
|
|
.card-wrapper {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.box {
|
|
padding: 1em;
|
|
background-color: rgba(17, 17, 17, .1);
|
|
border: none;
|
|
height: 17em;
|
|
width: 17em;
|
|
margin: .6em auto;
|
|
}
|
|
|
|
.new i {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin-right: -50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.box:hover {
|
|
background-color: rgba(17, 17, 17, .05);
|
|
}
|
|
|
|
.card footer {
|
|
padding-left: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.fitty > p {
|
|
margin: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav>
|
|
<a href="/" class="brand">
|
|
<span class="title">Live Info</span>
|
|
</a>
|
|
{% block nav %}{% endblock %}
|
|
</nav>
|
|
<script src="/js/rome.js"></script>
|
|
<script src="/js/fitty.min.js"></script>
|
|
<script src="/js/slidr.min.js"></script>
|
|
<script src="/js/simplemde.min.js"></script>
|
|
{% block body %}
|
|
{% endblock %}
|
|
|
|
<script>
|
|
function fadeOutEffect() {
|
|
var fadeTarget = document.getElementById("info");
|
|
var fadeEffect = setInterval(function () {
|
|
if (!fadeTarget.style.opacity) {
|
|
fadeTarget.style.opacity = 1;
|
|
}
|
|
if (fadeTarget.style.opacity < 0.1) {
|
|
clearInterval(fadeEffect);
|
|
} else {
|
|
fadeTarget.style.opacity -= 0.1;
|
|
}
|
|
}, 50);
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|