diff --git a/src/components/Contacts/index.tsx b/src/components/Contacts/index.tsx index 27fd91e5..0bd47042 100644 --- a/src/components/Contacts/index.tsx +++ b/src/components/Contacts/index.tsx @@ -8,12 +8,12 @@ export const Contacts: React.FC = props => { <> diff --git a/src/components/HudozkaTitle/index.tsx b/src/components/HudozkaTitle/index.tsx index e0f1efcc..5450401b 100644 --- a/src/components/HudozkaTitle/index.tsx +++ b/src/components/HudozkaTitle/index.tsx @@ -17,7 +17,7 @@ export const HudozkaTitle: React.FC = memo(props => ( @media (max-width: 31.25em) { div { - --padding: 0 0 var(--double-margin); + --padding: 0 0 2em; } } `} diff --git a/src/style.css b/src/style.css index 701e89b4..0017a251 100644 --- a/src/style.css +++ b/src/style.css @@ -14,10 +14,6 @@ /* SIZE */ --mobile-width: 31.25em; - --desktop-width: 59.99999em; - - --tablet-min-width: 31.25em; - --tablet-max-width: 64em; /* CONTENT */ --content-width: 60%; @@ -76,18 +72,13 @@ --shadow-active: 0 4px 16px var(--color-shadow); /* MARGINS */ - --small-margin: 0.2em; - --half-margin: 0.5em; --single-margin: 1em; - --double-margin: 2em; /* OTHER */ --block-border-radius: 3px; /* ARTICLE */ --article-line-height: 1.5em; - --article-quote-padding: var(--half-margin); - --article-quote-font-size: 1.25em; /* KAZIMIR */ --kazimir-caption-margin: 0px; @@ -115,7 +106,7 @@ footer { padding: var(--single-margin); color: var(--color-text-opposite); background-color: var(--color-back-opposite); - font-size: var(--smaller-font-size); + font-size: var(--font-size-second); } h1 { @@ -182,8 +173,8 @@ a.invisible { @media (max-width: 31.25em) { :root { - --smaller-font-size: 0.9rem; - + --font-size-default: 14pt; + --font-size-accent: 16pt; --font-size-h1: 1.5rem; --font-size-h2: 1.5rem; --font-size-h3: 1.25rem; @@ -193,9 +184,5 @@ a.invisible { --content-wide-margin: var(--size-m) var(--size-m); --kazimir-image-increase: 0px; - - --article-line-height: 1.5em; - --article-quote-padding: 0.5em; - --article-quote-font-size: 1em; } } diff --git a/src/style/article.css b/src/style/article.css index b7e010c4..d271b05d 100644 --- a/src/style/article.css +++ b/src/style/article.css @@ -7,19 +7,19 @@ } .article ul { - margin-left: var(--half-margin); + margin-left: var(--size-s); margin-bottom: var(--single-margin); list-style: disc; } .article ol { - margin-left: var(--half-margin); + margin-left: var(--size-s); margin-bottom: var(--single-margin); } .article li { - margin-bottom: var(--half-margin); + margin-bottom: var(--size-s); } .article p { @@ -45,14 +45,18 @@ } .article hr { - margin-bottom: var(--double-margin); + margin-bottom: var(--size-xl); border: none; height: 1px; background: var(--dark-color); } -@media (max-width: var(--mobile-width)) { - .article { +@media (max-width: 31.25em){ + .article blockquote { + padding: 0 + } + + /* .article { --text-margin: 0; } @@ -66,5 +70,5 @@ .article ol { margin-left: var(--single-margin); - } + } */ } diff --git a/src/style/components/document-row.scss b/src/style/components/document-row.scss index 514479dc..23e5487e 100644 --- a/src/style/components/document-row.scss +++ b/src/style/components/document-row.scss @@ -43,7 +43,7 @@ @media (max-width: var(--mobile-width)) { .document-row__file { - margin-left: var(--half-margin); + margin-left: var(--size-s); } .document-row__file-info { diff --git a/src/style/components/document.scss b/src/style/components/document.scss index e7af27fd..1cc23000 100644 --- a/src/style/components/document.scss +++ b/src/style/components/document.scss @@ -3,7 +3,7 @@ flex-direction: column; align-items: center; padding: 0; - margin-bottom: var(--double-margin); + margin-bottom: var(--size-xl); } .document__image{ diff --git a/src/style/marker/marker-table.css b/src/style/marker/marker-table.css index bb40307d..56e6fdbe 100644 --- a/src/style/marker/marker-table.css +++ b/src/style/marker/marker-table.css @@ -1,6 +1,6 @@ .MarkerTable { width: 100%; - margin-bottom: var(--double-margin); + margin-bottom: var(--size-l); border-spacing: 0; border-collapse: separate;