feat: Add ORY Kratos landing page (ory#37)

See ory#35

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

@@ -1,8 +1,7 @@
 declare const styles: {
-  readonly "adopters": string;
-  readonly "list": string;
-  readonly "logos": string;
-  readonly "logosInner": string;
-};
-export = styles;
-
+  readonly adopters: string
+  readonly list: string
+  readonly logos: string
+  readonly logosInner: string
+}
+export = styles

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

@@ -1,5 +1,4 @@
 declare const styles: {
-  readonly "announcement": string;
-};
-export = styles;
-
+  readonly announcement: string
+}
+export = styles

src/components/blog-hero.module.css.d.ts

@@ -1,9 +1,8 @@
 declare const styles: {
-  readonly "title": string;
-  readonly "meta": string;
-  readonly "author": string;
-  readonly "subtitle": string;
-  readonly "teaser": string;
-};
-export = styles;
-
+  readonly title: string
+  readonly meta: string
+  readonly author: string
+  readonly subtitle: string
+  readonly teaser: string
+}
+export = styles

src/components/blog-section.module.css.d.ts

@@ -1,5 +1,4 @@
 declare const styles: {
-  readonly "section": string;
-};
-export = styles;
-
+  readonly section: string
+}
+export = styles

src/components/codebox.module.css

@@ -1,45 +1,64 @@
 .box {
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-  background-color: var(--colors-ory-dark);
-  border-radius: 15px;
+  background-color: var(--colors-base-black);
+  border-radius: 4px;
   padding: 8px 16px;
   min-height: 360px;
 }
 
-.tabs {
+.editor-header {
   display: flex;
-  align-items: center;
+  align-items: bottom;
   color: var(--colors-base-white);
+  & .tabs {
+    overflow: auto;
+  }
   & .tab {
     font-family: 'IBM Plex Mono', monospace;
     font-style: normal;
     font-weight: 500;
     font-size: 11px;
-    line-height: 168%;
+    line-height: 250%;
     margin-right: 16px;
-    padding: 0 8px;
     cursor: pointer;
-    &.selected {
-      border-bottom: 1px solid var(--colors-hydra-default);
+    display: inline;
     }
   }
+
+:global .theme-hydra :local .tab {
+  &.selected {
+    border-bottom: 1px solid var(--colors-hydra-default);
+  }
+}
+
+:global .theme-kratos :local .tab {
+  &.selected {
+    border-bottom: 1px solid var(--colors-kratos-default);
+  }
 }
 
 .window-actions {
   display: flex;
   align-items: center;
   height: 20px;
-  margin-right: 5px;
+  margin-right: 16px;
   & .window-action {
     width: 8px;
     height: 8px;
     border-radius: 4px;
-    background-color: var(--colors-ory-dark);
+    background-color: var(--colors-ory-default);
     margin-right: 5px;
+  }
+}
 
-    &.primary {
-      background-color: var(--colors-hydra-default);
-    }
+:global .theme-hydra :local .window-action {
+  &.primary {
+    background-color: var(--colors-hydra-default);
+  }
+}
+
+:global .theme-kratos :local .window-action {
+  &.primary {
+    background-color: var(--colors-kratos-default);
   }
 }
 
@@ -62,14 +81,14 @@
     font-weight: 500;
     font-size: 11px;
     line-height: 175%;
-    background-color: var(--colors-ory-dark);
+    background-color: var(--colors-base-black);
 
     word-wrap: break-word;
     white-space: pre-wrap;
   }
 
   & pre code :global .token.operator {
     color: var(--colors-base-white);
-    background-color: var(--colors-ory-dark);
+    background-color: var(--colors-base-black);
   }
 }

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

@@ -1,13 +1,13 @@
 declare const styles: {
-  readonly "box": string;
-  readonly "tabs": string;
-  readonly "tab": string;
-  readonly "selected": string;
-  readonly "windowActions": string;
-  readonly "windowAction": string;
-  readonly "primary": string;
-  readonly "content": string;
-  readonly "active": string;
-};
-export = styles;
-
+  readonly box: string
+  readonly editorHeader: string
+  readonly tabs: string
+  readonly tab: string
+  readonly selected: string
+  readonly windowActions: string
+  readonly windowAction: string
+  readonly primary: string
+  readonly content: string
+  readonly active: string
+}
+export = styles

src/components/codebox.tsx

