From 419e7975381d2f9bbaa0ba35891d3ef57a05a253 Mon Sep 17 00:00:00 2001 From: Mabel Date: Thu, 2 Jul 2020 10:04:14 -0400 Subject: [PATCH 1/2] feat:implement responsive addition-info section --- .../__link/additional-info__link.css | 7 +++++++ .../additional-info__list-item.css | 6 +++--- .../__list/additional-info__list.css | 6 ++++++ .../__subtitle/additional-info__subtitle.css | 1 + blocks/additional-info/additional-info.css | 19 +++++++++++++++++-- blocks/arrow-icon/arrow-icon.css | 8 ++++++++ 6 files changed, 42 insertions(+), 5 deletions(-) diff --git a/blocks/additional-info/__link/additional-info__link.css b/blocks/additional-info/__link/additional-info__link.css index 715aa01..9ebb922 100644 --- a/blocks/additional-info/__link/additional-info__link.css +++ b/blocks/additional-info/__link/additional-info__link.css @@ -3,6 +3,13 @@ line-height: 19px; } +@media only screen and (max-width: 320px) { + .additional-info__link { + font-size: 14px; + line-height: 22px; + } +} + @media only screen and (min-width: 769px) and (max-width: 1024px) { .additional-info__link { font-size: 24px; diff --git a/blocks/additional-info/__list-item/additional-info__list-item.css b/blocks/additional-info/__list-item/additional-info__list-item.css index 68f6809..a60a779 100644 --- a/blocks/additional-info/__list-item/additional-info__list-item.css +++ b/blocks/additional-info/__list-item/additional-info__list-item.css @@ -1,11 +1,11 @@ .additional-info__list-item { - margin-bottom: 20px; + margin-bottom: 16px; display: flex; justify-content: space-between; } -@media only screen and (min-width: 769px) { +@media only screen and (min-width: 425px) and (max-width: 768px) { .additional-info__list-item { - margin-bottom: 16px; + margin-bottom: 20px; } } diff --git a/blocks/additional-info/__list/additional-info__list.css b/blocks/additional-info/__list/additional-info__list.css index 5b309de..6e59a6c 100644 --- a/blocks/additional-info/__list/additional-info__list.css +++ b/blocks/additional-info/__list/additional-info__list.css @@ -4,6 +4,12 @@ padding: 0; } +@media only screen and (max-width: 320px) { + .additional-info__list { + margin: 36px 0 0 0; + } +} + @media only screen and (min-width: 769px) and (max-width: 1024px) { .additional-info__list { margin: 40px 0 0 0; diff --git a/blocks/additional-info/__subtitle/additional-info__subtitle.css b/blocks/additional-info/__subtitle/additional-info__subtitle.css index 34fe740..0a04df0 100644 --- a/blocks/additional-info/__subtitle/additional-info__subtitle.css +++ b/blocks/additional-info/__subtitle/additional-info__subtitle.css @@ -15,5 +15,6 @@ .additional-info__subtitle { font-size: 18px; line-height: 18px; + margin: 22px 0 0; } } diff --git a/blocks/additional-info/additional-info.css b/blocks/additional-info/additional-info.css index ab41dae..c05d4a5 100644 --- a/blocks/additional-info/additional-info.css +++ b/blocks/additional-info/additional-info.css @@ -10,16 +10,31 @@ padding-bottom: 40px; } +@media only screen and (max-width: 320px) { + .additional-info { + margin: 50px 16px 0; + padding-bottom: 30px; + } +} + @media only screen and (min-width: 769px) and (max-width: 1024px) { .additional-info { - margin-top: 84px; + margin: 84px 40px 0; padding-bottom: 50px; } } @media only screen and (min-width: 1025px) { .additional-info { - margin-top: 100px; padding-bottom: 60px; + max-width: 1200px; + margin: 100px 40px 0; } } + +@media only screen and (min-width: 1280px) { + .additional-info { + margin: 100px auto 0; + } +} + diff --git a/blocks/arrow-icon/arrow-icon.css b/blocks/arrow-icon/arrow-icon.css index 00a9b02..d3e5b62 100644 --- a/blocks/arrow-icon/arrow-icon.css +++ b/blocks/arrow-icon/arrow-icon.css @@ -8,3 +8,11 @@ .arrow-icon:hover { background: url("./yellow-arrow.png") center center no-repeat; } + +@media only screen and (max-width: 320px) { + .arrow-icon { + font-size: 14px; + width: 26px; + height: 22px; + } +} From 10ae255992fbdc7ecf4bc162255b5b3417847772 Mon Sep 17 00:00:00 2001 From: Mabel Date: Fri, 3 Jul 2020 18:04:16 -0400 Subject: [PATCH 2/2] hotfix: correct sizing and updates --- .../__link/additional-info__link.css | 1 + .../additional-info__list-item.css | 13 +++++++ .../__list/additional-info__list.css | 13 +++---- .../__subtitle/additional-info__subtitle.css | 20 ----------- .../__title/additional-info__title.css | 20 ----------- blocks/additional-info/additional-info.css | 22 ++++++------ blocks/arrow-icon/arrow-icon.css | 34 +++++++++++++++---- index.html | 12 +++---- 8 files changed, 64 insertions(+), 71 deletions(-) delete mode 100644 blocks/additional-info/__subtitle/additional-info__subtitle.css delete mode 100644 blocks/additional-info/__title/additional-info__title.css diff --git a/blocks/additional-info/__link/additional-info__link.css b/blocks/additional-info/__link/additional-info__link.css index 9ebb922..10f3b29 100644 --- a/blocks/additional-info/__link/additional-info__link.css +++ b/blocks/additional-info/__link/additional-info__link.css @@ -1,6 +1,7 @@ .additional-info__link { font-size: 19px; line-height: 19px; + font-weight: 500; } @media only screen and (max-width: 320px) { diff --git a/blocks/additional-info/__list-item/additional-info__list-item.css b/blocks/additional-info/__list-item/additional-info__list-item.css index a60a779..e93fad4 100644 --- a/blocks/additional-info/__list-item/additional-info__list-item.css +++ b/blocks/additional-info/__list-item/additional-info__list-item.css @@ -2,6 +2,12 @@ margin-bottom: 16px; display: flex; justify-content: space-between; + align-items: center; + +} + +.additional-info__list-item:last-of-type { + margin-bottom: 0; } @media only screen and (min-width: 425px) and (max-width: 768px) { @@ -9,3 +15,10 @@ margin-bottom: 20px; } } + +@media only screen and (max-width: 424px) { + .additional-info__list-item { + margin-bottom: 18px; + align-items: flex-end; + } +} diff --git a/blocks/additional-info/__list/additional-info__list.css b/blocks/additional-info/__list/additional-info__list.css index 6e59a6c..83bcb46 100644 --- a/blocks/additional-info/__list/additional-info__list.css +++ b/blocks/additional-info/__list/additional-info__list.css @@ -1,23 +1,20 @@ .additional-info__list { - margin: 49px 0 0 0; + margin: 0; list-style-type: none; padding: 0; } @media only screen and (max-width: 320px) { .additional-info__list { - margin: 36px 0 0 0; + margin: 0; + padding-top:10px; } } @media only screen and (min-width: 769px) and (max-width: 1024px) { .additional-info__list { - margin: 40px 0 0 0; + margin: 0; + padding-top: 4px; } } -@media only screen and (min-width: 1025px) { - .additional-info__list { - margin: 45px 0 0 0; - } -} diff --git a/blocks/additional-info/__subtitle/additional-info__subtitle.css b/blocks/additional-info/__subtitle/additional-info__subtitle.css deleted file mode 100644 index 0a04df0..0000000 --- a/blocks/additional-info/__subtitle/additional-info__subtitle.css +++ /dev/null @@ -1,20 +0,0 @@ -.additional-info__subtitle { - line-height: 15px; - font-size: 15px; - margin: 12px 0 0 0; -} - -@media only screen and (min-width: 769px) and (max-width: 1024px) { - .additional-info__subtitle { - font-size: 16px; - line-height: 16px; - } -} - -@media only screen and (min-width: 1025px) { - .additional-info__subtitle { - font-size: 18px; - line-height: 18px; - margin: 22px 0 0; - } -} diff --git a/blocks/additional-info/__title/additional-info__title.css b/blocks/additional-info/__title/additional-info__title.css deleted file mode 100644 index 6d6c784..0000000 --- a/blocks/additional-info/__title/additional-info__title.css +++ /dev/null @@ -1,20 +0,0 @@ -.additional-info__title { - font-size: 28px; - line-height: 28px; - margin: 0; - font-weight: 500; -} - -@media only screen and (min-width: 769px) and (max-width: 1024px) { - .additional-info__title { - font-size: 31px; - line-height: 31px; - } -} - -@media only screen and (min-width: 1025px) { - .additional-info__title { - font-size: 38px; - line-height: 38px; - } -} diff --git a/blocks/additional-info/additional-info.css b/blocks/additional-info/additional-info.css index c05d4a5..098daee 100644 --- a/blocks/additional-info/additional-info.css +++ b/blocks/additional-info/additional-info.css @@ -1,40 +1,40 @@ -@import url(./__title/additional-info__title.css); -@import url(./__subtitle/additional-info__subtitle.css); @import url(./__list/additional-info__list.css); @import url(./__list-item/additional-info__list-item.css); @import url(./__link/additional-info__link.css); .additional-info { - margin: 68px 30px 0; border-bottom: 1.7px solid #223d46; - padding-bottom: 40px; + padding: 68px 0 40px; + margin: 0 30px; } @media only screen and (max-width: 320px) { .additional-info { - margin: 50px 16px 0; - padding-bottom: 30px; + margin: 0 16px 0; + padding: 50px 0 30px; } } @media only screen and (min-width: 769px) and (max-width: 1024px) { .additional-info { - margin: 84px 40px 0; - padding-bottom: 50px; + padding: 84px 0 50px; + margin: 0 40px; } } @media only screen and (min-width: 1025px) { .additional-info { - padding-bottom: 60px; + padding: 100px 0 60px; max-width: 1200px; - margin: 100px 40px 0; + margin: 0 40px; } } @media only screen and (min-width: 1280px) { .additional-info { - margin: 100px auto 0; + margin: 0 auto; } } + + diff --git a/blocks/arrow-icon/arrow-icon.css b/blocks/arrow-icon/arrow-icon.css index d3e5b62..b17742d 100644 --- a/blocks/arrow-icon/arrow-icon.css +++ b/blocks/arrow-icon/arrow-icon.css @@ -1,18 +1,40 @@ .arrow-icon { - font-size: 19px; - width: 34px; - height: 34px; - background: url("./blue-arrow.png") center center no-repeat; + width: 43px; + height: 19px; + background: url("./blue-arrow.png") center right no-repeat; + background-size: 11px 11px; } .arrow-icon:hover { - background: url("./yellow-arrow.png") center center no-repeat; + background: url("./yellow-arrow.png") center right no-repeat; + background-size: 11px 11px; } @media only screen and (max-width: 320px) { .arrow-icon { - font-size: 14px; width: 26px; height: 22px; + background-size: 8px 8px; + } + + .arrow-icon:hover { + width: 26px; + height: 22px; + background-size: 8px 8px; } } + +@media only screen and (min-width: 1280px) { + .arrow-icon { + width: 61px; + height: 39px; + background-size: 16px 16px; + } + + .arrow-icon:hover { + width: 61px; + height: 39px; + background-size: 16px 16px; + } +} + diff --git a/index.html b/index.html index 6368c99..485edbc 100644 --- a/index.html +++ b/index.html @@ -234,14 +234,14 @@

hello there

-

We know a lot

-

If you want to, read this.

+

we know a lot

+

If you want to, read this.