feat: liveness blog post and enti to squad

package.json

@@ -25,7 +25,7 @@
     "rehype-katex": "6.0.2",
     "rehype-raw": "6.1.1",
     "remark-math": "5.1.1",
-    "styled-components": "5.3.5"
+    "styled-components": "6.1.1"
   },
   "devDependencies": {
     "@types/fontfaceobserver": "2.1.0",

src/data/blog.json

@@ -1,4 +1,12 @@
 [
+  {
+    "id": "liveness-2-and-beyond",
+    "name": "Liveness 2 and beyond",
+    "description": "The current status of on-chain storage proofs",
+    "date": "11/17/23",
+    "tags": ["Cryptography", "Verification", "Cross-chain"],
+    "image": "img/blog-posts/liveness-2-and-beyond/alice-lq.jpg"
+  },
   {
     "id": "a-mev-racing-story",
     "name": "A (MEV) racing story",

src/data/squad.json

@@ -39,6 +39,11 @@
     "position": "Researcher",
     "description": "- Enrolled in IT infrastructure studies.\n- Defi research and scalability enthusiast.\n\nFun fact: Spends his spare time in DeFi as well."
   },
+  {
+    "name": "enti",
+    "position": "Researcher",
+    "description": "- Electronics engineer who left electrons for the Ethereum transaction supply chain (kind of same thing innit?).\n- Enjoyoor of sound waves.\n\nFun fact: A group of hedgehogs is called an array."
+  },
   {
     "name": "Wei3er Hase",
     "position": "Developer",

src/pages/Creations/ProjectsList/index.tsx

@@ -54,11 +54,7 @@ export function ProjectsList({ projects }: ProjectListProps) {
     <List>
       {projects.map((project) => (
         <ProjectContainer key={project.name}>
-          <ProjectHeader
-            onClick={(e) => {
-              handleClick(project, e.currentTarget);
-            }}
-          >
+          <ProjectHeader onClick={(e: React.MouseEvent<Element, MouseEvent>) => handleClick(project, e.currentTarget)}>
             <Name>{project.name}</Name>
             <Circle src={circle} alt='circle icon' />
             <HLine />

src/pages/Insights/Insights.styles.tsx

@@ -57,6 +57,10 @@ export const BlogsContainer = styled.div`
   @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
     justify-content: center;
     width: 100%;
+
+    & img {
+      max-height: 27rem;
+    }
   }
 `;
 
@@ -159,10 +163,9 @@ export const DescriptionContainer = styled.div`
   }
 `;
 
-export const TagsContainer = styled.div`
+export const BlogFooter = styled.div`
   padding-top: 1.5rem;
   color: white;
-  /* border-top: 1px solid rgba(255, 255, 255, 0.1); */
   width: 100%;
   display: flex;
   justify-content: space-between;
@@ -171,24 +174,33 @@ export const TagsContainer = styled.div`
 
   @media screen and (max-width: ${MOBILE_MAX_WIDTH}) {
     padding: 1.6rem 2rem;
+    max-width: 95vw;
 
     & div strong {
       font-size: 1.8rem;
     }
   }
 `;
 
-export const Date = styled.div``;
+export const Date = styled.div`
+  max-width: 30%;
+`;
 
-export const Tags = styled.div`
+export const TagsContainer = styled.div`
   display: flex;
-  justify-content: end;
+  flex-direction: row;
+  overflow-x: auto;
+  overflow-y: hidden;
+`;
+
+export const Tag = styled.div`
+  display: flex;
+  justify-content: flex-end;
 
   & strong {
     width: max-content;
     text-transform: capitalize;
     margin: 0 1rem;
-
     font-size: 2.2rem;
   }
 `;

src/pages/Insights/Insights.tsx

@@ -5,16 +5,17 @@ import {
   PageContainer,
   Title,
   BgContainer,
-  TagsContainer,
+  BlogFooter,
   DescriptionContainer,
   DetailsContainer,
   BlogPost,
   Date,
   BackgroundImage,
   BlogsContainer,
   Image,
-  Tags,
+  Tag,
   TitleContainer as PostTitle,
+  TagsContainer,
 } from './Insights.styles';
 import VIDEO_CHROME from '~/assets/videos/insights.webm';
 import VIDEO_SAFARI from '~/assets/videos/insights.mp4';
@@ -77,16 +78,18 @@ export function Insights() {
               <DescriptionContainer>
                 <p>{post.description}</p>
               </DescriptionContainer>
-              <TagsContainer>
+              <BlogFooter>
                 <Date>
                   <p>{post.date}</p>
                 </Date>
-                {post.tags.map((tag) => (
-                  <Tags key={tag}>
-                    <strong>{tag}</strong>
-                  </Tags>
-                ))}
-              </TagsContainer>
+                <TagsContainer>
+                  {post.tags.map((tag) => (
+                    <Tag key={tag}>
+                      <strong>{tag}</strong>
+                    </Tag>
+                  ))}
+                </TagsContainer>
+              </BlogFooter>
             </DetailsContainer>
           </BlogPost>
         ))}

src/pages/Insights/Posts/Posts.styles.tsx

@@ -55,6 +55,7 @@ export const Content = styled.div`
     display: flex;
     justify-content: center;
     align-items: center;
+    padding: 0 3rem;
   }
 
   .ytplayer {
@@ -136,6 +137,7 @@ export const Content = styled.div`
     font-weight: 375;
     border-bottom: 1px solid rgba(255, 255, 255, 0.87);
     transition: all 200ms linear;
+    cursor: pointer;
   }
 
   blockquote {
@@ -163,7 +165,6 @@ export const Content = styled.div`
       font-size: 3rem;
     }
 
-    p,
     h1,
     h2,
     h3,
@@ -190,15 +191,33 @@ export const Content = styled.div`
       width: 350px;
       transform: scale(0.9);
       overflow-y: hidden;
-      overflow-x: scroll;
+      overflow-x: auto;
     }
 
-    .math {
-      display: block;
-      width: 90vw;
+    .math .math-inline {
+      max-width: 80vw;
       height: 100%;
+      width: 100%;
       overflow-y: hidden;
-      overflow-x: scroll;
+      overflow-x: auto;
+    }
+
+    p {
+      max-width: 100vw;
+      padding: 0 1.8rem;
+    }
+
+    li {
+      max-width: 90vw;
+    }
+
+    mrow {
+      max-width: 90vw;
+      overflow-x: auto;
+    }
+
+    aside {
+      padding: 0 2.2rem;
     }
   }
 `;