feat: New project section and product descriptions (ory#55)

src/components/codebox.module.css

@@ -1,6 +1,6 @@
 .box {
   background-color: var(--colors-base-offblack);
-  box-shadow: 0px 4px 8px rgba(00,00,00,0.4);
+  box-shadow: 0px 4px 8px rgba(00, 00, 00, 0.4);
   padding: 0px 16px;
   border-radius: 3px;
   min-height: 360px;

src/components/collaborator.module.css

@@ -7,6 +7,15 @@
   & p {
     color: var(--colors-base-dark);
   }
+  & a:any-link {
+    color: var(--colors-themed-default);
+
+    &:hover,
+    &:active,
+    &:focus {
+      color: var(--colors-base-dark);
+    }
+  }
 }
 
 .image {

src/components/collaborator.tsx

@@ -23,6 +23,12 @@ const Collaborator = () => (
             our work. Our small team would have never been able to achieve this
             without each and everyone of you.
           </p>
+          <p>
+            If you like, consider becoming a sponsor or supporter of our open
+            source efforts via{' '}
+            <a href="https://opencollective.com/ory">Open Collective</a> or{' '}
+            <a href="https://www.patreon.com/_ory">Patreon</a>.
+          </p>
         </div>
         <div className="col-lg-offset-2 col-lg-4  col-md-offset-1 col-md-10  col-sm-offset-1 col-sm-10">
           <div className={styles.image}>

src/components/newsletter.tsx

@@ -42,9 +42,8 @@ class Newsletter extends Component<PropTypes, StateTypes> {
                 <>
                   <h3>Never miss a patch</h3>
                   <p>
-                    Keep your applications and systems up to date. ORY ships
-                    regular product patches and updates. Subscribe to our
-                    newsletter to get the “good stuff”.
+                    ORY ships regular product patches and updates. Subscribe to
+                    our newsletter to get the good stuff, and stay up to date.
                   </p>
                 </>
               )}
@@ -72,9 +71,6 @@ class Newsletter extends Component<PropTypes, StateTypes> {
                   onClick={this.onSubmit}
                 />
               </form>
-              <p className="secondary">
-                We send you "the good stuff" to keep you up to date.
-              </p>
             </div>
           </div>
         </div>

src/components/projects.module.css

@@ -1,66 +1,66 @@
-.description {
-  margin: 0;
+.information {
+  margin-bottom: 64px;
 }
 
-.project {
+.projects {
   display: flex;
+  align-content: stretch;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  & :nth-child(2n) {
+    margin-right: 0;
+  }
+}
+
+.project {
+  background: var(--alpha-20);
+  padding: 16px;
   margin-bottom: 32px;
+  height: calc(100% - 32px);
+  width: 100%;
+  align-items: flex-start;
+  justify-content: space-between;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
   cursor: pointer;
   transition: color ease 200ms;
   text-align: left;
 
-  & img {
-    margin-right: 20px;
-    min-height: 32px;
-    max-height: 32px;
-    transition: transform ease 200ms;
-  }
-
   &.kratos {
+    border-bottom: 2px solid var(--colors-kratos-default);
     &:hover,
     &:focus,
     &:active {
-      & h4,
-      & p {
-        color: var(--colors-kratos-default);
-        text-decoration: none;
-      }
+      background: var(--colors-kratos-default);
     }
   }
 
   &.hydra {
+    border-bottom: 2px solid var(--colors-hydra-default);
     &:hover,
     &:focus,
     &:active {
-      & h4,
-      & p {
-        color: var(--colors-hydra-default);
-        text-decoration: none;
-      }
+      background: var(--colors-hydra-default);
     }
   }
 
   &.oathkeeper {
+    border-bottom: 2px solid var(--colors-oathkeeper-default);
     &:hover,
     &:focus,
     &:active {
-      & h4,
-      & p {
-        color: var(--colors-oathkeeper-default);
-        text-decoration: none;
-      }
+      background: var(--colors-oathkeeper-default);
     }
   }
 
   &.keto {
+    border-bottom: 2px solid var(--colors-keto-default);
     &:hover,
     &:focus,
     &:active {
-      & h4,
-      & p {
-        color: var(--colors-keto-default);
-        text-decoration: none;
-      }
+      background: var(--colors-keto-default);
     }
   }
 
@@ -71,24 +71,22 @@
   }
 
   & p,
+  & h3 {
+    color: var(--colors-base-white);
+  }
   & h4 {
     color: var(--colors-base-white);
+    margin-bottom: 32px;
   }
 }
 
 @media (--mobile-viewport) {
-  .section :global .container-fluid .row {
-    flex-direction: column-reverse;
+  .information {
+    margin-bottom: 32px;
   }
 
   .project {
-    display: flex;
+    display: inline-flex;
     margin-bottom: 32px;
-
-    & img {
-      margin-right: 16px;
-      max-height: 32px;
-      min-height: 32px;
-    }
   }
 }

src/components/projects.module.css.d.ts

@@ -1,5 +1,7 @@
 declare const styles: {
   readonly description: string
+  readonly information: string
+  readonly projects: string
   readonly project: string
   readonly kratos: string
   readonly hydra: string

src/components/projects.tsx

@@ -2,42 +2,36 @@ import React from 'react'
 import cn from 'classnames'
 import * as styles from './section.module.css'
 import * as pstyles from './projects.module.css'
-import kratos from '../images/ory_kratos.svg'
-import hydra from '../images/ory_hydra.svg'
-import oathkeeper from '../images/ory_oathkeeper.svg'
-import keto from '../images/ory_keto.svg'
 import { brandPrefix } from '../config'
 import { Link } from 'gatsby'
 
 const projects = [
   {
     className: pstyles.kratos,
-    title: `${brandPrefix}Kratos`,
-    description: 'Cloud native Identity and User Management',
-    image: kratos,
+    title: `${brandPrefix}/ Kratos`,
+    description:
+      'Cloud native user management system. Provision IDs, store user information, configure authentication methods and use a headless API.',
     path: '/kratos',
   },
   {
     className: pstyles.hydra,
-    title: `${brandPrefix}Hydra`,
+    title: `${brandPrefix}/ Hydra`,
     description:
-      'Secure access to your applications and APIs with OAuth 2.0 and OpenID Connect.',
-    image: hydra,
+      'OAuth 2.0 and OpenID Certified® OpenID Connect server. Secure access to your applications and APIs.',
     path: '/hydra',
   },
   {
     className: pstyles.oathkeeper,
-    title: `${brandPrefix}Oathkeeper`,
+    title: `${brandPrefix}/ Oathkeeper`,
     description:
-      'Verify and allow identities to interact with your applications.',
-    image: oathkeeper,
+      'Identity and Access Proxy (IAP). Authenticate and authorize all traffic, to interact with your applications.',
     url: 'https://github.com/ory/oathkeeper',
   },
   {
     className: pstyles.keto,
-    title: `${brandPrefix}Keto`,
-    description: 'A best practice patterns based access control REST API.',
-    image: keto,
+    title: `${brandPrefix}/ Keto`,
+    description:
+      'A best practices access control server. Use established standard patterns (RBAC, ABAC, ACL, AWS IAM) via REST API.',
     url: 'https://github.com/ory/keto',
   },
 ]
@@ -53,51 +47,58 @@ const Projects = () => (
   >
     <div className="container-fluid">
       <div className="row">
-        <div className="col-lg-offset-1 col-lg-4  col-md-offset-1 col-md-10  col-sm-offset-1 col-sm-10">
-          <h3 className="hidden-sm hidden-md">Open source projects</h3>
-          <p>
-            All of our code is open source, fueled by an engaged community of
-            contributors. It is licensed under Apache 2.0 and is available for
-            free on GitHub. Our core projects are {brandPrefix} Kratos,{' '}
-            {brandPrefix} Hydra, {brandPrefix} Oathkeeper and {brandPrefix}{' '}
-            Keto.
-          </p>
-          <p>
-            You can also become a sponsor or supporter of our open source
-            efforts via{' '}
-            <a href="https://opencollective.com/ory">Open Collective</a> or{' '}
-            <a href="https://www.patreon.com/_ory">Patreon</a>.
-          </p>
-        </div>
-        <div className="col-lg-offset-2 col-lg-4  col-md-offset-1 col-md-10  col-sm-offset-1 col-sm-10">
-          {projects.map(({ url, title, description, path, className, image }) =>
-            path ? (
-              <Link
-                key={title}
-                className={cn(pstyles.project, className)}
-                to={path}
-              >
-                <div>
-                  <img src={image} alt={title} />
-                  <p className={pstyles.description}>{description}</p>
-                </div>
-              </Link>
-            ) : (
-              <a
-                key={title}
-                className={cn(pstyles.project, className)}
-                href={url}
-              >
-                <div>
-                  <img src={image} alt={title} />
-                  <p className={pstyles.description}>{description}</p>
-                </div>
+        <div
+          className={
+            'col-lg-offset-1 col-lg-10 col-md-offset-1 col-md-10 col-sm-offset-1 col-sm-10'
+          }
+        >
+          <div className="row">
+            <h3>Open source projects</h3>
+            <p className={pstyles.information}>
+              All of our code is open source, fueled by an engaged community of
+              contributors. It is licensed under Apache 2.0 and is available for
+              free on GitHub. Our core projects are {brandPrefix} Kratos,{' '}
+              {brandPrefix} Hydra, {brandPrefix} Oathkeeper and {brandPrefix}{' '}
+              Keto.{' '}
+              <a href="https://github.com/ory">
+                {' '}
+                See all our repositories
               </a>
-            )
-          )}
-        </div>
-        <div className="hidden-lg col-lg-offset-1 col-lg-4  col-md-offset-1 col-md-10 col-sm-offset-1 col-sm-10">
-          <h3>Open source projects</h3>
+            </p>
+          </div>
+          <div className="row">
+            <div
+              className={`${pstyles.projects} col-lg-12 col-md-12 col-sm-12`}
+            >
+              {projects.map(({ url, title, description, path, className }) => (
+                <div className="col-lg-6 col-md-12 col-sm-12">
+                  {path ? (
+                    <Link
+                      key={title}
+                      className={cn(pstyles.project, className)}
+                      to={path}
+                    >
+                      <div>
+                        <h4 className={pstyles.description}>{title}</h4>
+                        <p className={pstyles.description}>{description}</p>
+                      </div>
+                    </Link>
+                  ) : (
+                    <a
+                      key={title}
+                      className={cn(pstyles.project, className)}
+                      href={url}
+                    >
+                      <div>
+                        <h4 className={pstyles.description}>{title}</h4>
+                        <p className={pstyles.description}>{description}</p>
+                      </div>
+                    </a>
+                  )}
+                </div>
+              ))}
+            </div>
+          </div>
         </div>
       </div>
     </div>

src/pages/blog/run-oauth2-server-open-source-api-security.md

@@ -86,22 +86,26 @@ and in visual form in this video:
 
 ### ORY Hydra: A Headless OAuth2 and OpenID Connect Provider
 
-ORY Hydra is a OAuth2 Server and OpenID Certified™ OpenID Connect Provider written in Go.
+ORY Hydra is a OAuth2 Server and OpenID Certified™ OpenID Connect Provider
+written in Go.
 
 Compared to other OAuth2 and OpenID Connect Providers it does not implement its
-own user database and management (for user login, user registration, password reset,
-2fa, ...) but uses the [Login and Consent Flow](https://www.ory.sh/docs/hydra/implementing-consent)
-to delegate rendering the Login UI ("Please enter your email and password") and Consent UI
-("Should application MyDropboxDownload be allowed to access all your private
-Dropbox Documents?") to another application, typically written by
-you in your favorite programming language (Java, PHP, Go, NodeJS, ...) and
-UI framework (ReactJS, AngularJS, ...)
-
-All [ORY technology follows architecture principles](https://www.ory.sh/docs/ecosystem/software-architecture-philosophy) that work best on
-Container Orchestration Systems such as Kubernetes, CloudFoundry, OpenShift,
-and similar projects. While it is possible to run the ORY stack on a RaspberryPI, the integration with the Docker and Container ecosystem is best documented
-and supported.
-ORY's architecture is designed along several guiding principles:
+own user database and management (for user login, user registration, password
+reset, 2fa, ...) but uses the
+[Login and Consent Flow](https://www.ory.sh/docs/hydra/implementing-consent) to
+delegate rendering the Login UI ("Please enter your email and password") and
+Consent UI ("Should application MyDropboxDownload be allowed to access all your
+private Dropbox Documents?") to another application, typically written by you in
+your favorite programming language (Java, PHP, Go, NodeJS, ...) and UI framework
+(ReactJS, AngularJS, ...)
+
+All
+[ORY technology follows architecture principles](https://www.ory.sh/docs/ecosystem/software-architecture-philosophy)
+that work best on Container Orchestration Systems such as Kubernetes,
+CloudFoundry, OpenShift, and similar projects. While it is possible to run the
+ORY stack on a RaspberryPI, the integration with the Docker and Container
+ecosystem is best documented and supported. ORY's architecture is designed along
+several guiding principles:
 
 - Minimal dependencies (no system dependencies; might need a database backend)
 - Runs everywhere (Linux, macOS, FreeBSD, Windows; AMD64, i386, ARMv5, ...)