Merge pull request #49 from KotlinFoundation/KTL-1238-main-page

KTL-1238, KTL-1240 feat: synced kotlinfoundation pages with design

Author: berezinant

gatsby-browser.js

@@ -0,0 +1,2 @@
+import './src/styles/global.css';
+import './src/styles/palette.css';

postcss.config.js

@@ -6,7 +6,8 @@ module.exports = {
       files: [
         "node_modules/@rescui/typography/lib/mixins.pcss",
         "node_modules/@jetbrains/kotlin-web-site-ui/out/components/breakpoints/media.pcss",
-        "./src/components/Header/media.pcss"
+        "./src/components/Header/media.pcss",
+        "./src/styles/palette.css",
       ]
     }),
     require('postcss-mixins'),

src/components/ContactUs/contactUs.module.css

@@ -1,5 +1,15 @@
-.br {
-  @media (--ktl-mm) {
-    display: none;
+.mainTitle {
+  @media (--ktl-tm) {
+    font-weight: 600;
+    font-size: 20px;
+    line-height: 28px;
+  }
+}
+
+.topTitle {
+  @media (--ktl-ms) {
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 20px;
   }
 }

src/components/ContactUs/index.tsx

@@ -1,21 +1,21 @@
 import { CtaBlock } from '@jetbrains/kotlin-web-site-ui/out/components/cta-block-v2';
-
+import cn from 'classnames';
 import { Link } from '../Link';
-
 import * as styles from './contactUs.module.css';
 
 const contactEmail = '[email protected]';
 
 export function ContactUs() {
   return (
     <CtaBlock
+      classTopTitle={styles.topTitle}
       topTitle={
-        <>
-          Still have questions? <br className={styles.br} />
+        <span>
+          Still have questions? <br />
           Contact us!
-        </>
+        </span>
       }
-      classMainTitle="ktf-h2 ktf-h3--ts"
+      classMainTitle={cn('ktf-h2', 'ktf-h4--tm', 'ktf-h3--ts', styles.mainTitle)}
       mainTitle={
         <Link href={`mailto:${contactEmail}`} mode="clear">
           {contactEmail}

src/components/Grants/grants.module.css

@@ -37,7 +37,7 @@
   justify-content: space-between;
   border-radius: 16px;
 
-  background: var(--ktl-light-grey);
+  background: var(--kt-grey);
   padding: var(--ktl-box-section-s);
 
   margin-left: calc(-1 * var(--ktf-grants-spacing));
@@ -69,7 +69,7 @@
 }
 
 .actionDark {
-  background: #19191c;
+  background: var(--kt-bg-black);
 }
 
 .button {

src/components/IntroBanner/introBanner.module.css

@@ -9,13 +9,16 @@
     'title image'
     '. image'
     'companies companies';
+  margin-top: var(--ktl-box-page-l);
+  margin-bottom: 0;
+  padding-bottom: var(--ktl-box-page-l);
+  border-bottom: 1px solid var(--rs-color-black-t20);
 }
 
 .image {
   height: 400px;
   width: 400px;
   grid-area: image;
-  margin-top: var(--ktl-box-page-m);
 }
 
 .title {
@@ -28,7 +31,7 @@
   display: flex;
   flex-wrap: wrap;
   margin-left: -80px;
-  margin-top: calc(var(--ktl-box-section-m) * -1);
+  margin-top: -84px;
 }
 
 .companiesGroup {
@@ -53,10 +56,10 @@
 }
 
 .companyLink {
-  display: inline-block;
-
+  display: block;
   font-size: 0;
   line-height: 0;
+
   &,
   &:hover {
     text-decoration: none;
@@ -65,10 +68,15 @@
 
 @media (--ktl-ds) {
   .title {
-    margin-right: -70px;
+    margin-right: -72px;
+  }
+
+  .image {
+    margin-top: 72px;
   }
 
   .companies {
+    margin-top: -12px;
     margin-left: calc(var(--ktl-box-section-l) * -1);
   }
 
@@ -80,13 +88,14 @@
 @media (--ktl-tl) {
   .intro {
     display: block;
+    padding-bottom: var(--ktl-box-page-m);
     margin-top: var(--ktl-box-page-m);
-    margin-bottom: var(--ktl-box-page-m);
+    margin-bottom: 0;
   }
 
   .title {
-    height: 242px;
-    margin-top: 12px;
+    height: 280px;
+    margin-top: 8px;
     margin-right: 0;
   }
 
@@ -107,7 +116,7 @@
 
 @media (--ktl-tm) {
   .intro {
-    margin-bottom: var(--ktl-box-section-l);
+    padding-bottom: var(--ktl-box-section-l);
   }
 
   .title {

src/components/JoinIntro/Opener/opener.module.css

@@ -29,7 +29,7 @@
 
 .contact {
   display: inline-block;
-  background: var(--rs-color-grey-10);
+  background: var(--kt-grey);
   border-radius: 8px;
   margin: var(--ktl-box-section-l) 0 0;
   padding: var(--ktl-box-block-l) 18px;

src/components/JoinTiers/Tier/tier.module.css

@@ -2,9 +2,7 @@
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
-
-  background: #fff;
-  box-shadow: 5px 2px 24px rgba(0, 0, 0, 0.1);
+  background-color: #fff;
   border-radius: 8px;
   padding: var(--ktl-box-section-m) var(--ktl-box-section-s) var(--ktl-box-section-s);
 

src/components/JoinTiers/tiers.module.css

@@ -1,5 +1,5 @@
 .outer {
-  background: var(--ktl-light-grey);
+  background: var(--kt-grey);
 }
 
 .tiers {

src/components/JoinWantToLearn/wantToLearn.module.css

@@ -1,5 +1,5 @@
 .outter {
-  background: var(--ktl-light-grey);
+  background: var(--kt-grey);
   padding-top: var(--ktf-fuild-spacing-xl);
   overflow: hidden;
 }