diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 10fde45839a9..c3e9de9b1888 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -414,7 +414,7 @@ Follow the following instructions to start contributing. **2.** Clone your forked copy of the project. ``` -git clone --depth=1 https://github.com/layer5io/layer5.git +git clone --depth=1 https://github.com//layer5.git ``` **3.** Navigate to the project directory. diff --git a/README.md b/README.md index bd869311bfc5..ce035fe0556b 100644 --- a/README.md +++ b/README.md @@ -135,7 +135,7 @@ alt="Nighthawk" align="left" />

Community and Contributions

-

We would love to accept your contributions! This project is community-built and welcomes collaboration. Contributions, updates, discrepancy reports and pull requests are all appreciated. Contributors are expected to adhere to the CNCF Code of Conduct. +

We warmly welcome all contributors! Our projects are community-built and each welcomes open collaboration. As you get started, please review this project's contributing guidelines. Whether you are a user or code contributor and whether your opening an issue or a pull requests, know that any form of your engagement is considered contribution and is appreciated. Contributors are expected to adhere to the CNCF Code of Conduct.

Join us in the discussion forum and on Slack to learn more about Layer5 and its community! Make sure you see the newcomer's guide for a tour of resources available to you. diff --git a/src/assets/images/meshery/meshery-catalog.svg b/src/assets/images/meshery/meshery-catalog.svg new file mode 100644 index 000000000000..c9f38cccdcd9 --- /dev/null +++ b/src/assets/images/meshery/meshery-catalog.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/collections/members/sahil/index.mdx b/src/collections/members/sahil/index.mdx deleted file mode 100644 index 97c41410fcfe..000000000000 --- a/src/collections/members/sahil/index.mdx +++ /dev/null @@ -1,12 +0,0 @@ ---- -name: Md Sahil -position: Contributor -image_path: ./sahil.jpeg -github: MdSahil-oss -twitter: sahilstwts -linkedin: md-sahil-8aba80208 -status: Active -location: New Delhi, India -bio: I am an undergrad student from Delhi, Who wants to grow in tech that's why I think, Being a student Open source contributions are the great ways of learning, So looking forward to make valuable contributions to layes5 & growing in the community. -published: true ---- \ No newline at end of file diff --git a/src/collections/members/sahil/sahil.jpeg b/src/collections/members/sahil/sahil.jpeg deleted file mode 100644 index 27bed5cf7a96..000000000000 Binary files a/src/collections/members/sahil/sahil.jpeg and /dev/null differ diff --git a/src/collections/programs/lfx-2023/lfx-2023.mdx b/src/collections/programs/lfx-2023/lfx-2023.mdx index a9d8ee763a62..05d32addd1d8 100644 --- a/src/collections/programs/lfx-2023/lfx-2023.mdx +++ b/src/collections/programs/lfx-2023/lfx-2023.mdx @@ -113,21 +113,96 @@ A use-case that fits very well is be the ability to use it to run performance te #### Representing Kubernetes ontology in MeshModel **Description**: Network topologies and graph databases go hand-in-hand. The OpenAPI specifications for Kubernetes provides taxonomy, but augmenting a graph data model with formalized ontologies enables any number of capabilities, one of the more straightforward is the inferencing requisite for natural language processing, and consequently, a human-centric query / response interaction becomes becomes possible. More importantly, more advanced systems can be built when a graph data model of connected systems is upgraded to be a knowledge semantic graph. Deliverables (among other items): -- MeshModel capabilities browser -- Import/export of MeshModel models and components as OCI images -- augmentation of cuelang-based component generator +1. MeshModel capabilities browser +2. Import/export of MeshModel models and components as OCI images +3. Augmentation of cuelang-based component generator + - Recommended Skills: cuelang, golang, OCI - Mentor(s): Lee Calcote - Issue: https://github.com/cncf/tag-network/issues/24 - LFX URL: https://mentorship.lfx.linuxfoundation.org/project/96080e3d-83e2-46ed-928c-b6e7f3154bf3 +## LFX Mentorship 2023 Summer Projects +
+ +### Meshery +
+ +#### Meshery UI Permissions Framework + +**Description**: Meshery UI lacks a permissions framework. The existing internal implementation is simple, fragile and must be completely rewritten. The approach to implemention a permmissions framework includes using React.js and CASL.js. Meshery UI's approach needs to be extensible given that this framework will be an extension point for Remote Providers to supply their own permissions. + +**Expected Outcome**: Definition of permissions and their enforcement in Meshery with an aim for deep granularity and extensibility with each user interface input component carrying a unique permission key id. Each key is then put into a group of keys in a keychain, keychains assigned to user roles, in turn, roles assigned to users. With users having the ability to create own custom roles, the framework will be dynamic based on the associated server-side permissions for the currently auth’ed user. +- Recommended Skills: React.js, CASL.js +- Mentor(s): Lee Calcote, Abhishek Kumar +- Upstream Issue (URL): https://github.com/meshery/meshery/issues/7436, https://github.com/meshery/meshery/issues/7382 +- LFX URL: https://mentorship.lfx.linuxfoundation.org/project/f4a9804f-2e46-42a4-b2ae-ad3ea7b29734 + +#### OPA policy evaluation in-browser using WebAssembly and Rego + +**Description**: Meshery's highly dynamic infrastructure configuration capabilities require real-time evaluation of complex policies. Policies of various types and with a high number of parameters need to be evaluted client-side. With policies expressed in Rego, the goal of this project is to incorporate use of the https://github.com/open-policy-agent/golang-opa-wasm project into Meshery UI. + +**Expected Outcome**: a powerful real-time multi-user collaboration experience. +- Recommended Skills: Golang, Open Policy Agent, WASM +- Mentor(s): Lee Calcote, Abhishek Kumar +- Upstream Issue (URL): https://github.com/meshery/meshery/issues/7019 +- LFX URL: https://mentorship.lfx.linuxfoundation.org/project/005db8db-7efe-4433-9605-91d14174c72c + +#### Adopt OCI as the packaging and distribution format for Meshery MeshModels + +**Description**: Meshery MeshModels represent a schema-based description of cloud native infratructure. MeshModels need to be portable between Meshery deployments as well as easily versionable in external repositories. + +**Expected Outcome**: +1. Meshery clients (mesheryctl and Meshery UI) should be able to import/export MeshModels as OCI images. +2. Meshery clients (mesheryctl and Meshery UI) should be able to push/pull from OCI-compatible registries. +3. Stretch Goal: OCI image signing; Verify the authenticity of MeshModels using cosign (https://github.com/sigstore/cosign). +4. Target registries: Meshery Catalog (https://meshery.io/catalog), Artifact Hub. + + +- Recommended Skills: Reactjs, Golang, GraphQL +- Mentor(s): Lee Calcote +- Upstream Issue (URL): https://github.com/meshery/meshery/issues/6447 +- LFX URL: https://mentorship.lfx.linuxfoundation.org/project/26377c30-9ffd-41e3-bfea-839bf126f8f6 + +#### OCI compatible Kubernetes ontology + +**Description**: Network topologies and graph databases go hand-in-hand. The OpenAPI specifications for Kubernetes provides taxonomy, but augmenting a graph data model with formalized ontologies enables any number of capabilities, one of the more straightforward is the inferencing requisite for natural language processing, and consequently, a human-centric query / response interaction becomes becomes possible. More importantly, more advanced systems can be built when a graph data model of connected systems is upgraded to be a knowledge semantic graph. Deliverables (among other items): +1. MeshModel capabilities browser +2. Import/export of MeshModel models and components as OCI images +3. Augmentation of cuelang-based component generator + + +- Recommended Skills: cuelang, golang, OCI +- Mentor(s): Lee Calcote +- Upstream Issue (URL): https://github.com/meshery/meshery/issues/6447 +- LFX URL: https://mentorship.lfx.linuxfoundation.org/project/bb8ddf84-31d7-4a89-9e4b-e6aa9601c0db + +### Service Mesh Performance +
+ +#### Service Mesh Performance IDE Plugin + +**Description**: The objective of this project is to develop IDE plugins that can enhance the developer experience while working with Service Mesh Performance Performance Profiles. The proposed plugins will leverage technologies such as golang and cuelang to provide features such as syntax highlighting, auto-completion, validation, and rendering previews for Service Mesh Performance profile and model definitions. + +**Expected Outcome**: +1. Release VS Code Extension +2. Syntax Highlighting and Auto-completion: The plugin can fetch SMP Model definitions such as cloud-native components and their relationships. This information can be used to provide syntax highlighting and auto-completion for these definitions in the JSON files, making it easier for developers to write error-free code. +3. Validation and Reference: For Meshery MeshModel definitions such as cloud-native components and their relationships, the plugin can use the CUE language to provide validation for the CUE input and preview the rendering result. The plugin can also fetch the SMP Model schemas and display them in the IDE for reference. + + +- Recommended Skills: Cuelang +- Mentor(s): Lee Calcote, Xin Huang +- Upstream Issue (URL): https://github.com/service-mesh-performance/service-mesh-performance/issues/379 +- LFX URL: https://mentorship.lfx.linuxfoundation.org/project/4735d0fa-229f-43e7-9415-dff9220bf687 + + ## Additional information
### Previous experience with technical writers or documentation -

