diff --git a/components/Collection/templates/collection/actors.html.twig b/components/Collection/templates/collection/actors.html.twig
index 26c2202ed9..7fa9136d63 100644
--- a/components/Collection/templates/collection/actors.html.twig
+++ b/components/Collection/templates/collection/actors.html.twig
@@ -4,7 +4,7 @@
{% block body %}
diff --git a/components/Collection/templates/collection/widget_add_to.html.twig b/components/Collection/templates/collection/widget_add_to.html.twig
index cce9f48c45..57fa8e44db 100644
--- a/components/Collection/templates/collection/widget_add_to.html.twig
+++ b/components/Collection/templates/collection/widget_add_to.html.twig
@@ -4,23 +4,23 @@
{{ctitle}}
{% if has_collections %}
-
+
{% trans %}Other options{% endtrans %}
-
+
{% else %}
-
+
{% endif %}
diff --git a/components/LeftPanel/templates/left_panel/view.html.twig b/components/LeftPanel/templates/left_panel/view.html.twig
index 15b513ad2c..43cae5b4d9 100644
--- a/components/LeftPanel/templates/left_panel/view.html.twig
+++ b/components/LeftPanel/templates/left_panel/view.html.twig
@@ -1,28 +1,24 @@
{% block leftpanel %}
-
+ {{ block("footer", "cards/navigation/view.html.twig") }}
+
+
{% endblock leftpanel %}
diff --git a/components/RightPanel/templates/right_panel/view.html.twig b/components/RightPanel/templates/right_panel/view.html.twig
index a63e422328..b1e309c601 100644
--- a/components/RightPanel/templates/right_panel/view.html.twig
+++ b/components/RightPanel/templates/right_panel/view.html.twig
@@ -1,69 +1,65 @@
{% block rightpanel %}
-
+ {% set extra_blocks = get_right_panel_blocks({'path': current_path, 'request': app.request, 'vars': (right_panel_vars | default)}) %}
+ {% for block in extra_blocks %}
+ {{ block | raw }}
+ {% endfor %}
+
+
{% endblock rightpanel %}
diff --git a/components/Search/templates/cards/search/view.html.twig b/components/Search/templates/cards/search/view.html.twig
index 0412edf1d0..fe25b6481a 100644
--- a/components/Search/templates/cards/search/view.html.twig
+++ b/components/Search/templates/cards/search/view.html.twig
@@ -1,8 +1,6 @@
-
-
+
diff --git a/plugins/WebMonetization/templates/WebMonetization/widget.html.twig b/plugins/WebMonetization/templates/WebMonetization/widget.html.twig
index e78b50ee55..9a3f317fb6 100644
--- a/plugins/WebMonetization/templates/WebMonetization/widget.html.twig
+++ b/plugins/WebMonetization/templates/WebMonetization/widget.html.twig
@@ -3,9 +3,9 @@
Web Monetization
-
+
diff --git a/public/assets/default_theme/css/base.css b/public/assets/default_theme/css/base.css
index ca96f9f230..d3d1c8aa4f 100644
--- a/public/assets/default_theme/css/base.css
+++ b/public/assets/default_theme/css/base.css
@@ -1,5 +1,6 @@
html {
+ font-family: 'Open Sans', sans-serif;
scroll-margin-top: var(--xxl);
}
@@ -50,65 +51,25 @@ html {
.page-header {
z-index: 1;
- display: inline-flex;
- justify-content: center;
position: fixed;
+ display: flex;
top: 0;
- align-items: baseline;
- font-family: 'Poppins', sans-serif;
height: var(--xxl);
+ align-items: baseline;
padding: var(--s);
background: var(--gradient) !important;
box-shadow: var(--shadow);
}
.header-instance {
- display: flex;
- position: absolute;
text-align: center;
- align-items: center;
- align-self: center;
- margin-left: auto;
+ flex: 1;
}
-.header-instance > * {
+.header-instance * {
margin: unset;
}
-.header-extra-actions {
- justify-self: flex-end;
- margin-left: auto;
-}
-
-.header-extra-actions[open] > *:not(summary) {
- z-index: 2;
- position: absolute;
- top: 100%;
- right: 0;
- width: 16.5vw;
- border-radius: 0 0 var(--s) var(--s);
- padding: var(--s);
- background: var(--background-hard);
- box-shadow: var(--shadow);
-}
-
-.header-panel {
- display: flex;
- flex-direction: column;
- font-family: 'Open Sans', sans-serif;
- position: fixed;
- top: 0;
- margin-top: var(--xxl);
- height: calc(100% - var(--xxl));
- padding: var(--s);
- overflow-y: auto;
-}
-
-.panel-content {
- display: flex;
- flex-direction: column;
-}
-
.page-content-wrapper {
position: relative;
top: var(--xxl);
@@ -151,6 +112,26 @@ html {
justify-content: space-evenly;
}
+.section-panel {
+ position: fixed;
+ top: var(--xxl);
+ padding: var(--s);
+}
+
+.section-panel-left {
+ left: 0;
+}
+
+.section-panel-right {
+ right: 0;
+}
+
+.section-panel .panel-content {
+ display: block;
+ height: 100vh;
+ background: var(--background-hard);
+}
+
@media only screen and (max-width: 1280px) {
.page-header {
width: 100%;
@@ -164,23 +145,26 @@ html {
max-width: 100%;
}
- .header-extra-actions[open] > *:not(summary) {
- width: 100%;
+ label[for|="toggle-panel"] {
+ cursor: pointer;
}
- #panel-left-toggle:not(:checked) + .header-panel,
- #panel-right-toggle:not(:checked) + .header-panel {
+ input[id|="toggle-panel"] {
+ position: absolute;
+ top: -100%;
+ }
+
+ #toggle-panel-left:not(:checked) ~ .section-panel-left,
+ #toggle-panel-right:not(:checked) ~ .section-panel-right {
display: none;
}
- #panel-left-toggle:checked + .header-panel,
- #panel-right-toggle:checked + .header-panel,
- a[id|="anchor"]:target ~ .panel-content {
- display: flex;
- width: 100%;
- background-size: 100% 100%;
- z-index: auto;
- background-color: var(--background-hard) !important;
+ #toggle-panel-left:checked ~ .section-panel-left,
+ #toggle-panel-right:checked ~ .section-panel-right {
+ z-index: 1;
+ width: 100vw;
+ left: 0;
+ overflow-y: auto;
}
}
@@ -189,7 +173,12 @@ html {
width: 100%;
}
- .header-panel {
+ label[for|="toggle-panel"],
+ input[id|="toggle-panel"] {
+ display: none !important;
+ }
+
+ .section-panel {
width: 17vw;
}
@@ -213,7 +202,7 @@ html {
* > .page-content-wrapper
* 66% * 2/3 = 44%
*
- * > .header-panel
+ * > .section-panel
* 66% - 44% = 22%
* 22% / 2 = 11%
*/
@@ -222,10 +211,23 @@ html {
align-self: center;
}
- .header-panel {
+ label[for|="toggle-panel"],
+ input[id|="toggle-panel"] {
+ display: none !important;
+ }
+
+ .section-panel {
width: 11vw;
}
+ .section-panel-left {
+ left: 17vw;
+ }
+
+ .section-panel-right {
+ right: 17vw;
+ }
+
.page-content-wrapper {
width: 44vw;
}
diff --git a/public/assets/default_theme/css/pages/feeds.css b/public/assets/default_theme/css/pages/feeds.css
index e376b2ec7c..cbebcf83c9 100644
--- a/public/assets/default_theme/css/pages/feeds.css
+++ b/public/assets/default_theme/css/pages/feeds.css
@@ -32,8 +32,8 @@
}
.note-sidebar > * {
- max-width: 4rem;
- max-height: 4rem;
+ max-width: 3rem;
+ max-height: 3rem;
width: 100%;
height: auto;
border-radius: 2px;
@@ -137,12 +137,11 @@ embed header {
border-bottom: unset;
border-radius: 0 var(--s) 0 0;
line-height: initial;
- padding: 8px var(--s) 8px 0;
+ padding: 4px var(--s) 4px 0;
}
.note-info {
margin-top: 2px;
- margin-right: 2px;
background: var(--gradient-backwards);
}
@@ -152,6 +151,7 @@ embed header {
.note-info-start {
display: flex;
+ flex: 1;
flex-wrap: wrap;
}
@@ -188,9 +188,7 @@ embed header {
}
.note-actions {
- display: inline-block;
- align-items: center;
- margin-left: auto;
+ float: right;
}
.note-actions > li {
@@ -269,10 +267,10 @@ embed header {
.button-container {
border: none !important;
mask-repeat: no-repeat !important;
- mask-size: cover !important;
+ mask-size: contain !important;
display: inline-block;
- width: var(--unit);
- height: var(--unit);
+ width: 14px;
+ height: 14px;
background-color: var(--foreground);
opacity: 0.33;
}
@@ -322,7 +320,7 @@ embed header {
display: flex;
flex-direction: column;
border-radius: 0 0 var(--s) var(--s);
- padding: 0 var(--s) var(--s) 0;
+ padding: 0 4px 4px 0;
}
.note-text a {
@@ -341,7 +339,6 @@ embed header {
border-radius: var(--s);
padding: var(--s);
align-self: flex-start;
- background-color: var(--background-card) !important;
}
.note-attachments-unit:not(:only-child) {
@@ -401,13 +398,8 @@ embed header {
.note-sidebar {
padding: 8px 2px 0 2px;
}
-
- .note-sidebar .avatar {
- width: 60%;
- }
-
- .button-container {
- width: 0.937rem;
- height: 0.937rem;
+ .note-sidebar > * {
+ max-width: 2rem;
+ max-height: 2rem;
}
}
\ No newline at end of file
diff --git a/public/assets/default_theme/css/widgets/sections.css b/public/assets/default_theme/css/widgets/sections.css
index e9c4efff5a..baf8746697 100644
--- a/public/assets/default_theme/css/widgets/sections.css
+++ b/public/assets/default_theme/css/widgets/sections.css
@@ -74,6 +74,10 @@
margin: 4px unset unset;
}
+.profile-navigation > * {
+ display: block;
+}
+
.profile-extra-actions {
margin-top: var(--s);
margin-right: var(--s);
@@ -346,4 +350,13 @@ textarea.form-row-widget {
padding: 2px 6px;
margin-top: 6px;
margin-bottom: 6px;
+}
+
+.footer ul {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.footer ul li {
+ margin-right: var(--s);
}
\ No newline at end of file
diff --git a/public/components/LeftPanel/assets/css/view.css b/public/components/LeftPanel/assets/css/view.css
deleted file mode 100644
index bf552b5e25..0000000000
--- a/public/components/LeftPanel/assets/css/view.css
+++ /dev/null
@@ -1,95 +0,0 @@
-
-
-.section-panel-left {
- position: absolute;
- left: 0;
-}
-
-#panel-left-toggle:not(:checked),
-#panel-left-toggle:checked {
- position: absolute;
- top: -100%;
-}
-
-.panel-left-icon {
- cursor: pointer !important;
- padding-left: var(--s);
- border: 2px solid transparent;
- vertical-align: middle;
-}
-
-.profile-navigation {
- display: flex;
- flex-direction: column;
-}
-
-
-/* FEED NAVIGATION / PLUGINS */
-.feed-nav {
- margin-bottom: var(--xl);
-}
-
-.feed-nav a {
- display: flex;
-}
-
-.feed-nav hr {
- flex: 1;
- background: linear-gradient(90deg, var(--accent), transparent);
-}
-
-.feed-nav a {
- color: var(--foreground);
-}
-
-.feed-nav .active {
- color: var(--foreground);
-}
-
-.main-nav a {
- display: flex;
- flex-direction: column;
-}
-
-.footer {
- margin-top: auto;
- font-size: var(--unit);
-}
-
-.footer ul {
- display: inline-flex;
- flex-wrap: wrap;
- width: 100%;
- justify-content: flex-start;
-}
-
-.footer ul li {
- margin-right: 5px;
-}
-
-/* > 720p */
-@media only screen and (min-width:1281px) {
- .section-panel-left #panel-left-toggle ~ .header-panel {
- left: 0;
- }
-
- .panel-left-icon {
- opacity: 0;
- }
-}
-
-/* > 1080p */
-@media only screen and (min-width:1921px) {
- /*
- * Using the Van de Graaf Canon and Tschichold’s recommended 2:3 page-size ratio
- *
- * 50% - (100 * 2/3) / 2 = 33%
- *
- * > .section-panel-left
- * 50 % - 33% = 17%
- */
- .section-panel-left {
- left: 0;
- margin-left: 17vw;
- }
-}
diff --git a/public/components/RightPanel/assets/css/view.css b/public/components/RightPanel/assets/css/view.css
deleted file mode 100644
index 095a87ede2..0000000000
--- a/public/components/RightPanel/assets/css/view.css
+++ /dev/null
@@ -1,52 +0,0 @@
-
-
-.section-panel-right {
- position: absolute;
- right: 0;
-}
-
-#panel-right-toggle:not(:checked),
-#panel-right-toggle:checked {
- position: absolute;
- top: -100%;
-}
-
-.section-panel-right #panel-right-toggle:checked ~ .header-panel {
- left: 0;
-}
-
-.panel-right-icon {
- cursor: pointer !important;
- padding-right: var(--s);
- border: 2px solid transparent;
- vertical-align: middle;
-}
-
-.section-panel-right textarea {
- resize: vertical;
-}
-
-@media only screen and (min-width: 1281px) {
- .section-panel-right #panel-right-toggle ~ .header-panel {
- right: 0;
- }
-
- .panel-right-icon {
- opacity: 0;
- }
-}
-
-/* > 1080p */
-@media only screen and (min-width:1921px) {
- /*
- * Using the Van de Graaf Canon and Tschichold’s recommended 2:3 page-size ratio
- *
- * 50% - (100 * 2/3) / 2 = 33%
- *
- * > .section-panel-right
- * 50 % - 33% = 17%
- */
- .section-panel-right {
- margin-right: 17vw;
- }
-}
\ No newline at end of file
diff --git a/templates/base.html.twig b/templates/base.html.twig
index 69fdd6eb99..d7231c6bfb 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -94,12 +94,14 @@
diff --git a/templates/settings/base.html.twig b/templates/settings/base.html.twig
index 10a9791a3a..38db492125 100644
--- a/templates/settings/base.html.twig
+++ b/templates/settings/base.html.twig
@@ -12,7 +12,7 @@
{% block body %}