Merge branch 'master' of https://github.com/layer5io/layer5

layer5io · Feb 19, 2021 · 8bf86fb · 8bf86fb
2 parents dd7281a + 7c4492c
commit 8bf86fb
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 68 deletions.
diff --git a/src/collections/members/alonso-lopez/index.mdx b/src/collections/members/alonso-lopez/index.mdx
@@ -7,7 +7,6 @@ location: Hermosillo, Mexico
 bio: I have been a faculty member in IT Engineer programs, since I joined Hermosillo’s Tech University almost 20 years ago. Mainly teaching and getting involved in academic events and activities, also making bonds up close with local and regional IT organizations. In 2016, I founded an academic IT group, for which I am the main coordinator, to develop various projects and collaborations that will benefit our IT programs. Besides being prototyping and developing solutions, I’ve been helping and advising organizations of my local market. But one of my most cherished milestones has been contributing with Layer5’s Meshery, in which I‘ve been involving with the most welcoming community and the greatest talented people I know. Also I’m a professional cellist for about 20 years, playing cello in my state orchestra, and several ensembles. I had the honor of premiering “Ceremonial” (feb. 2020) by composer T. Hori, and "Fantasía Num.1 para violoncello” (dec. 2018) by composer A. Vega. So I’m also passioned about multimedia, arts, entrepreneurship, creative work, video, film and animation.
 badges:     
   - meshery
-  - community
 status: Active
 published: true
 ---
