94 lines
1.9 KiB
Svelte
94 lines
1.9 KiB
Svelte
<script context="module">
|
|
import { get_store_value } from 'svelte/internal';
|
|
|
|
import { themes } from '../../stores/themes.js';
|
|
|
|
export async function load({ params, stuff }) {
|
|
const thms = get_store_value(themes);
|
|
|
|
let theme = null;
|
|
for (let th in thms) {
|
|
if (thms[th] && thms[th].urlid === params.theme) {
|
|
theme = thms[th];
|
|
break;
|
|
}
|
|
}
|
|
|
|
return {
|
|
stuff: {
|
|
...stuff,
|
|
theme: theme,
|
|
}, props: {
|
|
theme: theme,
|
|
}
|
|
};
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
import {
|
|
Container,
|
|
} from 'sveltestrap';
|
|
|
|
import { challengeInfo } from '../../stores/challengeinfo.js';
|
|
|
|
export let theme;
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>{theme?theme.name:""} - {$challengeInfo.title}</title>
|
|
</svelte:head>
|
|
|
|
{#if theme}
|
|
<div style="background-image: url({theme.image})" class="page-header">
|
|
<Container class="text-primary">
|
|
<h1 class="display-2">
|
|
<a href="{theme.urlid}">{theme.name}</a>
|
|
</h1>
|
|
<h2>{@html theme.authors}</h2>
|
|
</Container>
|
|
<div class="headerfade"></div>
|
|
</div>
|
|
{/if}
|
|
<Container>
|
|
<slot></slot>
|
|
</Container>
|
|
|
|
<style>
|
|
.page-header {
|
|
background-size: cover;
|
|
background-position: center;
|
|
margin-bottom: -15rem;
|
|
}
|
|
.page-header h1 {
|
|
text-shadow: 0 0 15px rgba(255,255,255,0.95), 0 0 5px rgb(255,255,255)
|
|
}
|
|
.page-header h1, .page-header h1 a {
|
|
color: black;
|
|
text-decoration: none;
|
|
}
|
|
.page-header h2 {
|
|
font-size: 100%;
|
|
text-shadow: 1px 1px 1px rgba(0,0,0,0.9)
|
|
}
|
|
.page-header h2, .page-header h2 a {
|
|
color: #4eaee6;
|
|
}
|
|
.page-header h2 a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
.page-header h1 {
|
|
padding-top: 4rem;
|
|
text-align: center;
|
|
}
|
|
.page-header h2 {
|
|
padding-bottom: 14rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.page-header .headerfade {
|
|
background: linear-gradient(transparent 0%, rgb(233,236,239) 100%);
|
|
height: 3rem;
|
|
}
|
|
</style>
|