From 585811675e1f0ad37e5f3b3ddab14d00511eb639 Mon Sep 17 00:00:00 2001 From: Nikhil Sharma Date: Sun, 19 Dec 2021 17:25:53 +0530 Subject: [PATCH 1/4] fixed header style for responsiveness Signed-off-by: Nikhil Sharma --- docs/_sass/footer.scss | 43 +++++++++++++++++++ docs/_sass/navigation.scss | 82 +++++++++++++++++------------------- docs/assets/js/stellarnav.js | 4 +- 3 files changed, 84 insertions(+), 45 deletions(-) diff --git a/docs/_sass/footer.scss b/docs/_sass/footer.scss index 5baef31e..62d70ed2 100644 --- a/docs/_sass/footer.scss +++ b/docs/_sass/footer.scss @@ -361,3 +361,46 @@ footer { // max-width: 800px !important; // } } + +@media (width: 768px) { + .custom-nav-elem { + justify-content: flex-end; + } +} + +@media (max-width: 770px) { + .custom-nav-elem { + padding-top: 40px; + } + + .stellarnav { + width: 125px; + } +} + +@media (max-width: 475px) { + header .project-name { + padding-right: 0; + } + .stellarnav.mobile > ul > li > a { + font-size: 0.75rem !important; + } +} + +@media (max-width: 435px) { + header .project-name { + padding-left: 10px; + } + .stellarnav { + width: 120px; + } +} + +@media (max-width: 410px) { + header .project-name { + padding-left: 20px; + } + .stellarnav { + width: 105px; + } +} diff --git a/docs/_sass/navigation.scss b/docs/_sass/navigation.scss index 072776fe..848cb96f 100644 --- a/docs/_sass/navigation.scss +++ b/docs/_sass/navigation.scss @@ -1,78 +1,74 @@ nav { - text-transform: uppercase; - font-size: .8em; - width: 100%; - padding-left: -2rem; + text-transform: uppercase; + font-size: 0.8em; + width: 100%; + padding-left: -2rem; - @media #{$mid-point} { - padding-right: 2rem; - padding-left: 2rem; - } + @media #{$mid-point} { + padding-right: 2rem; + padding-left: 2rem; + } } .nav-container { - display: flex; - flex-direction: row; + display: flex; + flex-direction: row; } .nav-list { - display: flex; - flex-direction: row; - justify-content: flex-end; + display: flex; + flex-direction: row; + justify-content: flex-end; } .nav-text { - font-size: 0.8rem !important; - @media (min-width: 840px) { - padding: 0.8rem !important; - margin: 0px 3px; - color: rgba(0,0,0,.8) !important; - } + font-size: 0.8rem !important; + @media (min-width: 840px) { + padding: 0.8rem !important; + margin: 0px 3px; + color: rgba(0, 0, 0, 0.8) !important; + } } a.nav-text:hover { - color: rgba(0,0,0,0.7) !important; + color: rgba(0, 0, 0, 0.7) !important; } .subnav-item { - color: $brand-color !important; + color: $brand-color !important; } a.subnav-item:hover { - color: rgba(0, 0, 0, 0.25) !important; + color: rgba(0, 0, 0, 0.25) !important; } .active { - color: black !important; - font-weight: bold; + color: black !important; + font-weight: bold; } .highlight { - border: 1px #ccc solid; - border-radius: 5px; + border: 1px #ccc solid; + border-radius: 5px; } a.highlight:hover { - background: #fff; - color: $brand-color !important; + background: #fff; + color: $brand-color !important; } - -.stellarnav .menu-toggle span.bars span{ - background: black; +.stellarnav .menu-toggle span.bars span { + background: black; } -.stellarnav a{ - color:black; +.stellarnav a { + color: black; } -.navmenu-container -{ - display: none; +.navmenu-container { + display: none; +} +@media only screen and (max-width: 768px) { + .navmenu-container { + display: flex; + } } -@media only screen and (max-width:768px) -{ - .navmenu-container{ - display: flex; - } - -} \ No newline at end of file diff --git a/docs/assets/js/stellarnav.js b/docs/assets/js/stellarnav.js index f63ff62a..d3fb194c 100644 --- a/docs/assets/js/stellarnav.js +++ b/docs/assets/js/stellarnav.js @@ -77,9 +77,9 @@ // adds the toggle button to open and close nav if ( settings.position == 'right' || settings.position == 'left' ) { - nav.prepend(' ' + menuLabel + ''); + nav.prepend(' ' + ''); } else { - nav.prepend(' ' + menuLabel + ''); + nav.prepend(' ' + ''); } // adds a click-to-call link From a470648e5e55194d30b930028f539ef78bb12e5c Mon Sep 17 00:00:00 2001 From: Nikhil Sharma Date: Sun, 19 Dec 2021 17:48:59 +0530 Subject: [PATCH 2/4] fixed hero section responsiveness Signed-off-by: Nikhil Sharma --- docs/_sass/footer.scss | 6 +- docs/_sass/getnighthawk.scss | 121 ++++++++++++++++++++--------------- 2 files changed, 71 insertions(+), 56 deletions(-) diff --git a/docs/_sass/footer.scss b/docs/_sass/footer.scss index 62d70ed2..e6ca6c1c 100644 --- a/docs/_sass/footer.scss +++ b/docs/_sass/footer.scss @@ -373,9 +373,9 @@ footer { padding-top: 40px; } - .stellarnav { - width: 125px; - } + // .stellarnav { + // width: 125px; + // } } @media (max-width: 475px) { diff --git a/docs/_sass/getnighthawk.scss b/docs/_sass/getnighthawk.scss index 810869a5..04c7e0ad 100644 --- a/docs/_sass/getnighthawk.scss +++ b/docs/_sass/getnighthawk.scss @@ -3869,7 +3869,6 @@ div.globalFooterCard.card-environment { color: #32325d; } - .section { position: relative; } @@ -5617,49 +5616,67 @@ div.globalFooterCard.card-environment { } @media (max-width: 1000px) { - .hero-section-header{ + .hero-section-header { flex-direction: column; } - .hero-section-header-text{ + .hero-section-header-text { margin: 3rem 0 1rem 0; } - .hero-section-logo-span{ + .hero-section-logo-span { text-align: center; } - .hero-section-para p{ + .hero-section-para p { text-align: center; margin-top: 1rem; line-height: 1.5; } } + +@media (max-width: 600px) { + .hero-section-img { + margin-right: 0 !important; + } + .hero-section-header-text { + margin-left: 0 !important; + } + .hero-section-logo-span { + text-align: center !important; + } + .hero-section-para p { + text-align: center !important; + } + .hero-section-button-div { + margin-top: 1rem !important; + } +} + @media (max-width: 550px) { - .why-getnighthawk-p-div p{ + .why-getnighthawk-p-div p { line-height: 1.6; - padding:0 1rem; + padding: 0 1rem; font-size: 1.1rem; } - .platform{ - padding-top:0 ; + .platform { + padding-top: 0; } - .hero-section-header-text{ + .hero-section-header-text { width: 425px; } - .hero-section-logo-span{ + .hero-section-logo-span { text-align: center; font-size: 26px; } - .hero-section-para p{ + .hero-section-para p { font-size: 16px; } - .sidebar{ + .sidebar { padding-right: 1rem; padding-left: 1rem; } - .section-content ol{ + .section-content ol { padding-left: 10px; margin-top: 30px; } - } @media screen and (max-width: 450px) { @@ -5675,13 +5692,13 @@ div.globalFooterCard.card-environment { .hero-section-logo-span { font-size: 40px; } - .hero-section-header-text{ + .hero-section-header-text { width: 400px; } - .hero-section-logo-span{ + .hero-section-logo-span { font-size: 27px; } - .hero-section-img{ + .hero-section-img { margin-right: 0; } } @@ -5692,7 +5709,7 @@ div.globalFooterCard.card-environment { } .footer-social-links { display: table; -margin: 0; + margin: 0; li { list-style: none; margin: 10px; @@ -5763,7 +5780,7 @@ margin: 0; .footer-social-div { max-width: 550px; padding-left: 0px; - display: flex; + display: flex; justify-content: center; } .footer-social-row { @@ -5772,78 +5789,76 @@ margin: 0; } /* docs styling */ -.row .col-lg-9{ +.row .col-lg-9 { padding-right: 40px !important; } -.section-content{ +.section-content { padding-left: 40px !important; - margin-top: 30px !important; - margin-bottom: 50px !important; + margin-top: 30px !important; + margin-bottom: 50px !important; min-height: 100vh; } - -.doc-container{ +.doc-container { padding: 10px; } .doc-link { display: inline-block; - padding: 5px 0; + padding: 5px 0; text-decoration: none; margin-left: 20px; color: #696969; } -.doc-sidebar{ - padding:0 1rem; +.doc-sidebar { + padding: 0 1rem; } - -.sidebar{ - font-family: 'Open Sans', sans-serif; +.sidebar { + font-family: "Open Sans", sans-serif; padding-right: 2rem; } - -.sidebar .accordion-body{ + +.sidebar .accordion-body { text-align: left; color: #aaaaaa; padding: 1rem 0; } - -.sidebar .accordion-button{ + +.sidebar .accordion-button { padding: 1rem 1rem 0rem 0; width: 13rem; } - -.sidebar .accordion-button:focus{ + +.sidebar .accordion-button:focus { border-color: transparent; box-shadow: none; } -.sidebar .accordion-button:not(.collapsed)::after{ +.sidebar .accordion-button:not(.collapsed)::after { transform: rotate(270deg); } -.sidebar .accordion-button:not(.collapsed){ +.sidebar .accordion-button:not(.collapsed) { background-color: transparent; color: inherit; } - -.sidebar .accordion-item{ + +.sidebar .accordion-item { padding: 1rem 0; - &:not(:last-child){ + &:not(:last-child) { border-bottom: 3px solid #cecece; } } - -.sidebar .accordion-button:not(.collapsed)::after{ - background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); + +.sidebar .accordion-button:not(.collapsed)::after { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } - -.sidebar .accordion-collapse{ - border:none; + +.sidebar .accordion-collapse { + border: none; } .doc-heading { @@ -5874,10 +5889,10 @@ margin: 0; .nighthawk-meshery-div { margin: 0; } - .docs-section{ + .docs-section { padding-left: 40px !important; - - &-main{ + + &-main { margin-bottom: 40px !important; margin-top: 50px !important; } @@ -5904,4 +5919,4 @@ margin: 0; } .accordion-button::after { margin-left: 10px !important; -} \ No newline at end of file +} From 46c8d204bbb0fe495fc594860a02b08ac3bb1014 Mon Sep 17 00:00:00 2001 From: Nikhil Sharma Date: Sun, 19 Dec 2021 18:01:58 +0530 Subject: [PATCH 3/4] fixed faq section responsiveness --- docs/_includes/faq.html | 2 +- docs/_sass/getnighthawk.scss | 21 +++++++++++++++++++++ 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/docs/_includes/faq.html b/docs/_includes/faq.html index 3bcc2524..34f9ca7c 100644 --- a/docs/_includes/faq.html +++ b/docs/_includes/faq.html @@ -11,7 +11,7 @@

-
Yes, using Meshery, you can create as many performance test schedules as you would like.
+

Yes, using Meshery, you can create as many performance test schedules as you would like.

diff --git a/docs/_sass/getnighthawk.scss b/docs/_sass/getnighthawk.scss index 04c7e0ad..ade8065a 100644 --- a/docs/_sass/getnighthawk.scss +++ b/docs/_sass/getnighthawk.scss @@ -5630,6 +5630,27 @@ div.globalFooterCard.card-environment { margin-top: 1rem; line-height: 1.5; } + .side { + margin-top: 2rem !important; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + width: 100% !important; + } + + .accordion { + margin-top: 1.5rem !important; + padding: 0 1.5rem; + } + #faq-title { + display: flex; + justify-content: space-between; + padding-left: 0.5rem; + } + .container-faq .accordion-body { + padding: 1rem 0.5rem !important; + } } @media (max-width: 600px) { From 7527fae30506070f0ea98541da20c647924c02a9 Mon Sep 17 00:00:00 2001 From: Nikhil Sharma Date: Sun, 19 Dec 2021 18:26:35 +0530 Subject: [PATCH 4/4] fixed mailing list responsiveness Signed-off-by: Nikhil Sharma --- docs/_sass/footer.scss | 1 + docs/_sass/getnighthawk.scss | 37 +++++++++++ docs/_sass/mailing-list.scss | 119 ++++++++++++++++++----------------- 3 files changed, 101 insertions(+), 56 deletions(-) diff --git a/docs/_sass/footer.scss b/docs/_sass/footer.scss index e6ca6c1c..568a4da6 100644 --- a/docs/_sass/footer.scss +++ b/docs/_sass/footer.scss @@ -211,6 +211,7 @@ footer { .nighthawk-logo { display: flex; + justify-content: center; padding-top: 18px; a { display: block; diff --git a/docs/_sass/getnighthawk.scss b/docs/_sass/getnighthawk.scss index ade8065a..5136161a 100644 --- a/docs/_sass/getnighthawk.scss +++ b/docs/_sass/getnighthawk.scss @@ -5662,13 +5662,47 @@ div.globalFooterCard.card-environment { } .hero-section-logo-span { text-align: center !important; + font-size: 2.75rem !important; + padding-left: 1rem; + padding-right: 1rem; } .hero-section-para p { text-align: center !important; + font-size: 1.5rem !important; + padding-left: 1rem; + padding-right: 1rem; } .hero-section-button-div { margin-top: 1rem !important; } + .accordion { + padding: 0 0.5rem; + } +} + +@media (max-width: 475px) { + .hero-section-logo-span { + font-size: 2.25rem !important; + padding-left: 3rem; + padding-right: 3rem; + } + .hero-section-para p { + font-size: 1.25rem !important; + padding-left: 3rem; + padding-right: 3rem; + } + .hero-section-img { + width: 450px !important; + } +} + +@media (max-width: 455px) { + .hero-section-logo-span { + font-size: 2rem !important; + } + .hero-section-para p { + font-size: 1rem !important; + } } @media (max-width: 550px) { @@ -5722,6 +5756,9 @@ div.globalFooterCard.card-environment { .hero-section-img { margin-right: 0; } + .accordion { + padding: 0 0rem; + } } .des-para1 { diff --git a/docs/_sass/mailing-list.scss b/docs/_sass/mailing-list.scss index 54528df2..d64ab5ff 100644 --- a/docs/_sass/mailing-list.scss +++ b/docs/_sass/mailing-list.scss @@ -1,69 +1,76 @@ .mailing-section { - background: #1e2117; - color: white; - padding: 80px 0px 40px 0px; - @media #{$mobile} { - padding: 87px 0; - } + background: #1e2117; + color: white; + padding: 80px 0px 40px 0px; + @media #{$mobile} { + padding: 87px 0; + } - a, - a:hover, - a:focus, - a:active { - text-decoration: none; - color: inherit; - } + a, + a:hover, + a:focus, + a:active { + text-decoration: none; + color: inherit; + } - .mailinglist-main { - position: relative; - display: flex; - flex-direction: column; - align-items: center; + .mailinglist-main { + position: relative; + display: flex; + flex-direction: column; + align-items: center; - .mailinglist-text { - margin-bottom: 40px; - display: block; - span { - font-size: 34px; - } + .mailinglist-text { + text-align: center; + margin-bottom: 30px; + display: block; + span { + font-size: 34px; + } - p { - max-width: 375px; - margin: 0 3rem; - color: white; - font-size: 20px; - } + p { + margin: 0 3rem; + margin-top: 1rem; + color: white; + font-size: 20px; + @media (max-width: 525px) { + margin: 0 1.75rem; + margin-top: 1rem; } + } + } - .mailinglist-buttons { - display: inline-flex; - flex-wrap: wrap; - justify-content: center; - align-items: center; + .mailinglist-buttons { + display: inline-flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + @media (max-width: 570px) { + flex-direction: column; + } - .mailinglist-join-button { - display: flex; - justify-content: center; - align-items: center; - background: #647881; - width: 253px; - height: 56px; - border-radius: 5px; - margin: 2rem 0 0; - transition: all .4s; + .mailinglist-join-button { + display: flex; + justify-content: center; + align-items: center; + background: #647881; + width: 253px; + height: 56px; + border-radius: 5px; + margin: 2rem 0 0; + transition: all 0.4s; - &:hover{ - background-color: #4a5a63; - } - } + &:hover { + background-color: #4a5a63; + } + } - .mailinglist-join-button:not(:first-child) { - margin-left: 1rem; - @media #{$mobile} { - margin-left: 0; - - } - } + .mailinglist-join-button:not(:first-child) { + margin-left: 1rem; + @media (max-width: 570px) { + margin-left: 0; } + } } + } }