diff --git a/src/sections/Community/Join-community/index.js b/src/sections/Community/Join-community/index.js
@@ -39,8 +39,8 @@ const JoinCommunity = (props) => {
         <div className="join-community_text-and_button">
           <h1>{props.header ? props.header : "Join the community!"}</h1>
           <p>{props.text ? props.text : "Checkout the Layer5 community by joining us on Slack"}</p>
-          {props.btn_primary ? <Button primary title="Join Our Talented Community" url="http://slack.layer5.io/"/>
-            : <Button secondary title="Join Our Talented Community" url="http://slack.layer5.io/"/>}
+          {props.btn_primary ? <Button primary title="Join Our Talented Community" url="http://slack.layer5.io/" external={true}/>
+            : <Button secondary title="Join Our Talented Community" url="http://slack.layer5.io/" external={true} />}
         </div>
       </div>
     </JoinCommunityWrapper>

diff --git a/src/sections/General/Navigation/navigation.style.js b/src/sections/General/Navigation/navigation.style.js
@@ -30,9 +30,8 @@ const NavigationWrap = styled.header`
     left: 0;
     width: 100%;
     display: block;
-    visibility: hidden;
     box-shadow: 0px 5px 10px 1px rgba(0, 179, 159, 0.50);
-    animation: bobbleout ease .3s forwards;
+    animation: bobbleout ease .18s forwards;
     pointer-events: none;
   }
   .wrap {
@@ -139,15 +138,17 @@ const NavigationWrap = styled.header`
   }
   @keyframes bobbleout {
     0% {
-        transform: translate3d(0px, 0px, 8px) scale(1, 1);
-        opacity: 100%
+        transform: translate3d(0px, 0px, 8px) scale(.9, .9);
+        opacity: 40%;
     }
     50% {
-        transform: translate3d(0px, 0px, 4px) perspective(800px) ;
-        opacity: 70%
+        transform: translate3d(0px, 0px, 4px) scale(.75, .75);
+        perspective(800px);
+        opacity: 20%;
     }
     100% {
-        transform: translate3d(0px, -15px, 0px) scale(.75, .75); opacity: 0; visibility: hidden;
+        transform: translate3d(0px, -15px, 0px) scale(.5, .5);
+        opacity: 0;
     }
   }
   @keyframes flowin {

diff --git a/src/sections/Learn/LearnPage-Sections/workshops.js b/src/sections/Learn/LearnPage-Sections/workshops.js
@@ -220,8 +220,8 @@ const WorkshopsSection = () => {
         </Col>
         <Col xs={12} md={9} className="workshops-col">
           <Row>
-            {data.allMdx.nodes.slice(0, 3).map(({id, frontmatter, fields}) => (
-              <Col xs={12} sm={6} xl={4} className="workshops-card" key={id}>
+            {data.allMdx.nodes.slice(0, 3).map(({frontmatter, fields}, index) => (
+              <Col xs={12} sm={6} xl={4} className="workshops-card" key={index}>
                 <Link to={fields.slug} >
                   <div className="workshop-thumbnails">
                     <img src={frontmatter.thumbnail.publicURL} alt={frontmatter.title} />

diff --git a/src/sections/Learn/learnpage.style.js b/src/sections/Learn/learnpage.style.js
@@ -15,6 +15,11 @@ export const LearnPageWrapper = styled.div`
     .join-community{
         width: 100%;
         height: 28rem;
-        background-position: top;
+        background-position: bottom;
+
+        @media screen and (min-width: 1800px) {
+            height: 34rem;
+            background-position-y: -56vw;
+        }
     }
 `;
diff --git a/src/sections/Meshery/Features-section/features-section.style.js b/src/sections/Meshery/Features-section/features-section.style.js
@@ -3,60 +3,48 @@ import styled from "styled-components";
 const FeaturesSectionWrapper = styled.section`
 
 	background-color: black;
-	transform: skew(0deg, -5deg);
-	// .skw{
-	// 	background-color: white;
-  //   transform: skew(0deg,-5deg);
-  //   width: 100%;
-  //   height: 11rem;
-  //   position: relative;
-  //   top: -1rem;
-  //   z-index: 1;
-	// }
-	// .rect-1-left, .rect-3-right {
-	// 	position: absolute;
-	// 	width: 14rem;
-	// 	height: 5rem;
-	// 	transform: skew(0deg, -5deg);
-	// 	background-color: ${props => props.theme.secondaryColor};
-	// 	z-index: 1;
-	// }
-	// .rect-1-left {
-	// 	left: 0;
-	// 	top: 14.4rem;
-	// 	border-radius: 0px 0px 40px 0px;
-	// }
-	// .rect-3-right {
-	// 	right: 0;
-	// 	top: 0.5rem;
-	// 	border-radius: 40px 0px 0px 0px;
-	// }
-	// .rect-2-left, .rect-4-right {
-	// 	position: absolute;
-	// 	width: 20rem;
-	// 	height: 5rem;
-	// 	transform: skew(0deg, -5deg);
-	// 	background-color: #C9FCF6;
-	// 	z-index: 1;
-	// }
-	// .rect-2-left {
-	// 	left: 0;
-	// 	top: 9.25rem;
-	// 	border-radius: 0px 40px 0px 0px;
-	// }
-	// .rect-4-right {
-	// 	right: 0;
-	// 	top: 5.75rem;
-	// 	border-radius: 0px 0px 0px 40px;
-	// }
+	transform: skew(0deg, -6deg);
+	.skw{
+		display: grid;
+		position: relative;
+		top: -5rem;
+	}
+	.rect-1-left {
+		background: #C9FCF6;
+		border-radius: 0 2.125rem 0 0;
+		grid-column: 1/ span 2;
+		height: 5rem;
+		grid-row: 1;
+		position: relative;
+		top: 0.5px;
+	}
+	.rect-2-left {
+		background: ${props => props.theme.secondaryColor};
+		border-radius: 0 0 3.5rem 0;
+		grid-column: 1/2;
+		height: 5rem;
+		grid-row: 2;
+	}
+	.rect-3-right {
+		background: ${props => props.theme.secondaryColor};
+		border-radius: 3.5rem 0 0 0;
+		grid-column: 10/11;
+		grid-row: 1;
+		height: 5rem;
+	}
+	.rect-4-right {
+		background: #C9FCF6;
+		border-radius: 0 0 0 2.125rem;
+		grid-column: 9/11;
+		grid-row: 2;
+		height: 5rem;
+		position: relative;
+		top: -0.75px
+	}
 
 	.section-data {
-		transform: skew(0deg, 5deg);
-		padding: 3rem 1rem;
-		// padding: 8rem 0 1.5rem;
-		// position: relative;
-    // top: -6.5rem;
-		// clip-path: polygon(0% 50%, 0% 100%, 100% 100%, 100% 0%);
+		transform: skew(0deg, 6deg);
+		padding: 0 1rem 3rem;
 		text-align: center;
 		h1, h2, p {
 			color: white;
@@ -172,7 +160,7 @@ const FeaturesSectionWrapper = styled.section`
 			}
 
 			.smp-section-data {
-				h1, p {
+				h3, p {
 					text-align: center;
 				}
 			}

diff --git a/src/sections/Meshery/Features-section/index.js b/src/sections/Meshery/Features-section/index.js
@@ -31,8 +31,7 @@ const FeaturesSection = () => {
 
   return (
     <FeaturesSectionWrapper>
-      <div className="skw"></div>
-      <div>
+      <div className="skw">
         <div className="rect-1-left"></div>
         <div className="rect-2-left"></div>
         <div className="rect-3-right"></div>