header style

This commit is contained in:
isUnknown 2024-03-12 17:12:03 +01:00
parent f04e9a66fb
commit 0fed6cfd12
30 changed files with 125 additions and 694 deletions

View file

@ -4,7 +4,7 @@
top: 0;
left: 0;
box-sizing: border-box;
width: 100%;
width: 100vw;
height: calc(var(--unit--vertical) * 5);
padding: var(--unit--vertical) var(--unit--horizontal);
transition: height 0.2s ease-in-out;
@ -37,11 +37,11 @@
.page-cover {
box-sizing: border-box;
height: 100vh;
height: 100svh;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-top: calc(8 * var(--unit--vertical));
padding-top: 25svh;
padding-bottom: calc(5 * var(--unit--vertical));
}

View file

@ -1,7 +1,6 @@
body {
position: relative;
box-sizing: border-box;
min-height: 100vh;
padding: 0 var(--unit--horizontal);
background-color: var(--color-background);
color: var(--color-primary);

View file

@ -26,16 +26,9 @@ button.toggle.right.open::before {
}
#tabs {
--mg: 4;
position: relative;
margin-top: calc(0px - (2 * var(--unit--vertical)));
margin-bottom: calc((var(--mg) / 2) * var(--unit--vertical));
}
#tabs.safari {
margin-top: calc(-60px - (3 * var(--unit--vertical)));
}
#home #tabs {
margin-top: calc(0px - (6 * var(--unit--vertical)));
margin-top: -30svh;
margin-bottom: 30svh;
}
.active-tab {
@ -46,7 +39,7 @@ button.toggle.right.open::before {
}
.page-cover.open .active-tab {
height: calc(100vh - 7.5 * var(--unit--vertical));
height: calc(100svh - 7.5 * var(--unit--vertical));
}
.texts__year.short .year__edito {

View file

@ -19,9 +19,13 @@
font-weight: var(--font-weight-extra-bold);
}
h3 {
font-size: var(--font-size-l);
font-weight: var(--font-weight-bold);
h1,
h2,
h3,
h4,
h5,
p {
font-weight: var(--font-weight-light);
}
p,
@ -50,17 +54,16 @@ button,
}
.title-center {
font-size: var(--font-size-m);
font-weight: var(--font-weight-light);
width: 100%;
margin-left: calc(5 * var(--unit--horizontal));
--margin-left: calc(4 * var(--unit--horizontal));
width: calc(100% - var(--margin-left));
margin-left: var(--margin-left);
}
.main-title {
line-height: 1;
text-align: left;
box-sizing: border-box;
margin-bottom: 1rem;
font-weight: var(--font-weight-light);
}
p,

View file

@ -6,5 +6,5 @@
@import url("src/header.css");
@import url("src/tabs.css");
@import url("src/home.css");
@import url("src/article.css");
@import url("src/linear.css");
@import url("src/footer.css");

24
assets/dist/script.js vendored
View file

@ -1,16 +1,29 @@
"use strict";
function openTab(data, tab) {
data.activeTab === tab ? (data.activeTab = "") : (data.activeTab = tab);
var remFactor = 16;
var verticalUnit = 1.3 * remFactor;
function toggleTab(data, tab) {
if (data.activeTab === tab) {
scrollToElem("body");
setTimeout(function () {
data.activeTab = "";
data.isOpen = false;
}, 200);
} else {
data.activeTab = tab;
data.isOpen = true;
scrollToElem(".active-tab");
}
}
function scrollToElem(selector) {
document.querySelector(".active-tab").scrollTop = 0;
setTimeout(function () {
var yOffset = -185;
var yOffset = -7 * verticalUnit;
var elem = document.querySelector(selector);
var top = elem.getBoundingClientRect().top;
window.scrollTo({
top: top + window.scrollY + yOffset,
behavior: "smooth",
behavior: "smooth"
});
}, 100);
}
@ -26,4 +39,7 @@ document.addEventListener("DOMContentLoaded", function () {
window.addEventListener("scroll", function () {
toggleLogoState();
});
if (navigator.userAgent.toLowerCase().includes("safari") && window.innerWidth < 800) {
document.querySelector("#tabs").classList.add("safari");
}
});

330
assets/dist/style.css vendored

File diff suppressed because one or more lines are too long

View file

@ -0,0 +1,41 @@
title: Administration
icon: folder
image:
back: "#000"
color: "#fff"
create:
status: listed
status:
listed: Privée
text: Page réservée
columns:
- width: 1/2
sections:
subfoldersSection:
label: Sous-dossiers
type: pages
template: admin-folder
- width: 1/2
sections:
filesSection:
label: Fichiers propres
type: files
linkedFilesSection:
type: fields
fields:
linkedFiles:
label: Fichiers liés
type: multiselect
options:
type: query
query: site.find('admin').index.files
- width: 1/1
fields:
notesField:
label: Notes
type: writer

View file

@ -0,0 +1,18 @@
title: Administration
icon: folder
image:
back: "#000"
color: "#fff"
create:
status: listed
status:
listed: Privée
text: Page réservée
sections:
folderSection:
label: Dossiers
type: pages
template: admin-folder

View file

@ -17,4 +17,5 @@ sections:
author:
label: Auteur
type: users
max: 1
width: 1/3

View file

@ -1,7 +1,8 @@
title: Adminitrateurs
description: Un administrateur a tous les droits.
title: Éditeur
description: Tous les droits.
image:
icon: star-filled
icon: cog
color: "#FFF"
fields:
presentation:

View file

@ -1,7 +1,8 @@
title: Auteurs
description: Un auteur a tous les droits.
title: Auteur
description: Droits de lecture et écriture de certaines pages.
image:
icon: pen
color: "#FFF"
permissions:
access:

View file

View file

@ -23,6 +23,7 @@ return [
}
],
'-',
'-',
'infos' => [
'icon' => 'question',
'label' => 'À propos',
@ -34,7 +35,7 @@ return [
],
'newsletter' => [
'icon' => 'email',
'label' => 'Lettre',
'label' => 'Infolettre',
'link' => 'pages/lettre',
'current' => function ($current) {
$path = Kirby::instance()->request()->path()->toString();
@ -42,9 +43,21 @@ return [
}
],
'-',
'-',
'users',
'comments',
'system'
'admin' => [
'icon' => 'folder',
'label' => 'Administration',
'link' => 'pages/admin',
'current' => function ($current) {
$path = Kirby::instance()->request()->path()->toString();
return Str::contains($path, 'pages/admin');
}
],
'-',
'-',
'system',
]
],
'routes' => [

View file

@ -1,20 +0,0 @@
# This file is for unifying the coding style for different editors and IDEs
# editorconfig.org
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
[*.php]
indent_size = 4
[*.md,*.txt]
trim_trailing_whitespace = false
insert_final_newline = false
[composer.json]
indent_size = 4

View file

@ -1,11 +0,0 @@
# Note: You need to uncomment the lines you want to use; the other lines can be deleted
# Git
# .gitattributes export-ignore
# .gitignore export-ignore
# Tests
# /.coveralls.yml export-ignore
# /.travis.yml export-ignore
# /phpunit.xml.dist export-ignore
# /tests/ export-ignore

View file

@ -1,14 +0,0 @@
# OS files
.DS_Store
# npm modules
/node_modules
# Parcel cache folder
.cache
# Composer files
/vendor
# kirbyup temp development entry
/index.dev.mjs

View file

@ -1,21 +0,0 @@
MIT License
Copyright (c) <Year> <Your Name>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View file

@ -1,117 +0,0 @@
# Kirby Pluginkit: Example plugin for Kirby
> Variant "Panel plugin setup"
This is a boilerplate for a Kirby Panel plugin that can be installed via all three [supported installation methods](https://getkirby.com/docs/guide/plugins/plugin-setup-basic#the-three-plugin-installation-methods).
You can find a list of Pluginkit variants on the [`master` branch](https://github.com/getkirby/pluginkit/tree/master).
****
## How to use the Pluginkit
1. Fork this repository
2. Change the plugin name and description in the `composer.json`
3. Change the plugin name in the `index.php` and `src/index.js`
4. Change the license if you don't want to publish under MIT
5. Add your plugin code to the `index.php` and `src/index.js`
6. Update this `README` with instructions for your plugin
### Install the development and build setup
We use [kirbyup](https://github.com/johannschopplich/kirbyup) for the development and build setup.
You can start developing directly. kirbyup will be fetched remotely with your first `npm run` command, which may take a short amount of time.
### Development
You can start the dev process with:
```bash
npm run dev
```
This will automatically update the `index.js` and `index.css` of your plugin as soon as you make changes.
Reload the Panel to see your code changes reflected.
With kirbyup 2.0.0+ and Kirby 3.7.4+ you can alternatively use hot module reloading (HMR):
```bash
npm run serve
```
This will start a development server that updates the page as soon as you make changes. Some updates are instant, like CSS or Vue template changes, others require a reload of the page, which happens automatically.
> [!NOTE]
> The live reload functionality requires top level await, [which is only supported in modern browsers](https://caniuse.com/mdn-javascript_operators_await_top_level). If you're developing in older browsers, use `npm run dev` and reload the page manually to see changes.
### Production
As soon as you are happy with your plugin, you should build the final version with:
```bash
npm run build
```
This will automatically create a minified and optimized version of your `index.js` and `index.css`
which you can ship with your plugin.
We have a tutorial on how to build your own plugin based on the Pluginkit [in the Kirby documentation](https://getkirby.com/docs/guide/plugins/plugin-setup-basic).
### Build reproducibility
While kirbyup will stay backwards compatible, exact build reproducibility may be of importance to you. If so, we recommend to target a specific package version, rather than using npx:
```json
{
"scripts": {
"dev": "kirbyup src/index.js --watch",
"build": "kirbyup src/index.js"
},
"devDependencies": {
"kirbyup": "^3.1.0"
}
}
```
What follows is an example README for your plugin.
****
## Installation
### Download
Download and copy this repository to `/site/plugins/{{ plugin-name }}`.
### Git submodule
```bash
git submodule add https://github.com/{{ your-name }}/{{ plugin-name }}.git site/plugins/{{ plugin-name }}
```
### Composer
```bash
composer require {{ your-name }}/{{ plugin-name }}
```
## Setup
*Additional instructions on how to configure the plugin (e.g. blueprint setup, config options, etc.)*
## Options
*Document the options and APIs that this plugin offers*
## Development
*Add instructions on how to help working on the plugin (e.g. npm setup, Composer dev dependencies, etc.)*
## License
MIT
## Credits
- [Your Name](https://github.com/ghost)

View file

@ -1,18 +0,0 @@
# Security Policy
## Supported Versions
*Use this section to tell people about which versions of your project are currently being supported with security updates.*
| Version | Supported |
| ------- | ------------------ |
| 5.1.x | :white_check_mark: |
| 5.0.x | :x: |
| 4.0.x | :white_check_mark: |
| < 4.0 | :x: |
## Reporting a Vulnerability
*Use this section to tell people how to report a vulnerability.*
*Tell them where to go, how often they can expect to get an update on a reported vulnerability, what to expect if the vulnerability is accepted or declined, etc.*

View file

@ -1,21 +0,0 @@
{
"name": "getkirby/pluginkit",
"description": "Kirby Example Plugin",
"license": "MIT",
"type": "kirby-plugin",
"version": "1.0.0",
"authors": [
{
"name": "Your Name",
"email": "you@example.com"
}
],
"require": {
"getkirby/composer-installer": "^1.1"
},
"config": {
"allow-plugins": {
"getkirby/composer-installer": true
}
}
}

View file

@ -1,66 +0,0 @@
{
"_readme": [
"This file locks the dependencies of your project to a known state",
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
"This file is @generated automatically"
],
"content-hash": "37a8e61308b9b6f49cb9835f477f0c64",
"packages": [
{
"name": "getkirby/composer-installer",
"version": "1.2.1",
"source": {
"type": "git",
"url": "https://github.com/getkirby/composer-installer.git",
"reference": "c98ece30bfba45be7ce457e1102d1b169d922f3d"
},
"dist": {
"type": "zip",
"url": "https://api.github.com/repos/getkirby/composer-installer/zipball/c98ece30bfba45be7ce457e1102d1b169d922f3d",
"reference": "c98ece30bfba45be7ce457e1102d1b169d922f3d",
"shasum": ""
},
"require": {
"composer-plugin-api": "^1.0 || ^2.0"
},
"require-dev": {
"composer/composer": "^1.8 || ^2.0"
},
"type": "composer-plugin",
"extra": {
"class": "Kirby\\ComposerInstaller\\Plugin"
},
"autoload": {
"psr-4": {
"Kirby\\": "src/"
}
},
"notification-url": "https://packagist.org/downloads/",
"license": [
"MIT"
],
"description": "Kirby's custom Composer installer for the Kirby CMS and for Kirby plugins",
"homepage": "https://getkirby.com",
"support": {
"issues": "https://github.com/getkirby/composer-installer/issues",
"source": "https://github.com/getkirby/composer-installer/tree/1.2.1"
},
"funding": [
{
"url": "https://getkirby.com/buy",
"type": "custom"
}
],
"time": "2020-12-28T12:54:39+00:00"
}
],
"packages-dev": [],
"aliases": [],
"minimum-stability": "stable",
"stability-flags": [],
"prefer-stable": false,
"prefer-lowest": false,
"platform": [],
"platform-dev": [],
"plugin-api-version": "2.6.0"
}

View file

@ -1,2 +0,0 @@
/** Put your CSS here **/

View file

@ -1,15 +0,0 @@
(function () {
"use strict";
window.panel.plugin("adrienpayet/panel-text-comments", {
textareaButtons: {
highlight: {
label: "Highlight",
icon: "wand",
click: function () {
this.command("toggle", "<mark>", "</mark>");
},
shortcut: "m",
},
},
});
})();

View file

@ -1,3 +0,0 @@
<?php
Kirby::plugin('adrienpayet/panel-text-comments', []);

View file

@ -1,7 +0,0 @@
{
"scripts": {
"dev": "npx -y kirbyup src/index.js --watch",
"serve": "npx -y kirbyup serve src/index.js",
"build": "npx -y kirbyup src/index.js"
}
}

View file

@ -1,12 +0,0 @@
window.panel.plugin("adrienpayet/panel-text-comments", {
textareaButtons: {
highlight: {
label: "Highlight",
icon: "wand",
click: function () {
this.command("toggle", "<mark>", "</mark>");
},
shortcut: "m",
},
},
});

View file

@ -53,7 +53,7 @@ $activeTab = isset($activeTab) ? Str::slug($activeTab) : '';
class="see-more toggle left" @click="isOpen = !isOpen">Lire</button>
</div>
<?php foreach($year->children() as $article): ?>
<?php if (!$authorFilter || $authorFilter == $article->author()->toUser()->name()->value()) : ?>
<?php if (!$authorFilter || $authorFilter === $article->author()->toUser()->name()->value()) : ?>
<li class="texts | bottom" style="--bottom:3">
<a href="<?= $article->url() ?>" class="texts__title no-line">
<h3><?= $article->title() ?></h3>

View file

@ -3,7 +3,7 @@
<article>
<?php snippet('cover', ['isOpen' => true], slots: true) ?>
<?php slot('title') ?>
<h1 class="main-title title-center <?= setTitleFontSizeClass($page->title()) ?>"><?= $page->title() ?></h1>
<h1 class="main-title <?= setTitleFontSizeClass($page->title()) ?>"><?= $page->title() ?></h1>
<p>
<span class="opacity" style="--opacity:.6">par </span>
<a