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) {
|
@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));
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
||||||
|
|
|
||||||
2
assets/dist/style.css
vendored
2
assets/dist/style.css
vendored
|
|
@ -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,
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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">
|
||||||
|
|
|
||||||
|
|
@ -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
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