diff --git a/src/backend/views/layout.twig b/src/backend/views/layout.twig
index 72d20fd..b57c910 100644
--- a/src/backend/views/layout.twig
+++ b/src/backend/views/layout.twig
@@ -21,9 +21,14 @@
{% include "components/sidebar.twig" %}
+
{% block body %}{% endblock %}
+
+
diff --git a/src/frontend/styles/components/writing.pcss b/src/frontend/styles/components/writing.pcss
index c7ccebf..5bb1efa 100644
--- a/src/frontend/styles/components/writing.pcss
+++ b/src/frontend/styles/components/writing.pcss
@@ -53,10 +53,6 @@
line-height: 1.6;
letter-spacing: 0.005em;
- @media (--desktop) {
- margin: 0 -100px;
- }
-
.ce-code__textarea {
color: #41314e;
line-height: 1.6em;
diff --git a/src/frontend/styles/layout.pcss b/src/frontend/styles/layout.pcss
index ca89c3f..9fa5753 100644
--- a/src/frontend/styles/layout.pcss
+++ b/src/frontend/styles/layout.pcss
@@ -18,14 +18,43 @@
&-inner {
max-width: var(--layout-width-main-col);
margin: 0 auto;
+
+ @media (--desktop) {
+ margin-right: var(--layout-padding-horizontal);
+ margin-left: 0;
+ }
}
}
&__content {
+ --max-space-between-cols: 160px;
padding: var(--layout-padding-vertical) var(--layout-padding-horizontal);
+ display: flex;
+ justify-content: space-between;
+ max-width: calc(var(--layout-width-main-col) + var(--max-space-between-cols) + var(--layout-sidebar-width));
+ margin-left: max(0px, calc(50vw - var(--layout-sidebar-width) - var(--layout-width-main-col) / 2));
+ margin-right: auto;
@media (--mobile) {
padding: 20px var(--layout-padding-horizontal);
}
}
+
+ &__aside-right {
+ width: var(--layout-sidebar-width);
+ min-width: 160px;
+ display: none;
+
+ position: sticky;
+ top: calc(var(--layout-height-header) + var(--layout-padding-vertical));
+ align-self: flex-start;
+
+ @media (--desktop) {
+ display: block;
+ }
+ }
+
+ &-sidebar {
+ flex-shrink: 0;
+ }
}
diff --git a/src/frontend/styles/vars.pcss b/src/frontend/styles/vars.pcss
index c9a780d..4d4ebf0 100644
--- a/src/frontend/styles/vars.pcss
+++ b/src/frontend/styles/vars.pcss
@@ -25,7 +25,7 @@
*/
--layout-padding-horizontal: 22px;
--layout-padding-vertical: 30px;
- --layout-sidebar-width: 344px;
+ --layout-sidebar-width: 290px;
--layout-width-main-col: 650px;
--layout-height-header: 56px;
@@ -35,6 +35,10 @@
--layout-height-header: 88px;
}
+ @media (--wide-desktop) {
+ --layout-sidebar-width: 344px;
+ }
+
--font-mono: Menlo,Monaco,Consolas,Courier New,monospace;
--font-serif {