Jonatan Nilsson
6565409e52
nfp_moe: Complete re-thinking of all loading. Smarter loading and lighter site. Better user experience among other things.
167 lines
19 KiB
HTML
167 lines
19 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>{{=headerTitle}}</title>
|
|
<base href="/">
|
|
<meta name="description" content="{{=headerDescription}}">
|
|
<meta name="twitter:card" value="summary">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:url" content="{{=headerUrl}}" />
|
|
<meta property="og:image" content="{{=headerImage}}" />
|
|
<meta property="og:description" content="{{=headerDescription}}" />
|
|
<meta property="og:title" content="{{=headerTitle}}" />
|
|
{{? headerImage === '/assets/img/heart.jpg' }}
|
|
<meta id="ogimagewidth" property="og:image:width" content="400" />
|
|
<meta id="ogimageheight" property="og:image:height" content="500" />
|
|
{{? }}
|
|
|
|
<link rel="icon" type="image/png" href="/assets/img/favicon.png">
|
|
<link rel="preconnect" href="https://cdn.nfp.is" />
|
|
<style>
|
|
:root{--content-max-width:1280px;--primary-darker-bg:#002f6c;--primary-darker-fg:#fff;--primary-darker-fg-light:#999;--primary-darker-link:#ffad42;--primary-bg:#3d77c7;--primary-fg:#fff;--primary-fg-light:#999;--primary-link:#f57c00;--bg:#fff;--bg-content-alt:#eee;--color:#000;--light:#757575;--link:#bb4d00;--title-bg:#f57c00;--title-fg:#000;--seperator:#ccc;--content-bg:#fff;--content-border:0 solid transparent;--alt-bg:#ccc;--alt-inside-bg:#fff;--alt-inside-border:1px solid #555;--alt-color:#555;--footer-bg:#ccc;--footer-color:#000;--footer-seperator:#fff;--footer-link:#8F3C00;--button-border:1px solid #f57c00;--button-bg:#ffad42;--button-fg:#000;--error-bg:red;--error-fg:white}.nightmode{--content-max-width:1280px;--primary-darker-bg:#002f6c;--primary-darker-fg:#fff;--primary-darker-fg-light:#999;--primary-darker-link:#ffad42;--primary-bg:#28518b;--primary-fg:#fff;--primary-fg-light:#999;--primary-link:#f57c00;--bg:black;--bg-content-alt:#333;--color:#d7dadc;--light:#bbb;--link:#e05e00;--title-bg:#e05e00;--title-fg:#000;--title-sublink:#27159C;--seperator:#ccc;--content-bg:#1a1a1b;--content-border:1px solid #343536;--alt-bg:#000;--alt-inside-bg:#343536;--alt-inside-border:1px solid #808080;--alt-color:#d7dadc;--footer-bg:#343536;--footer-color:#d7dadc;--footer-seperator:#666;--footer-link:#fe791b;--button-border:1px solid #f57c00;--button-bg:#ffad42;--button-fg:#000;--error-bg:red;--error-fg:white}*,*::after,*::before{box-sizing:border-box}blockquote,body,dd,dl,figure,h1,h2,h3,h4,p{margin:0}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5;font-size:16px;font-family:'Inter var', sans-serif;font-variation-settings:"slnt" 0;font-feature-settings:"case", "frac", "tnum", "ss02", "calt", "ccmp", "kern";background:var(--bg);color:var(--color)}.italic{font-variation-settings:"slnt" 10deg}a{text-decoration-skip-ink:auto}img{max-width:100%;margin:0 auto;display:block}button,input,select,textarea{font:inherit}@media (prefers-reduced-motion: reduce){*,*::after,*::before{animation-play-state:paused !important;transition:none !important;scroll-behavior:auto !important}}h1{font-size:2.488rem}h2{font-size:2.074rem}h3{font-size:1.728rem}h4{font-size:1.44rem}h5{font-size:1.0rem}a,a:visited,button{text-decoration:none;border:none;padding:0;margin:0;font-weight:bold;cursor:pointer}input[type=password],input[type=text],select{border:1px solid var(--color);background:var(--bg);color:var(--color);border-radius:0;padding:0.25rem;line-height:1rem}label{font-size:0.75rem;font-weight:500;margin-top:1rem;margin-bottom:0.25rem;display:block}input[type=password]:active,input[type=password]:hover,input[type=text]:active,input[type=text]:hover,select:active,select:hover{border-color:var(--link)}button{background:transparent}.lb,.lb-link,.lb-main{width:100px;background:var(--color);opacity:0.35;height:1rem;border-radius:20px;align-self:center;position:relative}.lb-link,.lb-main{display:inline-block}.lb-link{background:var(--link)}.lb-link:after,.lb-main:after,.lb:after{content:'';background:repeating-linear-gradient(to right, transparent 0%, transparent 25%, #00000044 75%, transparent 100%);background-size:300% auto;background-position:0 -300%;border-radius:20px;position:absolute;top:0;left:0;width:100%;height:100%;animation:lbgradient 10s infinite;animation-fill-mode:forwards;animation-timing-function:linear}.lb-main:after{background:repeating-linear-gradient(to right, transparent 0%, transparent 25%, #ffffff44 75%, transparent 100%);background-size:300% auto;background-position:0 -300%}.lb-link:after{background:repeating-linear-gradient(to right, transparent 0%, transparent 25%, #ffffff44 75%, transparent 100%);background-size:300% auto;background-position:0 -300%}@keyframes lbgradient{0%{background-position:300% 0}100%{background-position:-300% 0}}main aside .lb-main{height:0.875rem}.actions .lb-link{margin:0.25rem 0}article .row div .lb-main{display:block;margin-bottom:0.75rem;opacity:0.2}.page-banner.lb,.page-banner.lb:after{border-radius:0;opacity:1;background-color:var(--seperator)}footer .lb{background:var(--footer-link);display:inline-block;margin-top:0.25rem;margin-bottom:0.15rem;bottom:-4px;height:0.625rem}.lb--large{height:40px;width:200px}.lb--long{width:200px}.lb--longest{width:300px}.lb--medium{width:150px}.lb--slim{height:0.675rem}main .cover picture.lb,main .cover.haspreview > img{display:block;width:100%;height:auto;opacity:1;border-radius:0}main .cover picture.lb.nobg{padding-top:50%;background:var(--seperator);margin-bottom:1rem}article.fullsize .row .cover{width:100%}article .description .lb-main{display:block;margin:0 0 0.75rem}article .description fileinfo ul .lb-main{bottom:-4px}main .cover picture.lb:after{border-radius:0}.lb--imgmini{width:400px;height:225px;margin-right:1rem;opacity:0.2}@media (prefers-reduced-motion), only screen and (hover: none) and (pointer: coarse), (prefers-reduced-motion){.lb:after{background:transparent !important;display:none !important;animation:none !important}}.inside{width:100%;max-width:var(--content-max-width);display:flex;margin:0 auto}.inside.vertical{flex-direction:column}.error{background:var(--error-bg);color:var(--error-fg);cursor:pointer;text-align:center;padding:0.5rem}.wrapper{background:var(--alt-bg);color:var(--alt-color);display:flex;justify-content:center;align-items:center;min-height:calc(100vh - 200px);padding:1rem}.filler{flex:2 1 auto}.wrapper .inside{flex-direction:column;color:var(--alt-color);background:var(--alt-inside-bg);border:var(--alt-inside-border)}.wrapper .error{border:1px solid var(--error-bg);color:var(--error-bg);background:transparent}.notfound{color:var(--light)}@media screen and (max-width: 639px){main .inside{flex-direction:column}.wrapper{flex-direction:column}}header{background:var(--primary-darker-bg);color:var(--primary-darker-fg)}header a,header a:visited,header button{color:var(--primary-darker-link)}header p{color:var(--primary-darker-fg-light)}header .title,header .title:visited{min-height:100px;padding-left:10px;display:flex;align-items:center;background:25px center no-repeat;background-size:auto 91px;flex:0 0 auto}header .logo{background-position:-119px 0;width:81px;height:100px;transform:scale(0.9);margin-right:1rem}header .lb{background:var(--primary-darker-fg)}header .logo.lb{background:#eaad81}header .title h1{font-weight:500;color:var(--primary-darker-fg)}header aside{flex:2 1 auto;display:flex;flex-direction:column;align-items:flex-end;font-size:0.8rem;padding:0.5rem}header aside a,header aside button{margin-left:0.5rem}header aside p button{margin-left:0}nav{background:var(--primary-bg)}nav a,nav a:visited{flex:2 0 auto;text-align:center;font-weight:300;padding:10px 10px 7px;border-bottom:3px solid var(--primary-bg);color:var(--primary-fg)}nav a .lb{background:var(--primary-fg);display:inline-block}nav a.active{border-bottom-color:var(--primary-link)}@media screen and (max-width: 639px){nav{font-size:0.8em}}main{min-height:calc(100vh - 294px)}.page-banner,.page-banner .page-banner-real{background-size:cover;background-repeat:no-repeat;background-position:center;height:150px;width:100%;display:block;position:relative}.page-banner-real{position:absolute;top:0;left:0;width:100%;height:100%}.page-banner-title{color:white;text-align:right;padding:0.5rem 1rem;font-size:1.6rem;flex:2 1 auto;text-shadow:0 0 0.3em #000}.actions{padding:0.5rem 1rem;display:flex}.actions a{margin-left:0.375rem}main a,main a:visited{color:var(--link)}main h5{padding:0 0.5rem 0.5rem;margin:0 0 0.75rem;border-bottom:1px solid var(--seperator);font-size:1rem}.main h2.title,main h2.title{font-size:1.4rem;background:var(--title-bg);color:var(--title-fg);text-align:center;font-weight:400;padding:0.375rem;line-height:1.4rem}main .container{flex:2 1 auto;margin:1rem}main .cover{position:relative;display:block}main .cover.haspreview > img{margin-bottom:1rem}main .cover.haspreview picture{position:absolute;top:0;left:0;width:100%;height:100%}main .cover picture img{margin-bottom:1rem;width:100%}main button,main input[type=submit]{border:var(--button-border);background:#ffad42;color:#000;align-self:center;padding:0.25rem 1rem;margin:1rem 0 2rem}@media screen and (max-width: 639px){main .container{margin:1rem 0.25rem}}main aside{padding:0.375rem 1rem 0.5rem;margin:1rem;font-size:0.875rem;flex:0 0 250px;background:var(--content-bg);border:var(--content-border)}main aside a{display:block}main aside h5{margin:0 -0.5rem 0.25rem;font-size:0.9em}main aside ul{margin:0 0 0.5rem;padding-left:1.5rem}main aside .asuna{margin-top:2rem;width:200px;height:461px;background-position:0 -150px}.nightmode main aside .asuna{background-position:-200px -150px}.daymode .day{display:block}@media screen and (max-width: 1000px){main aside{flex:0 0 200px}}@media screen and (max-width: 639px){main aside{margin:1rem 0.25rem;flex:0 0 auto}main aside.frontpage{order:2}}paginator{display:flex;justify-content:center;width:100%}paginator a{color:var(--link);cursor:pointer}paginator a,paginator div{display:block;font-size:0.8rem;max-width:80px;flex-grow:2;text-align:center;padding:0.5rem;margin-top:1rem}articleslim{display:flex;margin-bottom:0.75rem;padding-right:0.5rem}articleslim p.description{font-size:0.75rem}articleslim .cover{flex:0 0 124px;margin-right:0.75rem}articleslim .cover picture img,articleslim .cover.haspreview > img{margin-bottom:0}articleslim a.nobg{height:70px;background:var(--seperator);display:block}articleslim a.title{display:block;margin-bottom:0.375rem}article{background:var(--content-bg);border:var(--content-border);margin-bottom:1rem}article .row{margin:1rem 0;display:flex}article .cover{flex:0 0 auto;margin-right:1rem;align-self:flex-start}article a.title{flex:0 0 100%;margin-bottom:0.5rem}article .description{font-size:0.875rem;margin-bottom:1rem;padding:0 0.25rem}article .meta{font-size:0.625rem;line-height:0.75rem;color:var(--light);font-weight:500;padding:1.25rem 0.25rem 0}article:not(.fullsize) .cover.haspreview > img{width:400px}article.fullsize .row{margin:1rem;flex-direction:column}article.fullsize .cover{margin-right:0}@media screen and (max-width: 1000px){article:not(.fullsize) .cover.haspreview > img{width:calc(100vw - 265px)}article .row{flex-direction:column}article.fullsize .row{margin:1rem 0.25rem}article .cover{margin-right:0}}@media screen and (max-width: 639px){article:not(.fullsize) .cover.haspreview > img{width:calc(100vw - 10px)}}fileinfo{padding-left:0.25rem;margin-bottom:0.5rem;color:var(--light);line-height:1rem;font-size:0.75rem;display:block;position:relative}fileinfo.slim{padding:0;margin:0}fileinfo p a,fileinfo p span{margin-right:0.25rem}fileinfo p a{font-weight:550;padding-right:0.25rem;border-right:1px solid var(--seperator);display:inline-block}fileinfo p span{font-weight:700}fileinfo .trimmed{padding:0.25rem 0 0.25rem 1rem}fileinfo ul{margin:0.5rem 0;padding-left:1.5rem}.login--first{flex:0 0 170px}.login{align-items:center;font-size:1rem;padding:1rem 1rem 2rem;margin:1rem;max-width:400px}.login .title{font-size:1.4rem;font-weight:200;margin-bottom:2rem;text-align:center}.login input,.login label{width:100%;max-width:300px}.login input[type=submit]{min-width:150px;margin-top:1rem}.login--asuna{flex:0 0 auto;width:180px;height:494px;background-position:-400px 0}.nightmode .login--asuna{background-position:-580px 0}@media screen and (max-width: 1000px){.login--first{display:none}}@media screen and (max-width: 639px){.login{order:2}.login--asuna{max-width:120px}}.content:is(h1,h2,h3,h4,h5,ul,ol,blockquote,p){margin:0 0 0.75rem}.content:is(h1,h2,h3,h4,h5){padding:0 0.5rem 0.5rem;border-bottom:1px solid var(--seperator)}.content:is(blockquote,pre){background:var(--bg-content-alt);padding:0.5rem}.content blockquote p{margin:0}footer{background:var(--footer-bg);color:var(--footer-color);min-height:150px;text-align:center;padding:1rem;display:flex;align-items:center;font-weight:500;font-size:0.625rem}footer .first{flex:0 0 119px}footer .middle{display:flex;flex-direction:column;align-items:center;flex:2 1 auto;padding:0 2rem}footer .asuna{flex:0 0 119px;height:150px;width:119px;background-position:0 0}footer ul{margin:0 0 0.25rem;padding:0 0 0.25rem;border-bottom:1px solid var(--footer-seperator);display:flex;justify-content:center;flex-wrap:wrap;min-width:300px}footer ul li{padding:0 0.25rem;list-style-position:inside}footer a{color:var(--footer-link);margin:0 0 0.25rem}@media screen and (max-width: 1000px){footer .first{display:none}}@media screen and (max-width: 639px){footer{flex-direction:column}footer .middle{padding:0 0 2rem}footer .asuna{flex:0 0 150px}}.not_found{flex-direction:column;text-align:center}.not_found .asuna{width:120px;height:444px;margin:2rem 0 0;background-position:-760px 0}.nightmode .not_found .asuna{background-position:-880px 0}
|
|
</style>
|
|
<link id="headstyle" rel="Stylesheet" href="/assets/app.css?v=1" type="text/css" media="none" />
|
|
<!--<link rel="Stylesheet" href="/assets/app_body.css?v=1" type="text/css" />-->
|
|
</head>
|
|
<body class="daymode">
|
|
<script type="text/javascript" nonce="{{=nonce}}">
|
|
document.getElementById('headstyle').addEventListener('load', function() {
|
|
window.styleloaded = true;
|
|
if(this.media!='all') { this.media='all'}
|
|
});
|
|
if (localStorage.getItem('nfp_sites_darkmode')) {document.body.className = 'nightmode';}
|
|
window.__nfptree = {{=payloadTree}};
|
|
window.__nfpdata = {{=payloadData}};
|
|
</script>
|
|
<div id="header">
|
|
<header><div class="inside"><div class="title"><div class="logo lb"></div><div class="lb lb--large"></div></div></div></header>
|
|
<nav><div class="inside"><a><div class="lb"></div></a><a><div class="lb"></div></a><a><div class="lb"></div></a><a><div class="lb"></div></a></div></nav>
|
|
</div>
|
|
<main id="main">
|
|
{{ if (banner) { }}
|
|
<div class="page-banner lb" style="background-image: url({{=banner}})"></div>
|
|
{{ } }}
|
|
{{ if (type === 'page' || type === 'page_with_children') { }}
|
|
<div class="inside vertical">
|
|
<div class="actions"><div class="lb-link"></div></div>
|
|
<h2 class="title"><div class="lb-main lb--long"></div></h2>
|
|
</div>
|
|
{{ } }}
|
|
<div class="inside {{= type === 'article' ? 'vertical' : '' }}">
|
|
{{ if (type === 'page_with_children' || type === 'frontpage') { }}
|
|
<aside>
|
|
<h5><div class="lb-main"></div></h5>
|
|
<div class="lb-link"></div>
|
|
<ul><li><div class="lb-link"></div></li><li><div class="lb-link"></div></li><li><div class="lb-link"></div></li></ul>
|
|
<div class="lb-link"></div>
|
|
<ul><li><div class="lb-link"></div></li><li><div class="lb-link"></div></li></ul>
|
|
</aside>
|
|
{{ } }}
|
|
{{ if (type === 'frontpage') { }}
|
|
<div class="container">
|
|
<article>
|
|
<h2 class="title"><div class="lb-main lb--long"></div></h2>
|
|
<div class="row">
|
|
<div class="lb-main lb--imgmini"></div>
|
|
<div>
|
|
<div> </div>
|
|
<div class="lb-main lb--long"></div>
|
|
<div class="lb-main"></div>
|
|
<div class="lb-main lb--medium"></div>
|
|
<div class="lb-main lb--medium"></div>
|
|
<div class="lb-main"></div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article>
|
|
<h2 class="title"><div class="lb-main lb--long"></div></h2>
|
|
<div class="row">
|
|
<div class="lb-main lb--imgmini"></div>
|
|
<div>
|
|
<div> </div>
|
|
<div class="lb-main lb--long"></div>
|
|
<div class="lb-main"></div>
|
|
<div class="lb-main lb--medium"></div>
|
|
<div class="lb-main lb--medium"></div>
|
|
<div class="lb-main"></div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
{{ } else if (type === 'page' || type === 'page_with_children') { }}
|
|
<div class="container">
|
|
{{ if (media) { }}
|
|
<div class="cover"><picture class="lb"><img src="{{=media}}"></picture></div>
|
|
{{ } }}
|
|
<h5><div class="lb-main lb--long"></div></h5>
|
|
<articleslim>
|
|
<a class="cover nobg lb"></a>
|
|
<div>
|
|
<div><div class="lb-link lb--long"></div></div>
|
|
<div class="lb-main lb--longest lb--slim"></div>
|
|
</div>
|
|
</articleslim>
|
|
<articleslim>
|
|
<a class="cover nobg lb"></a>
|
|
<div>
|
|
<div><div class="lb-link lb--long"></div></div>
|
|
<div class="lb-main lb--longest lb--slim"></div>
|
|
</div>
|
|
</articleslim>
|
|
<articleslim>
|
|
<a class="cover nobg lb"></a>
|
|
<div>
|
|
<div><div class="lb-link lb--long"></div></div>
|
|
<div class="lb-main lb--longest lb--slim"></div>
|
|
</div>
|
|
</articleslim>
|
|
<articleslim>
|
|
<a class="cover nobg lb"></a>
|
|
<div>
|
|
<div><div class="lb-link lb--long"></div></div>
|
|
<div class="lb-main lb--longest lb--slim"></div>
|
|
</div>
|
|
</articleslim>
|
|
</div>
|
|
{{ } else if (type === 'article') { }}
|
|
<div class="actions"><div class="lb-link"></div></div>
|
|
|
|
<article class="fullsize">
|
|
<h2 class="title"><div class="lb-main lb--long"></div></h2>
|
|
<div class="row">
|
|
{{ if (media) { }}
|
|
<div class="cover"><picture class="lb"><img src="{{=media}}"></picture></div>
|
|
{{ } }}
|
|
<div class="description">
|
|
<div class="lb-main lb--long"></div>
|
|
<div class="lb-main"></div>
|
|
<div class="lb-main lb--medium"></div>
|
|
<div class="lb-main lb--medium"></div>
|
|
<div class="lb-main"></div>
|
|
<p> </p>
|
|
<fileinfo>
|
|
<div class="lb-main lb--slim lb--longest"></div>
|
|
<ul>
|
|
<li><div class="lb-main lb--slim lb--longest"></div></li>
|
|
<li><div class="lb-main lb--slim lb--longest"></div></li>
|
|
</ul>
|
|
</fileinfo>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
{{ } }}
|
|
</div>
|
|
</main>
|
|
<footer id="footer">
|
|
<div class="middle">
|
|
<div class="lb"></div>
|
|
<ul><li><div class="lb"></div></li><li><div class="lb"></div></li></ul>
|
|
<div class="lb"></div>
|
|
<ul><li><div class="lb"></div></li><li><div class="lb"></div></li><li><div class="lb"></div></li></ul>
|
|
</div>
|
|
</footer>
|
|
<script type="text/javascript" src="/assets/app.js?v=1"></script>
|
|
</body>
|
|
</html>
|