diff --git a/docs/main.css b/docs/main.css index 6a6ff98..2c8aed7 100644 --- a/docs/main.css +++ b/docs/main.css @@ -1,6 +1,7 @@ :root { + /* Mobile */ --bg-form-padding: 3px; - --form-padding: 3px; + --about-text-padding: 3px; --p-size: 10px; --label-size: 10px; --h1-size: 15px; @@ -55,6 +56,7 @@ footer { width: 70%; margin: 0 auto; border-radius: 10px; + padding: var(--about-text-padding); } .bg-form { @@ -67,6 +69,7 @@ footer { height: auto; margin: 0 auto; border-radius: 10px; + padding: var(--bg-form-padding); } .chart-container { @@ -76,15 +79,6 @@ footer { width: 80vw; } -/* Mobile */ -.bg-form { - padding: 3px; -} - -.about-text { - padding: 3px; -} - p { font-size: var(--p-size); line-height: 1.5; @@ -102,49 +96,26 @@ h1 { /* Tablet */ @media (min-width:600px) { - :root {} - - .bg-form { - padding: 15px; - } - - .about-text { - padding: 10px; - } - - p { - font-size: 14px; - } - - label { - font-size: 14px; - } - - h1 { - font-size: 18px; + :root { + --bg-form-padding: 15px; + --about-text-padding: 10px; + --p-size: 14px; + --label-size: 14px; + --h1-size: 18px; } } /* Desktop */ @media (min-width:900px) { - .bg-form { - padding: 24px; - } - - .about-text { - padding: 12px; - } - - p { - font-size: 16px; - } - - label { - font-size: 18px; + :root { + --bg-form-padding: 24px; + --about-text-padding: 12px; + --p-size: 16px; + --label-size: 18px; + --h1-size: 30px; } h1 { - font-size: 30px; margin: 0 0 1rem 0 - } + } } \ No newline at end of file