Docker/codex.docs
Docker/codex.docs
1
0
Fork 0
mirror of https://github.com/codex-team/codex.docs.git synced 2025-08-09 23:45:25 +02:00
Code Issues Releases Activity

chore(styles): typography updating started

Browse source
This commit is contained in:
Peter Savchenko 2022-08-26 21:13:54 +03:00
parent 136702aeb7
commit 73d5d29806
No known key found for this signature in database
GPG key ID: E68306B1AB0F727C
3 changed files with 28 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/backend/views/pages/page.twig
View file

@ -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 %}
<div class="page__content-block">
{% include './blocks/' ~ block.type ~ '.twig' with block.data %}
</div>
{% endif %}
{% endif %}
{% endfor %}

28
src/frontend/styles/components/page.pcss
View file

@ -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;
}
}
}

8
src/frontend/styles/components/table-of-content.pcss
View file

@ -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;