@@ -35,13 +35,13 @@ class CodeBox extends Component<PropTypes, StateTypes> {
     const { tabs } = this.props
     return (
       <div className={styles.box}>
-        <div className={styles.tabs}>
+        <div className={styles.editorHeader}>
           <div className={styles.windowActions}>
             <div className={cn(styles.windowAction, styles.primary)} />
             <div className={styles.windowAction} />
             <div className={styles.windowAction} />
           </div>
-          {tabs.map(({ filename }, index) => (
+          <div className={styles.tabs}>{tabs.map(({ filename }, index) => (
             <div
               key={filename}
               className={cn(styles.tab, {
@@ -51,7 +51,7 @@ class CodeBox extends Component<PropTypes, StateTypes> {
             >
               {filename}
             </div>
-          ))}
+          ))}</div>
         </div>
         <div className={styles.content}>
           {tabs.map(({ filename, code, language }, index) => (

src/components/footer.module.css

@@ -26,6 +26,14 @@
   }
 }
 
+:global .theme-kratos :local .footer a:any-link {
+  &:hover,
+  &:active,
+  &:focus {
+    color: var(--colors-kratos-default);
+  }
+}
+
 .footer .contact {
   margin-top: 16px;
   margin-bottom: 2px;

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

@@ -1,12 +1,11 @@
 declare const styles: {
-  readonly "footer": string;
-  readonly "contact": string;
-  readonly "copyright": string;
-  readonly "listTitle": string;
-  readonly "list": string;
-  readonly "item": string;
-  readonly "menuRow": string;
-  readonly "menuItem": string;
-};
-export = styles;
-
+  readonly footer: string
+  readonly contact: string
+  readonly copyright: string
+  readonly listTitle: string
+  readonly list: string
+  readonly item: string
+  readonly menuRow: string
+  readonly menuItem: string
+}
+export = styles

src/components/footer.tsx

@@ -44,6 +44,10 @@ const menu = [
   {
     title: 'GitHub',
     items: [
+      {
+        title: `${brandPrefix}Kratos`,
+        href: 'https://github.com/ory/kratos',
+      },
       {
         title: `${brandPrefix}Hydra`,
         href: 'https://github.com/ory/hydra',
@@ -56,10 +60,6 @@ const menu = [
         title: `${brandPrefix}Keto`,
         href: 'https://github.com/ory/keto',
       },
-      {
-        title: `${brandPrefix}Hive`,
-        href: 'https://github.com/ory/hive',
-      },
     ],
   },
 ]
@@ -81,7 +81,10 @@ const Footer = () => (
               <img src={logoTiny} alt={'ORY logo'} />
             </>
           )}
-          <p className={cn('secondary', styles.copyright)} style={{ marginTop: 2 }}>
+          <p
+            className={cn('secondary', styles.copyright)}
+            style={{ marginTop: 2 }}
+          >
             &copy; Copyright 2020 Ory Corp
           </p>
         </div>

src/components/header.module.css

@@ -44,6 +44,21 @@
   }
 }
 
+:global .theme-kratos :local .header {
+  & a,
+  & a:visited {
+    &:hover,
+    &:focus,
+    &:active {
+      color: var(--colors-kratos-default);
+    }
+  }
+
+  & .logo {
+    color: var(--colors-kratos-default);
+  }
+}
+
 .project-name {
   font-family: 'Open Sans', sans-serif;
   font-style: normal;

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

@@ -1,12 +1,11 @@
 declare const styles: {
-  readonly "header": string;
-  readonly "logo": string;
-  readonly "projectName": string;
-  readonly "projectNameTiny": string;
-  readonly "menu": string;
-  readonly "leftMenu": string;
-  readonly "rightMenu": string;
-  readonly "iconMenu": string;
-};
-export = styles;
-
+  readonly header: string
+  readonly logo: string
+  readonly projectName: string
+  readonly projectNameTiny: string
+  readonly menu: string
+  readonly leftMenu: string
+  readonly rightMenu: string
+  readonly iconMenu: string
+}
+export = styles

src/components/header.tsx

@@ -18,7 +18,6 @@ export type MenuItem = {
 export type IconMenuItem = {
   title: string
   href: string
-  image: string
 }
 
 export type Menu = MenuItem[]
@@ -67,7 +66,7 @@ const Header = ({ menu = [], icons = [], appendix }: PropTypes) => (
             <div className={styles.rightMenu}>
               <nav className={styles.iconMenu}>
                 <ul className="hidden-sm hidden-md">
-                  {icons.map(({ href, title, image }, k) => (
+                  {icons.map(({ href, title }, k) => (
                     <li key={k}>
                       <a href={href}>
                         {title}

src/components/hero.module.css

@@ -2,7 +2,7 @@
 
 .hero {
   background-color: var(--colors-ory-default);
-  color: var(--colors-ory-dark);
+  color: var(--colors-base-white);
 
   & :global a.cta.secondary:any-link {
     color: var(--colors-ory-dark);
@@ -72,6 +72,33 @@
   }
 }
 
+:global .theme-kratos :local .hero {
+  background-color: var(--colors-kratos-default);
+}
+
+:global .theme-kratos :local .hero :global a.cta {
+  &.primary:any-link {
+    background-color: var(--colors-ory-dark);
+    border-color: var(--colors-ory-dark);
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: var(--colors-base-white);
+      border-color: var(--colors-base-white);
+      color: var(--colors-kratos-default);
+    }
+  }
+
+  &.secondary:any-link {
+    &:hover,
+    &:focus {
+      border-color: var(--colors-base-white);
+      color: var(--colors-base-white);
+    }
+  }
+}
+
 @media (--sm-viewport) {
   .hero {
     & :global .container-fluid {

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

@@ -1,8 +1,7 @@
 declare const styles: {
-  readonly "hero": string;
-  readonly "primary": string;
-  readonly "secondary": string;
-  readonly "logo": string;
-};
-export = styles;
-
+  readonly hero: string
+  readonly primary: string
+  readonly secondary: string
+  readonly logo: string
+}
+export = styles