defaults values title
This commit is contained in:
Julie Blanc
parent
3dd1f032f9
commit
9c58edb425
5 changed files with 121 additions and 45 deletions
|
|
@ -30,23 +30,6 @@ figure, img{
|
|||
z-index: -1;
|
||||
}
|
||||
|
||||
|
||||
/* p.author{
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
background: rgba(255, 255, 255, 0.521);
|
||||
padding: 10px 20px;
|
||||
margin: 0;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.introduction{
|
||||
font-size: 26px;
|
||||
background: rgba(255, 255, 255, 0.521);
|
||||
padding: 10px 20px;
|
||||
margin: 0;
|
||||
margin-top: 60px;
|
||||
} */
|
||||
.figure-backgroung-cover img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -54,6 +37,16 @@ figure, img{
|
|||
}
|
||||
|
||||
|
||||
/*
|
||||
.introduction{
|
||||
font-size: 26px;
|
||||
background: rgba(255, 255, 255, 0.521);
|
||||
padding: 10px 20px;
|
||||
margin: 0;
|
||||
margin-top: 60px;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
|
||||
/* ───────────────────────────────────────────
|
||||
|
|
@ -64,53 +57,52 @@ figure, img{
|
|||
break-before: right;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
h2{
|
||||
font-size: 38px;
|
||||
margin-top: 36px;
|
||||
background-color: #cfcfcf;
|
||||
padding: 20px;
|
||||
break-after: avoid;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
/* ───────────────────────────────────────────
|
||||
CHAPITRES
|
||||
─────────────────────────────────────────── */
|
||||
|
||||
|
||||
/* h3{
|
||||
margin-top: 30px;
|
||||
break-after: avoid;
|
||||
} */
|
||||
h3{
|
||||
break-after: avoid;
|
||||
}
|
||||
|
||||
|
||||
/* ───────────────────────────────────────────
|
||||
CARTES
|
||||
─────────────────────────────────────────── */
|
||||
|
||||
/* h4{
|
||||
h4{
|
||||
break-after: avoid;
|
||||
margin-top: 30px;
|
||||
text-decoration: underline;
|
||||
|
||||
} */
|
||||
}
|
||||
|
||||
|
||||
/* ───────────────────────────────────────────
|
||||
MARKERS
|
||||
─────────────────────────────────────────── */
|
||||
|
||||
/*
|
||||
h5{
|
||||
|
||||
.marker-title{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}*/
|
||||
|
||||
}
|
||||
.marker-title img{
|
||||
width: 40px;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
|
||||
h5{
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ body {
|
|||
}
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
|
|
@ -45,9 +45,7 @@ h1 {
|
|||
padding-left: 20px;
|
||||
margin-top: 60px;
|
||||
margin-bottom: 30px;
|
||||
font-family: "Source Code Pro";
|
||||
font-style: normal;
|
||||
color: rgb(237, 13, 13);
|
||||
font-family: "Montserrat";
|
||||
}
|
||||
|
||||
em {
|
||||
|
|
|
|||
|
|
@ -73,8 +73,8 @@
|
|||
<div v-if="item.intro" class="intro" v-html="item.intro"></div>
|
||||
<div v-if="item.markers && item.markers.length" class="markers">
|
||||
<div v-for="(marker, idx) in item.markers" :key="idx" class="marker">
|
||||
<h5 class="marker-title">
|
||||
<img
|
||||
<div class="marker-title">
|
||||
<img
|
||||
v-if="marker.icon"
|
||||
:src="marker.icon"
|
||||
class="marker-icon"
|
||||
|
|
@ -86,8 +86,10 @@
|
|||
class="marker-icon"
|
||||
alt=""
|
||||
/>
|
||||
<h5>
|
||||
{{ marker.title }}
|
||||
</h5>
|
||||
</div>
|
||||
<img v-if="marker.cover" :src="marker.cover" class="marker-cover" alt="" />
|
||||
<template v-if="marker.blocks">
|
||||
<component
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import * as cssComments from '../utils/css-comments';
|
|||
import prettier from 'prettier/standalone';
|
||||
import parserPostcss from 'prettier/plugins/postcss';
|
||||
import { getCsrfToken } from '../utils/kirby-auth';
|
||||
import { PAGE_DEFAULTS, TEXT_DEFAULTS, HEADING_DEFAULTS, INLINE_DEFAULTS } from '../utils/defaults';
|
||||
import { PAGE_DEFAULTS, TEXT_DEFAULTS, HEADING_DEFAULTS, INLINE_DEFAULTS, PARAGRAPH_CLASS_DEFAULTS } from '../utils/defaults';
|
||||
|
||||
export const useStylesheetStore = defineStore('stylesheet', () => {
|
||||
// Base state
|
||||
|
|
@ -209,6 +209,7 @@ export const useStylesheetStore = defineStore('stylesheet', () => {
|
|||
background: 'background',
|
||||
color: 'color',
|
||||
fontFamily: 'font-family',
|
||||
fontWeight: 'font-weight',
|
||||
textAlign: 'text-align',
|
||||
borderStyle: 'border-style',
|
||||
borderColor: 'border-color',
|
||||
|
|
@ -235,6 +236,24 @@ export const useStylesheetStore = defineStore('stylesheet', () => {
|
|||
}
|
||||
}
|
||||
|
||||
// Paragraph class defaults (p.author, ...)
|
||||
for (const [className, props] of Object.entries(PARAGRAPH_CLASS_DEFAULTS)) {
|
||||
const selector = `p.${className}`;
|
||||
for (const [key, cssProp] of Object.entries(unitPropsMap)) {
|
||||
if (props[key]) set(selector, cssProp, props[key].value, props[key].unit);
|
||||
}
|
||||
for (const [key, cssProp] of Object.entries(stringPropsMap)) {
|
||||
if (props[key]) set(selector, cssProp, props[key]);
|
||||
}
|
||||
for (const prop of spacingProps) {
|
||||
if (props[prop]) {
|
||||
for (const side of ['top', 'right', 'bottom', 'left']) {
|
||||
if (props[prop][side]) set(selector, `${prop}-${side}`, props[prop][side].value, props[prop][side].unit);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Inline element defaults (em, i, strong, b, a)
|
||||
for (const [tag, props] of Object.entries(INLINE_DEFAULTS)) {
|
||||
if (props.fontStyle) set(tag, 'font-style', props.fontStyle);
|
||||
|
|
|
|||
|
|
@ -44,8 +44,53 @@ export const ELEMENT_DEFAULTS = Object.freeze({
|
|||
});
|
||||
|
||||
export const HEADING_DEFAULTS = Object.freeze({
|
||||
h5: Object.freeze({
|
||||
fontSize: Object.freeze({ value: 16, unit: 'px' }),
|
||||
fontWeight: 'bold',
|
||||
margin: Object.freeze({
|
||||
top: Object.freeze({ value: 20, unit: 'px' }),
|
||||
bottom: Object.freeze({ value: 10, unit: 'px' }),
|
||||
}),
|
||||
}),
|
||||
h4: Object.freeze({
|
||||
fontSize: Object.freeze({ value: 20, unit: 'px' }),
|
||||
fontWeight: 'bold',
|
||||
margin: Object.freeze({
|
||||
bottom: Object.freeze({ value: 30, unit: 'px' }),
|
||||
}),
|
||||
background: '#dedede',
|
||||
textAlign: 'center',
|
||||
}),
|
||||
h3: Object.freeze({
|
||||
fontSize: Object.freeze({ value: 20, unit: 'px' }),
|
||||
fontWeight: 'bold',
|
||||
margin: Object.freeze({
|
||||
top: Object.freeze({ value: 30, unit: 'px' }),
|
||||
bottom: Object.freeze({ value: 20, unit: 'px' }),
|
||||
}),
|
||||
borderWidth: Object.freeze({ value: 2, unit: 'px' }),
|
||||
borderStyle: 'dotted',
|
||||
borderColor: '#000000',
|
||||
}),
|
||||
h2: Object.freeze({
|
||||
fontSize: Object.freeze({ value: 38, unit: 'px' }),
|
||||
fontWeight: 'bold',
|
||||
margin: Object.freeze({
|
||||
top: Object.freeze({ value: 36, unit: 'px' }),
|
||||
}),
|
||||
borderWidth: Object.freeze({ value: 2, unit: 'px' }),
|
||||
borderStyle: 'solid',
|
||||
borderColor: '#000000',
|
||||
padding: Object.freeze({
|
||||
top: Object.freeze({ value: 20, unit: 'px' }),
|
||||
right: Object.freeze({ value: 20, unit: 'px' }),
|
||||
bottom: Object.freeze({ value: 20, unit: 'px' }),
|
||||
left: Object.freeze({ value: 20, unit: 'px' }),
|
||||
}),
|
||||
}),
|
||||
h1: Object.freeze({
|
||||
fontSize: Object.freeze({ value: 38, unit: 'px' }),
|
||||
fontWeight: 'bold',
|
||||
lineHeight: Object.freeze({ value: 38, unit: 'px' }),
|
||||
background: 'rgba(255, 255, 255, 0.521)',
|
||||
padding: Object.freeze({
|
||||
|
|
@ -61,6 +106,26 @@ export const HEADING_DEFAULTS = Object.freeze({
|
|||
}),
|
||||
});
|
||||
|
||||
export const PARAGRAPH_CLASS_DEFAULTS = Object.freeze({
|
||||
author: Object.freeze({
|
||||
fontSize: Object.freeze({ value: 24, unit: 'px' }),
|
||||
fontWeight: 'bold',
|
||||
background: 'rgba(255, 255, 255, 0.521)',
|
||||
padding: Object.freeze({
|
||||
top: Object.freeze({ value: 10, unit: 'px' }),
|
||||
right: Object.freeze({ value: 20, unit: 'px' }),
|
||||
bottom: Object.freeze({ value: 10, unit: 'px' }),
|
||||
left: Object.freeze({ value: 20, unit: 'px' }),
|
||||
}),
|
||||
margin: Object.freeze({
|
||||
top: Object.freeze({ value: 20, unit: 'px' }),
|
||||
right: Object.freeze({ value: 0, unit: 'px' }),
|
||||
bottom: Object.freeze({ value: 0, unit: 'px' }),
|
||||
left: Object.freeze({ value: 0, unit: 'px' }),
|
||||
}),
|
||||
}),
|
||||
});
|
||||
|
||||
export const INLINE_DEFAULTS = Object.freeze({
|
||||
em: Object.freeze({ fontStyle: 'italic' }),
|
||||
i: Object.freeze({ fontStyle: 'italic' }),
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue