feat: added contents on main

src/App.css

@@ -11,7 +11,7 @@
   justify-content: center;
   height: var(--header-height);
   width: var(--header-width);
-  color: var(--secondary);
+  color: rgb(var(--secondary));
   gap: 16px;
 }
 
@@ -24,8 +24,8 @@
 
 .bar-header > *:hover {
   scale: 1.2;
-  background-color: var(--background);
+  background-color: rgb(var(--background));
 }
 .bar-header {
     max-width: calc(var(--uibar-width));
-}
+}

src/components/contents.css

@@ -1 +1,133 @@
+.contents {
+  width: 100%;
+  height: 100%;
+  gap: 24px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+  height: 100%;
+}
+
+.content > * {
+  width: 100%;
+  height: 100%;
+}
+
+.contents-left {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  color: rgb(var(--primary));
+}
+
+.lang-title {
+  margin: 0;
+  padding: 0;
+  font-size: 12em;
+}
+
+.subtitle {
+  padding: 0;
+  font-size: 4em;
+  color: rgb(var(--foreground));
+}
+
+.contents-fg {
+  width: 100%;
+  height: 100%;
+  z-index: 2; 
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding-bottom: 24px;
+  padding-top: 24px;
+}
+.content-center {
+  width: 100%;
+}
+
+.right-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: flex-end;
+  gap: 20px;
+}
+
+.topic-preview:hover{
+  transition-duration:300ms;
+  scale: 0.98;
+}
+
+.topic-preview {
+  cursor: pointer;
+
+  color: rgb(var(--foreground));
+  border-color: rgb(var(--mid));
+
+  border-radius: 16px;
+  border-width: 1px;
+  border-style: solid;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+
+  width: 192px;
+  padding: 0px 24px 24px 24px;
+}
+
+.topic-preview p {
+  font-size: 16px;
+  text-align: center;
+}
+
+.topic {
+  --topic-padding: 12px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  width: calc(100% - var(--topic-padding) * 2);
+  height: 100%;
+
+  border-radius: var(--window-round);
+  padding: var(--topic-padding);
+
+  opacity: 1;
+  transform: scale(0) translateY(-50%);
+  animation: spawn 700ms forwards cubic-bezier(0.99,0.28,0.00,1.39); /* duração + forwards */
+  background-color: rgb(var(--background-contrasted));
+  box-shadow: 0px 0px 24px rgb(var(--background-contrasted));
+}
+
+
+@keyframes spawn {
+  to {
+
+    transform: scale(1);
+  }
+}
+
+.topic-title, .data-title {
+  margin: 0px;
+  padding: 0;
+}
+.topic-preview .topic-title {
+  margin-top: 12px;
+}
+
+.topic-title {
+  font-size: 24px;
+}
 

src/components/contents.tsx

