css variables refactoring

src/components/Contacts/index.tsx

@@ -8,12 +8,12 @@ export const Contacts: React.FC = props => {
         <>
             <style jsx>{`
                 h4 {
-                    margin-bottom: var(--half-margin);
+                    margin-bottom: var(--size-s);
                 }
 
                 p {
-                    margin-left: var(--single-margin);
+                    margin-left: var(--size-m);
-                    margin-bottom: var(--half-margin);
+                    margin-bottom: var(--size-s);
                 }
             `}</style>
 

src/components/HudozkaTitle/index.tsx

@@ -17,7 +17,7 @@ export const HudozkaTitle: React.FC<HudozkaTitleProps> = memo(props => (
 
             @media (max-width: 31.25em) {
                 div {
-                    --padding: 0 0 var(--double-margin);
+                    --padding: 0 0 2em;
                 }
             }
         `}</style>

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

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)) {
+@media (max-width: 31.25em){
-    .article {
+    .article blockquote {
+        padding: 0
+    }
+
+    /* .article {
         --text-margin: 0;
     }
 
@@ -66,5 +70,5 @@
 
     .article ol {
         margin-left: var(--single-margin);
-    }
+    } */
 }

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 {

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{

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;