Merge pull request #52 from react-knowledgeable/wgao19/home-content

add talk listing to home page
react-knowledgeable · Oct 28, 2019 · 576b13b · 576b13b
2 parents 95463b5 + 4dc3a07
commit 576b13b
Show file tree

Hide file tree

Showing 18 changed files with 282 additions and 291 deletions.
diff --git a/gatsby-node.js b/gatsby-node.js
@@ -93,7 +93,7 @@ exports.createPages = ({ graphql, actions }) => {
         {
           talks: github {
             repository(owner: "react-knowledgeable", name: "talks") {
-              issues(first: 100, labels: ["talk"]) {
+              issues(last: 100, labels: ["talk"]) {
                 nodes {
                   number
                 }

diff --git a/src/components/Footer/index.jsx b/src/components/Footer/index.jsx
@@ -44,7 +44,11 @@ const Footer = () => (
     }) => {
       return (
         <footer className={s.footer}>
-          <p>Built with love.</p>
+          <p>Built with love. <a className={s.icon} href="https://twitter.com/reknowledgeable">
+            <svg viewBox="0 0 612 498" fill="none">
+              <path d="M537.342 74.2993L540.5 83.5542C560.11 81.2282 579.366 76.6407 597.885 69.8964C583.239 88.8562 565.832 105.677 546.302 119.607L544.138 121.151L544.207 123.807L544.626 139.997C544.593 303.729 420.02 492.119 192.438 492.119C129.993 492.119 71.4356 475.755 20.5942 447.186C23.6955 447.298 26.8121 447.355 29.944 447.355C89.9134 447.355 145.144 426.958 188.944 392.636L200.021 383.956L185.951 383.701C136.148 382.798 93.6691 351.656 76.1807 307.811C81.4389 308.489 86.7824 308.839 92.241 308.839C104.172 308.839 115.698 307.208 126.62 304.269L126.307 294.539C73.3196 283.877 32.8567 238.42 29.8121 183.052C45.9238 190.675 63.4551 194.931 81.3297 195.522L98.8415 196.102L84.2728 186.368C51.9515 164.772 30.66 127.869 30.66 86.046C30.66 66.5061 35.2739 48.0757 43.5068 31.8021C106.213 105.603 197.977 153.931 301.139 159.113L307.767 159.446L306.259 152.983C304.206 144.183 303.139 134.965 303.139 125.513C303.139 58.9794 357.116 5 423.69 5C458.396 5 489.674 19.6105 511.672 43.0775L513.569 45.1013L516.29 44.5629C540.777 39.7181 563.998 31.4382 585.491 20.2339C575.324 42.7787 558.427 61.6729 537.342 74.2993Z" fill="black" stroke="black" stroke-width="20"/>
+            </svg>
+          </a></p>
           <div className={s.friends}>
             <span className={s.friendLabel}>Friends of RK:</span>
             {!!footerLinks &&

diff --git a/src/components/Footer/s.module.scss b/src/components/Footer/s.module.scss
@@ -10,38 +10,54 @@
       align-items: center;
       margin-top: initial;
     }
-    @media (min-width: 1280px) and (max-width: 1599px) {
-      grid-column: 2;
-      grid-row: 3;
-      align-self: end;
-    }
-    @media (min-width: 1600px) {
-      grid-column: 3;
-      grid-row: 3;
-      align-self: end;
-    }
   }
 
   .footer p {
     margin: 0;
+    display: flex;
+    align-items: center;
     @media (max-width: 517px) {
       writing-mode: vertical-lr;
     }
-    @media (min-width: 1280px) {
-      writing-mode: vertical-lr;
-    }
   }
 
   .footer div {
     justify-self: end;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    @media (min-width: 900px) and (max-width: 1279px) {
+    @media (min-width: 648px) and (max-width: 969px) {
+      display: grid;
+      grid-template-columns: max-content max-content;
+      grid-column-gap: 0.5em;
+      span {
+        grid-column: 1 / -1;
+      }
+    }
+    @media (min-width: 970px) {
       display: block;
     }
   }
 
+  .icon {
+    height: 1.2em;
+    width: 1.5em;
+    border: none;
+    margin-left: 0.5em;
+  }
+
+  .icon:hover {
+    border: none;
+  }
+
+  .icon path {
+    transition: fill 0.3s ease;
+  }
+
+  .icon:hover path {
+    fill: white;
+  }
+
   .friendLabel {
     display: block;
     font-weight: bold;
@@ -51,6 +67,7 @@
     display: block;
     cursor: pointer;
     border-bottom: none;
+    white-space: nowrap;
     @media (min-width: 900px) {
       display: inline-block;
       margin-right: 1em;

diff --git a/src/components/Layout/index.jsx b/src/components/Layout/index.jsx
@@ -21,7 +21,7 @@ export default props => {
   const fullImageUrl = coverImage ? `${url}${coverImage}` : `${url}${image}`;
   const usedTitle = titleTemplate ? titleTemplate.replace('%s', title) : title;
   return (
-    <div className={cx(s.layout, className)} onKeyPress={onKeyPress}>
+    <div className={cx(s.defaultLayout, className)} onKeyPress={onKeyPress}>
       <Helmet>
         <meta charSet="utf-8" />
         <title>{usedTitle}</title>

diff --git a/src/components/Layout/s.module.scss b/src/components/Layout/s.module.scss
@@ -1,66 +1,30 @@
 :root {
-  --aside-width: 230px;
-  --main-width: 900px;
   --round-corner: 2px;
 }
 
-header, main {
-  max-width: 52rem;
-  min-width: 16rem;
-  @media (min-width: 640px) and (max-width: 1599px) {
-    grid-column: 1 / span 2;
-  }
-  @media (min-width: 1600px) {
-    grid-column: 1;
-  }
-}
-
-main {
-  @media (min-width: 1280px) and (max-width: 1599px) {
-    grid-row: 3;
-  }
-}
-
-aside {
-  @media (min-width: 640px) and (max-width: 1599px) {
-    grid-row: 2;
-  }
-  @media (min-width: 1600px) {
-    grid-row: 1 / span 2;
-  }
-}
-
-aside:first-of-type {
-  @media (min-width: 1600px) {
-    grid-column: 2;
-    grid-row: 1 / span 3;
-  }
-}
-
-aside:last-of-type {
-  @media (min-width: 1600px) {
-    grid-column: 3;
-  }
-}
-
-.layout {
-  padding: 0 10px;
+// naïve default layout
+// header and footer are full-width
+// main takes --main-width and aside takes --aside width
+// meant to be overwritten 
+.defaultLayout {
+  --aside-width: 230px;
+  --main-width: 900px;
   background: white;
   min-height: 100vh;
-  @media (min-width: 640px) {
-    margin: 0 20px;
-    display: grid;
-    grid-column-gap: 5px;
+  display: grid;
+  grid-template-columns: minmax(--main-width, 1fr) minmax(--aside-width, 1fr);
+  header, footer {
+    grid-column: 1 / -1;
   }
-  @media (min-width: 640px) and (max-width: 1279px) {
-    grid-template-columns: 60% 40%;
+  header {
+    grid-row: 1;
   }
-  @media (min-width: 1280px) and (max-width: 1599px) {
-    grid-template-columns: minmax(var(--main-width), 3fr) 1fr max-content;
+  main {
+    grid-column: 1;
+    grid-row: 2;
   }
-  @media (min-width: 1600px) {
-    grid-template-rows: min-content 1fr auto;
-    grid-template-columns: minmax(var(--main-width), 5fr) minmax(var(--aside-width), 3fr) minmax(min-content, 2fr);
+  aside {
+    grid-column: 2;
   }
 }
 

diff --git a/src/components/SubmitTalkButton/index.jsx b/src/components/SubmitTalkButton/index.jsx
@@ -18,14 +18,6 @@ export default ({ children, className }) => (
         <span>Submit a talk</span>
       </a>
     </h3>
-    <ul>
-      <li>
-        <a href="https://github.com/react-knowledgeable/react-knowledgeable-talks/issues">upcoming talks</a>
-      </li>
-      <li>
-        <a href="https://github.com/react-knowledgeable/react-knowledgeable-talks/issues?q=is%3Aissue+is%3Aclosed">past talks</a>
-      </li>
-    </ul>
     {children}
   </Card>
 );
diff --git a/src/components/SubmitTalkButton/s.module.scss b/src/components/SubmitTalkButton/s.module.scss
@@ -1,3 +1,6 @@
+.submitTalkTitle {
+  grid-column: 1 / -1;
+}
 .submitTalkLogo {
   margin-left: auto;
   height: 1em;

diff --git a/src/components/Talk/s.module.scss b/src/components/Talk/s.module.scss
@@ -11,4 +11,5 @@
 .title {
     line-height: 1.8;
     margin: 0;
+    margin-right: 0.25em;
 }