@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import { useRef, useState } from "react";
 import "./contents.css";
 
 export function* generator_of<T, R>(value: Iterable<T, R>) {
@@ -7,10 +7,27 @@ export function* generator_of<T, R>(value: Iterable<T, R>) {
 
 export interface PageContentArgs {
   title: string,
-  children: React.ReactNode
+  children: React.ReactNode,
+  click?: () => void,
 }
-export function PageTopic(args: PageContentArgs) {
+
+export function Topic(args: PageContentArgs) {
   return <div className="topic">
+    <h1 className="data-title">{args.title}</h1>
+    <>{args.children}</>
+  </div>
+}
+
+export function GettingStarted() {
+  return <>
+    <Topic title="Getting started">
+      Bla bla bla bli blo blu
+    </Topic>
+  </>
+}
+
+export function TopicPreview(args: PageContentArgs) {
+  return <div className="topic-preview" onClick={args.click}>
     <div><h1 className="topic-title">{args.title}</h1></div>
     <div>{args.children}</div>
   </div>
@@ -19,30 +36,32 @@ export function PageTopic(args: PageContentArgs) {
 /** The contents of the language, such as goal, rfc, doc, etc. It's only a bridge to them */
 export default function Contents() {
   const left = useRef<HTMLElement>(null);
-  const right = useRef<HTMLElement>(null);
+  const [centerChild, setCenterChild] = useState(null as React.ReactNode);
+
 
   return <div className="contents">
-    <div className="contents-bg">
+    <div className="contents-left">
       <h1 className="lang-title">Slynx</h1>
       <h2 className="subtitle">Building Your Mom So You Don't Have To</h2>
     </div>
-    <div className="contents-fg">
-      <div className="content left-content" ref={left as any}>
-        <PageTopic title="TOPICO">Abacate</PageTopic>
-        <PageTopic title="TOPICO">Abacate</PageTopic>
-        <PageTopic title="TOPICO">Gengibre</PageTopic>
-        <PageTopic title="TOPICO">Gergilim</PageTopic>
-      </div>
-      <div className="preview-contents content center-contenr">
-
-      </div>
-      <div className="content right-content" ref={right as any}>
-        <PageTopic title="TOPICO">Inhonho</PageTopic>
-        <PageTopic title="TOPICO">Xicarinha</PageTopic>
-        <PageTopic title="TOPICO">Las Ocho Chaves</PageTopic>
-        <PageTopic title="TOPICO">Nikolas Maduro</PageTopic>
-      </div>
+    <div className="content-center">
+      {centerChild ? centerChild : false}
     </div>
+    <div className="right-content" ref={left as any}>
+      <TopicPreview title="About">
+        <p>Check the goals and the language aims on the future</p>
+      </TopicPreview>
 
+      <TopicPreview title="Getting Started" click={() => setCenterChild(GettingStarted())}>
+        <p>Start here with links and basic informations about the language</p>
+      </TopicPreview>
+      <TopicPreview title="Links">
+        <p>Get related links to communities, tooling, and etc</p>
+      </TopicPreview>
+      <TopicPreview title="Changelogs">
+        <p>See the changelogs and what've changed on the lang</p>
+      </TopicPreview>
+      <TopicPreview title="FAQ">Check frequent questions</TopicPreview>
+    </div>
   </div>
 }

src/components/previews.css

@@ -0,0 +1,46 @@
+
+.previews {
+  --padding: 10%;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  width: calc(100% - var(--padding) * 2);
+  height: 50%;
+  margin: var(--padding);
+
+}
+
+.previews > :nth-child(1) {
+  border-top-left-radius: 20px;
+  border-bottom-left-radius: 20px;
+}
+.previews > :last-child {
+  border-top-right-radius: 20px;
+  border-bottom-right-radius: 20px;
+}
+
+.previews > * {
+  cursor: pointer;
+  overflow-y: hidden;
+  transition-duration: 300ms;
+  height: var(--first-child-height);
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: rgb(var(--primary));
+  background-color: rgb(var(--background-contrasted));
+  box-shadow: 0px 0px 12px rgb(var(--background-contrasted));
+}
+.previews > *:hover {
+  height: 100%;
+  color: rgb(var(--secondary));
+  background-color: rgb(var(--foreground));
+  box-shadow: 0px 0px 12px rgb(var(--foreground));
+}
+
+.previews p {
+  font-size: 20px;
+  width: 75%;
+  text-align: center;
+}

src/components/previews.tsx

@@ -0,0 +1,26 @@
+import { useEffect, useRef } from "react"
+import "./previews.css";
+export default function Previews() {
+  const previews = useRef<HTMLElement>(null as any as HTMLElement);
+  useEffect(() => {
+    for (const child of previews.current.children) {
+      const first_child = child.firstElementChild as HTMLElement;
+      if (!first_child) continue;
+      (child as HTMLElement).style.setProperty("--first-child-height", (first_child.offsetHeight * 2 || 100) + "px");
+    }
+  }, []);
+  return <div className="previews" ref={previews as any}>
+    <div>
+      <h1>Docs</h1>
+      <p>Check the documentation of the language</p>
+    </div>
+    <div>
+      <h1>Contributing</h1>
+      <p>Feel free to join the discord server and contribute with the language</p>
+    </div>
+    <div>
+      <h1>Communities</h1>
+      <p>If interested on</p>
+    </div>
+  </div>
+}

src/components/theme_switcher.css

@@ -6,7 +6,7 @@
   cursor: pointer;
 }
 .anim-wrapper:hover {
-  background-color: var(--background);
+  background-color: rgb(var(--background));
   scale: 1.2;
 }
 #overlay {
@@ -17,7 +17,7 @@
   clip-path: circle(0% at var(--cx) var(--cy));
   animation-name: getHuge;
   animation-duration: 3s;
-  --target: var(--foreground);
+  --target: rgb(var(--foreground));
 }
 
 @keyframes getHuge {
@@ -38,6 +38,6 @@
     background: var(--target);
     width: 100vw;
     height: 100vh;
-    --target:var(--background);
+    --target:rgb(var(--background));
   }
 }

src/components/uibar.css

@@ -3,7 +3,7 @@
   position: relative;
   width: 100%;
   height: 100%;
-  background-color: var(--foreground);
+  background-color: rgb(var(--foreground));
   border-radius: 20px;
   overflow: hidden;
 }
@@ -46,9 +46,10 @@
     top: var(--uibar-small-width);
     right: var(--uibar-small-width);
     bottom: var(--uibar-small-width);
-    background-color: var(--background);
+    background-color: rgb(var(--background));
     border-radius: var(--ui-round);
     z-index: 0;
+    padding: var(--uibar-width);
 }
 
 .uibar.right {