add structure to random

This commit is contained in:
isUnknown 2024-04-15 18:13:03 +02:00
parent b8de28aade
commit 4f3712536a
8 changed files with 98 additions and 11 deletions

9
assets/css/src/grid.css Normal file
View file

@ -0,0 +1,9 @@
body.full-width #desktop-nav {
height: auto;
}
body.full-width #desktop-nav .empty {
height: calc(var(--unit--vertical) / 2);
}
body.full-width .content {
position: sticky;
}

View file

@ -61,9 +61,14 @@ html {
} }
@media screen and (min-width: 640px) { @media screen and (min-width: 640px) {
:root { body {
--padding-body: calc(15 * var(--unit--horizontal)); --padding-body: calc(15 * var(--unit--horizontal));
} }
body.full-width {
--padding-body: calc(var(--unit--horizontal) * 7);
}
body, body,
#logo { #logo {
max-width: calc(22 * var(--unit--horizontal)); max-width: calc(22 * var(--unit--horizontal));

View file

@ -7,6 +7,7 @@
@import url("src/article.css"); @import url("src/article.css");
@import url("src/virtual.css"); @import url("src/virtual.css");
@import url("src/home.css"); @import url("src/home.css");
@import url("src/grid.css");
@import url("src/footer.css"); @import url("src/footer.css");
@import url("src/print.css"); @import url("src/print.css");
:root { :root {

View file

@ -118,7 +118,7 @@ html {
.hidden { .hidden {
display: none; display: none;
} }
.grid { .background-grid {
background-size: var(--unit--horizontal) var(--unit--vertical); background-size: var(--unit--horizontal) var(--unit--vertical);
background-image: linear-gradient( background-image: linear-gradient(
90deg, 90deg,

View file

@ -15,7 +15,19 @@ tabs:
label: Corps label: Corps
type: fields type: fields
fields: fields:
fullWidth:
label: Pleine largeur
type: toggle
body: body:
label: Corps label: Corps
type: layout type: layout
layouts:
- 1/1
- 1/2, 1/2
- 1/3, 1/3, 1/3
fieldsets:
- text
- image
- line
- quote
metaTab: tabs/meta metaTab: tabs/meta

View file

@ -16,7 +16,7 @@ $entryTopPos = $entryTopPos ?? 20;
<meta name="robots" content="noindex, nofollow, noarchive"> <meta name="robots" content="noindex, nofollow, noarchive">
</head> </head>
<body class="grid" data-template="<?= $page->template() ?>" > <body class="background-grid <?= e($page->fullWidth() == 'true', 'full-width') ?>" data-template="<?= $page->template() ?>" >
<header id="main-header"> <header id="main-header">
<div id="logo" > <div id="logo" >
<a id="logo__link" href="/" class="no-line"> <a id="logo__link" href="/" class="no-line">

View file

@ -1,23 +1,52 @@
<?php
$firstCol = rand(0, 8);
$secondCol = rand(0, 8)
?>
<sidebar id="desktop-nav"> <sidebar id="desktop-nav">
<ul> <ul>
<li class="left top" style="--left: <?= rand(0, 8) ?>; --top: <?= rand(0, 6) ?>"> <li
class="left top"
style="
--left: <?= e($page->fullWidth() != 'true', $firstCol, 0) ?>;
--top: <?= e($page->fullWidth() != 'true', rand(0, 6), 0) ?>
"
>
<button class="toggle-btn toggle-btn--left" onclick="togglePanel('left', event)"> <button class="toggle-btn toggle-btn--left" onclick="togglePanel('left', event)">
années années
</button> </button>
</li> </li>
<li class="left top" style="--left: <?= rand(0, 8) ?>; --top: <?= rand(0, 6) ?>"> <li
class="left top"
style="
--left: <?= e($page->fullWidth() != 'true', $secondCol, 0) ?>;
--top: <?= e($page->fullWidth() != 'true', rand(0, 6), 0) ?>
"
>
<button class="toggle-btn toggle-btn--left" onclick="togglePanel('right', event)"> <button class="toggle-btn toggle-btn--left" onclick="togglePanel('right', event)">
catégories catégories
</button> </button>
</li> </li>
<li class="empty <li class="empty
"></li> "></li>
<li class="left top" style="--left: <?= rand(0, 8) ?>; --top: <?= rand(0, 6) ?>"> <li
class="left top"
style="
--left: <?= e($page->fullWidth() != 'true', $firstCol, 0) ?>;
--top: <?= e($page->fullWidth() != 'true', rand(0, 6), 0) ?>
"
>
<a href="#"> <a href="#">
s'abonner s'abonner
</a> </a>
</li> </li>
<li class="left top" style="--left: <?= rand(0, 8) ?>; --top: <?= rand(0, 6) ?>"> <li
class="left top"
style="
--left: <?= e($page->fullWidth() != 'true', $secondCol, 0) ?>;
--top: <?= e($page->fullWidth() != 'true', rand(0, 6), 0) ?>
"
>
<a href="<?= $site->find('a-propos')->url() ?>"> <a href="<?= $site->find('a-propos')->url() ?>">
à propos à propos
</a> </a>
@ -157,8 +186,8 @@
<ul class="panel__items"> <ul class="panel__items">
<?php <?php
$categories = $kirby->collection('categories'); $categories = $kirby->collection('categories');
shuffle($categories); shuffle($categories);
foreach($categories as $category): ?> foreach($categories as $category): ?>
<li <li
class="panel__item " class="panel__item "
x-data='{ isOpen: false }' x-data='{ isOpen: false }'

31
site/templates/grid.php Normal file
View file

@ -0,0 +1,31 @@
<?php snippet('header') ?>
<main id="<?= $page->template() ?>">
<article>
<?php snippet('cover', array('isOpen' => true), slots: true) ?>
<?php slot('title') ?>
<h2 class="main-title <?= setTitleFontSizeClass($page->title()) ?>"><?= $page->title() ?></h2>
<p>
<span class="light">par</span>
<a class="author" href="/auteurs/<?= Str::slug($page->author()->toUser()->name()) ?>"><?= $page->author()->toUser()->name() ?></a><br>
<span class="light">publié le </span><?= $page->published()->toDate('d/m/Y') ?><br>
<span class="light">dans</span> <a href="<?= $page->parent()->url() ?>"><?= $page->parent()->title() ?></a> / <a href="/categories/<?= $page->category() ?>"><?= $page->category() ?></a>
</p>
<?php endslot() ?>
<?php endsnippet() ?>
<div class="content">
<?php foreach ($page->body()->toLayouts() as $layout): ?>
<section class="grid" id="<?= $layout->id() ?>">
<?php foreach ($layout->columns() as $column): ?>
<div class="column" style="--span:<?= $column->span() ?>">
<div class="blocks">
<?= $column->blocks() ?>
</div>
</div>
<?php endforeach ?>
</section>
<?php endforeach ?>
</div>
</article>
</main>
<?php snippet('footer') ?>