fix padding and width of some elements

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;