studio-variable/nouveau-theatre-de-besancon
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

start hero styling

Browse source
This commit is contained in:
isUnknown 2024-07-30 12:07:47 +02:00
parent aa265db0d3
commit a5ec57959d
11 changed files with 139 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

27
assets/css/src/hero.css Normal file
View file

@ -0,0 +1,27 @@
.hero {
display: grid;
grid-template-columns: 2fr 3fr;
}
.hero__text {
padding: 2.5rem;
}
.hero__text h2 {
font-size: var(--font-size-h1);
width: 100%;
text-align: center;
margin-bottom: 2rem;
}
.hero__text h3 {
color: var(--color-salmon);
}
.hero__text p:not(:last-of-type) {
margin-bottom: 1rem;
}
.hero__text p:first-of-type {
margin-top: 2rem;
}

1
assets/css/src/nav.css
View file

@ -10,6 +10,7 @@
.main-nav .logo {
font-weight: normal;
transition: opacity 0.2s ease-in-out;
font-size: var(--font-size-h2);
}
.main-nav .logo > * {

18
assets/css/src/text.css
View file

@ -12,3 +12,21 @@ body {
font-family: "Joker";
font-size: var(--font-size-body);
}
h1,
.h1 {
font-size: var(--font-size-h1);
font-weight: normal;
}
h2,
.h2 {
font-size: var(--font-size-h2);
font-weight: normal;
}
h3,
.h3 {
font-size: var(--font-size-h3);
font-weight: normal;
}

1
assets/css/style.css
View file

@ -3,4 +3,5 @@
@import url("src/text.css");
@import url("src/generic.css");
@import url("src/nav.css");
@import url("src/hero.css");
@import url("src/calendar-strip.css");

20
assets/images/loader.svg Normal file
View file

@ -0,0 +1,20 @@
<!-- Loader by Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
<svg alt="loading" width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
<stop stop-color="#fff" stop-opacity="0" offset="0%"/>
<stop stop-color="#fff" stop-opacity=".631" offset="63.146%"/>
<stop stop-color="#fff" offset="100%"/>
</linearGradient>
</defs>
<g fill="none" fill-rule="evenodd">
<g transform="translate(1 1)">
<path d="M36 18c0-9.94-8.06-18-18-18" id="Oval-2" stroke="url(#a)" stroke-width="2">
<animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.9s" repeatCount="indefinite"/>
</path>
<circle fill="#fff" cx="36" cy="18" r="1">
<animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="0.9s" repeatCount="indefinite"/>
</circle>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

2
site/blueprints/site.yml
View file

@ -66,6 +66,8 @@ tabs:
image:
ratio: 4/3
cover: true
when:
heroMode: custom
- width: 1/1
fields:
separator2:

27
site/config/config.php
View file

@ -2,6 +2,33 @@
return [
'debug' => true,
'thumbs' => [
'quality' => 80,
'presets' => [
'default' => [
'width' => 1024, 'format' => 'webp'
],
'full' => 2048, 'format' => 'webp'
],
'srcsets' => [
'default' => [
'200w' => ['width' => 400],
'400w' => ['width' => 800],
'800w' => ['width' => 1600],
'1024w' => ['width' => 2048],
'1440w' => ['width' => 2880],
'2048w' => ['width' => 4096]
],
'webp' => [
'200w' => ['width' => 400, 'format' => 'webp'],
'400w' => ['width' => 800, 'format' => 'webp'],
'800w' => ['width' => 1600, 'format' => 'webp'],
'1024w' => ['width' => 2048, 'format' => 'webp'],
'1440w' => ['width' => 2880, 'format' => 'webp'],
'2048w' => ['width' => 4096, 'format' => 'webp']
]
],
],
'panel' => [
'css' => 'assets/css/panel.css'
],

2
site/snippets/blocks/hero-heading.php Normal file
View file

@ -0,0 +1,2 @@
<?php /** @var \Kirby\Cms\Block $block */ ?>
<<?= $level = $block->level()->or('h2') ?>><?= $block->text() ?></<?= $level ?>>

2
site/snippets/blocks/hero-text.php Normal file
View file

@ -0,0 +1,2 @@
<?php /** @var \Kirby\Cms\Block $block */ ?>
<?= $block->text();

31
site/snippets/picture.php Normal file
View file

@ -0,0 +1,31 @@
<?php
$sizes = '(min-width: 1200px) 25vw, (min-width: 900px) 33vw, (min-width: 600px) 50vw, 100vw';
$alt = method_exists($file, 'alt') ? $file->alt() : 'Fragment de carte de la France';
$crop = $crop ?? false;
$webPSrcset = $crop === 'banner' ? $file->crop(1600, 800)->srcset('webp') : $file->srcset('webp');
$srcset = $crop === 'banner' ? $file->crop(1600, 800)->srcset() : $file->srcset();
$src = $crop === 'banner' ? $file->crop(1600, 800)->url() : $file->url();
$width = $crop === 'banner' ? $file->crop(1600, 800)->width() : $file->resize(1800)->width();
$height = $crop === 'banner' ? $file->crop(1600, 800)->height() : $file->resize(1800)->height();
?>
<picture>
<source srcset="<?= $webPSrcset ?>"
sizes="<?= $sizes ?>" type="image/webp">
<img
src="<?= $src ?>"
srcset="<?= $srcset ?>"
sizes="<?= $sizes ?>"
width="<?= $width ?>"
height="<?= $height ?>"
alt="<?= $alt?>"
loading="lazy"
>
<?= svg('assets/images/loader.svg') ?>
</picture>

8
site/templates/home.php
View file

@ -1,3 +1,11 @@
<?php snippet('header') ?>
<div class="hero">
<div class="hero__text">
<?= $site->heroText()->toBlocks() ?>
</div>
<div class="hero__image">
<?php snippet('picture', ['file' => $site->heroImage()->toFile()]) ?>
</div>
</div>
<?php snippet('calendar-strip') ?>
<?php snippet('footer') ?>