add structure to random
This commit is contained in:
parent
b8de28aade
commit
4f3712536a
8 changed files with 98 additions and 11 deletions
9
assets/css/src/grid.css
Normal file
9
assets/css/src/grid.css
Normal 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;
|
||||
}
|
||||
|
|
@ -61,9 +61,14 @@ html {
|
|||
}
|
||||
|
||||
@media screen and (min-width: 640px) {
|
||||
:root {
|
||||
body {
|
||||
--padding-body: calc(15 * var(--unit--horizontal));
|
||||
}
|
||||
|
||||
body.full-width {
|
||||
--padding-body: calc(var(--unit--horizontal) * 7);
|
||||
}
|
||||
|
||||
body,
|
||||
#logo {
|
||||
max-width: calc(22 * var(--unit--horizontal));
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
@import url("src/article.css");
|
||||
@import url("src/virtual.css");
|
||||
@import url("src/home.css");
|
||||
@import url("src/grid.css");
|
||||
@import url("src/footer.css");
|
||||
@import url("src/print.css");
|
||||
:root {
|
||||
|
|
|
|||
2
assets/dist/style.css
vendored
2
assets/dist/style.css
vendored
|
|
@ -118,7 +118,7 @@ html {
|
|||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
.grid {
|
||||
.background-grid {
|
||||
background-size: var(--unit--horizontal) var(--unit--vertical);
|
||||
background-image: linear-gradient(
|
||||
90deg,
|
||||
|
|
|
|||
|
|
@ -15,7 +15,19 @@ tabs:
|
|||
label: Corps
|
||||
type: fields
|
||||
fields:
|
||||
fullWidth:
|
||||
label: Pleine largeur
|
||||
type: toggle
|
||||
body:
|
||||
label: Corps
|
||||
type: layout
|
||||
layouts:
|
||||
- 1/1
|
||||
- 1/2, 1/2
|
||||
- 1/3, 1/3, 1/3
|
||||
fieldsets:
|
||||
- text
|
||||
- image
|
||||
- line
|
||||
- quote
|
||||
metaTab: tabs/meta
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ $entryTopPos = $entryTopPos ?? 20;
|
|||
|
||||
<meta name="robots" content="noindex, nofollow, noarchive">
|
||||
</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">
|
||||
<div id="logo" >
|
||||
<a id="logo__link" href="/" class="no-line">
|
||||
|
|
|
|||
|
|
@ -1,23 +1,52 @@
|
|||
<?php
|
||||
$firstCol = rand(0, 8);
|
||||
$secondCol = rand(0, 8)
|
||||
?>
|
||||
|
||||
<sidebar id="desktop-nav">
|
||||
<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)">
|
||||
années
|
||||
</button>
|
||||
</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)">
|
||||
catégories
|
||||
</button>
|
||||
</li>
|
||||
<li class="empty
|
||||
"></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="#">
|
||||
s'abonner
|
||||
</a>
|
||||
</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() ?>">
|
||||
à propos
|
||||
</a>
|
||||
|
|
@ -157,8 +186,8 @@
|
|||
<ul class="panel__items">
|
||||
<?php
|
||||
$categories = $kirby->collection('categories');
|
||||
shuffle($categories);
|
||||
foreach($categories as $category): ?>
|
||||
shuffle($categories);
|
||||
foreach($categories as $category): ?>
|
||||
<li
|
||||
class="panel__item "
|
||||
x-data='{ isOpen: false }'
|
||||
|
|
@ -182,8 +211,8 @@
|
|||
>
|
||||
<ul class="panel-item-content__texts">
|
||||
<?php
|
||||
shuffle($category['texts']);
|
||||
foreach($category['texts'] as $article): ?>
|
||||
shuffle($category['texts']);
|
||||
foreach($category['texts'] as $article): ?>
|
||||
<li
|
||||
class="text"
|
||||
x-data="{
|
||||
|
|
|
|||
31
site/templates/grid.php
Normal file
31
site/templates/grid.php
Normal 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') ?>
|
||||
Loading…
Add table
Add a link
Reference in a new issue