deblan/deblan.io-murph
deblan
/
deblan.io-murph
1
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity

[wip] add typography

This commit is contained in:
Simon Vieille 2022-09-25 22:50:37 +02:00
parent adb868925f
commit a2e4fa811c
Signed by: deblan
GPG Key ID: 579388D585F70417
11 changed files with 157 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
assets/css/app.scss
View File

@ -124,28 +124,28 @@ pre[class*="language-"] {
// border-radius: 10px;
// }
//
// .captcha_reload {
// width: 50px !important;
// padding-left: 50px;
// height: 50px;
// overflow: hidden;
// display: inline-block;
// margin-bottom: -19px;
//
// &:active, &:focus {
// background: none;
// }
//
// &::after {
// content: ' ';
// display: block;
// width: 50px;
// height: 50px;
// margin-left: -50px;
// margin-top: -23px;
// background: url(../images/Refresh_icon.svg);
// }
// }
.captcha_reload {
width: 50px !important;
padding-left: 50px;
height: 50px;
overflow: hidden;
display: inline-block;
margin-bottom: -19px;
&:active, &:focus {
background: none;
}
&::after {
content: ' ';
display: block;
width: 50px;
height: 50px;
margin-left: -50px;
margin-top: -23px;
background: url(../images/Refresh_icon.svg);
}
}
//
// &-captcha {
// label {
@ -303,13 +303,7 @@ pre[class*="language-"] {
padding: 30px 40px;
margin: auto;
text-align: center;
background: rgba(255, 255, 255, 0.06);
animation: morph 15s linear infinite alternate, spin 20s linear infinite;
z-index: 1000;
will-change: border-radius, transform;
transform-origin: 55% 55%;
animation: HeaderMorph 10s linear infinite alternate, spin 26s linear infinite reverse;
transform-origin: 20% 20%;
}
.header-shadow {
@ -359,7 +353,7 @@ pre[class*="language-"] {
color: $color-header-text;
p, h1, ul {
position: relative;
position: relative !important;
z-index: 1000;
}
@ -512,6 +506,10 @@ pre[class*="language-"] {
img {
width: auto;
}
*:first-child {
margin-top: 0;
}
}
@for $i from 1 through 6 {
@ -524,10 +522,9 @@ pre[class*="language-"] {
.review {
width: 100%;
.review-avatar {
display: inline-block;
.review-avatar, .review-avatar img {
width: 60px;
margin-right: 10px;
max-width: 60px;
}
&.review--post {
@ -1196,7 +1193,7 @@ $links: (
background: #343c53;
}
.body {
.body, .review-body {
a:not(.button), h1, h2, h3, h4, h5, p, ul {
color: #fff;
}
@ -1218,6 +1215,11 @@ $links: (
background: #242b3d;
}
.content hr, .content .hr {
background: none;
border-color: darken($color-wide-menu-background-to, 10%) !important;
}
.header-shadow {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(255,255,255,0) 100%);
}

4
assets/css/app/config.scss
View File

@ -41,3 +41,7 @@ $color-code-mark-background: $color-light-blue;
$color-code-title-background: #3c3c3c;
$color-code-title-text: #999;
/* --- */
:root {
--p: 195 77% 41%;
}

58
assets/css/app/typo.scss
View File

@ -15,35 +15,35 @@
// margin-top: 0
// }
//
// .h1, h1 {
// font-size: 3.6rem;
// line-height: 1.3
// }
//
// .h2, h2 {
// font-size: 3rem;
// line-height: 1.35
// }
//
// .h3, h3 {
// font-size: 2.4rem;
// line-height: 1.45
// }
//
// .h4, h4 {
// font-size: 1.8rem;
// line-height: 1.6
// }
//
// .h5, h5 {
// font-size: 1.4rem;
// line-height: 1.75
// }
//
// .h6, h6 {
// font-size: 1.2rem;
// line-height: 1.9
// }
.h1, h1 {
font-size: 3.2rem;
line-height: 1.32
}
.h2, h2 {
font-size: 2.6rem;
line-height: 1.35
}
.h3, h3 {
font-size: 2.0rem;
line-height: 1.45
}
.h4, h4 {
font-size: 1.4rem;
line-height: 1.6
}
.h5, h5 {
font-size: 1.1rem;
line-height: 1.75
}
.h6, h6 {
font-size: 1.0rem;
line-height: 1.9
}
//
// p {
// margin-top: 17px;

8
tailwind.config.js
View File

@ -5,13 +5,17 @@ module.exports = {
"./templates/**/*.html.twig",
],
theme: {
extend: {},
extend: {
},
},
plugins: [
require("daisyui"),
require('@tailwindcss/typography'),
],
daisyui: {
themes: ["dark"],
themes: [
"light",
"dark",
],
},
}

2
templates/bot/form_without_javascript.html.twig
View File

@ -31,7 +31,7 @@
<input type="hidden" name="{{ name }}" value="{{ value }}">
{% endfor %}
<input class="button" type="submit" value="Valider le formulaire">
<input class="btn btn-primary mt-10" type="submit" value="Valider le formulaire">
</form>
</div>
</div>

2
templates/editorjs/link.html.twig
View File

@ -3,7 +3,7 @@
<a href="{{ link }}" class="ejs-link--anchor {% if meta.image is defined and meta.image %}ejs-link--anchor--with-image{% endif %}" target="_blank">
<div class="ejs-link-content">
{% if meta.title %}
<div class="ejs-link-content--title">{{- meta.title -}}</div>
<div class="ejs-link-content--title mb-5">{{- meta.title -}}</div>
{% endif %}
{% if meta.title %}
<div class="ejs-link-content--description">{{- meta.description|raw|nl2br -}}</div>

4
templates/page/categories/default.html.twig
View File

@ -2,10 +2,10 @@
{% block body %}
<div class="col-12">
<div class="body">
<div class="body prose-lg">
<ul>
{% for category in categories %}
<li class="h3">
<li class="h4">
<a href="{{ safe_path('blog_menu_category', {
category: category.id,
slug: category.slug,

8
templates/page/contact/default.html.twig
View File

@ -33,13 +33,15 @@
{{ form_widget(form.message, {attr: {cols: 30, rows: 10, class: 'textarea textarea-bordered w-full'}}) }}
</div>
<div class="col-span-2">
{{ form_label(form.captcha, null, {label_attr: {class: 'label'}}) }}
{{ form_widget(form.captcha, {attr: {class: 'input input-bordered w-full'}}) }}
<div class="flex justify-start gap-3">
{{ form_label(form.captcha, null, {label_attr: {class: 'label'}}) }}
{{ form_widget(form.captcha, {attr: {class: 'input input-bordered'}}) }}
</div>
</div>
<div class="col-span-2">
<label class="label justify-start gap-3" for="rgpd">
<input type="checkbox" id="rgpd" class="checkbox" required>
<span class="label-text">En validant ce formulaire, vous acceptez que j'utilise votre e-mail pour vous fournir une réponse.</span>
<span class="label">En validant ce formulaire, vous acceptez que j'utilise votre e-mail pour vous fournir une réponse.</span>
</label>
</div>
<div class="col-span-2">

2
templates/page/links/default.html.twig
View File

@ -40,7 +40,7 @@
<div class="ejs-link rounded-2xl shadow-md p-2 md:p-8 flex justify-start bg-box">
<a href="{{ item.link }}" class="ejs-link--anchor" target="_blank">
<div class="ejs-link-content">
<div class="ejs-link-content--title">{{- item.title -}}</div>
<div class="ejs-link-content--title mb-8">{{- item.title -}}</div>
<div class="ejs-link-content--link">
<span class="deblan-icon deblan-icon-link"></span>

65
templates/page/post/_comment.html.twig
View File

@ -2,54 +2,31 @@
{% set col = 12 - (level - 1) %}
<div>
<div class="review col-12 offset-{{ level - 1 }} mb-10" id="review-{{ comment.id }}">
<ul class="flex justify-items-start">
<li class="mr-8">
<li class="mr-8 review-avatar">
<img src="{{ comment.avatar }}" alt="{{ comment.author }}" title="{{ comment.author }}" class="rounded-full">
</li>
<li>
<a rel="author" href="{{ comment.website ? comment.website : ('#review-' ~ comment.id) }}" class="">
{{- comment.author -}}
<br>
<time datetime="{{ comment.createdAt|date("Y-m-d") }}" title="{{ comment.createdAt|date("r") }}">
{{- comment.createdAt|date("d/m/Y à H\\hi") -}}
</time>
</a>
</li>
</ul>
</div>
<div class="review col-12 offset-{{ level - 1 }} " id="review-{{ comment.id }}">
<ul class="list--unstyled grid">
<li class="review-avatar">
</li>
<li class="review-content">
<ul class="list--unstyled">
<li class="review-header">
<strong>
</strong>
<a class="review-anchor-link" href="#review-{{ comment.id }}">
<time datetime="{{ comment.createdAt|date("Y-m-d") }}" title="{{ comment.createdAt|date("r") }}">
{{- comment.createdAt|date("d/m/Y à H\\hi") -}}
</time>
</a>
</li>
<li class="review-body">
{% if comment.createdAt.timestamp > 1538118768 %} {# 28/09/2018 #}
{{- comment.content|markdown('comment') -}}
{% else %}
{{- comment.content|comment -}}
{% endif %}
</li>
<li class="review-footer">
<a href="#form" class="button small" data-answer="{{ comment.id }}">
<span class="deblan-icon deblan-icon-response" data-answer="{{ comment.id }}"></span>
{{- 'Répondre' -}}
</a>
</li>
</ul>
<p class="mb-5">
<a rel="author" href="{{ comment.website ? comment.website : ('#review-' ~ comment.id) }}" class="">
{{- comment.author }}, <time datetime="{{ comment.createdAt|date("Y-m-d") }}" title="{{ comment.createdAt|date("r") }}">
{{- comment.createdAt|date("d/m/Y à H\\hi") -}}
</time>
</a>
</p>
<div class="review-body prose-lg">
{% if comment.createdAt.timestamp > 1538118768 %} {# 28/09/2018 #}
{{- comment.content|markdown('comment') -}}
{% else %}
{{- comment.content|comment -}}
{% endif %}
</div>
<div class="review-footer">
<a href="#form" class="btn btn-sm" data-answer="{{ comment.id }}">
{{- 'Répondre' -}}
</a>
</div>
</li>
</ul>
</div>

105
templates/page/post/_post.html.twig
View File

@ -115,83 +115,82 @@
{% endfor %}
{% endif %}
{% form_theme form with "form_div_layout.html.twig" %}
<div class="grid" id="form">
<form class="form col-12" method="POST" data-form-bot action="{{ safe_url('blog_tech_form_without_javascript', {page: app.request.uri, _domain: _domain}) }}">
<form class="form" method="POST" data-form-bot action="{{ safe_url('blog_tech_form_without_javascript', {page: app.request.uri, _domain: _domain}) }}">
{% if comments|length %}
<hr>
{% endif %}
<div class="h4">Ajouter un commentaire</div>
<div class="row">
<div class="field col-6">
{{ form_label(form.author) }}
{{ form_widget(form.author) }}
<div class="grid grid-flow-row-dens grid-cols-2 gap-5">
<div class="col-span-2 md:col-span-1">
{{ form_label(form.author, null, {label_attr: {class: 'label'}}) }}
{{ form_widget(form.author, {attr: {class: 'input input-bordered w-full'}}) }}
{{ form_errors(form.author) }}
</div>
<div class="field col-6">
{{ form_label(form.website) }}
{{ form_widget(form.website) }}
<div class="col-span-2 md:col-span-1">
{{ form_label(form.website, null, {label_attr: {class: 'label'}}) }}
{{ form_widget(form.website, {attr: {class: 'input input-bordered w-full'}}) }}
{{ form_errors(form.website) }}
</div>
</div>
<div class="row">
<div class="field col-12">
{{ form_label(form.email) }}
{{ form_widget(form.email) }}
<div class="col-span-2">
{{ form_label(form.email, null, {label_attr: {class: 'label'}}) }}
{{ form_widget(form.email, {attr: {class: 'input input-bordered w-full'}}) }}
{{ form_errors(form.email) }}
</div>
</div>
<div class="row">
<div class="field col-12">
{{ form_label(form.follow) }}
{{ form_widget(form.follow) }}
{{ form_errors(form.follow) }}
<div class="col-span-2">
<div class="label justify-start gap-3">
{{ form_widget(form.follow, {attr: {class: 'checkbox'}}) }}
<label class="label" for="user_comment_follow">{{ form.follow.vars.label }}</label>
</div>
</div>
</div>
<div class="field">
<p class="no-margin">
{{- 'Votre commentaire - Vous pouvez utiliser du markdown ' }}
[<a title="Afficher l'aide" href="{{ safe_path('blog_tech_mardown', {_domain: _domain}) }}" target="_blank">?</a>]
</p>
<div class="col-span-2">
<p class="label">
{{- 'Votre commentaire - Vous pouvez utiliser du markdown ' }}
</p>
{{ form_errors(form.content) }}
{{ form_errors(form.content) }}
{{ form_widget(form.content, {attr: {cols: 30, rows: 10, class: 'textarea textarea-bordered w-full'}}) }}
{{ form_widget(form.content, {attr: {cols: 30, rows: 10}}) }}
<div class="hidden alert alert-notice-light" id="answer-alert">
<div class="grid">
<div class="col-9">
{{- 'Vous répondez à un commentaire' -}}
</div>
<div class="col-3 align-right">
<a href="#" id="cancel-answer">
<span class="button small">
<div class="hidden alert alert-info mt-5" id="answer-alert">
<div class="w-full flex justify-between">
<div>
{{- 'Vous répondez à un commentaire' -}}
</div>
<div>
<a href="#" class="btn btn-sm" id="cancel-answer">
{{- 'Annuler' -}}
</span>
</a>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="field field-captcha">
{{ form_label(form.captcha) }}
{{ form_widget(form.captcha) }}
</div>
<div class="field">
<input type="checkbox" id="rgpd" required>
<label for="rgpd">En validant ce formulaire, vous acceptez que les données saisies seront publiées sur cette page à l'exception de votre e-mail. Votre e-mail sera utilisé pour afficher votre avatar (<a href="https://www.libravatar.org/" target="_blank">via Libravatar</a>) et pour les notifications.</label>
</div>
<div class="col-span-2">
<div class="flex justify-start gap-3">
{{ form_label(form.captcha, null, {label_attr: {class: 'label'}}) }}
{{ form_widget(form.captcha, {attr: {class: 'input input-bordered'}}) }}
</div>
</div>
<div class="col-span-2">
<label class="label justify-start gap-3" for="rgpd">
<input type="checkbox" id="rgpd" class="checkbox" required>
<span class="label">En validant ce formulaire, vous acceptez que j'utilise votre e-mail pour vous fournir une réponse.</span>
</label>
</div>
<div class="field">
<input type="submit" class="button" value="Publier" />
<input type="button" class="button alt preview-button" value="Prévisualiser" />
</div>
<div class="col-span-2">
<input type="submit" class="btn btn-primary mr-2" value="Publier" />
<input type="button" class="btn preview-button" value="Prévisualiser" />
</div>
{{ form_rest(form) }}
{{ form_rest(form) }}
</div>
</form>
<div id="preview" class="review-body col-12"></div>
<div id="preview" class="review-body mt-5 mb-5"></div>
</div>
</div>
</div>