From a9b7287c098bc09f1a136cbad16d4f554e58a7ed Mon Sep 17 00:00:00 2001 From: danielkvist Date: Mon, 1 Apr 2019 11:51:15 +0200 Subject: fix padding and width of some elements --- assets/css/base.css | 6 +++--- assets/css/common.css | 3 ++- assets/css/media-queries.css | 30 ++++++++++++++++++++++++++++++ assets/css/style.css | 13 ++++++++++++- 4 files changed, 47 insertions(+), 5 deletions(-) diff --git a/assets/css/base.css b/assets/css/base.css index 921bc43..6c9c47e 100644 --- a/assets/css/base.css +++ b/assets/css/base.css @@ -48,7 +48,7 @@ hr { background-color: var(--separator); border: none; height: 5px; - width: 50%; + width: 45%; } img { @@ -62,7 +62,7 @@ input { color: var(--background); font-size: var(--text); margin-top: 1.25rem; - padding: 0.75rem 1.45rem; + padding: 1.15rem 1.25rem; } input:required { @@ -80,7 +80,7 @@ mark { pre { font-size: var(--p); - padding: 0.75rem 1.45rem; + padding: 1.15rem 1.25rem; } svg { diff --git a/assets/css/common.css b/assets/css/common.css index e6ae59e..bcacb20 100644 --- a/assets/css/common.css +++ b/assets/css/common.css @@ -12,8 +12,9 @@ border-radius: 15px; color: var(--foreground); font-size: var(--p); + line-height: 1.25; margin-top: 3.45rem; - padding: 0.75rem 1.45rem; + padding: 1.15rem 1.25rem; transition: all 0.25s; width: 15rem; } diff --git a/assets/css/media-queries.css b/assets/css/media-queries.css index 7799c1a..b5ce644 100644 --- a/assets/css/media-queries.css +++ b/assets/css/media-queries.css @@ -46,6 +46,11 @@ } @media only screen and (min-width: 768px) { + /* HEADER */ + .header__title__link--logo { + width: 35%; + } + /* SECTIONS */ .section { padding: 0 9%; @@ -61,6 +66,10 @@ padding: 1.45rem 9%; } + hr { + width: 25%; + } + /* PAGINATION */ .pagination { padding: 0 20%; @@ -68,6 +77,15 @@ } @media only screen and (min-width: 992px) { + /* HEADER */ + .header { + padding: 0.75rem 4.75rem; + } + + .header__title__link--logo { + width: 25%; + } + /* SECTIONS */ .section { padding: 0 21%; @@ -87,4 +105,16 @@ .pagination { padding: 0 25%; } +} + +@media only screen and (min-width: 1000px) { + /* HEADER */ + .header__title__link--logo { + width: 20%; + } + + /* PAGINATION */ + .pagination { + padding: 0 30%; + } } \ No newline at end of file diff --git a/assets/css/style.css b/assets/css/style.css index 63acc0c..79c9bd4 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -12,6 +12,14 @@ z-index: 999; } +.header__title { + width: 50%; +} + +.header__title__link--logo { + width: 50%; +} + /* MENU */ .menu__items { background-color: var(--accent); @@ -54,11 +62,13 @@ } .hero > *:nth-child(2) { + padding: 0 3.75rem; text-align: center; } .hero > p { font-size: var(--p); + padding: 3.45rem; } .cta { @@ -92,7 +102,6 @@ /* CONTACT */ .contact { align-items: center; - border-bottom: 5px solid var(--separator); display: flex; flex-direction: column; min-height: 90vh; @@ -119,12 +128,14 @@ /* FOOTER */ .footer { background-color: var(--accent); + border-top: 5px solid var(--separator); } .social-links { align-items: center; display: flex; flex-wrap: wrap; + grid-area: "social"; line-height: 1.2; justify-content: space-around; padding: 0.75rem 0.75rem; -- cgit v1.2.3