Merge pull request #56 from franciscop/compact2

Made homepage into compact split view
styled-icons · Apr 27, 2022 · 81b15f0 · 81b15f0
2 parents 086f768 + e1661bc
commit 81b15f0
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 25 deletions.
diff --git a/src/IndexPage.tsx b/src/IndexPage.tsx
@@ -21,25 +21,34 @@ const IndexPage: React.SFC = () => (
       </h1>
       <Badges />
 
-      <p>
-        Import icons from the following icon packs as <a href="https://www.styled-components.com/">Styled Components</a>
-        : <a href="https://icons.getbootstrap.com/">Bootstrap</a>, <a href="https://boxicons.com/">Boxicons</a>,{' '}
-        <a href="http://cryptoicons.co">Crypto Icons</a>, <a href="http://www.entypo.com/">Entypo</a>,{' '}
-        <a href="https://akveo.github.io/eva-icons/">Eva Icons</a>, <a href="https://evil-icons.io">Evil Icons</a>,{' '}
-        <a href="https://feathericons.com/">Feather</a>,{' '}
-        <a href="https://github.com/microsoft/fluentui-system-icons">FluentUI System</a>,{' '}
-        <a href="https://fontawesome.com/">Font Awesome</a>,{' '}
-        <a href="https://zurb.com/playground/foundation-icon-fonts-3">Foundation</a>,{' '}
-        <a href="https://github.com/refactoringui/heroicons">Heroicons</a>, <a href="https://icomoon.io">Icomoon</a>,{' '}
-        <a href="https://ionicons.com">Ionicons</a>, <a href="https://material.io/icons/">Material Design</a>,{' '}
-        <a href="https://octicons.github.com/">Octicons</a>,{' '}
-        <a href="https://www.npmjs.com/package/open-iconic">Open Iconic</a>, <a href="https://remixicon.com/">Remix</a>,{' '}
-        <a href="https://github.com/simple-icons/simple-icons">Simple Icons</a>,{' '}
-        <a href="https://www.s-ings.com/typicons/">Typicons</a>, <a href="https://www.zondicons.com/">Zondicons</a>
-      </p>
+      <div className="hero">
+        <div className="content">
+          <p>
+            Import icons from the following icon packs as <a href="https://www.styled-components.com/">Styled Components</a>
+            : <a href="https://icons.getbootstrap.com/">Bootstrap</a>, <a href="https://boxicons.com/">Boxicons</a>,{' '}
+            <a href="http://cryptoicons.co">Crypto Icons</a>, <a href="http://www.entypo.com/">Entypo</a>,{' '}
+            <a href="https://akveo.github.io/eva-icons/">Eva Icons</a>, <a href="https://evil-icons.io">Evil Icons</a>,{' '}
+            <a href="https://feathericons.com/">Feather</a>,{' '}
+            <a href="https://github.com/microsoft/fluentui-system-icons">FluentUI System</a>,{' '}
+            <a href="https://fontawesome.com/">Font Awesome</a>,{' '}
+            <a href="https://zurb.com/playground/foundation-icon-fonts-3">Foundation</a>,{' '}
+            <a href="https://github.com/refactoringui/heroicons">Heroicons</a>, <a href="https://icomoon.io">Icomoon</a>,{' '}
+            <a href="https://ionicons.com">Ionicons</a>, <a href="https://material.io/icons/">Material Design</a>,{' '}
+            <a href="https://octicons.github.com/">Octicons</a>,{' '}
+            <a href="https://www.npmjs.com/package/open-iconic">Open Iconic</a>, <a href="https://remixicon.com/">Remix</a>,{' '}
+            <a href="https://github.com/simple-icons/simple-icons">Simple Icons</a>,{' '}
+            <a href="https://www.s-ings.com/typicons/">Typicons</a>, <a href="https://www.zondicons.com/">Zondicons</a>
+          </p>
 
-      <code className="demo">
-        {`
+          <p>
+            <a href="https://github.com/styled-icons/styled-icons">
+              <button>View documentation on GitHub</button>
+            </a>
+          </p>
+        </div>
+
+        <code className="demo">
+          {`
 import styled from 'styled-components'
 import {Zap} from '@styled-icons/octicons'
 
@@ -48,12 +57,10 @@ const RedZap = styled(Zap)\`
 \`
 
 const App = () => <RedZap />
-    `.trim()}
-      </code>
+      `.trim()}
+        </code>
+      </div>
 
-      <p>
-        <a href="https://github.com/styled-icons/styled-icons">View documentation on GitHub</a>
-      </p>
 
       <h2>Icon Explorer</h2>
 

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -29,6 +29,40 @@ const GlobalStyle = createGlobalStyle`
     color: #fff;
   }
 
+  .hero {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    margin: 30px 0;
+    align-items: center;
+  }
+
+  @media all and (min-width: 800px) {
+    .hero .content {
+      width: 50%;
+    }
+  }
+
+  .hero .content p {
+    margin: 0;
+  }
+
+  button {
+    background: rgba(0,0,0,0.1);
+    border: 1px solid rgba(255,255,255,0.5);
+    border-radius: 4px;
+    padding: 8px 12px;
+    color: white;
+    cursor: pointer;
+    transition: all .2s ease;
+    margin-top: 1.5em;
+  }
+
+  button:hover {
+    background: rgba(0,0,0,0.2);
+    border: 1px solid rgba(255,255,255,1);
+  }
+
   h1 {
     font-weight: 600;
     font-size: 1.7rem;
@@ -52,9 +86,9 @@ const GlobalStyle = createGlobalStyle`
 
   code.demo {
     display: inline-block;
-    margin-bottom: 12px;
-    margin-top: 1em;
+    margin: 0;
     background: rgba(255,255,255, 0.2);
+    padding-right: 50px;
   }
 
   .icon-card-wrapper {