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

[wip] add typography

Browse source
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; // border-radius: 10px;
// } // }
// //
// .captcha_reload { .captcha_reload {
// width: 50px !important; width: 50px !important;
// padding-left: 50px; padding-left: 50px;
// height: 50px; height: 50px;
// overflow: hidden; overflow: hidden;
// display: inline-block; display: inline-block;
// margin-bottom: -19px; margin-bottom: -19px;
//
// &:active, &:focus { &:active, &:focus {
// background: none; background: none;
// } }
//
// &::after { &::after {
// content: ' '; content: ' ';
// display: block; display: block;
// width: 50px; width: 50px;
// height: 50px; height: 50px;
// margin-left: -50px; margin-left: -50px;
// margin-top: -23px; margin-top: -23px;
// background: url(../images/Refresh_icon.svg); background: url(../images/Refresh_icon.svg);
// } }
// } }
// //
// &-captcha { // &-captcha {
// label { // label {
@ -303,13 +303,7 @@ pre[class*="language-"] {
padding: 30px 40px; padding: 30px 40px;
margin: auto; margin: auto;
text-align: center; text-align: center;
background: rgba(255, 255, 255, 0.06);
animation: morph 15s linear infinite alternate, spin 20s linear infinite;
z-index: 1000; 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 { .header-shadow {
@ -359,7 +353,7 @@ pre[class*="language-"] {
color: $color-header-text; color: $color-header-text;
p, h1, ul { p, h1, ul {
position: relative; position: relative !important;
z-index: 1000; z-index: 1000;
} }
@ -512,6 +506,10 @@ pre[class*="language-"] {
img { img {
width: auto; width: auto;
} }
*:first-child {
margin-top: 0;
}
} }
@for $i from 1 through 6 { @for $i from 1 through 6 {
@ -524,10 +522,9 @@ pre[class*="language-"] {
.review { .review {
width: 100%; width: 100%;
.review-avatar { .review-avatar, .review-avatar img {
display: inline-block;
width: 60px; width: 60px;
margin-right: 10px; max-width: 60px;
} }
&.review--post { &.review--post {
@ -1196,7 +1193,7 @@ $links: (
background: #343c53; background: #343c53;
} }
.body { .body, .review-body {
a:not(.button), h1, h2, h3, h4, h5, p, ul { a:not(.button), h1, h2, h3, h4, h5, p, ul {
color: #fff; color: #fff;
} }
@ -1218,6 +1215,11 @@ $links: (
background: #242b3d; background: #242b3d;
} }
.content hr, .content .hr {
background: none;
border-color: darken($color-wide-menu-background-to, 10%) !important;
}
.header-shadow { .header-shadow {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(255,255,255,0) 100%); 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-background: #3c3c3c;
$color-code-title-text: #999; $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 // margin-top: 0
// } // }
// //
// .h1, h1 { .h1, h1 {
// font-size: 3.6rem; font-size: 3.2rem;
// line-height: 1.3 line-height: 1.32
// } }
//
// .h2, h2 { .h2, h2 {
// font-size: 3rem; font-size: 2.6rem;
// line-height: 1.35 line-height: 1.35
// } }
//
// .h3, h3 { .h3, h3 {
// font-size: 2.4rem; font-size: 2.0rem;
// line-height: 1.45 line-height: 1.45
// } }
//
// .h4, h4 { .h4, h4 {
// font-size: 1.8rem; font-size: 1.4rem;
// line-height: 1.6 line-height: 1.6
// } }
//
// .h5, h5 { .h5, h5 {
// font-size: 1.4rem; font-size: 1.1rem;
// line-height: 1.75 line-height: 1.75
// } }
//
// .h6, h6 { .h6, h6 {
// font-size: 1.2rem; font-size: 1.0rem;
// line-height: 1.9 line-height: 1.9
// } }
// //
// p { // p {
// margin-top: 17px; // margin-top: 17px;

8
tailwind.config.js
View file

@ -5,13 +5,17 @@ module.exports = {
"./templates/**/*.html.twig", "./templates/**/*.html.twig",
], ],
theme: { theme: {
extend: {}, extend: {
},
}, },
plugins: [ plugins: [
require("daisyui"), require("daisyui"),
require('@tailwindcss/typography'), require('@tailwindcss/typography'),
], ],
daisyui: { 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 }}"> <input type="hidden" name="{{ name }}" value="{{ value }}">
{% endfor %} {% endfor %}
<input class="button" type="submit" value="Valider le formulaire"> <input class="btn btn-primary mt-10" type="submit" value="Valider le formulaire">
</form> </form>
</div> </div>
</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"> <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"> <div class="ejs-link-content">
{% if meta.title %} {% if meta.title %}
<div class="ejs-link-content--title">{{- meta.title -}}</div> <div class="ejs-link-content--title mb-5">{{- meta.title -}}</div>
{% endif %} {% endif %}
{% if meta.title %} {% if meta.title %}
<div class="ejs-link-content--description">{{- meta.description|raw|nl2br -}}</div> <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 %} {% block body %}
<div class="col-12"> <div class="col-12">
<div class="body"> <div class="body prose-lg">
<ul> <ul>
{% for category in categories %} {% for category in categories %}
<li class="h3"> <li class="h4">
<a href="{{ safe_path('blog_menu_category', { <a href="{{ safe_path('blog_menu_category', {
category: category.id, category: category.id,
slug: category.slug, 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'}}) }} {{ form_widget(form.message, {attr: {cols: 30, rows: 10, class: 'textarea textarea-bordered w-full'}}) }}
</div> </div>
<div class="col-span-2"> <div class="col-span-2">
{{ form_label(form.captcha, null, {label_attr: {class: 'label'}}) }} <div class="flex justify-start gap-3">
{{ form_widget(form.captcha, {attr: {class: 'input input-bordered w-full'}}) }} {{ form_label(form.captcha, null, {label_attr: {class: 'label'}}) }}
{{ form_widget(form.captcha, {attr: {class: 'input input-bordered'}}) }}
</div>
</div> </div>
<div class="col-span-2"> <div class="col-span-2">
<label class="label justify-start gap-3" for="rgpd"> <label class="label justify-start gap-3" for="rgpd">
<input type="checkbox" id="rgpd" class="checkbox" required> <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> </label>
</div> </div>
<div class="col-span-2"> <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"> <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"> <a href="{{ item.link }}" class="ejs-link--anchor" target="_blank">
<div class="ejs-link-content"> <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"> <div class="ejs-link-content--link">
<span class="deblan-icon deblan-icon-link"></span> <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) %} {% 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"> <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"> <img src="{{ comment.avatar }}" alt="{{ comment.author }}" title="{{ comment.author }}" class="rounded-full">
</li> </li>
<li> <li>
<a rel="author" href="{{ comment.website ? comment.website : ('#review-' ~ comment.id) }}" class=""> <p class="mb-5">
{{- comment.author -}} <a rel="author" href="{{ comment.website ? comment.website : ('#review-' ~ comment.id) }}" class="">
<br> {{- comment.author }}, <time datetime="{{ comment.createdAt|date("Y-m-d") }}" title="{{ comment.createdAt|date("r") }}">
<time datetime="{{ comment.createdAt|date("Y-m-d") }}" title="{{ comment.createdAt|date("r") }}"> {{- comment.createdAt|date("d/m/Y à H\\hi") -}}
{{- comment.createdAt|date("d/m/Y à H\\hi") -}} </time>
</time> </a>
</a> </p>
</li> <div class="review-body prose-lg">
</ul> {% if comment.createdAt.timestamp > 1538118768 %} {# 28/09/2018 #}
</div> {{- comment.content|markdown('comment') -}}
{% else %}
<div class="review col-12 offset-{{ level - 1 }} " id="review-{{ comment.id }}"> {{- comment.content|comment -}}
<ul class="list--unstyled grid"> {% endif %}
<li class="review-avatar"> </div>
</li> <div class="review-footer">
<li class="review-content"> <a href="#form" class="btn btn-sm" data-answer="{{ comment.id }}">
<ul class="list--unstyled"> {{- 'Répondre' -}}
<li class="review-header"> </a>
<strong> </div>
</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>
</li> </li>
</ul> </ul>
</div> </div>

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

@ -115,83 +115,82 @@
{% endfor %} {% endfor %}
{% endif %} {% endif %}
{% form_theme form with "form_div_layout.html.twig" %}
<div class="grid" id="form"> <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 %} {% if comments|length %}
<hr> <hr>
{% endif %} {% endif %}
<div class="h4">Ajouter un commentaire</div> <div class="h4">Ajouter un commentaire</div>
<div class="row"> <div class="grid grid-flow-row-dens grid-cols-2 gap-5">
<div class="field col-6"> <div class="col-span-2 md:col-span-1">
{{ form_label(form.author) }} {{ form_label(form.author, null, {label_attr: {class: 'label'}}) }}
{{ form_widget(form.author) }} {{ form_widget(form.author, {attr: {class: 'input input-bordered w-full'}}) }}
{{ form_errors(form.author) }} {{ form_errors(form.author) }}
</div> </div>
<div class="field col-6"> <div class="col-span-2 md:col-span-1">
{{ form_label(form.website) }} {{ form_label(form.website, null, {label_attr: {class: 'label'}}) }}
{{ form_widget(form.website) }} {{ form_widget(form.website, {attr: {class: 'input input-bordered w-full'}}) }}
{{ form_errors(form.website) }} {{ form_errors(form.website) }}
</div> </div>
</div> <div class="col-span-2">
<div class="row"> {{ form_label(form.email, null, {label_attr: {class: 'label'}}) }}
<div class="field col-12"> {{ form_widget(form.email, {attr: {class: 'input input-bordered w-full'}}) }}
{{ form_label(form.email) }}
{{ form_widget(form.email) }}
{{ form_errors(form.email) }} {{ form_errors(form.email) }}
</div> </div>
</div> <div class="col-span-2">
<div class="row"> <div class="label justify-start gap-3">
<div class="field col-12"> {{ form_widget(form.follow, {attr: {class: 'checkbox'}}) }}
{{ form_label(form.follow) }} <label class="label" for="user_comment_follow">{{ form.follow.vars.label }}</label>
{{ form_widget(form.follow) }} </div>
{{ form_errors(form.follow) }}
</div> </div>
</div> <div class="col-span-2">
<div class="field"> <p class="label">
<p class="no-margin"> {{- 'Votre commentaire - Vous pouvez utiliser du markdown ' }}
{{- 'Votre commentaire - Vous pouvez utiliser du markdown ' }} </p>
[<a title="Afficher l'aide" href="{{ safe_path('blog_tech_mardown', {_domain: _domain}) }}" target="_blank">?</a>]
</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-info mt-5" id="answer-alert">
<div class="w-full flex justify-between">
<div class="hidden alert alert-notice-light" id="answer-alert"> <div>
<div class="grid"> {{- 'Vous répondez à un commentaire' -}}
<div class="col-9"> </div>
{{- 'Vous répondez à un commentaire' -}} <div>
</div> <a href="#" class="btn btn-sm" id="cancel-answer">
<div class="col-3 align-right">
<a href="#" id="cancel-answer">
<span class="button small">
{{- 'Annuler' -}} {{- 'Annuler' -}}
</span> </a>
</a> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="col-span-2">
<div class="field field-captcha"> <div class="flex justify-start gap-3">
{{ form_label(form.captcha) }} {{ form_label(form.captcha, null, {label_attr: {class: 'label'}}) }}
{{ form_widget(form.captcha) }} {{ form_widget(form.captcha, {attr: {class: 'input input-bordered'}}) }}
</div> </div>
<div class="field"> </div>
<input type="checkbox" id="rgpd" required> <div class="col-span-2">
<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> <label class="label justify-start gap-3" for="rgpd">
</div> <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"> <div class="col-span-2">
<input type="submit" class="button" value="Publier" /> <input type="submit" class="btn btn-primary mr-2" value="Publier" />
<input type="button" class="button alt preview-button" value="Prévisualiser" /> <input type="button" class="btn preview-button" value="Prévisualiser" />
</div> </div>
{{ form_rest(form) }} {{ form_rest(form) }}
</div>
</form> </form>
<div id="preview" class="review-body col-12"></div> <div id="preview" class="review-body mt-5 mb-5"></div>
</div> </div>
</div> </div>
</div> </div>