From 4679209128c8e6c73517a582f618d760f0d7927f Mon Sep 17 00:00:00 2001 From: Sebastian Date: Tue, 14 Jun 2022 09:25:15 -0500 Subject: [PATCH 1/5] added media queries for the cards to be responsive on mobile --- public/css/style.css | 32 +++++++++++++++++++++++++++++++- 1 file changed, 31 insertions(+), 1 deletion(-) diff --git a/public/css/style.css b/public/css/style.css index 1b1e0a0..b3d52db 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -614,4 +614,34 @@ hr { width: 80% ; } - +@media all and (max-width: 500px) { + .frame { + margin: 0; + padding: 0; + border-radius: 0; + } + + .contributors { + width: 100%; + margin: 0; + padding: 0; + flex-direction: column; + } + + .contributors .section { + padding: 0; + } + + .section { + width: 100vw; + padding: 0; + margin: 0; + } + + .card { + width: 350px; + padding: 0; + margin: 0; + margin-top: 1rem; + } +} From 04959b58e9354bbf692df30a2a50763d8af42920 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Tue, 14 Jun 2022 09:39:12 -0500 Subject: [PATCH 2/5] fixed some padding of the cards on mobile --- public/css/style.css | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/public/css/style.css b/public/css/style.css index b3d52db..f80044a 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -614,6 +614,10 @@ hr { width: 80% ; } +/* MOBILE RESPONSIVESS */ + +/* Contributors */ + @media all and (max-width: 500px) { .frame { margin: 0; @@ -624,8 +628,11 @@ hr { .contributors { width: 100%; margin: 0; + margin-bottom: 3rem; padding: 0; flex-direction: column; + display: flex; + align-items: center; } .contributors .section { @@ -640,8 +647,12 @@ hr { .card { width: 350px; - padding: 0; + padding-left: 1rem; margin: 0; - margin-top: 1rem; + margin-top: 1rem; + } + + .card h4 { + font-size: 1.5rem; } } From 39549050dfd38f5c246da48cd13d48e46ba23125 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Tue, 14 Jun 2022 11:24:08 -0500 Subject: [PATCH 3/5] changed on hover effect on input to be on focus --- public/css/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/css/style.css b/public/css/style.css index f80044a..2577cfd 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -191,7 +191,7 @@ main { font-weight: 600; } -.api-test form input:hover { +.api-test form input:focus { width: 70%; } From 1d5356236db64912c1b049d4ee5176df9ab39c2a Mon Sep 17 00:00:00 2001 From: Sebastian Date: Tue, 14 Jun 2022 21:44:20 -0500 Subject: [PATCH 4/5] added full responsiveness to contributors section --- public/css/style.css | 132 ++++++++++++++++++++++++++++++++++++++----- 1 file changed, 118 insertions(+), 14 deletions(-) diff --git a/public/css/style.css b/public/css/style.css index 5c88772..76938f8 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -456,18 +456,6 @@ table.darkTable #keywords{ justify-content: center; } -@media all and (max-width: 1790px) { - .contributors { - margin: 3rem 11rem; - } -} - -@media all and (max-width: 1441px) { - .contributors { - margin: 3rem 3rem; - } -} - .contributors .section { padding: 0 2rem; width: 435px; @@ -492,7 +480,7 @@ table.darkTable #keywords{ gap: 25px; position: relative; z-index: 2; - padding: 0 1.3rem; + padding-left: 1.3rem; } .card::after { @@ -642,7 +630,54 @@ hr { /* Contributors */ -@media all and (max-width: 500px) { +@media all and (min-width: 1px) and (max-width: 319px) { + .frame { + margin: 0; + padding: 0; + border-radius: 0; + } + + .contributors { + width: 100%; + margin: 0; + margin-bottom: 3rem; + padding: 0; + flex-direction: column; + display: flex; + align-items: center; + gap: 15px; + } + + .contributors .section { + padding: 0 2rem; + gap: 20px; + } + + .card { + height: 120px; + width: 70%; + padding-left: 0.8rem; + margin: 0; + gap: 15px; + } + + .card img { + height: 80px; + width: 80px; + } + + .cont-info h4 { + font-size: 1.2rem; + } + + + .icons { + gap: 1rem; + font-size: 1.5rem; + } +} + +@media all and (min-width: 320px) and (max-width: 1024px) { .frame { margin: 0; padding: 0; @@ -680,3 +715,72 @@ hr { font-size: 1.5rem; } } + +@media all and (min-width: 1025px) and (max-width: 1180px) { + + #contributors-title { + padding-top: 3rem; + } + + .contributors { + margin: 3rem 0rem; + } + + .contributors .section { + padding: 0 2rem; + gap: 20px; + } + + .card { + height: 120px; + padding-left: 0.8rem; + margin: 0; + gap: 15px; + } + + .card img { + height: 80px; + width: 80px; + } + + .cont-info h4 { + font-size: 1.2rem; + } + + + .icons { + gap: 1rem; + font-size: 1.5rem; + } + +} + +@media all and (min-width: 1181px){ + + #contributors-title { + padding-top: 3rem; + } + + .contributors { + margin: 3rem 0rem; + } + + .contributors .section { + padding: 0 2rem; + width: 380px; + } + + .card { + padding-left: 0.8rem; + } + + .cont-info h4 { + font-size: 1.3rem; + } + + .icons { + gap: 1rem; + font-size: 1.5rem; + } + +} From 85e671c8caccdd74da2e28a7666bb423693e48fd Mon Sep 17 00:00:00 2001 From: Sebastian Date: Thu, 16 Jun 2022 20:11:38 -0500 Subject: [PATCH 5/5] added responsiveness for additional sections --- public/css/style.css | 286 ++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 271 insertions(+), 15 deletions(-) diff --git a/public/css/style.css b/public/css/style.css index 76938f8..4aa0e77 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -66,20 +66,11 @@ nav { background-color: lightgrey; } -nav::after { - height: 10rem; - background-color: transparent; - display: flex; - align-items: center; - justify-content: space-between; - padding: 0 5rem; -} - nav > img { height: 100px; } -/* contributors */ +/* contributors button */ #contributors { --color: rgb(30, 30, 30); @@ -227,11 +218,7 @@ main { border-radius: 25px; } -@media all and (min-width: 1280px) { - .result { - margin-top: 2rem; - } -} + .scroll-container { overflow-y: scroll; @@ -628,6 +615,272 @@ hr { /* MOBILE RESPONSIVESS */ +/* Main */ + +@media all and (min-width: 1px) and (max-width: 800px) { + + nav { + justify-content: center; + } + + main { + flex-wrap: wrap; + flex-direction: column; + } + + .description > h1 { + width: 100%; + font-size: 3rem; + } + + .description > p { + width: 100%; + font-size: 1.5rem; + } + + .description, .api-test { + width: 100%; + } + + .api-test { + margin-top: 2rem; + } + + .api-test form{ + margin-bottom: 2rem; + } + + .api-test form input{ + width: 80%; + } + .api-test form input:focus{ + width: 80%; + } + + .api-test form button{ + width: 20%; + } + + .api-test .result{ + width: 100%; + } + + #contributors { + display: none; + } +} + +@media all and (min-width: 801px) and (max-width: 1024px) { + + nav { + justify-content: center; + } + + main { + flex-wrap: wrap; + flex-direction: column; + align-items: center; + } + + .description{ + text-align: justify; + } + + .description > h1 { + width: 100%; + font-size: 3rem; + } + + .description > p { + width: 100%; + font-size: 1.5rem; + } + + .description{ + width: 100%; + } + + .api-test { + margin-top: 2rem; + width: 80%; + } + + + .api-test form{ + width: 100%; + margin-bottom: 2rem; + } + + .api-test form input{ + width: 80%; + } + .api-test form input:focus{ + width: 80%; + } + + .api-test form button{ + width: 20%; + } + + .api-test .result{ + width: 100%; + } + + #contributors { + display: none; + } + +} + + +@media all and (min-width: 1026px) and (max-width: 1180px) { + main { + gap: 2rem; + padding: 3rem; + margin: 0; + } + + .description { + display: flex; + align-items: flex-start; + } + + .description h1, .description p { + width: 100%; + } + + .api-test { + justify-content: space-between; + } + + .api-test form input { + width: 80% + } + + .api-test form button { + width: 20% + } + + .api-test form input:focus { + width: 80% + } + + .api-test .result { + width: 100% + } +} + + +@media all and (max-width: 500px) { + ul { + margin: 1.5rem 1rem; + list-style: none; + padding: 0; + } +} + +@media all and (min-width: 1300px) { + + .api-test form { + margin-bottom: 2rem; + } +} + + +/* Documentation */ + +@media all and (min-width: 1px) and (max-width: 800px) { + + .documentation { + padding: 3rem 1rem; + } + + table.darkTable { + width: 100%; + } + + .endpoints { + margin: 3rem 0; + gap: 5rem; + display: flex; + flex-wrap: wrap; + } + + .endpoints div { + width: 100%; + } + + .endpoints h3 { + font-size: 1rem; + font-weight: 500; + margin: 0; + } +} + +@media all and (min-width: 320px) and (max-width: 450px) { + + .object-table h3 { + text-align: center; + } + + table.darkTable tbody td { + font-size: 14px; + } + + table.darkTable thead th { + font-size: 12px; + + } + + .endpoints code { + font-size: 1rem; + } + + .endpoints h3 { + text-align: center; + } + + .endpoints h4 { + padding: 0 1rem; + text-align: center; + } + +} + + +@media all and (min-width: 320px) and (max-width: 1024px) { + + .endpoints h4 { + padding: 0 2rem; + } + + .endpoints h3 { + padding: 0; + } + +} + + +@media all and (min-width: 801px) and (max-width: 1024px) { + .endpoints { + margin: 3rem 0; + gap: 5rem; + display: flex; + flex-wrap: wrap; + } + + .endpoints div { + width: 80%; + } + + .endpoints h3 { + font-size: 1rem; + font-weight: 500; + margin: 0; + } +} + + /* Contributors */ @media all and (min-width: 1px) and (max-width: 319px) { @@ -714,6 +967,9 @@ hr { .card h4 { font-size: 1.5rem; } + #contributors-title { + padding-bottom: 2rem; + } } @media all and (min-width: 1025px) and (max-width: 1180px) {