diff --git a/src/backend/views/pages/page.twig b/src/backend/views/pages/page.twig
index 58172d3..3090f85 100644
--- a/src/backend/views/pages/page.twig
+++ b/src/backend/views/pages/page.twig
@@ -34,7 +34,9 @@
{# Skip first header, because it is already showed as a Title #}
{% if not (loop.first and block.type == 'header') %}
{% if block.type in ['paragraph', 'header', 'image', 'code', 'list', 'delimiter', 'table', 'warning', 'checklist', 'linkTool', 'raw', 'embed'] %}
- {% include './blocks/' ~ block.type ~ '.twig' with block.data %}
+
+ {% include './blocks/' ~ block.type ~ '.twig' with block.data %}
+
{% endif %}
{% endif %}
{% endfor %}
diff --git a/src/frontend/styles/components/page.pcss b/src/frontend/styles/components/page.pcss
index a9135c9..1e5a186 100644
--- a/src/frontend/styles/components/page.pcss
+++ b/src/frontend/styles/components/page.pcss
@@ -1,12 +1,11 @@
.page {
- font-size: 15px;
- line-height: 1.6;
- letter-spacing: 0.005em;
-
&__header {
display: flex;
align-items: center;
+ margin-bottom: 20px;
+ font-size: 14px;
color: var(--color-text-second);
+ line-height: 1.5em;
@media (--mobile) {
font-size: 13px;
@@ -51,7 +50,7 @@
font-size: 35px;
font-weight: 900;
letter-spacing: -0.04em;
- margin-bottom: -0.1em;
+ margin: 0;
}
.cdx-marker {
@@ -61,12 +60,16 @@
.inline-code,
.block-header a .inline-code {
+ @apply --squircle;
+
+ font-size: 14px;
display: inline-block;
background: rgba(251,241,241,0.78);
color: #C44545;
- padding: 0.1em 0.5em;
+
+ padding: 3px 6px 2px;
border-radius: 2px;
- margin: 0 2px;
+ margin: -1px 2px 0;
font-family: Menlo, Monaco, Consolas, Courier New, monospace;
font-size: 0.84em;
line-height: 1.4em;
@@ -78,6 +81,9 @@
}
&__content {
+ font-size: 16px;
+ line-height: 150%;
+
a {
text-decoration: none;
border-bottom: 1px solid #000;
@@ -90,17 +96,23 @@
}
.inline-code {
+ font-size: 14px;
margin: 0;
- padding: 0.15em .5em;
+ padding: 2px 6px 1px;
border-bottom: 1px dashed rgba(84, 151, 255, 0.99);
color: #1f6fd8;
background-color: #daf1fe;
+ @apply --squircle;
&:hover {
background-color: #c8edfe;
}
}
}
+
+ &-block {
+ padding: 8px 0;
+ }
}
}
diff --git a/src/frontend/styles/components/table-of-content.pcss b/src/frontend/styles/components/table-of-content.pcss
index 017d3be..fe212dc 100644
--- a/src/frontend/styles/components/table-of-content.pcss
+++ b/src/frontend/styles/components/table-of-content.pcss
@@ -7,6 +7,8 @@
padding: var(--layout-padding-vertical) var(--layout-padding-horizontal);
box-sizing: border-box;
+ --padding-x: 8px;
+
&__header {
font-size: 16px;
font-weight: 600;
@@ -14,7 +16,7 @@
letter-spacing: -0.01em;
margin-bottom: 12px;
- padding: 0 6px;
+ padding: 0 var(--padding-x);
}
&__list {
@@ -27,7 +29,7 @@
list-style: none;
- gap: 6px;
+ gap: 2px;
&-item {
@apply --squircle;
@@ -47,7 +49,7 @@
&--indent-4x { margin-left: 24px; }
& > a {
- padding: 4px 8px;
+ padding: 4px var(--padding-x);
display: block;
font-size: 14px;
letter-spacing: -0.01em;