details: https://code.tryton.org/communication/website/commit/f385696d85cb
branch: default
user: Cédric Krier <[email protected]>
date: Sun Jan 04 17:14:50 2026 +0100
description:
Use pseudo-element to display section line
This prevents to have to set a background color to the titles.
diffstat:
sass/content/_section.scss | 49 +++++++++++++++++++++++++++++++--
templates/events/layout.html.jinja | 16 +++++-----
templates/events/tsd2019.html.jinja | 2 +-
templates/events/tsd2021.html.jinja | 2 +-
templates/events/tub2023.html.jinja | 2 +-
templates/events/tum2019.html.jinja | 2 +-
templates/index.html.jinja | 6 ++--
templates/service_providers.html.jinja | 4 +-
8 files changed, 62 insertions(+), 21 deletions(-)
diffs (216 lines):
diff -r 7c513014f2ec -r f385696d85cb sass/content/_section.scss
--- a/sass/content/_section.scss Sun Jan 04 15:52:35 2026 +0100
+++ b/sass/content/_section.scss Sun Jan 04 17:14:50 2026 +0100
@@ -1,4 +1,15 @@
// SECTIONS
+
+:root {
+ --section-line-color: var(--bs-heading-color);
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --section-line-color: var(--bs-body-color);
+ }
+}
+
.section {
@include media-breakpoint-down(md) {
padding-bottom: $tryton-section-padding-responsive;
@@ -32,7 +43,6 @@
animation: fadeInDown 2s ease-out;
margin-bottom: 2rem;
position: relative;
- border-top: 2px solid;
height: 0;
margin-bottom: 40px;
margin-top: 40px;
@@ -43,12 +53,40 @@
h4,
h5,
h6 {
+ align-items: center;
background-color: inherit;
- display: inline-block;
+ display: flex;
margin-bottom: 0;
position: relative;
top: -.5lh;
z-index: 1;
+
+ &::after {
+ background: var(--section-line-color);
+ content: "";
+ display: inline-block;
+ flex-grow: 1;
+ height: 2px;
+ margin-left: 1rem;
+ }
+ }
+
+ &.text-center {
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ &::before {
+ background: var(--section-line-color);
+ content: "";
+ display: inline-block;
+ flex-grow: 1;
+ height: 2px;
+ margin-right: 1rem;
+ }
+ }
}
@each $color, $value in $theme-colors {
@@ -60,9 +98,12 @@
h5,
h6 {
color: $value;
+
+ &::before,
+ &::after {
+ background: $value;
+ }
}
-
- border-color: $value;
}
}
}
diff -r 7c513014f2ec -r f385696d85cb templates/events/layout.html.jinja
--- a/templates/events/layout.html.jinja Sun Jan 04 15:52:35 2026 +0100
+++ b/templates/events/layout.html.jinja Sun Jan 04 17:14:50 2026 +0100
@@ -30,8 +30,8 @@
</div>
<section class="section" id="schedule">
<div class="container">
- <div class="section-header bg-white text-primary text-center">
- <h2 class="ps-3 pe-3 text-uppercase"><span
class="material-icons">timer</span> Schedule</h2>
+ <div class="section-header text-primary text-center">
+ <h2><span class="material-icons">timer</span> Schedule</h2>
</div>
{% block schedule %}
<div class="mx-auto" style="max-width: 600px;">
@@ -87,8 +87,8 @@
</section>
<section class="section bg-light text-dark" id="register">
<div class="container">
- <div class="section-header bg-light">
- <h2 class="ps-3 pe-3 text-uppercase">Register</h2>
+ <div class="section-header text-dark">
+ <h2>Register</h2>
</div>
{% block register %}
{% endblock register %}
@@ -96,8 +96,8 @@
</section>
<section class="section" id="venue">
<div class="container">
- <div class="section-header bg-white">
- <h2 class="ps-3 pe-3 text-uppercase">Venue <span
class="material-icons">place</span></h2>
+ <div class="section-header">
+ <h2><span class="material-icons">place</span>Venue</h2>
</div>
{% block venue %}
{% endblock venue %}
@@ -105,8 +105,8 @@
</section>
<section class="section bg-light text-dark" id="accommodations">
<div class="container">
- <div class="section-header bg-light">
- <h2 class="ps-3 pe-3 text-uppercase">Accommodations <span
class="material-icons">hotel</span></h2>
+ <div class="section-header text-dark">
+ <h2><span class="material-icons">hotel</span>Accommodations</h2>
</div>
{% block accommodations %}
{% endblock accommodations %}
diff -r 7c513014f2ec -r f385696d85cb templates/events/tsd2019.html.jinja
--- a/templates/events/tsd2019.html.jinja Sun Jan 04 15:52:35 2026 +0100
+++ b/templates/events/tsd2019.html.jinja Sun Jan 04 17:14:50 2026 +0100
@@ -122,7 +122,7 @@
<section class="section sponsors" id="sponsors">
<div class="container">
<div class="section-header">
- <h2 class="bg-white">Sponsors</h2>
+ <h2>Sponsors</h2>
</div>
<p>With the support of:</p>
<a href="https://www.impulsalicante.es/";>
diff -r 7c513014f2ec -r f385696d85cb templates/events/tsd2021.html.jinja
--- a/templates/events/tsd2021.html.jinja Sun Jan 04 15:52:35 2026 +0100
+++ b/templates/events/tsd2021.html.jinja Sun Jan 04 17:14:50 2026 +0100
@@ -114,7 +114,7 @@
<section class="section sponsors" id="sponsors">
<div class="container">
<div class="section-header">
- <h2 class="bg-white">Sponsors</h2>
+ <h2>Sponsors</h2>
</div>
<p>With the support of:</p>
<a href="https://www.impulsalicante.es/";>
diff -r 7c513014f2ec -r f385696d85cb templates/events/tub2023.html.jinja
--- a/templates/events/tub2023.html.jinja Sun Jan 04 15:52:35 2026 +0100
+++ b/templates/events/tub2023.html.jinja Sun Jan 04 17:14:50 2026 +0100
@@ -186,7 +186,7 @@
<section class="section sponsors" id="sponsors">
<div class="container">
<div class="section-header">
- <h2 class="bg-white">Sponsors</h2>
+ <h2>Sponsors</h2>
</div>
<p>With the support of:</p>
<a href="http://m-ds.de/";>
diff -r 7c513014f2ec -r f385696d85cb templates/events/tum2019.html.jinja
--- a/templates/events/tum2019.html.jinja Sun Jan 04 15:52:35 2026 +0100
+++ b/templates/events/tum2019.html.jinja Sun Jan 04 17:14:50 2026 +0100
@@ -132,7 +132,7 @@
<section class="section sponsors" id="sponsors">
<div class="container">
<div class="section-header">
- <h2 class="bg-white">Sponsors</h2>
+ <h2>Sponsors</h2>
</div>
<p>With the support of:</p>
<a href="http://www.emd-management.fr/";>
diff -r 7c513014f2ec -r f385696d85cb templates/index.html.jinja
--- a/templates/index.html.jinja Sun Jan 04 15:52:35 2026 +0100
+++ b/templates/index.html.jinja Sun Jan 04 17:14:50 2026 +0100
@@ -110,8 +110,8 @@
<section class="section bg-light text-dark text-center" id="features">
<div class="container">
- <section class="section-header text-primary">
- <h2 class="bg-light ps-3 pe-3 text-uppercase">All you need to run
your business</h2>
+ <section class="section-header text-primary text-center">
+ <h2 class="text-uppercase">All you need to run your business</h2>
</section>
<h3 class="lead">
{% include 'tryton-tm.html.jinja' %} includes all these features
<strong>fully integrated</strong>
@@ -244,7 +244,7 @@
<section class="section" id="news">
<div class="container">
<section class="section-header text-primary">
- <h3 class="bg-body pe-3 text-uppercase"><a class="link-primary "
href="{{ url_for('news') }}">News</a></h3>
+ <h3 class="text-uppercase"><a class="link-primary " href="{{
url_for('news') }}">News</a></h3>
</section>
<div class="row">
{% for item in news[:3] %}
diff -r 7c513014f2ec -r f385696d85cb templates/service_providers.html.jinja
--- a/templates/service_providers.html.jinja Sun Jan 04 15:52:35 2026 +0100
+++ b/templates/service_providers.html.jinja Sun Jan 04 17:14:50 2026 +0100
@@ -6,8 +6,8 @@
{{ super() }}
<div class="section bg-primary">
<div class="container">
- <section class="section-header text-center text-white bg-primary mb-1">
- <h1 class="ps-3 pe-3">{{ title }}</h1>
+ <section class="section-header text-center mb-1">
+ <h1>{{ title }}</h1>
</section>
<div id="map-card" class="d-none d-sm-block mx-auto col-md-6 card
mt-4">
<div class="card-body">
