From c10e8fe2a53d9af87251c7962d24ec3a0568d923 Mon Sep 17 00:00:00 2001 From: Rudraksh Tyagi Date: Wed, 27 Mar 2024 15:14:13 +0530 Subject: [PATCH 1/5] fix content text font family Signed-off-by: Rudraksh Tyagi --- .jekyll-metadata | Bin 1209288 -> 1219008 bytes _sass/brand.scss | 5 +++++ 2 files changed, 5 insertions(+) diff --git a/.jekyll-metadata b/.jekyll-metadata index fc7b0692831dba3f78fc7dad68fac5af72d99f1a..a3101d94f6509e934a16e6e03966306f377966cd 100644 GIT binary patch delta 14580 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 N!QuAWR~ZMYe*pt>g;f9m diff --git a/_sass/brand.scss b/_sass/brand.scss index 29bbd6bc4e..edfd549a06 100644 --- a/_sass/brand.scss +++ b/_sass/brand.scss @@ -9,6 +9,11 @@ body { h1 { font-size: 32px; } + +h1 + p, .in + div>p { + font-family: "Open Sans", sans-serif; +} + .subhead { font-size: 24px; } From 49169d8becfa553e70ee81d3effa0712eb094a8f Mon Sep 17 00:00:00 2001 From: Rudraksh Tyagi Date: Thu, 28 Mar 2024 03:38:22 +0530 Subject: [PATCH 2/5] refactor brand page code Signed-off-by: Rudraksh Tyagi --- .jekyll-metadata | Bin 1219008 -> 1219298 bytes _sass/brand.scss | 626 ++++++++++++-------------------- assets/js/brand-help.js | 2 +- collections/_pages/brand.html | 651 ++++++++++++++++------------------ 4 files changed, 538 insertions(+), 741 deletions(-) diff --git a/.jekyll-metadata b/.jekyll-metadata index a3101d94f6509e934a16e6e03966306f377966cd..1ea051bfb1b26cd26798e1acbfa405cebad6d7c2 100644 GIT binary patch delta 115 zcmX@G+3V3(uZ9-J7N!>F7M2#)7Pc1l7LFFq7OocV7M>Q~7QPn#7J(MQEkX{p9Hrdy z4HnIf%ceK};gy-5QY&ON{T2sb&2()JKF8^IIQX=tH*oUxY=2)XG?yQ&_;!_P(DeP> SEb`O!a|LX-f9MsuzzqNx`6!zJ delta 121 zcmV-<0EYkKwMxLVN`Qm`gaU*Egam{Iga(8Mgb0KQgbIWUgbaiYgbsucgb;)gv=Tsl z2x$u+fMFz%keAp { - font-family: "Open Sans", sans-serif; -} - -.subhead { - font-size: 24px; -} -.button1 { - background-color: #ebc017; - color: #000; - border: none; - border-radius: 10px; - padding: 10px 20px; - padding-bottom: 15px; - font-size: 1em; - cursor: pointer; - -webkit-transition: 450ms all; - transition: 450ms all; - text-decoration: none; - text-transform: capitalize; - border: 0; - margin-left: 60%; -} - -.button1:hover, -.button1:focus { - background-color: #ebc017; - box-shadow: 0 2px 10px rgb(255 255 255 / 0.4); -} - -.button1:active { - box-shadow: 0 2px 10px rgb(255 255 255 / 0.4); - transform: scale(0.98); - background-color: #ebc017; -} - -.nav-fixed { - position: -webkit-sticky; - position: sticky; - top: 150px; - margin-left: 2rem; - z-index: 100; /* Ensure it's above other content */ - border-radius: 5px; /* Rounded corners as per the image */ - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow */ - padding: 1rem; /* Padding inside the navbar */ - padding-top: 0; - margin-top: 2rem; - width: 100%; - background: var(--background-nav-fixed); - color: var(--color-nav-fixed); - font-size: 15px; - height: 100%; -} - -ul { - list-style-type: none; /* Remove default list styling */ - padding: 0; /* Remove default padding */ - margin: 0; /* Remove default margin */ -} - -.header_link { - display: block; - color: var(--color-nav-fixed); - margin-bottom: 0.5rem; - margin-top: 1.5rem; /* Space between links */ - text-decoration: none; /* Remove underline */ - transition: color 0.3s; /* Smooth transition for hover effect */ - font-size: 1.1rem; -} - -.header_link:hover, -.header_link:focus { - color: #00b39f; /* Color when link is hovered or focused */ - text-decoration: none; /* Ensure underline doesn't re-appear on hover */ -} - -@media (max-width: 1020px) { - - .nav-fixed { - display: none; - } + font-family: "Qanelas Soft", sans-serif; + font-size: 32px; } -@media (max-width: 725px) { - .header_link { - margin-top: 0.75rem; /* Adjust spacing between links */ - margin-bottom: 0.75rem; /* Adjust spacing */ - font-size: 1rem; /* Adjust font size for readability */ - } - - /* Adjust the main content or other elements as needed for smaller screens */ - #meshkit-hero, - #meshery, - #meshmap, - #mascot { - padding: 0; - } +h2 { + font-family: "Qanelas Soft", sans-serif; + font-size: 24px; } -h2.sub-text { - font-family: "Qanelas Soft", "Open Sans", sans-serif; - -webkit-font-smoothing: antialiased; +p { + line-height: 1.6; + margin-bottom: 30px; } -.container1 { - display: flex; - align-items: left; - justify-content: left; - color: white; - width: 100%; - overflow: visible; - margin-top: -0.5rem; +#meshkit-hero { + height: 500px; + width: 100%; + align-content: center; + overflow: hidden; } .hero-left, .hero-right { - position: absolute; - top: 0; - margin-top: 0; + position: absolute; + top: 0; + left: 0; + margin-top: 0; } .hero-left { - margin-left: -16%; + margin-left: -16%; } .hero-right { - width: 100%; - margin-left: 20%; + width: 100%; + margin-left: 20%; } .hero-left-mobile, .hero-right-mobile { - display: none; + display: none; } .brand-kit { - position: relative; - display: flex; - justify-content: left; - align-items: left; - text-align: left; - width: 60%; - padding: 50px 20px; - z-index: 2; /* Make sure this layer is above the background images */ + position: relative; + width: 60%; + z-index: 5; /* Make sure this layer is above the background images */ } .brand-kit h1 { - font-size: 32px; - margin-bottom: 20px; -} - -.brand-kit p { - font-size: 1em; - line-height: 1.6; - margin-bottom: 30px; + font-size: 3.5rem; + margin-bottom: 20px; + font-weight: bold; + text-align: left; } -.button2 { - background-color: #ebc017; - color: #000; - border: none; - border-radius: 10px; - padding: 10px 20px; - font-size: 1em; - cursor: pointer; - -webkit-transition: 450ms all; - transition: 450ms all; - text-decoration: none; - text-transform: capitalize; - border: 0; +.download-button { + background-color: #ebc017; + color: #000; + border: none; + border-radius: 10px; + padding: 10px 20px; + padding-bottom: 15px; + font-size: 1em; + cursor: pointer; + -webkit-transition: 450ms all; + transition: 450ms all; + text-decoration: none; + text-transform: capitalize; } -.button2:hover, -.button2:focus { - background-color: #ebc017; - box-shadow: 0 2px 10px rgb(255 255 255 / 0.4); +.download-button:hover, +.download-button:focus { + background-color: #ebc017; + box-shadow: 0 2px 10px rgb(255 255 255 / 0.4); } -.button2:active { - box-shadow: 0 2px 10px rgb(255 255 255 / 0.4); - transform: scale(0.98); - background-color: #ebc017; +.download-button:active { + box-shadow: 0 2px 10px rgb(255 255 255 / 0.4); + transform: scale(0.98); + background-color: #ebc017; } -.meshery-kit { - display: flex; - justify-content: left; - font-size: 3.5rem; - font-weight: 700; +.content-body { + padding: 50px 0px; } -/* Responsive design */ -@media (max-width: 768px) { - /* Adjust the flex layout for mobile */ - - - h1 { - font-size: 24px; - } - - .hero-left, - .hero-right { - display: none; - } - - .hero-left-mobile, - .hero-right-mobile { - position: absolute; - top: 0; - margin-top: 0; - } - - .hero-left-mobile { - position: absolute; - display: flex; - margin-left: -170rem; - } - - .hero-right-mobile { +.content-body-section { display: flex; - width: 100%; - margin-left: -11rem; - } - - .container1 { flex-direction: column; - align-items: center; - } - - .meshery-kit { - justify-content: center; - font-size: 32px; - } - - /* Make the brand kit take the full available width */ - .brand-kit { - width: 100%; - padding: 20px; - text-align: center; /* Center align the text for mobile */ - } - - /* Adjust the brand kit content sizes */ - .brand-kit h1 { - font-size: 24px; - } - - .brand-kit p { - font-size: 1em; /* Adjust the paragraph text size for mobile */ - } - - .button2 { - font-size: 1em; /* Adjust button text size for mobile */ - padding: 12px 24px; /* Adjust button padding for mobile */ - } } -/* Further adjustments for smaller screens */ -@media (max-width: 480px) { - /* Adjust the brand kit content sizes for smaller screens */ - .brand-kit h1 { - font-size: 1.5em; - } - - .brand-kit p { - font-size: 0.9em; - } - - .button2 { - font-size: 0.9em; - padding: 10px 20px; - } +.content-body-section h1, +h2 { + text-align: left !important; } -@media (max-width: 768px) { - .button2 { - width: 100%; - margin-left: 0; - } +.content-body-section h2 { + margin-top: 0rem !important; } -.in { - margin-top: 2rem; - font-size: 24px; +.content-body-section p { + margin-bottom: 1rem; } -.ImgDiv { - width: 100%; - margin-left: 2%; - display: flex; - margin-top: 3rem; - padding: 2rem; - width: 80%; - display: flex; - justify-content: space-between; - background-color: white; - border-radius: 14px; - margin-top: -0.5rem; +.content-body-section img { + width: 85%; + align-self: center; } -.row { - display: flex; - justify-content: space-between; - /* Adjust as needed */ - flex-wrap: wrap; - /* Allows divs to wrap to the next line if they don't fit */ +.content-body-section .download-button-wrapper { + align-self: end; + margin-top: 2rem; } -.col { - position: relative; - width: 100%; +.nav-fixed { + position: -webkit-sticky; + position: sticky; + top: 150px; + margin-left: 2rem; + z-index: 100; /* Ensure it's above other content */ + border-radius: 5px; /* Rounded corners as per the image */ + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow */ + padding: 1rem; /* Padding inside the navbar */ + padding-top: 0; + min-height: max-content; + min-width: max-content; + background: var(--background-nav-fixed); + color: var(--color-nav-fixed); + font-size: 15px; + height: 100%; } -@media (max-width: 768px) { - - .ImgDiv { - margin-left: 0; - } - - .in { - font-size: 18px; - } - .button1 { - width: 100%; - margin-left: 0; - } +.nav-fixed p { + font-size: 1rem; + margin-bottom: 0px !important; } -.zoom-mobile { - display: none; +ul { + list-style-type: none; /* Remove default list styling */ + padding: 0; /* Remove default padding */ + margin: 0; /* Remove default margin */ } -.social-mobile { - display: none; +.header-link { + display: block; + color: var(--color-nav-fixed); + margin-bottom: 0.5rem; + margin-top: 1.5rem; /* Space between links */ + text-decoration: none; /* Remove underline */ + transition: color 0.3s; /* Smooth transition for hover effect */ + font-size: 1.1rem; } -.presentation-mobile { - display: none; +.header-link:hover, +.header-link:focus { + color: #00b39f; /* Color when link is hovered or focused */ + text-decoration: none; /* Ensure underline doesn't re-appear on hover */ } -@media (max-width: 768px) { - .zoom { - display: none; - } - - /* Show the alternative image */ - .zoom-mobile { - display: block; - width: 90%; /* Adjust as needed */ - margin-left: 2%; /* Adjust as needed */ - } - - .presentation { - display: none; - } - - /* Show the alternative image */ - .presentation-mobile { - display: block; - width: 90%; /* Adjust as needed */ - margin-left: 2%; /* Adjust as needed */ - } - - .social { - display: none; - } +.logo-container { + padding: 10px 20px; + display: flex; + justify-content: space-around; + align-items: center; + margin-top: 0; +} - /* Show the alternative image */ - .social-mobile { - display: block; - width: 90%; /* Adjust as needed */ - margin-left: 2%; /* Adjust as needed */ - } +.logo-container-img1 { + flex: 1; + height: 70%; + border-right: 2px solid #3d4f57; } -.layerH3 { - margin-top: 8rem; +.logo-container-img2 { + flex: 2; + width: 70%; + padding: 20px; } -/* Styles for the logo images container */ -.ImgDiv1 { - display: flex; - justify-content: space-around; - align-items: center; - flex-wrap: wrap; /* Allow logos to wrap */ - gap: 1rem; /* space between logos */ - margin-top: 0; +.mobile-image { + display: none; } -/* Existing styles */ .color-palette { - width: 100%; - display: flex; - color: white; - gap: 1rem; /* space between color boxes */ - margin-top: 2rem; /* space above the color palette */ - flex-wrap: wrap; /* Allow color boxes to wrap */ - justify-content: center; /* Distribute items evenly */ - align-items: center; + width: 100%; + display: flex; + color: white; + gap: 1rem; /* space between color boxes */ + margin-top: 2rem; /* space above the color palette */ + flex-wrap: wrap; /* Allow color boxes to wrap */ + justify-content: center; /* Distribute items evenly */ + align-items: center; } .color-box { - width: 165px; - height: 180px; - display: flex; - flex-direction: column; - justify-content: space-between; - text-align: left; - border-radius: 0.5rem; - padding: 1rem; - box-sizing: border-box; + width: 165px; + height: 180px; + display: flex; + flex-direction: column; + justify-content: space-between; + text-align: left; + border-radius: 0.5rem; + padding: 1rem; + box-sizing: border-box; } .color-name { - margin-top: 0.5rem; - font-weight: bold; + margin-top: 0.5rem; + font-weight: bold; } .color-code { - font-size: 0.8rem; + font-size: 0.8rem; } -.img2 { - width: 400px; - padding-left: 4rem; - border-left: 2px solid #3d4f57; - height: 15rem; -} - -.img1 { - width: 200px; +@media (max-width: 1020px) { + .nav-fixed { + display: none; + } } @media (max-width: 768px) { - .img2 { - width: 100%; - border-top: 2px solid #3d4f57; - border-left: none; - height: 100%; - padding-top: 2rem; - padding-left: 0; - margin-left: 0; - } - - .img1 { - width: 70%; - margin-top: 3rem; - margin-left: -2rem; - } + h1 { + font-size: 24px; + } + + #meshkit-hero { + height: 400px; + } + + .hero-left, + .hero-right { + display: none; + } + + .hero-left-mobile, + .hero-right-mobile { + position: absolute; + top: 0; + margin-top: 0; + } + + .hero-left-mobile { + position: absolute; + display: flex; + margin-left: -170rem; + } + + .hero-right-mobile { + display: flex; + width: 100%; + margin-left: -11rem; + } + + .brand-kit { + width: 100%; + text-align: center; /* Center align the text for mobile */ + padding: 0%; + } + + .brand-kit h1 { + font-size: 2.5rem; + text-align: center; + } + + .download-button-wrapper { + width: 100%; + margin-left: 0; + } + + .download-button { + width: 100%; + margin-left: 0; + } + + .content-body-section img { + display: none; + } + + .content-body-section .mobile-image { + display: block; + width: 100%; + } + + .logo-container { + flex-direction: column; + align-items: center; + } + + .logo-container img{ + display: block; + } + + .logo-container-img2 { + width: 100%; + border-top: 2px solid #3d4f57; + border-left: none; + padding: 20px 0; + } + + .logo-container-img1 { + border-right: none; + width: 50% !important; + height: 70%; + padding: 2rem 0px; + aspect-ratio: 1/1; + } } -@media (max-width: 360px) { - - .container1 { - margin-top: -0.5rem; - padding: 0; - } - - #meshery, #zoom, #social, #mascot { - margin-left: 1rem; - } - - section { - margin-top: -1rem; - } - - +@media (max-width: 480px) { + p { + font-size: 1em; + } + .brand-kit h1 { + font-size: 2em; + } } - diff --git a/assets/js/brand-help.js b/assets/js/brand-help.js index 77685e0665..cedc2fd16f 100644 --- a/assets/js/brand-help.js +++ b/assets/js/brand-help.js @@ -1,7 +1,7 @@ document.addEventListener("DOMContentLoaded", function () { // Add event listener to run the function on window resize - var navLinks = document.querySelectorAll("#nav-fixed .header_link"); + var navLinks = document.querySelectorAll("#nav-fixed .header-link"); // Add click event listener to each link navLinks.forEach(function (link) { diff --git a/collections/_pages/brand.html b/collections/_pages/brand.html index 0f4585ba51..edc345223d 100644 --- a/collections/_pages/brand.html +++ b/collections/_pages/brand.html @@ -4,370 +4,319 @@ permalink: /brand --- - -
-
- +
- + +
+ +
+
-
-
-

Meshery's Brand Kit

-
-

- Some guidelines for Meshery have been compiled into a brand kit that - can help you better understand and create with the Meshery brand and - its assets. For unique use cases on how to utilize our marks in a way - not covered here, please contact us and include a visual mockup of - intended use. +

Meshery's Brand Kit

+

+ Some guidelines for Meshery have been compiled into a brand kit that + can help you better understand and create with the Meshery brand and + its assets. For unique use cases on how to utilize our marks in a + way not covered here, please contact us and include a visual mockup + of intended use.

- + -
-
- -
-
- +
-
-
-
-
-

Meshery

- -

- The Meshery mark includes the Meshery name and logo, and any word, - phrase, image, or other designation that identifies its source or - origin. Please don’t modify the marks or use them in a confusing way. -

-
- - -
-

- Logos -

- -
- -

- Download the kit to access to all the available logo assets. Here are a few samples of the Meshery logos. -

-
- -
- - - - - -
-
- - -

Colors

-
-

- The Meshery color palette consist of the primary Meshery color and - additional shades. The Meshery logo should be white or monochrome - tonal when using a color background. Visit Sistent Design System for more guidance on how to apply Meshery colors. -

-
-
- -
-
Charcoal
-
RGB 60, 73, 79
#3C494F
-
-
-
Keppel
-
RGB 0, 179, 159
#00B39F
-
-
-
Caribbean Green
-
RGB 0, 211, 169
#00D3A9
-
+
+
+

Meshery

+

+ The Meshery mark includes the Meshery name and logo, and any + word, phrase, image, or other designation that identifies its + source or origin. Please don’t modify the marks or use them in a + confusing way. +

+

Logos

+

+ Download the kit to access to all the available logo assets. + Here are a few samples of the Meshery logos. +

+
+ + +
+

Colors

+

+ The Meshery color palette consist of the primary Meshery color + and additional shades. The Meshery logo should be white or + monochrome tonal when using a color background. Visit + Sistent Design System + for more guidance on how to apply Meshery colors. +

+
+ +
+
Charcoal
+
+ RGB 60, 73, 79
#3C494F +
+
+
+
Keppel
+
RGB 0, 179, 159
#00B39F
+
+
+
Caribbean Green
+
RGB 0, 211, 169
#00D3A9
+
+
+ + +
- - - -
- -
-
-

Zoom Backgrounds

- -

- As a close knit community, we meet weekly to advance Meshery - initiatives and give constructive suggestions on how to enhance our - features to ensure maximum productivity. On such occasions, feel free - to participate meaningfully as you proudly don our specifically - curated backgrounds for these weekly calls. -

-
- - -
-
- MesheryOperatorDark Logo - - - - - + +
-
-
- -
-
-

Presentation Slides

-

Freely use the Meshery-branded presentation template while you share Meshery with others.

-
- - - -
- -
-
-

Social Posts

- -

- Here are curated social media assets that you - can include in your posts on any platform of your choice. From - LinkedIn to YouTube and Twitter, take the news about Meshery with you - as you share your experience. -

-
- - -
- - - + + +
- - - -
-
- - -
+
- -
\ No newline at end of file + + From f03d7fbacbf8eca01c9358abd2d2bc16cee87fa5 Mon Sep 17 00:00:00 2001 From: Rudraksh Tyagi Date: Thu, 28 Mar 2024 04:14:05 +0530 Subject: [PATCH 3/5] set paragraph font to Open Sans Signed-off-by: Rudraksh Tyagi --- .jekyll-metadata | Bin 1219298 -> 1219409 bytes _sass/brand.scss | 1 + 2 files changed, 1 insertion(+) diff --git a/.jekyll-metadata b/.jekyll-metadata index 1ea051bfb1b26cd26798e1acbfa405cebad6d7c2..3df2119a6282bb27402d5da58bb1b0b9f889c950 100644 GIT binary patch delta 197 zcmaE~)$8ImFE$pAY9<-w=@*k2~n#-!FH#?~aJ)+FZEB$n1B z*48Ap)+F}UB#zc3&ekNZ)+FxMB%anJ-qs|()+GMcB!Si>!L3O`_i8xGxaAw>My%19 zUU;8bW_wDlke48enEZ78TmjqZaREZY)BOttQnq*Y3q^8IuU#RashL<*l9`s6T#`|m mq+66)kgr#no5N~n#-!FH#?~aJ)+FZEB$n1B z*48Ap)+F}UB#zc3&ekNZ)+FxMB%anJ-qs|()+GMcB!Si>!L3O`_i8vwx#b%ynj4o* wZ~Vh6vpuC&$V(6`cDu?nX!?F`7WwJ=xdOJ+;{t?)r~4NQq-^i(7mDNt03~cOMgRZ+ diff --git a/_sass/brand.scss b/_sass/brand.scss index 66ee4ccec6..32d3e4e472 100644 --- a/_sass/brand.scss +++ b/_sass/brand.scss @@ -18,6 +18,7 @@ h2 { p { line-height: 1.6; margin-bottom: 30px; + font-family: "Open Sans", sans-serif !important; } #meshkit-hero { From 9a18dfc2eb06fba68a5992b17f86bdbbc47f7789 Mon Sep 17 00:00:00 2001 From: Rudraksh Tyagi Date: Thu, 28 Mar 2024 04:30:37 +0530 Subject: [PATCH 4/5] fix meshkit hero alignment Signed-off-by: Rudraksh Tyagi --- _sass/brand.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_sass/brand.scss b/_sass/brand.scss index 32d3e4e472..90a6c1775b 100644 --- a/_sass/brand.scss +++ b/_sass/brand.scss @@ -23,8 +23,8 @@ p { #meshkit-hero { height: 500px; - width: 100%; - align-content: center; + display: flex; + align-items: center; overflow: hidden; } From 115b5bba1668b23aba3f0c1da04d93278a56e798 Mon Sep 17 00:00:00 2001 From: Rudraksh Tyagi Date: Thu, 28 Mar 2024 04:40:21 +0530 Subject: [PATCH 5/5] fix logo padding Signed-off-by: Rudraksh Tyagi --- _sass/brand.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/_sass/brand.scss b/_sass/brand.scss index 90a6c1775b..b1c0a84ae9 100644 --- a/_sass/brand.scss +++ b/_sass/brand.scss @@ -179,6 +179,7 @@ ul { flex: 1; height: 70%; border-right: 2px solid #3d4f57; + padding: 30px; } .logo-container-img2 {