progress

efdevcon · Dec 30, 2023 · 9cdb0fa · 9cdb0fa
1 parent 04de27d
commit 9cdb0fa
Show file tree

Hide file tree

Showing 12 changed files with 68 additions and 29 deletions.
diff --git a/devcon/src/assets/css/global/buttons.scss b/devcon/src/assets/css/global/buttons.scss
@@ -1,7 +1,6 @@
 @use 'assets/css/partials/index' as *;
 
-.button,
-button {
+.button {
   // Sometimes the button element can be useful for semantic reasons, add "plain" class to remove default styles
   cursor: pointer;
   touch-action: manipulation;

diff --git a/devcon/src/assets/css/global/cms.scss b/devcon/src/assets/css/global/cms.scss
@@ -1,6 +1,10 @@
+b, strong {
+    font-weight: 600;
+}
+
 .rich-text {
     h1, h2, h3, h4, h5, h6 {
-        font-family: inherit !important;
+        // font-family: inherit !important;
         font-weight: normal !important;
     }
 

diff --git a/devcon/src/assets/css/global/fonts.scss b/devcon/src/assets/css/global/fonts.scss
@@ -11,7 +11,7 @@
 // Headers
 h1,
 .h1 {
-  @include fonts-secondary;
+  // @include fonts-secondary;
   @include fonts-bold;
   font-size: $sizes-size-16 + $sizes-size-16;
   line-height: 125%;
@@ -24,6 +24,7 @@ h1,
 h2,
 .h2,
 .title {
+  @include fonts-secondary;
   @include fonts-bold;
   font-size: 24px;
   line-height: 120%;

diff --git a/devcon/src/assets/css/partials/_fonts.scss b/devcon/src/assets/css/partials/_fonts.scss
@@ -4,8 +4,8 @@
 @use 'colors';
 
 // Fonts
-$primary: 'Inter', serif;
-$secondary: 'Space Mono', monospace;
+$primary: 'Inter', sans-serif;
+$secondary: 'Poppins', sans-serif;
 
 // Relative to root (rem) sizes
 @mixin xxs {

diff --git a/devcon/src/components/common/slider/Slider.tsx b/devcon/src/components/common/slider/Slider.tsx
@@ -1,9 +1,10 @@
 import React from 'react'
 import SlickSlider from 'react-slick'
 import css from './slider.module.scss'
-import { Button } from 'components/common/button'
-import ChevronLeft from 'assets/icons/chevron_left.svg'
-import ChevronRight from 'assets/icons/chevron_right.svg'
+// import { Button } from 'components/common/button'
+import ChevronLeft from 'assets/icons/arrow_left.svg'
+import ChevronRight from 'assets/icons/arrow_right.svg'
+import { motion } from 'framer-motion'
 
 export const useSlider = (settings: any) => {
   const [currentIndex, setCurrentIndex] = React.useState(0)
@@ -65,7 +66,7 @@ export const useSlider = (settings: any) => {
 }
 
 const Arrows = (props: any) => {
-  let className = `squared sm black ghost ${css['arrow-button']}`
+  let className = `border-2 w-[40px] h-[40px] border-solid ${css['arrow-button']}`
 
   const canNext = props.currentIndex < props.nCards - props.cardsPerSlide
   const canBack = props.currentIndex > 0
@@ -74,23 +75,35 @@ const Arrows = (props: any) => {
 
   return (
     <div className={css['arrows']}>
-      <Button
+      <motion.button
         disabled={!canBack}
         className={className}
+        initial={{
+          background: '#ffffff80',
+        }}
+        whileHover={{
+          background: '#9fa1b730',
+        }}
         aria-label="Slide left"
         onClick={() => props.sliderRef.current?.slickPrev()}
       >
         <ChevronLeft />
-      </Button>
+      </motion.button>
 
-      <Button
+      <motion.button
         disabled={!canNext}
+        initial={{
+          background: '#ffffff80',
+        }}
+        whileHover={{
+          background: '#9fa1b730',
+        }}
         className={className}
         aria-label="Slide right"
         onClick={() => props.sliderRef.current?.slickNext()}
       >
         <ChevronRight />
-      </Button>
+      </motion.button>
     </div>
   )
 }
@@ -115,7 +128,7 @@ export const Slider = (props: SliderProps) => {
     <div data-type="slider-container" className={`${props.containerClassName} ${css['container']}`} style={props.style}>
       {!props.onlySlider && (
         <div className={css['top-section']}>
-          <h2>{props.title}</h2>
+          <h2 className="bold">{props.title}</h2>
 
           <Arrows {...sliderState} />
 

diff --git a/devcon/src/components/common/slider/slider.module.scss b/devcon/src/components/common/slider/slider.module.scss
@@ -58,12 +58,35 @@
   flex-wrap: nowrap;
 
   .arrow-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
     flex-shrink: 0;
-    padding: 8px;
+    // padding: 8px;
     touch-action: none;
+    border-radius: 100%;
+    // width: 1.5em;
+    // height: 1.5em;
+    border-color: #9FA1B7;
+    --color-icon: #9FA1B7;
+    cursor: pointer;
+
+    svg {
+      font-size: 0.8em;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      background: transparent !important;
+      // border-color: lighten(#9FA1B7, 50%);
+    }
+
+    > * {
+      flex-shrink: 0;
+    }
 
     &:last-child {
-      margin-left: $gaps-gap-5;
+      margin-left: 8px;
     }
 
     // &:not(.always-buttons) {

diff --git a/devcon/src/components/domain/index/hero/hero.module.scss b/devcon/src/components/domain/index/hero/hero.module.scss
@@ -109,7 +109,7 @@ $logo-offset: 50px;
 
   // background: linear-gradient(45deg, #0744c6, #160b14, #0094a1);
   // background: linear-gradient(45deg, #91008f, #6c61a2, #76b1ff);
-  background: linear-gradient(45deg, #91008f, #5c7093, #000280d6);
+  // background: linear-gradient(45deg, #91008f, #5c7093, #000280d6);
 
   // background-size: 600% 100%;
   // animation: gradient 16s linear infinite;
@@ -889,7 +889,7 @@ $logo-offset: 50px;
     transform: translateX(0) translateY(0);
 
     img {
-      transform: scale(1.05);
+      transform: scale(1.06);
       position: absolute;
       object-position: center 70% !important;
       height: 100%;

diff --git a/devcon/src/components/domain/index/hero/images/dc-7/backdrop-hd.png b/devcon/src/components/domain/index/hero/images/dc-7/backdrop-hd.png
diff --git a/devcon/src/components/domain/index/hero/images/dc-7/backdrop.png b/devcon/src/components/domain/index/hero/images/dc-7/backdrop.png
diff --git a/devcon/src/components/domain/index/track-list/track-list.module.scss b/devcon/src/components/domain/index/track-list/track-list.module.scss
@@ -46,18 +46,13 @@
 }
 
 .card {
-
-
-
   > * {
     border: 1px solid #E2E3FF;
     border-radius: 4px;
   }
 
-
   &.layer-1 {
     [data-type="flip-card-front"], [data-type="flip-card-back"] {
-
       background: #E6F0FF;
     }
   }

diff --git a/devcon/src/pages/_document.tsx b/devcon/src/pages/_document.tsx
@@ -11,7 +11,7 @@ export default class AppDocument extends Document {
 
           {/* Adding the specific font weights for bold (e.g. 700) makes the font look so much worse :-P Bit of a mystery, since bolding works fine without it (probably just a fallback that happens to look good) */}
           <link
-            href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Space+Mono&display=swap"
+            href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Poppins:wght@400;600;700&display=swap"
             rel="stylesheet"
           />
 

diff --git a/devcon/src/pages/index.tsx b/devcon/src/pages/index.tsx
@@ -62,7 +62,6 @@ export default pageHOC(function Index(props: any) {
               </div>
             </div>
           </div>
-
           <div className="relative flex flex-col items-start pb-20 border-bottom gap-8">
             <div className={`${css['scrolling-text-background']}`}>
               <InfiniteScroller nDuplications={2} speed="120s">
@@ -88,7 +87,6 @@ export default pageHOC(function Index(props: any) {
               {data.pages.section2?.button}
             </button>
           </div>
-
           <div className="flex relative pt-12 mb-8 pb-8 gap-8 border-bottom items-center">
             <div className={`${css['scrolling-text-background']} ${css['alternate']}`}>
               <InfiniteScroller nDuplications={2} reverse speed="150s">
@@ -111,7 +109,7 @@ export default pageHOC(function Index(props: any) {
             </div>
           </div>
 
-          <div className="relative flex flex-col items-start mb-8 border-bottom gap-8">
+          <div className="relative flex flex-col items-start border-bottom gap-8">
             <div className="rich-text">
               <TinaMarkdown content={data.pages.section4?.body}></TinaMarkdown>
             </div>
@@ -153,7 +151,13 @@ export default pageHOC(function Index(props: any) {
         {/* <div className="clear-bottom border-bottom"></div> */}
 
         <div className="section">
-          <div className="relative border-bottom pb-8">
+          <div className="relative border-bottom pb-8 pt-8">
+            <div className={`${css['scrolling-text-background']} ${css['alternate']}`}>
+              {/* <InfiniteScroller nDuplications={2} speed="150s">
+                <p className="bold rotate-x-180">ROAD TO DEVCON&nbsp;</p>
+              </InfiniteScroller> */}
+            </div>
+
             <div className="rich-text">
               <TinaMarkdown content={data.pages.section5?.title}></TinaMarkdown>
             </div>