optimize for desktop, add images folder w/ README

tjvsx · tjvsx · commit 6e25abfb14e2 · 2022-02-23T15:41:55.000-05:00
diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -16,31 +16,7 @@ const config = {
   organizationName: '0xHabitat', // Usually your GitHub org/user name.
   projectName: 'docs', // Usually your repo name.
 
-  /** SEARCHBAR DEPRECATED */
-  // plugins: [
-  //   [
-  //     require.resolve("@cmfcmf/docusaurus-search-local"),
-  //     {
-  //       indexDocs: true,
-  //       indexBlog: false,
-  //       indexPages: false,
-  //       language: "en",
-  //       style: undefined,
-  //     },
-  //   ],
-  // ],
-  // plugins: [
-  //   [
-  //     '@docusaurus/plugin-ideal-image',
-  //     {
-  //       // quality: 70,
-  //       // max: 1030, // max resized image's size.
-  //       // min: 640, // min resized image's size. if original is lower, use that size.
-  //       // steps: 2, // the max number of images generated between min and max (inclusive)
-  //       disableInDev: false,
-  //     },
-  //   ],
-  // ],
+  // TODO: Integrate Algolia search - https://docusaurus.io/docs/search
 
   presets: [
     [
@@ -68,6 +44,9 @@ const config = {
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
+      metadata: [{
+        name: 'habitat, 0xhabitat, crypto, blockchain, dao, daos, communities, governance, govern, voting, vote, votes, ethereum, eth, optimism, rollup, diamond, diamonds, diamond standard, modules, library, facets, facet, code, solidity, contract, contracts, smart contracts, smart contract, evm, nft, token, tokens, economics', 
+        content: 'docs, documentation, documents, homepage, home, index, community, main, mainpage, blog, discord, github, twitter, blog, substack, sourcecode, code, roadmap, info'}],
       colorMode: {
         defaultMode: 'light',
         disableSwitch: false,
@@ -103,7 +82,7 @@ const config = {
             className: 'navbar_item',
           },
           { 
-            to: 'blog', 
+            to: 'https://0xhabitat.substack.com/', 
             label: 'Blog', 
             position: 'left',
             className: 'navbar_item',
diff --git a/package.json b/package.json
@@ -14,7 +14,6 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@cmfcmf/docusaurus-search-local": "^0.10.0",
     "@docusaurus/core": "2.0.0-beta.9",
     "@docusaurus/plugin-ideal-image": "^2.0.0-beta.15",
     "@docusaurus/preset-classic": "2.0.0-beta.9",
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -168,7 +168,6 @@ div[class*="toggleTrackThumb"] {
   background-size: contain;
 }
 
-
 /* Background animation */
 @keyframes loop {
   0% {
diff --git a/src/pages/components/Shapes.js b/src/pages/components/Shapes.js
@@ -33,7 +33,7 @@ export default function useCurrentWidth() {
   }, [])
 
   let scaleMode;
-  if (width > 996) {
+  if (width > 995.99) {
     scaleMode = "none"
   } else if (width < 996) {
     scaleMode = "xMidYMid slice"
diff --git a/src/pages/index.module.css b/src/pages/index.module.css
@@ -61,20 +61,50 @@
 }
 @media screen and (min-width: 1500px) {
   .landing {
-    --height_about: 38em;
+    --height_about: 42em;
     --height_token: 35em;
     --height_diamond: 45em;
     --height_roadmap: 30em;
-    --height_info: 55em;
+    --height_info: 57em;
+  }
+  p {
+    font-size: 1.25em;
+  }
+  h1 {
+    font-size: 2em;
+  }
+  h2 {
+    font-size: 1.75em;
+  }
+  h3 {
+    font-size: 1.5em;
+  }
+  h4 {
+    font-size: 1.25em;
   }
 }
 @media screen and (min-width: 2000px) {
   .landing {
-    --height_about: 38em;
+    --height_about: 44em;
     --height_token: 35em;
-    --height_diamond: 45em;
+    --height_diamond: 48em;
     --height_roadmap: 30em;
-    --height_info: 50em;
+    --height_info: 62em;
+  }
+  p {
+    font-size: 1.5em;
+  }
+  h1 {
+    font-size: 2.25em;
+  }
+  h2 {
+    font-size: 2em;
+  }
+  h3 {
+    font-size: 1.75em;
+  }
+  h4 {
+    font-size: 1.5em;
   }
 }
 .background_wrapper {
diff --git a/src/pages/sections/AboutSection.css b/src/pages/sections/AboutSection.css
@@ -8,20 +8,50 @@
 #about_container {
   display: flex;
   flex-wrap: wrap;
+  gap: 2em;
   justify-content: center;
   align-items: center;
   margin: auto;
+  max-width: 120em;
 }
 #about_content {
   max-width: 40em;
   min-width: 16em;
   flex: 1 1 0;
-  margin-right: 2em;
+  margin: auto;
 }
-#about_img {
+@media screen and (min-width: 1500px) {
+  #about_content {
+    max-width: 48em !important;
+  }
+  #about_image {
+    max-width: 40em !important;
+  }
+}
+@media screen and (min-width: 2000px) {
+  #about_content {
+    max-width: 55em !important;
+  }
+  #about_image {
+    max-width: 40em !important;
+  }
+}
+#about_image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   margin: auto;
   min-width: 20em;
   max-width: 30em;
-  min-height:10em;
   flex: 1 1 0;
+}
+#about_img {
+  border: 3px orange solid;
+  /* margin: auto;
+  min-width: 20em;
+  max-width: 30em; */
+  /* min-height:10em; */
+
+  margin: auto;
+  /* flex: 1 1 0; */
 }
diff --git a/src/pages/sections/AboutSection.js b/src/pages/sections/AboutSection.js
@@ -22,7 +22,9 @@ export default function AboutSection() {
               <p>Start your community on Habitat and enjoy the scaling benefits of optimistic rollups on Ethereum. Rollups can extend the DAO space by enabling more organisation features and trustless execution of voting results. New modules and features are built and maintained by the Habitat DAO and its contributors making them free to use for every community.</p>
             </div>
           </div>
-          <DAO className={clsx('about_img', styles.svg_img)}/>
+          <div id='about_image'>
+            <DAO className={clsx('about_img', styles.svg_img)}/>
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/pages/sections/CoverSection.css b/src/pages/sections/CoverSection.css
@@ -22,11 +22,32 @@
   color: #fff;
   text-shadow: 1px 1px 8px #000;
   margin: 0;
-  line-height: 1.1em;
 }
 .cover_title {
   font-size: 3em;
+  line-height: 1.1em;
 }
 .cover_subtitle {
   font-size: 1.5em;
+  line-height: 1.1em;
+}
+@media screen and (min-width: 1500px) {
+  .cover_title {
+    font-size: 4em !important;
+    line-height: 1.1em !important;
+  }
+  .cover_subtitle {
+    font-size: 2em !important;
+    line-height: 1.1em !important;
+  }
+}
+@media screen and (min-width: 2000px) {
+  .cover_title {
+    font-size: 5em !important;
+    line-height: 1.1em !important;
+  }
+  .cover_subtitle {
+    font-size: 2.5em !important;
+    line-height: 1.1em !important;
+  }
 }
diff --git a/src/pages/sections/DiamondSection.css b/src/pages/sections/DiamondSection.css
@@ -133,4 +133,9 @@
     margin-top: -5em;
     font-size: x-small;
   }
