diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index a58ce89a7b..615a5e4323 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -219,8 +219,8 @@ jobs:
with:
node-version: "${{ env.NODE_VERSION }}"
- - name: Install Cairo
- run: sudo apt-get update && sudo apt-get install libcairo2-dev
+ - name: Install Cairo and tidylib
+ run: sudo apt-get update && sudo apt-get install libcairo2-dev tidy
- name: Install Python dependencies
run: pip install -r requirements-ci.txt
diff --git a/assets/js/ajax-actions.js b/assets/js/ajax-actions.js
index 44e700353a..d270cc8366 100644
--- a/assets/js/ajax-actions.js
+++ b/assets/js/ajax-actions.js
@@ -39,7 +39,7 @@
const $act = $(this)
const $form = $(this).parents('form:first')
let $email = $(this).parents('li:first').next().find("[data-ajax-input='follow-topic-by-email']")
- const $followText = $act.find('span#follow_text')
+ const $followText = $act.find('span.follow_text')
const $count = $form.find('span#subscriber_count')
const $plural = $act.find('span#subscriber_plural')
const $otherSubscriberCount = $($act.attr('data-raw-subscriber-count'))
diff --git a/assets/scss/components/_topic-list.scss b/assets/scss/components/_topic-list.scss
index 61b515ceee..f6886aaea5 100644
--- a/assets/scss/components/_topic-list.scss
+++ b/assets/scss/components/_topic-list.scss
@@ -202,6 +202,9 @@
.topic-members {
margin: 0;
color: $grey-600;
+ .topic-author {
+ font-style: italic;
+ }
}
&.has-image a {
@@ -329,6 +332,9 @@
.topic-members-long-date {
display: none;
}
+ .topic-author {
+ font-style: italic;
+ }
}
.topic-answers {
diff --git a/assets/scss/layout/_content.scss b/assets/scss/layout/_content.scss
index e67f4372b2..6e0982fbe3 100644
--- a/assets/scss/layout/_content.scss
+++ b/assets/scss/layout/_content.scss
@@ -14,17 +14,17 @@
}
header {
- >.title-block {
+ > .title-block {
display: flex;
flex-direction: row;
margin-bottom: $length-10;
- >.content-thumbnail-group {
+ > .content-thumbnail-group {
flex-grow: 0;
flex-shrink: 0;
- display:block;
+ display: block;
height: $length-64;
width: $length-64;
@@ -32,50 +32,56 @@
background-size: contain;
- >.thumbnail {
+ > .thumbnail {
width: 100%;
height: 100%;
border: $length-1 solid $grey-200;
box-sizing: border-box;
}
- >.edit-thumbnail {
+ > .edit-thumbnail {
display: block;
width: $length-32;
height: $length-32;
- margin-top: calc($length-64/2 - $length-32/2);
- margin-left: calc($length-64/2 - $length-32/2);
+ margin-top: calc($length-64 / 2 - $length-32 / 2);
+ margin-left: calc($length-64 / 2 - $length-32 / 2);
border-radius: $radius-round;
background-color: rgba($grey-200, 0.7);
+
&.with-thumbnail {
position: relative;
top: -$length-64;
}
- &.with-placeholder{
+
+ &.with-placeholder {
position: relative;
top: 0;
}
+
&::after {
content: " ";
display: block;
width: $length-16;
height: $length-16;
position: relative;
- top: calc($length-32/2 - $length-16/2);
- left: calc($length-32/2 - $length-16/2);
+ top: calc($length-32 / 2 - $length-16 / 2);
+ left: calc($length-32 / 2 - $length-16 / 2);
@include sprite;
@include sprite-position($edit-blue);
background-repeat: no-repeat;
}
+
transition: border-radius .005s ease-in-out;
+
&:hover {
border-radius: 0;
width: 100%;
height: 100%;
margin: 0;
+
&::after {
- top: calc($length-64/2 - $length-16/2);
- left: calc($length-64/2 - $length-16/2);
+ top: calc($length-64 / 2 - $length-16 / 2);
+ left: calc($length-64 / 2 - $length-16 / 2);
}
}
}
@@ -93,15 +99,15 @@
}
}
- >.content-title-and-subtitle-group {
- width:100%;
+ > .content-title-and-subtitle-group {
+ width: 100%;
padding-bottom: $length-4;
border-bottom: $length-1 solid $accent-500;
- >.content-title-group {
- >.title {
+ > .content-title-group {
+ > .title {
display: inline;
vertical-align: middle;
border: none;
@@ -109,21 +115,21 @@
padding: 0;
}
- >.edit-button {
+ > .edit-button {
display: inline-block;
vertical-align: middle;
}
}
- >.content-subtitle-group {
- >.subtitle {
+ > .content-subtitle-group {
+ > .subtitle {
display: inline;
vertical-align: middle;
margin: 0;
padding: 0;
}
- >.edit-button {
+ > .edit-button {
display: inline-block;
vertical-align: middle;
}
@@ -135,11 +141,81 @@
}
}
- section > h2 {
+ .content-header-container {
display: flex;
+ align-items: center;
+
+ margin-bottom: $length-20;
+ padding: $length-6 $length-1;
+
+ border-top: $length-1 solid $grey-100;
+
+ background: $true-white;
+
+ font-weight: 400;
+ font-size: $font-size-6;
+ border-bottom: $length-1 solid $accent-500;
+
+ h2.title-with-buttons {
+ margin-top: 0;
+ padding: 0;
+ margin-bottom: 0;
+ border: none;
+ }
+
+ .actions-title {
+ @include mobile {
+ flex-direction: column;
+ }
+ ul {
+ display: flex;
+ list-style: none;
+ margin: $length-1;
+
+ .btn {
+ height: $length-32;
+ margin: $length-2;
+
+ background-color: $grey-100;
+ color: $grey-600;
+
+ font-size: $font-size-9;
+ line-height: 2;
+
+ z-index: 1;
+
+ transition: color .1s ease-in-out,
+ background-color .1s ease-in-out;
+
+ &.ico-after:after {
+ margin-top: $length-8;
+ }
+
+ &:hover,
+ &:focus {
+ color: $grey-800;
+ background-color: $grey-200;
+ text-decoration: none;
+ }
+ }
+ }
+
+ }
+ }
+
+ section > h2,
+ .content-header-container {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ flex-wrap: wrap;
+
+ h2,
span {
flex: 2;
+ margin: 0;
+ min-width: 200px;
}
.btn {
@@ -181,7 +257,7 @@
margin: $length-10 0;
padding: $length-6 0 $length-6 $length-16;
- border-left: $length-6 solid$grey-200;
+ border-left: $length-6 solid $grey-200;
}
}
@@ -318,7 +394,8 @@
p,
figure,
blockquote,
- .title-block {
+ .title-block,
+ .content-header-container {
margin-left: $length-10;
margin-right: $length-10;
}
diff --git a/assets/scss/layout/_main.scss b/assets/scss/layout/_main.scss
index ab4489bb08..0f25dda8a7 100644
--- a/assets/scss/layout/_main.scss
+++ b/assets/scss/layout/_main.scss
@@ -42,21 +42,27 @@
@include sprite-height($articles);
}
}
+
&.ico-opinions:after {
@include sprite-position($opinions);
}
+
&.ico-articles:after {
@include sprite-position($articles);
}
+
&.ico-tutorials:after {
@include sprite-position($tutorials);
}
+
&.ico-news:after {
@include sprite-position($star-heading-white);
}
+
&.ico-forum:after {
@include sprite-position($forum-heading);
}
+
&.ico-tags:after {
@include sprite-position($tags);
}
@@ -78,27 +84,27 @@
}
.simple-edit-button {
- text-align: right;
+ text-align: right;
- .btn {
- display: inline-block;
- float: none;
- }
+ .btn {
+ display: inline-block;
+ float: none;
+ }
}
li.simple-create-button {
list-style-type: '';
.btn {
- display:inline-block;
+ display: inline-block;
- float:none;
+ float: none;
vertical-align: middle;
margin-top: $length-8;
margin-left: -$length-18;
- padding:0 $length-12 0 $length-8;
+ padding: 0 $length-12 0 $length-8;
height: $length-32;
@@ -158,7 +164,7 @@
margin-top: 0;
}
-.pagination-bottom-clear{
+.pagination-bottom-clear {
clear: both;
}
@@ -176,6 +182,7 @@
.content-container {
width: 100%;
}
+
.sidebar {
display: none;
}
@@ -241,10 +248,12 @@
width: 49.5%;
margin: 0 0 0 1%;
}
+
.content-col-3 {
width: 32%;
margin: 0 0 0 2%;
}
+
.content-col-2,
.content-col-3 {
float: left;
@@ -277,6 +286,7 @@
.full-content-wrapper .tutorial-list article {
width: 46%;
float: left;
+
&.extend {
width: 100%;
}
@@ -336,3 +346,33 @@
margin-top: $length-48;
}
}
+
+table tbody tr td, table thead tr th {
+ &.w-5 {
+ width: 5%;
+ }
+
+ &.w-10 {
+ width: 10%;
+ }
+
+ &.w-15 {
+ width: 15%;
+ }
+
+ &.w-20 {
+ width: 20%;
+ }
+
+ &.w-45 {
+ width: 45%;
+ }
+
+ &.w-50 {
+ width: 50%;
+ }
+
+ &.w-300px {
+ width: 300px;
+ }
+}
diff --git a/assets/scss/layout/_sidebar.scss b/assets/scss/layout/_sidebar.scss
index df11fe6c35..34ad410a5a 100644
--- a/assets/scss/layout/_sidebar.scss
+++ b/assets/scss/layout/_sidebar.scss
@@ -409,7 +409,7 @@
&:focus {
& + .last-answer {
left: calc(100% + #{$length-1}); // Fix #5020 : prevents tooltip flickering
-
+ display: inline;
visibility: visible;
opacity: 1;
diff --git a/assets/scss/pages/_flexpage.scss b/assets/scss/pages/_flexpage.scss
index 846148a862..1351c67e99 100644
--- a/assets/scss/pages/_flexpage.scss
+++ b/assets/scss/pages/_flexpage.scss
@@ -206,8 +206,7 @@ $content-width: 1145px;
}
}
- // FIXME too specific
- #follow_text {
+ button span.follow_text {
padding-left: $length-12;
}
}
diff --git a/requirements-dev.txt b/requirements-dev.txt
index d924cecfa0..f9a4aa84de 100644
--- a/requirements-dev.txt
+++ b/requirements-dev.txt
@@ -10,3 +10,4 @@ PyYAML==6.0.3
selenium==4.38.0
Sphinx==8.2.3
sphinx-rtd-theme==3.0.2
+pytidylib==0.3.2
diff --git a/templates/base.html b/templates/base.html
index 4f09b398d4..1f2659d2c8 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -6,7 +6,7 @@
{% load interventions %}
{% load messages %}
{% load trail %}
-
+{% spaceless %}
@@ -46,7 +46,7 @@
{{app.site.long_description}}
{% endblock %}
{% endcaptureas %}
-
+
{% captureas meta_image %}
@@ -57,8 +57,8 @@
{# OpenGraph #}
-
-
+
+
@@ -76,8 +76,8 @@
{% endif %}
-
-
+
+
@@ -116,18 +116,18 @@
{% endwith %}
{# RSS links #}
- {% with request.GET|yesno:'?,'|add:request.GET.urlencode as rss_params %}
-
-
-
-
-
-
-
- {% endwith %}
+
+
+
+
+
+
+
+
+
{# OpenSearch plugin autodiscovery #}
-
+ {% include "very_top_banner_style.html" %}
{% block head_extra %}{% endblock %}
@@ -250,3 +250,4 @@ {{ headlin