diff --git a/src/pages/projects/sistent/about.js b/src/pages/projects/sistent/about.js new file mode 100644 index 000000000000..af9feca7d17a --- /dev/null +++ b/src/pages/projects/sistent/about.js @@ -0,0 +1,7 @@ +import React from "react"; + +const SistentAbout = () => { + return
SistentAbout
; +}; + +export default SistentAbout; diff --git a/src/pages/projects/sistent/components.js b/src/pages/projects/sistent/components.js new file mode 100644 index 000000000000..a10b902ca1e6 --- /dev/null +++ b/src/pages/projects/sistent/components.js @@ -0,0 +1,7 @@ +import React from "react"; + +const SistentComponents = () => { + return
SistentComponents
; +}; + +export default SistentComponents; diff --git a/src/pages/projects/sistent/identity.js b/src/pages/projects/sistent/identity.js new file mode 100644 index 000000000000..d83d73b75b8a --- /dev/null +++ b/src/pages/projects/sistent/identity.js @@ -0,0 +1,7 @@ +import React from "react"; + +const SistentIdentity = () => { + return
SistentIdentity
; +}; + +export default SistentIdentity; diff --git a/src/sections/Projects/Sistent/Sistent-sidebar/index.js b/src/sections/Projects/Sistent/Sistent-sidebar/index.js deleted file mode 100644 index 22adabde4d88..000000000000 --- a/src/sections/Projects/Sistent/Sistent-sidebar/index.js +++ /dev/null @@ -1,65 +0,0 @@ -import React, { useState } from "react"; -import { Link } from "gatsby"; -import slugify from "../../../../utils/slugify"; - -import SistentSidebarWrapper from "./sidebar.style"; -import { HiOutlineChevronUp } from "@react-icons/all-files/hi/HiOutlineChevronUp"; -import { HiOutlineChevronDown } from "@react-icons/all-files/hi/HiOutlineChevronDown"; - -const Sidebar = () => { - const [showIdentity, setShowIdentity] = useState(true); - - return ( - -
-
-

About Sistent

-
-
-
-
setShowIdentity((value) => !value)} - > -

Identity

- {!showIdentity ? ( - - ) : ( - - )} -
- -
-
-
-

Component

-
-
-
-
-

Pattern & Templates

-
-
-
-
-

Visualization & Illustration

-
-
- - ); -}; - -export default Sidebar; diff --git a/src/sections/Projects/Sistent/Sistent-sidebar/sidebar.style.js b/src/sections/Projects/Sistent/Sistent-sidebar/sidebar.style.js deleted file mode 100644 index 790073534910..000000000000 --- a/src/sections/Projects/Sistent/Sistent-sidebar/sidebar.style.js +++ /dev/null @@ -1,246 +0,0 @@ -import styled from "styled-components"; - -const SistentSidebarWrapper = styled.div` - border-right: 0.5px solid ${(props) => props.theme.primaryLightColor}; - margin-bottom: 2rem; - .sidebar-widgets { - padding: 15px 30px; - } - - .widgets-title { - margin-bottom: 20px; - display: flex; - align-items: center; - justify-content: space-between; - cursor: pointer; - h3 { - display: inline-block; - font-weight: 500; - position: relative; - &:before { - position: absolute; - top: 50%; - right: -80px; - content: ""; - width: 70px; - height: 1px; - } - } - .menu-icon { - float: right; - vertical-align: bottom; - width: 1.5rem; - height: 1.5rem; - } - } - - .sidebar-widgets { - ul { - margin: 0; - padding: 0; - list-style: none; - } - - .ul-close { - display: none; - } - - .scroll { - max-height: 40rem; - overflow: auto; - padding-right: 10px; - scrollbar-width: thin; - - &::-webkit-scrollbar-thumb { - background: #a9a9a9; - border-radius: 1rem; - } - &::-webkit-scrollbar-track { - background: #f0f0f0; - border-radius: 1rem; - } - &::-webkit-scrollbar-button { - display: none; - } - &::-webkit-scrollbar { - width: 6px; - display: block; - } - } - - &.catagorie { - li { - & + li { - margin-top: 3px; - } - a { - color: ${(props) => props.theme.whiteToBlack}; - display: flex; - justify-content: space-between; - font: 400 16px/35px "Qanelas Soft", "Open Sans", sans-serif; - em { - font-style: normal; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } - span { - border-bottom: 1px solid transparent; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } - &:hover { - span, - em { - color: ${(props) => props.theme.secondaryColor}; - border-color: ${(props) => props.theme.secondaryColor}; - } - } - &:focus { - span, - em { - color: ${(props) => props.theme.secondaryColor}; - border-color: ${(props) => props.theme.secondaryColor}; - } - } - } - } - } - &.tags { - ul { - margin-top: -5px; - margin-left: -5px; - margin-right: -5px; - } - li { - display: inline-block; - a { - color: ${(props) => props.theme.text}; - margin: 5px; - display: block; - padding: 6px 18px; - border-radius: 3px; - background: ${(props) => props.theme.grey212121ToGreyF0F0F0}; - font: 400 13px/26px "Qanelas Soft", "Open Sans", sans-serif; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - &:hover { - background: ${(props) => props.theme.secondaryColor}; - color: ${(props) => props.theme.textRevert}; - } - } - } - } - } - - .subscribe { - font-family: "Qanelas Soft", "Open Sans", sans-serif; - padding: 0 1rem; - margin: 1rem auto auto; - display: flex; - justify-content: center; - - span { - h4 { - font-weight: 500; - margin-bottom: 0.5rem; - } - } - - input { - display: inline-flex; - padding: 1rem; - margin-right: 0.25rem; - width: auto; - height: 3.5rem; - color: rgba(0, 0, 0, 0.75); - border: 1px solid #000000; - border-top-left-radius: 0.3rem; - border-bottom-left-radius: 0.3rem; - } - - button { - height: 3.5rem; - min-width: auto; - border-radius: 0 0.3rem 0.3rem 0; - } - - @media screen and (max-width: 1200px) { - padding: 0 0.5rem; - - input { - width: 10.5rem; - } - } - - @media screen and (max-width: 992px) { - display: none; - } - } - - @media only screen and (max-width: 1024px) { - .sidebar-widgets { - padding: 3rem 0 0 0; - } - } - - .explain-1 { - padding-top: 0rem; - text-align: center; - - .cards { - margin: 0.15rem auto 2.5rem; - max-width: 50rem; - padding: 0rem 2.7rem 0rem 1rem; - background-color: none; - border-radius: 25px; - @media only screen and (max-width: 1200px) { - // margin-top: 0rem; - padding: 1.5rem 0.8rem 0rem 0.5rem; - } - .card { - -webkit-transition: 450ms all; - transition: 450ms all; - padding: 1.25rem; - display: flex; - flex-direction: column; - justify-content: space-around; - gap: 1rem; - background-color: ${(props) => props.theme.darkJungleGreenColor}; - border-radius: 1.5rem; - - p { - text-align: center; - letter-spacing: 0; - font-size: 15px; - font-weight: 200; - margin-top: -1rem; - color: ${(props) => props.theme.white}; - } - h2 { - text-align: center; - font-size: 1.5rem; - text-transform: uppercase; - clear: both; - color: ${(props) => props.theme.white}; - } - img { - border-radius: 1rem; - } - .logo { - width: 100%; - } - &:hover, - &:focus { - outline: none; - } - &:hover { - transform: translateY(0.03rem); - box-shadow: 0 2px 10px #00d3a9; - } - } - } - } - @media screen and (max-width: 992px) { - display: flex; - flex-direction: column; - } -`; - -export default SistentSidebarWrapper; diff --git a/src/sections/Projects/Sistent/index.js b/src/sections/Projects/Sistent/index.js index 70bd680f1ab5..9624d01cb771 100644 --- a/src/sections/Projects/Sistent/index.js +++ b/src/sections/Projects/Sistent/index.js @@ -1,24 +1,38 @@ import React from "react"; -import Sidebar from "./Sistent-sidebar"; -import { Col, Row } from "../../../reusecore/Layout"; import SistentWrapper from "./sistent.style"; +import HandbookCard from "../../../components/HandbookCard"; const SistentHome = () => { return ( - - - - - -

About

-

- Colors when accurately applied can be a potent tool that enables - designers and developers to implement solutions with speed and - efficiency. Here are a couple of things to keep in mind. -

- - +
+

Sistent

+
+
+

Design system for Layer5 projects

+
+
+ + + + +
); }; diff --git a/src/sections/Projects/Sistent/sistent.style.js b/src/sections/Projects/Sistent/sistent.style.js index 6b9cd0b3c99c..89776698038b 100644 --- a/src/sections/Projects/Sistent/sistent.style.js +++ b/src/sections/Projects/Sistent/sistent.style.js @@ -1,5 +1,559 @@ import styled from "styled-components"; -const SistentWrapper = styled.div``; +const SistentWrapper = styled.div` + .content > a:first-of-type > h2:first-of-type { + padding-top: 1rem; + } + + .highlight { + font-weight: 600; + } + + .content { + width: 100%; + padding-bottom: 2rem; + ul > li { + color: ${(props) => props.theme.text}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + ol > li { + color: ${(props) => props.theme.menuColor}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + ul > li > span { + color: ${(props) => props.theme.text}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + ol > li > span { + color: ${(props) => props.theme.text}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + } + + h2 h3 { + margin: 0.5rem 0; + color: ${(props) => props.theme.tertiaryColor}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + + .page-section { + h2 { + padding-top: 7rem; + margin-top: -7rem; + } + h3 { + padding-top: 7rem; + margin-top: -7rem; + } + margin-top: -36rem; + margin-left: 20rem; + display: flex; + @media screen and (min-width: 1280px) and (max-width: 1350px) { + margin-left: 16rem; + } + } + .conduct-section { + @media screen and (min-width: 751px) { + margin-top: -43rem; + } + } + .page-section .heading-top { + @media screen and (min-width: 751px) { + padding-top: 1rem; + } + } + .sidebar { + margin: 0; + padding: 0; + width: 250px; + background-color: ${(props) => props.theme.secondaryLightColor}; + position: absolute; + height: 150rem; + overflow: auto; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + + .sidebar a { + display: block; + color: black; + padding: 16px; + text-decoration: none; + } + + .sidebar a.active { + background-color: ${(props) => props.theme.primaryLightColorTwo}; + color: white; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + + .sidebar a:hover:not(.active) { + background-color: ${(props) => props.theme.secondaryLightColor}; + color: white; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + + .page-header-section { + height: 10rem; + text-align: center; + background: rgb(71, 126, 150); + background: linear-gradient( + 250deg, + rgba(71, 126, 150, 1) 0%, + rgba(0, 179, 159, 1) 35%, + rgba(60, 73, 79, 1) 100% + ); + h1 { + line-height: 10rem; + color: white; + } + } + + .community-home-subtitle { + text-align: center; + padding-top: 3rem; + padding-bottom: 1.5rem; + } + + #sign-off { + padding-bottom: 4rem; + } + + table { + border-collapse: collapse; + width: 98%; + margin: 1rem 0 2rem 0; + .github-icon { + height: 1.7rem; + width: auto; + display: block; + margin-left: auto; + margin-right: auto; + filter: invert(${(props) => props.theme.meshInterfaceLogoFilter}); + } + .site-icon { + height: 1.6rem; + width: auto; + display: block; + margin-left: auto; + margin-right: auto; + } + .inline { + display: inline; + vertical-align: bottom; + } + .smp-action { + filter: invert(${(props) => props.theme.meshInterfaceLogoFilter}); + } + } + + td, + th { + border: 0.05rem solid ${(props) => props.theme.primaryLightColor}; + text-align: left; + padding: 0.5rem; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + + .linkscol { + text-align: center; + width: 8%; + } + + tbody:nth-child(even) { + background-color: ${(props) => props.theme.secondaryLightColorTwo}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + + .codes { + width: 75%; + margin-top: -2rem; + } + + .community-home-container { + padding: 1rem 0; + padding-bottom: 4rem; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + } + + p { + margin-top: 10px; + } + + input[type="checkbox"] + label { + display: block; + margin: 0.2em; + cursor: pointer; + padding: 0.2em; + } + + input[type="checkbox"] { + display: none; + } + + input[type="checkbox"] + label:before { + content: url('data:image/svg+xml; utf8, '); + border: 0.1em solid #000; + border-radius: 0.2em; + display: inline-block; + width: 1.3em; + height: 1.3em; + padding-left: 0.2em; + padding-bottom: 0.3em; + margin-right: 0.5em; + + margin-bottom: 0.15em; + vertical-align: bottom; + color: transparent; + background-color: white; + } + + input[type="checkbox"] + label:active:before { + transform: scale(0); + } + rect { + fill: ${(props) => props.theme.grey313131ToGreenC9FCF6}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + path { + stroke: ${(props) => props.theme.green00D3A9ToGreen00B39F}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + svg { + color: "red"; + } + input[type="checkbox"]:checked + label:before { + content: url('data:image/svg+xml; utf8, '); + + background-color: ${(props) => props.theme.keppelColor}; + border-color: ${(props) => props.theme.primaryLightColorTwo}; + color: #fff; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + + input[type="checkbox"]:disabled + label:before { + transform: scale(1); + border-color: #aaa; + } + + input[type="checkbox"]:checked:disabled + label:before { + transform: scale(1); + background-color: ${(props) => props.theme.secondaryLightColor}; + border-color: ${(props) => props.theme.secondaryLightColor}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + + .project-org-list { + a { + margin-right: 0.3rem; + } + img { + height: auto; + width: 1.6rem; + vertical-align: middle; + } + } + + .project-description-icon { + width: 3%; + transform: translate(0, 25%); + margin: 0 0.3%; + } + + .project-title-icon { + margin-left: "10%"; + width: 4%; + transform: translate(0, 28%); + } + + @media only screen and (max-width: 750px) { + .content > a:first-of-type > h2:first-of-type { + padding-top: 7rem; + } + .page-section { + margin-top: -2rem; + margin-left: 0; + padding: 1rem 2.5rem; + + .table-container { + table { + width: 100%; + margin-left: 0; + } + overflow-x: scroll; + } + + .table-container::-webkit-scrollbar { + display: none; + } + } + + .codes { + width: 100%; + margin-top: -2rem; + } + } + + @media only screen and (max-width: 475px) { + .page-header-section h1 { + padding: 0 1rem; + line-height: 3rem; + padding-top: 4rem; + } + .page-section { + margin-top: -2rem; + margin-left: 0rem; + } + table { + margin-left: -1.5rem; + } + .frontendTable { + margin-left: -2.8rem; + } + } + + @media only screen and (max-width: 1024px) { + .project-title-icon { + width: 5.5%; + transform: translate(0, 23%); + } + .project-description-icon { + width: 4%; + } + } + + @media only screen and (max-width: 768px) { + .project-title-icon { + width: 8.5%; + } + .project-description-icon { + width: 7%; + } + } + + @media only screen and (max-width: 425px) { + .project-title-icon { + width: 11%; + transform: translate(0, 25%); + } + .project-description-icon { + width: 8%; + } + } + + @media only screen and (max-width: 375px) { + .project-title-icon { + width: 13%; + transform: translate(0, 20%); + } + .project-description-icon { + width: 10%; + } + } + + .channels-list { + padding-left: 40px; + } + + .channels-img { + // width: 40px; + height: 30px; + } + + .channels-para { + display: flex; + align-items: center; + } + + .newcomers-journey { + text-align: center; + display: flex; + align-items: center; + margin: 2.5rem 5rem 3rem 0rem; + @media only screen and (max-width: 992px) { + width: 100%; + } + h2 { + margin-bottom: 2rem; + } + } + + .heading { + display: flex; + flex-direction: column; + align-items: center; + } + + .heading-start { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + align-self: flex-end; + margin-right: 2rem; + margin-top: -2rem; + h5 { + font-size: 1.125rem; + font-weight: 400; + margin-right: 1rem; + } + img { + height: 3rem; + width: 4rem; + transition: 0.5s; + } + img:hover { + padding-left: 1rem; + transition: 0.5s; + } + } + + .intra-page { + position: sticky; + top: 10rem; + right: 0rem; + margin-right: 1rem; + padding-bottom: 5rem; + align-items: left; + justify-content: space-around; + display: flex; + flex-direction: column; + overflow: hidden; + .active { + font-weight: 5000; + color: ${(props) => props.theme.secondaryColor}; + } + ul { + list-style: none; + top: 3rem; + } + li { + padding-bottom: 0.5rem; + padding-top: 0.5rem; + } + @media only screen and (max-width: 900px) { + width: 0; + opacity: 0; + height: 0; + transition: none; + visibility: hidden; + } + } + + .learn { + width: 10rem; + } + + .writing_program { + width: 90%; + @media only screen and (max-width: 900px) { + width: 100%; + } + .list { + padding: 1.875rem 0px; + table, + tr, + td { + border: none; + } + .text { + p { + color: ${(props) => props.theme.tertiaryColor}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + } + .listed { + text-align: left; + .table { + .icon { + height: 2.5rem; + width: 2.5rem; + vertical-align: top; + } + .skill { + color: ${(props) => props.theme.tertiaryColor}; + font-size: 16px; + padding: 0 0 1.25rem 1.8rem; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + h4 { + font-weight: 600; + } + } + } + } + } + .content_list { + position: relative; + width: 100%; + margin-top: 1rem; + display: flex; + flex-wrap: wrap; + } + .content_type { + display: flex; + flex-direction: column; + background: ${(props) => props.theme.grey212121ToWhite}; + /* box-shadow: 0px 0px ${(props) => props.theme.projectShadowsize} + ${(props) => props.theme.green00D3A9ToGreyE6E6E6}; */ + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + &:hover { + box-shadow: 0px 0px 5px ${(props) => props.theme.primaryColor}; + } + padding: 12% 6% 12% 6%; + height: 220px; + border-radius: 4%; + margin-bottom: 30px; + text-align: center; + h5 { + margin-bottom: auto; + margin-top: 0.5rem; + font-weight: 700; + color: ${(props) => props.theme.secondaryColor}; + } + p { + font-weight: 300; + color: ${(props) => props.theme.text}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + img { + height: 60px; + width: auto; + } + } + .process { + margin: 10px auto; + border-left: solid 2px ${(props) => props.theme.tertiaryColor}; + padding: 0px 20px 0px 20px; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + .process .item { + padding: 10px; + font-size: 16px; + line-height: 1.7; + position: relative; + } + .item::before { + content: ""; + position: absolute; + width: 20px; + height: 20px; + display: block; + border: 3px solid ${(props) => props.theme.tertiaryColor}; + border-radius: 50%; + background-color: ${(props) => props.theme.secondaryColor}; + top: 25px; + left: -32px; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + } + /* repository overview */ + div.accessRequired { + font-size: small; + line-height: 0.9rem; + font-style: italic; + } +`; export default SistentWrapper;