+}
+@media screen and (min-width: 1500px) {
+  #diamond_container {
+    max-width: 100em !important;
+  }
 }
diff --git a/src/pages/sections/DiamondSection.js b/src/pages/sections/DiamondSection.js
@@ -30,17 +30,21 @@ function DiamondSection() {
   
 
   useEffect(() => {
-    let anim = Lottie.loadAnimation({
-      container: el.current,
-      renderer: 'svg',
-      loop: false,
-      autoplay: false,
-      path: '/img/diamond-animation.json',
-      rendererSettings: {
-        preserveAspectRatio: 'xMidYMid slice',
-        hideOnTransparent: true
-      }
-    })
+    let anim;
+    if (!anim) {
+      anim = Lottie.loadAnimation({
+        container: el.current,
+        renderer: 'svg',
+        loop: false,
+        autoplay: false,
+        path: '/img/diamond-animation.json',
+        rendererSettings: {
+          preserveAspectRatio: 'xMidYMid slice',
+          hideOnTransparent: true
+        }
+      })
+    }
+    anim.setSpeed(1.1)
     const loop = () => {
       anim.playSegments([101, 271], true);
     }
diff --git a/src/pages/sections/InfoSection.js b/src/pages/sections/InfoSection.js
@@ -37,7 +37,7 @@ export default function InfoSection() {
           <Link id='button_twitter' className='button' to='https://twitter.com/0xhabitat'>🐦 Twitter</Link>
           <Link id='button_discord' className='button' to='https://discord.com/invite/Pqdj73UTt6'>💬 Discord</Link>
           <Link id='button_github' className='button' to='https://github.com/0xHabitat'>🔧 Github</Link>
-          <Link id='button_blog' className='button' to='/blog'>📒 Blog</Link>
+          <Link id='button_blog' className='button' to='https://0xhabitat.substack.com/'>📒 Blog</Link>
           <Link id='button_docs' className='button' to='/docs'>🔎 Docs</Link>
         </div>
       </div>
diff --git a/src/pages/sections/RoadmapSection.css b/src/pages/sections/RoadmapSection.css
@@ -254,6 +254,36 @@
     font-size: .9em;
   }
 }
+@media screen and (min-width: 1500px) {
+  #shape_arrow {
+    border-top: 1.625em solid transparent !important;
+    border-bottom: 1.625em solid transparent !important;
+    border-left: 1.75em solid white !important;
+    margin-right: -1.5em;
+    margin-top: -.4em;
+  }
+  #phase_prototype {
+    width: 14em !important;
+  }
+  #phase_framework, #phase_multichain {
+    width: 28em !important;
+  }
+}
+@media screen and (min-width: 2000px) {
+  #shape_arrow {
+    border-top: 2em solid transparent !important;
+    border-bottom: 2em solid transparent !important;
+    border-left: 2.25em solid white !important;
+    margin-right: -1.75em;
+    margin-top: -.4em;
+  }
+  #phase_prototype {
+    width: 16em !important;
+  }
+  #phase_framework, #phase_multichain {
+    width: 32em !important;
+  }
+}
 
 
 /* Constants */