Our mentors have managed teams of technical writers working on documenting enterprise-grade software at large technology companies (Cisco, Seagate, SolarWinds). During the span of time, he has worked with technical writers in DITA and post-DITA environments (from Word to FrameMaker, structured writing, online help, various CMSes, git). Our mentors have worked with technical writers on documentation strategy, creating document sets, covering the full spectrum of reader personas.

+

Our mentors have managed teams of technical writers working on documenting enterprise-grade software at large technology companies (Cisco, Seagate, SolarWinds). During the span of time, they have worked with technical writers in DITA and post-DITA environments (from Word to FrameMaker, structured writing, online help, various CMSes, git). Our mentors have worked with technical writers on documentation strategy, creating document sets, covering the full spectrum of reader personas.

We interact daily over Slack, and have an open source project [meeting everyday](https://layer5.io/community/calendar), which are posted to the community [YouTube channel](https://www.youtube.com/c/Layer5io?sub_confirmation=1). diff --git a/src/components/Card/index.js b/src/components/Card/index.js index 5a909a7d1c9f..31f26496e9a6 100644 --- a/src/components/Card/index.js +++ b/src/components/Card/index.js @@ -15,7 +15,7 @@ const Card = ({ frontmatter, fields }) => {
{frontmatter.title} { useEffect(() => { if (submit) { - axios.post("https://hook.us1.make.com/s4jo47a8ydq6uk7gg16wuukgr4l52p8c", { + axios.post("https://hook.us1.make.com/r5qgpjel5tlhtyndcgjvkrdkoc65417y", { memberFormOne, }); } diff --git a/src/components/Features-carousel/FeaturesCarousel.style.js b/src/components/Features-carousel/FeaturesCarousel.style.js index 1f031e7f8e96..491d306f52c8 100644 --- a/src/components/Features-carousel/FeaturesCarousel.style.js +++ b/src/components/Features-carousel/FeaturesCarousel.style.js @@ -39,7 +39,7 @@ export const FeaturesWrapper = styled.div` } & .pagingDots { - top: 2rem !important; + top: 0.5rem !important; & .paging-item { padding :0.25rem; } diff --git a/src/components/HandbookCard/HandbookCard.style.js b/src/components/HandbookCard/HandbookCard.style.js index 4833af689ce8..5f32fa726a70 100644 --- a/src/components/HandbookCard/HandbookCard.style.js +++ b/src/components/HandbookCard/HandbookCard.style.js @@ -11,7 +11,7 @@ export const HandbookCardWrapper = styled.div` width: 25rem; box-shadow: 0 5px 10px ${props => props.theme.green00D3A9ToGreyE6E6E6}; overflow: hidden; - height: 15rem; + height: 19rem; position: relative; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); } @@ -53,7 +53,7 @@ export const HandbookCardWrapper = styled.div` line-height: 1.75; letter-spacing: 0px; font-weight: 400; - font-size: .9rem; + font-size: 1.1rem; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); } @@ -95,7 +95,7 @@ export const HandbookCardWrapper = styled.div` } .handbook__card:hover { - height: 17rem; + height: 21rem; } .handbook__card:hover .handbook__card--head { diff --git a/src/components/MeetInfo-Table/MeetInfoTable.style.js b/src/components/MeetInfo-Table/MeetInfoTable.style.js index 602644ed9723..e3be22285bac 100644 --- a/src/components/MeetInfo-Table/MeetInfoTable.style.js +++ b/src/components/MeetInfo-Table/MeetInfoTable.style.js @@ -35,7 +35,7 @@ export const TableWrapper = styled.div` } } th { - background-color: ${props => props.theme.grey0E0E0EToGreen3C494F}; + background-color: ${props => props.theme.green00D3A9ToGreen00B39F}; color: ${props => props.theme.white}; height: 4rem; font-weight: 600; @@ -54,7 +54,7 @@ export const TableWrapper = styled.div` } /* Highlight Community Calendar */ :nth-child(4) { - background: ${props => props.theme.saffronLightColor}; + background: ${props => props.theme.greyFiveToBlueFive}; } &:hover { background-color: ${props => props.theme.grey323232ToGreenF3FFFD}; diff --git a/src/components/ScenarioCard/ScenarioCard.style.js b/src/components/ScenarioCard/ScenarioCard.style.js index 318e44f09b40..5dcaf297b291 100644 --- a/src/components/ScenarioCard/ScenarioCard.style.js +++ b/src/components/ScenarioCard/ScenarioCard.style.js @@ -93,7 +93,7 @@ export const ScenarioCardWrapper = styled.div` a { color: ${props => props.theme.white}; &:hover { - color: ${props => props.theme.primaryLightColorTwo}; + color: ${props => props.theme.secondaryColor}; } } } diff --git a/src/components/service-mesh-patterns-Table/Table.js b/src/components/service-mesh-patterns-Table/Table.js index bd80d81ec7d3..34223f4c3aa4 100644 --- a/src/components/service-mesh-patterns-Table/Table.js +++ b/src/components/service-mesh-patterns-Table/Table.js @@ -48,7 +48,7 @@ const Table = () => { : <> } {(column.Header == "Category") ? -
{column.canFilter ? column.render("Filter") : null}
+
{column.canFilter ? column.render("Filter") : null}
: <> }
diff --git a/src/sections/Blog/Blog-single/index.js b/src/sections/Blog/Blog-single/index.js index 90c04f35281d..1e1452a84116 100644 --- a/src/sections/Blog/Blog-single/index.js +++ b/src/sections/Blog/Blog-single/index.js @@ -159,7 +159,7 @@ const BlogSingle = ({ data }) => {
diff --git a/src/sections/Community/Handbook/recognition.js b/src/sections/Community/Handbook/recognition.js index 4be56b4f3185..f195ad608d20 100644 --- a/src/sections/Community/Handbook/recognition.js +++ b/src/sections/Community/Handbook/recognition.js @@ -7,6 +7,7 @@ import CommunityLogo from "../../../assets/images/community/community-green.svg" import PatternsLogo from "../../../assets/images/service-mesh-patterns/service-mesh-pattern.svg"; import LandscapeGreen from "../../../assets/images/landscape/layer5_landscape_green.svg"; import ImageHubLogo from "../../../assets/images/image-hub/layer5-image-hub.svg"; +import DockerExtension from "../../../assets/images/docker-extension/docker-extension-meshery-logo.svg"; import MesheryLogo from "../../../assets/images/meshery/icon-only/meshery-logo-light.svg"; import MesheryOperator from "../../../assets/images/meshery-operator/meshery-operator-dark.svg"; import ServiceMeshPerformance from "../../../assets/images/service-mesh-performance/stacked/smp-dark-text.svg"; @@ -16,7 +17,7 @@ import IntraPage from "../../../components/handbook-navigation/intra-page"; import uiuxrLogo from "../../../assets/images/uiuxr/uiuxr.svg"; import writersLogo from "../../../assets/images/writer-program/writer-program-badge.svg"; import meshmapLogo from "../../../assets/images/meshmap/icon-only/meshmap-icon.svg"; - +import MesheryCatalog from "../../../assets/images/meshery/meshery-catalog.svg"; const contents = [ { id: 0, link: "#Profile Bages", text: "Profile Bages" }, { id: 1, link: "#Membership", text: "Membership to GitHub" }, @@ -95,10 +96,15 @@ const RecognitionPage = () => { Community - awarded given to the community members who repeatedly engage in welcoming, encouraging, and supporting other Layer5 community members. Community members who earn this badge occasionally graduate to undertaking the Community Manager role. +
  • + + Docker Extension - awarded community members who make consistent and impactful contributions to the Docker Extension of meshery project in recognition and appreciation of their efforts. +
  • Image Hub - awarded community members who make consistent and impactful contributions the Image Hub project in recognition and appreciation of their efforts.
    • +
  • Landscape - awarded community members who make consistent and impactful contributions to the have made impactful contributions to the layer5.io website. @@ -111,6 +117,10 @@ const RecognitionPage = () => { Meshery Operator - awarded community members who make consistent and impactful contributions to the have made impactful contributions to Meshery Operator of the Meshery project in recognition and appreciation of their efforts.
    • +
  • + + Meshery Catalog - awarded community members who make consistent and impactful contributions to the Meshery Catalog of meshery project in recognition and appreciation of their efforts. +
  • MeshMap - awarded community members who make consistent and impactful contributions the MeshMap project in recognition and appreciation of their efforts. Community members who earn this badge occasionally become a project maintainer. @@ -151,4 +161,4 @@ const RecognitionPage = () => { ); }; -export default RecognitionPage; +export default RecognitionPage; \ No newline at end of file diff --git a/src/sections/Community/Handbook/repo-data.js b/src/sections/Community/Handbook/repo-data.js index 4ee9fdde6f88..88bd8e7dbbea 100644 --- a/src/sections/Community/Handbook/repo-data.js +++ b/src/sections/Community/Handbook/repo-data.js @@ -116,6 +116,15 @@ export const repo_data = [ link: ["https://layer5.io/community/members/nikhil-ladha"], repository: "https://github.com/meshery/play", }, + { + project: "Meshery Cloud", + image: meshery, + site: "https://meshery.layer5.io/", + language: "React.js", + maintainers_name: ["Pranav Singh","Uzair Shaikh"], + link: ["#"], + repository: "https://github.com/layer5io/meshery-cloud", + } ], }, @@ -218,6 +227,13 @@ export const repo_data = [ description: "A utility for validating the conformance of service mesh implementations and their adherence to the Service Mesh Interface specifications.", repository: "https://github.com/layer5io/meshery-smi-conformance-action", }, + { + project: "Meshery Cloud", + image: meshery, + language: "Golang", + description: "A Meshery Remote Provider.", + repository: "https://docs.meshery.io/extensibility/providers", + }, // { // project: "MeshMonkey", // language: "Golang", diff --git a/src/sections/Community/Web-based-from/index.js b/src/sections/Community/Web-based-from/index.js index 25edbe71fe1f..ad5eef5d9db8 100644 --- a/src/sections/Community/Web-based-from/index.js +++ b/src/sections/Community/Web-based-from/index.js @@ -34,7 +34,7 @@ const WebBasedForm = () => { useEffect(() => { if (submit) { - axios.post("https://hook.us1.make.com/v66ana9yf3w11k4a1rf3epwquur1s9rd", { + axios.post("https://hook.us1.make.com/bmmi8btg3xb2fmx6kcavxmtf0a3uame2", { memberFormOne, MemberFormThirdValue, MemberFormFourValue, diff --git a/src/sections/Company/News-grid/NewsGrid.style.js b/src/sections/Company/News-grid/NewsGrid.style.js index f615c40dafd6..18f605e384d9 100644 --- a/src/sections/Company/News-grid/NewsGrid.style.js +++ b/src/sections/Company/News-grid/NewsGrid.style.js @@ -13,32 +13,30 @@ export const NewsPageWrapper = styled.div` flex-wrap: wrap; width: 100%; justify-content: start; - @media only screen and (max-width:990px){ - + @media only screen and (max-width:990px) { justify-content: center; margin-bottom: 3rem; - - } + } } .press-release-button{ - background : rgb(240, 240, 240); + background : ${props => props.theme.shadowDarkColor}; border-radius: 5px; - color: black; - &:hover{ - box-shadow: 0 2px 10px ${props => props.theme.green00B39FToBlackFive}; + color: ${props => props.theme.text}; + &:hover { + box-shadow: 0 2px 10px ${props => props.theme.green00B39FToBlackFive}; } } .coverage-button { + background : ${props => props.theme.shadowDarkColor}; margin-right: 2rem; - background : rgb(240, 240, 240); border-radius: 5px; - color: black; - &:hover{ + color: ${props => props.theme.text}; + &:hover { box-shadow: 0 2px 10px ${props => props.theme.green00B39FToBlackFour}; - } + } } .coverage-button, .press-release-button { - @media only screen and (max-width:990px){ + @media only screen and (max-width:990px) { margin: 0.5rem; } } @@ -46,10 +44,9 @@ export const NewsPageWrapper = styled.div` .filter-buttons { display: flex; margin-bottom: 3rem; - @media only screen and (max-width:990px){ + @media only screen and (max-width:990px) { display:block; - - } + } } .search-box-container { width: 35%; @@ -68,17 +65,20 @@ export const NewsPageWrapper = styled.div` display:flex; justify-content:flex-end; width:100%; - - .searchBox{ + .searchBox { @media only screen and (max-width:990px){ - - width:100%; + width:100%; } } } .search-box { margin: auto; + input { + background-color: ${props => props.theme.shadowDarkColor}!important; + color: ${props => props.theme.text}; + transition: all 450ms ease 0s; + } } `; diff --git a/src/sections/Docker-Meshery/docker-extension-CTA.js b/src/sections/Docker-Meshery/docker-extension-CTA.js index a46c2864d292..062e0d4baec5 100644 --- a/src/sections/Docker-Meshery/docker-extension-CTA.js +++ b/src/sections/Docker-Meshery/docker-extension-CTA.js @@ -9,8 +9,13 @@ const DockerExtensionCTAWrapper = styled.div` p { color: black; } +.card-right{ + padding-top: 3rem; + padding-left: 1rem; +} + .docker-callout { - background: linear-gradient(90deg, hsla(186, 33%, 94%, 0.7) 33%, hsla(173, 54%, 61%, 1) 100%); + background: linear-gradient(90deg, hsla(186, 33%, 94%, 0.01) 35%, hsla(173, 54%, 61%, 1) 100%); border-radius: 4rem; display: flex; padding: 2rem; @@ -25,12 +30,20 @@ p { img { height: 18rem; margin-right: 2rem; + padding-left: 1rem; } h2{ - color: black; + color: ${props => props.theme.whiteToBlack}; padding: 0; } - @media screen and (max-width:767px) { + Button { + margin: 1rem 0; + } + @media screen and (max-width:1000px) { + .card-right{ + padding-top: 1rem; + padding-left: 0; + } display: block; img { margin: 0 auto 0.25rem; @@ -39,6 +52,7 @@ p { .text-gray { margin-top: 2rem; } + } } `; @@ -49,10 +63,11 @@ const DockerExtensionCTA = () => {
    Docker and Meshery -
    -

    Docker Extension for Meshery is now available!

    -

    Managing cloud native infrastructure has never been easier.

    -

    free tool

    +
    +
    +

    Docker Extension for Meshery

    is now available!

    +
    +

    Managing cloud native infrastructure has never been easier.

    @@ -63,4 +78,4 @@ const DockerExtensionCTA = () => { ); }; -export default DockerExtensionCTA; +export default DockerExtensionCTA; \ No newline at end of file diff --git a/src/sections/Home/Banner-3/banner3.style.js b/src/sections/Home/Banner-3/banner3.style.js index c9d6e7f4a28f..bb2eafe9835c 100644 --- a/src/sections/Home/Banner-3/banner3.style.js +++ b/src/sections/Home/Banner-3/banner3.style.js @@ -101,6 +101,7 @@ const Banner3SectionWrapper = styled.section` } } @media only screen and (max-width: 760px) { + background-position: bottom -8px right -60px; padding: 2rem 0; background-size: 45%; @@ -114,6 +115,7 @@ const Banner3SectionWrapper = styled.section` } } @media only screen and (max-width: 480px) { + background-position: bottom 110px right -60px; padding: 2rem 0; .section-title{ @@ -127,6 +129,9 @@ const Banner3SectionWrapper = styled.section` content: none; } } + p { + padding-right: 9rem; + } } @media screen and (max-width: 402px) { .banner-btn.one, .banner-btn.two @@ -135,6 +140,10 @@ const Banner3SectionWrapper = styled.section` } } @media only screen and (max-width: 380px) { + background-position: bottom 170px right -20px; + .vintage-box { + padding-right: 1rem; + } .section-title{ h1 { font-size: 30px; @@ -152,6 +161,7 @@ const Banner3SectionWrapper = styled.section` } */ } @media only screen and (max-width: 330px) { + background-position: bottom 200px right -10px; .section-title{ h1 { font-size: 23px; diff --git a/src/sections/Learn/Book-single/BookSingle.style.js b/src/sections/Learn/Book-single/BookSingle.style.js index fd3c2be4ab57..ef16075650e7 100644 --- a/src/sections/Learn/Book-single/BookSingle.style.js +++ b/src/sections/Learn/Book-single/BookSingle.style.js @@ -27,6 +27,15 @@ const BookSinglePageWrapper = styled.div` } } + + @media only screen and (max-width: 500px) { + #service-mesh-patterns-table-filter > select{ + width: 100%; + } + } + table > tbody> tr > td { + text-align:center; + } .single-post-wrapper{ margin: 2rem 0; } diff --git a/src/sections/Meshmap/FeaturesSection/Design/DesignerFeatures.style.js b/src/sections/Meshmap/FeaturesSection/Design/DesignerFeatures.style.js index e1aad90ceeed..638099999de2 100644 --- a/src/sections/Meshmap/FeaturesSection/Design/DesignerFeatures.style.js +++ b/src/sections/Meshmap/FeaturesSection/Design/DesignerFeatures.style.js @@ -5,6 +5,11 @@ margin-top: 1rem; .designer-container { padding: 0; + + @media (max-width: 767px) { + margin-top: 6vw; + } + } .scroll{ diff --git a/src/sections/Meshmap/Meshmap-collaborate/collaboration-feature-team.js b/src/sections/Meshmap/Meshmap-collaborate/collaboration-feature-team.js index e92c79ae30d5..a9f53119c5e0 100644 --- a/src/sections/Meshmap/Meshmap-collaborate/collaboration-feature-team.js +++ b/src/sections/Meshmap/Meshmap-collaborate/collaboration-feature-team.js @@ -78,6 +78,9 @@ const CollaborationFeatureWrapper = styled.div` fill: ${props => props.theme.blackToWhite}; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); } + @media only screen and (max-width: 767px) { + width: 100%; + } } .visible { diff --git a/src/sections/Pricing/review-slider.js b/src/sections/Pricing/review-slider.js index c44269807b7b..3941163867ca 100644 --- a/src/sections/Pricing/review-slider.js +++ b/src/sections/Pricing/review-slider.js @@ -21,9 +21,9 @@ const settings = { infinite: true, speed: 400, slidesToShow: 3, - slidesToScroll: 0.5, + slidesToScroll: 1, autoplay: true, - autoplaySpeed: 1500, + autoplaySpeed: 2000, responsive: [ { @@ -80,13 +80,13 @@ const Reviews = () => {

    Hear what other users have to say...

    - + /> */} props.theme.black}; } + .margin4{ + margin-bottom: 4%; + } .banner{ padding: 6.25rem 0 1.25rem 0; .title-text{ diff --git a/src/sections/Projects/Image-Hub/index.js b/src/sections/Projects/Image-Hub/index.js index 75e61de92d7f..e45486a98cb7 100644 --- a/src/sections/Projects/Image-Hub/index.js +++ b/src/sections/Projects/Image-Hub/index.js @@ -70,7 +70,7 @@ const ImageHubPage = () => {

    This demo application has been enabled by experimental works of Nic Jackson of HashiCorp, and Kanishkar J, Lee Calcote, and other contributors of Layer5. Learn more about the Layer5 and HashiCorp Partnership.

    - +   diff --git a/src/theme/app/themeStyles.js b/src/theme/app/themeStyles.js index 3420c4bef0c1..f2e9c6ee2cd7 100644 --- a/src/theme/app/themeStyles.js +++ b/src/theme/app/themeStyles.js @@ -46,6 +46,9 @@ const lighttheme = { // platinum (light gray) shadowLightColor: "#E6E6E6", + // dark gray + shadowDarkColor: "#E6E6E6", + // charcoal menuColor: "#3c494f", @@ -255,6 +258,9 @@ export const darktheme = { // platinum (light gray) shadowLightColor: "#E6E6E6", + // dark gray + shadowDarkColor: "#484848", + // charcoal menuColor: "#ffffff", // 00D3A9