fic/server
Archived
1
0
Fork 0
Code Issues Pull requests 10 Releases Wiki Activity

Extract background color to continue image

Browse source
This commit is contained in:
nemunaire 2024-03-18 11:26:01 +01:00
commit 26c282138e
23 changed files with 218 additions and 115 deletions
Download patch file Download diff file Expand all files Collapse all files

3
frontend/fic/src/routes/+page.svelte
View file

@ -22,6 +22,9 @@
import { settings } from '$lib/stores/settings.js';
import { themesStore } from '$lib/stores/themes.js';
// Override theme color
document.body.style.backgroundColor = "";
let items = [];
$: {
const tmpitems = [];

65
frontend/fic/src/routes/[theme]/+layout.svelte
View file

@ -12,7 +12,21 @@
let heading_image = "";
let current_authors = "";
let background_color = "#ffffff";
let color_brightness = 0;
$: color_brightness = parseInt(background_color[1], 16) + parseInt(background_color[3], 16) + parseInt(background_color[5], 16);
$: if ($current_theme) {
if ($current_exercice && $current_exercice.background_color) {
background_color = $current_exercice.background_color;
document.body.style.backgroundColor = $current_exercice.background_color;
} else if ($current_theme.background_color) {
background_color = $current_theme.background_color;
document.body.style.backgroundColor = $current_theme.background_color;
} else {
background_color = "#ffffff";
document.body.style.backgroundColor = "";
}
if ($current_exercice && $current_exercice.image) {
heading_image = $current_exercice.image;
} else {
@ -48,13 +62,21 @@
</Container>
{:else}
<div style="background-image: url({heading_image})" class="page-header">
<Container class="text-primary">
<h1 class="display-2">
{#if $current_theme.urlid == "_" && $current_exercice}
<a href="{$current_theme.urlid}">{$current_exercice.title}</a>
{:else}
<a href="{$current_theme.urlid}">{$current_theme.name}</a>
{/if}
<Container class="text-primary py-4">
<h1
class="display-2"
style:text-shadow={color_brightness < 24 ? "0 0 15px rgba(255,255,255,0.95), 0 0 5px rgb(255,255,255)" : "0 0 15px rgba(0,0,0,0.95), 0 0 5px rgb(0,0,0)"}
>
<a
href="{$current_theme.urlid}"
style:color={background_color}
>
{#if $current_theme.urlid == "_" && $current_exercice}
{$current_exercice.title}
{:else}
{$current_theme.name}
{/if}
</a>
</h1>
<h2>
{#if current_authors}
@ -64,29 +86,21 @@
{/if}
</h2>
</Container>
{#if heading_image}
<div class="headerfade"></div>
{:else}
<div style="height: 3rem;"></div>
{/if}
<Container class="pb-4">
<slot></slot>
</Container>
</div>
<Container>
<slot></slot>
</Container>
{/if}
<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)
background-size: 100% auto;
background-position: top center;
background-repeat: no-repeat;
}
.page-header h1, .page-header h1 a {
color: black;
text-decoration: none;
filter: invert(100%) hue-rotate(45deg) brightness(100%);
}
.page-header h2 {
font-size: 100%;
@ -99,16 +113,9 @@
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>

2
frontend/fic/src/routes/[theme]/+page.svelte
View file

@ -37,7 +37,7 @@
/>
</Masonry>
{:else}
<Card class="bg-dark niceborder text-indent mt-2 mb-4">
<Card class="bg-dark niceborder text-indent mt-2" style="--bs-bg-opacity: .9;">
<Row>
<Col lg={6} xl={7}>

6
frontend/fic/src/routes/[theme]/[exercice]/+page.svelte
View file

@ -51,8 +51,8 @@
</script>
{#if $current_exercice}
<Card class="niceborder text-indent my-3">
<CardBody class="bg-dark">
<Card class="niceborder text-indent my-3 bg-primary" style="--bs-bg-opacity: .9;">
<CardBody class="bg-dark" style="--bs-bg-opacity: .5;">
{#if $current_theme.locked}
<div style="position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; right: 0;" class="d-flex justify-content-center align-items-center">
<div style="transform: rotate(-25deg)">
@ -91,7 +91,7 @@
<CardBody>
<Row>
<Col>
<Row class="level" cols={{xs:2, md:3, xl:4}}>
<Row class="level text-light" cols={{xs:2, md:3, xl:4}}>
<Col>
<div class="level-item">
{#if $settings.discountedFactor > 0 && $my && $my.exercices[$current_exercice.id]}

3
frontend/fic/src/routes/edit/+page.svelte
View file

@ -17,6 +17,9 @@
import { my } from '$lib/stores/my.js';
import { settings } from '$lib/stores/settings.js';
// Override theme color
document.body.style.backgroundColor = "";
</script>
<Container class="my-3">

3
frontend/fic/src/routes/issues/+page.svelte
View file

@ -17,6 +17,9 @@
import FormIssue from '$lib/components/FormIssue.svelte';
// Override theme color
document.body.style.backgroundColor = "";
export let data;
let issue = {};

3
frontend/fic/src/routes/rank/+page.svelte
View file

@ -17,6 +17,9 @@
import CardTheme from '$lib/components/CardTheme.svelte';
let search = "";
// Override theme color
document.body.style.backgroundColor = "";
</script>
<Container fluid class="my-3">

3
frontend/fic/src/routes/register/+page.svelte
View file

@ -85,6 +85,9 @@
message = "Une erreur est survenue lors de l'inscription de l'équipe. Veuillez réessayer dans quelques instants.";
}
}
// Override theme color
document.body.style.backgroundColor = "";
</script>
<Container class="my-3">

3
frontend/fic/src/routes/rules/+page.svelte
View file

@ -8,6 +8,9 @@
import { challengeInfo } from '$lib/stores/challengeinfo.js';
import { settings } from '$lib/stores/settings.js';
// Override theme color
document.body.style.backgroundColor = "";
</script>
<Container class="my-3">

3
frontend/fic/src/routes/tags/+page.svelte
View file

@ -11,6 +11,9 @@
import { themesStore } from '$lib/stores/themes.js';
// Override theme color
document.body.style.backgroundColor = "";
tick().then(() => {
WordCloud(
document.getElementById('wordcloud'),

3
frontend/fic/src/routes/tags/[tag]/+page.svelte
View file

@ -33,6 +33,9 @@
exercices = tmp_exercices;
}
// Override theme color
document.body.style.backgroundColor = "";
</script>
<Container class="mt-3">