diff --git a/src/pages/sections/TokenSection.css b/src/pages/sections/TokenSection.css
@@ -8,10 +8,12 @@
 #token_container {
   display: flex;
   flex-wrap: wrap;
-  justify-content: center;
+  justify-content: space-evenly;
+  gap: 2em;
   align-items: center;
   margin: auto;
   margin-top: .5em;
+  max-width: 100em;
 }
 #token_content {
   max-width: 38em;
@@ -22,12 +24,21 @@
 #token_image {
   min-width: 20em;
   max-width: 30em;
-  min-height:10em;
   flex: 1 1 1;
 }
 #token_img {
   margin: auto;
   display: block;
   max-width: 13em;
   min-width: 10em; 
+}
+@media screen and (min-width: 1500px) {
+  #token_content {
+    max-width: 50em !important;
+  }
+}
+@media screen and (min-width: 2000px) {
+  #token_content {
+    max-width: 69em !important;
+  }
 }
diff --git a/static/img/README.md b/static/img/README.md
@@ -0,0 +1,12 @@
+# Working with Images
+
+### Using Imagekit
+
+1. Adjust size of the following images at the following widths.
+  - cover-day.png, cover-night.png -- 2000px
+  - emoji-national-park.png, emoji-sunrise-over-mountains.png -- 32px
+2. Go to https://imagekit.io/, 
+3. login
+4. Navigate to your Media Library
+5. Upload these images
+6. Copy the URL and paste into custom.css where the images are delcared.
diff --git a/static/img/cover-day.png b/static/img/cover-day.png
diff --git a/static/img/cover-night.png b/static/img/cover-night.png
diff --git a/static/img/emoji-national-park.png b/static/img/emoji-national-park.png
diff --git a/static/img/emoji-sunrise-over-mountains.png b/static/img/emoji-sunrise-over-mountains.png

Original file line number	Diff line number	Diff line change
`@@ -168,7 +168,6 @@ div[class*="toggleTrackThumb"] {`
`168`	`168`	`background-size: contain;`
`169`	`169`	`}`
`170`	`170`
`171`		`-`
`172`	`171`	`/* Background animation */`
`173`	`172`	`@keyframes loop {`
`174`	`173`	`0% {`
Original file line number	Diff line number	Diff line change
`@@ -133,4 +133,9 @@`
`133`	`133`	`margin-top: -5em;`
`134`	`134`	`font-size: x-small;`
`135`	`135`	`}`
	`136`	`+}`
	`137`	`+@media screen and (min-width: 1500px) {`
	`138`	`+ #diamond_container {`
	`139`	`+ max-width: 100em !important;`
	`140`	`+ }`
`136`	`141`	`}`