lepisi-pengumuman/App/Views/base.html

233 lines
5.7 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;
}
.flex>h1, .flex>span {
padding: 0;
}
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: normal;
line-height: 1em;
padding-bottom: .1em;
text-align: center;
}
#slidr-div p {
margin: 0;
text-align: center;
line-height: 1;
}
@media screen and (orientation: landscape) {
#slidr-div p {
font-size: 8vw;
}
}
@media screen and (orientation: portrait) {
#slidr-div p {
font-size: 10vh;
}
}
.title {
font-family: 'Lobster', cursive;
font-size: x-large;
}
nav .menu>.navy {
color: #000;
background-color: transparent;
margin-right: 2.5em;
}
nav .menu>.navy:hover {
background-color: rgba(17, 17, 17, .15);
}
.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;
padding-left: 0;
padding-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);
}
.fitty > p {
margin: 0;
}
nav {
max-width: 100vw;
}
.pengumuman {
width: 100%;
}
#info span {
width: 98%;
padding: .7em 0;
margin: 0;
}
nav a {
color: inherit;
}
.filter > div {
text-align: center;
}
.rd-month button {
color: #000;
}
.rd-container {
z-index: 5;
}
h1 {
padding: .2em 0;
}
.cp {
width: 100%;
font-size: small;
text-align: center;
position: fixed;
bottom: 0;
padding: .3em;
}
</style>
</head>
<body>
<nav>
<span class="brand">
<a href="/" class="title">Live Info</a>
</span>
{% block nav %}{% endblock %}
</nav>
<script src="/js/rome.js"></script>
<script src="/js/slidr.min.js"></script>
<script src="/js/simplemde.min.js"></script>
<script src="/js/mithril.js"></script>
<script src="/js/marked.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);
fadeTarget.remove();
} else {
fadeTarget.style.opacity -= 0.1;
}
}, 50);
}
</script>
</body>
</html>