☝️ Kastro'yu daha verimli kullan

KimlikDAO · Jan 2, 2025 · bcedd0b · bcedd0b
1 parent a0a4f8d
commit bcedd0b
Show file tree

Hide file tree

Showing 20 changed files with 278 additions and 109 deletions.
diff --git a/ana/ağ/birim.css b/ana/ağ/birim.css
@@ -1,8 +1,15 @@
+/**
+ * @name {Kök}
+ */
 #ag {
   row-gap: 50px;
   margin: 80px auto;
 }
 
+/**
+ * Açıklama metnini içeren sütun
+ * @name {YazıSütunu}
+ */
 #agy {
   padding: 0 20px;
 }
@@ -99,14 +106,22 @@
   background: #8E2DE2;
 }
 
+/**
+ * KPass imzalarıni gösteren orta sütun
+ * @name {OrtaSütun}
+ */
 #agt {
   overflow: hidden;
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
-#agtc {
+/**
+ * KPass temsili
+ * @name {KPass}
+ */
+#agkp {
   width: 280px;
   height: 145px;
   margin: -25px auto 20px;

diff --git a/ana/ağ/birim.jsx b/ana/ağ/birim.jsx
@@ -1,4 +1,6 @@
+import AnaCss from "../sayfa.css";
 import Css from "./birim.css";
+import OrtakCss from "/birim/ortakcss/birim.css";
 import { keccak256 } from "/lib/crypto/sha3";
 
 /**
@@ -70,27 +72,29 @@ const Grafik = ({ width }) => {
 }
 
 const Ağ = () => (
-  <div id="ag" class="an3">
+  <div id={Css.Kök} class={AnaCss.Üçlü}>
     <Css />
-    <div id="agy">
-      <h2 class="oblu" data-en="Verified and signed by 7+ independent nodes.">7 bağımsız onay ve imza.</h2>
-      <div class="anac"
-        data-en="The contents of each KPass are verified and digitally signed by at least seven independent nodes in the KimlikDAO network, all while fully preserving your privacy.">
-        KPass’ler birbirinden bağımsız en az 7 KimlikDAO ağı düğümünün onay ve dijital imzası ile üretilebilir.
-        Onay aşamasında veri gizliliğiniz tamamıyla korunur.
-      </div>
-      <a href="//github.com/KimlikDAO/kimlikdao-node" target="_blank" rel="noreferrer" class="info btn anust">{{
+    <div id={Css.YazıSütunu}>
+      <h2 class={OrtakCss.Mavi}>{{
+        en: "Verified and signed by 7+ independent nodes.",
+        tr: "7 bağımsız onay ve imza."
+      }}</h2>
+      <div class={AnaCss.Açıklama}>{{
+        en: "The contents of each KPass are verified and digitally signed by at least seven independent nodes in the KimlikDAO network, all while fully preserving your privacy.",
+        tr: "KPass’ler birbirinden bağımsız en az 7 KimlikDAO ağı düğümünün onay ve dijital imzası ile üretilebilir. Onay aşamasında veri gizliliğiniz tamamıyla korunur."
+      }}</div>
+      <a href="//github.com/KimlikDAO/kimlikdao-node" target="_blank" rel="noreferrer" class={[OrtakCss.Düğme, "info", "anust"]}>{{
         en: "Learn about KimlikDAO nodes",
         tr: "KimlikDAO düğümü detayları"
       }}</a>
     </div>
-    <div id="agt">
-      <div id="agtc">
+    <div id={Css.OrtaSütun}>
+      <div id={Css.KPass}>
         <div class="kpip">
-          <div class="kpl" data-en="City of birth">Doğum yeri</div>
-          <div data-en="Istanbul">İstanbul</div>
-          <div class="kpl" data-en="Gender">Cinsiyet</div>
-          <div data-en="F">K</div>
+          <div class="kpl">{{ tr: "Doğum yeri", en: "City of birth" }}</div>
+          <div>{{ tr: "İstanbul", en: "Istanbul" }}</div>
+          <div class="kpl">{{ tr: "Cinsiyet", en: "Gender" }}</div>
+          <div>{{ tr: "K", en: "F" }}</div>
         </div>
         <svg id="kplo" height={24} width={24}>
           <use href="#bak" width={24} height={24} />

diff --git a/ana/hero/birim.css b/ana/hero/birim.css
@@ -1,3 +1,7 @@
+/**
+ * Hero bileşeni
+ * @name {Kök}
+ */
 #he {
   padding: 40px 60px;
   border-radius: 22px;
@@ -13,13 +17,21 @@
     radial-gradient(circle at 75% 60%, rgba(99, 55, 186, 0.3) 0%, rgba(255, 255, 255, 0) 40%);
 }
 
+/**
+ * Hero içeriği sergi + telefonu içerir
+ * @name {İçerik}
+ */
 #het {
   display: flex;
   justify-content: space-between;
   margin: 0 auto;
   max-width: 1200px;
 }
 
+/**
+ * Başlık ve sergiyi içeren sol kısım
+ * @name {Sol}
+ */
 #hes {
   margin: auto 20px;
   max-width: 750px;
@@ -33,10 +45,18 @@ h1 {
   text-align: left;
 }
 
+/**
+ * Eylem duğmeleri
+ * @name {Düğmeler}
+ */
 #heb {
   display: flex;
 }
 
+/**
+ * Al duğmesi
+ * @name {AlDüğmesi}
+ */
 #hel {
   margin-right: 20px;
 }

diff --git a/ana/hero/birim.jsx b/ana/hero/birim.jsx
@@ -1,17 +1,21 @@
 import Css from "./birim.css";
 import Sergi from "./sergi/birim";
+import OrtakCss from "/birim/ortakcss/birim.css";
 import Telefon from "/birim/telefon/birim.jsx";
 import { Page } from "/crate";
 
 const Hero = () => (
-  <div id="he">
+  <div id={Css.Kök}>
     <Css />
-    <div id="het">
-      <div id="hes">
-        <h1 data-en="KPass: Your ID token for web3">KPass: Blokzincirdeki kimlik kartın</h1>
+    <div id={Css.İçerik}>
+      <div id={Css.Sol}>
+        <h1>{{
+          en: "KPass: Your ID token for web3",
+          tr: "KPass: Blokzincirdeki kimlik kartın"
+        }}</h1>
         <Sergi />
-        <div id="heb">
-          <a href={Page.Al} id="hel" class="act btn">{{
+        <div id={Css.Düğmeler}>
+          <a href={Page.Al} id={Css.AlDüğmesi} class={[OrtakCss.Düğme, "act"]}>{{
             tr: "Hemen KPass al | ₺29",
             en: "Mint your KPass | $1"
           }}</a>

diff --git a/ana/hero/sergi/birim.css b/ana/hero/sergi/birim.css
@@ -1,3 +1,7 @@
+/**
+ * Sergi bileşeni
+ * @name {Kök}
+ */
 #se {
   max-width: 550px;
   margin-left: 2px;

diff --git a/ana/hero/sergi/birim.jsx b/ana/hero/sergi/birim.jsx
@@ -7,7 +7,7 @@ export const Boncuklar = dom.div("sen");
 export const Kartlar = dom.ul("sem");
 
 const Sergi = () => (
-  <div id="se">
+  <div id={Css.Kök}>
     <Css />
     <div id="sec">
       <Kartlar>

diff --git a/ana/kazan/birim.css b/ana/kazan/birim.css
@@ -1,3 +1,6 @@
+/**
+ * @name {İçerik}
+ */
 #kaa {
   padding: 20px;
-}
+}
diff --git a/ana/kazan/birim.jsx b/ana/kazan/birim.jsx
@@ -1,19 +1,31 @@
+import AnaCss from "../sayfa.css";
 import Css from "./birim.css";
 import EliptikEğriler from "/birim/blog/eliptik-egriler/birim.jsx";
 import EliptikImza from "/birim/blog/eliptik-imza/birim.jsx";
+import OrtakCss from "/birim/ortakcss/birim.css";
 
 export default () => (
-  <div id="ka" class="an3">
+  <div id="ka" class={AnaCss.Üçlü}>
     <Css />
-    <div id="kaa">
-      <h2 data-en="Learn & Earn with your KPass." class="oblu">KPass’inle öğren ve kazan.</h2>
-      <span class="anac"
-        data-en="Delve into KimlikDAO's blog for in-depth articles on cryptography and the mathematical aspects of cryptocurrencies. Answer a few simple questions and present your KPass’s completely anonymous HumanID section to claim your reward from a pool worth tens of thousands of dollars. Coming soon!">
-        KimlikDAO blog’un bilgi dolu ve ödüllü makalelerini oku, basit soruları cevapla,
-        KPass’inin %100 anonim HumanID kısmını sunarak on binlerce dolarlık havuzdan
-        ödülünü topla. Çok yakında!</span><br />
-      <a href={{ en: "//blog.kimlikdao.org/en", tr: "//blog.kimlikdao.org/tr" }} class="info btn anust"
-        data-en="Learn & earn (Soon!)">Öğren ve kazan (Yakında!)</a>
+    <div id={Css.İçerik}>
+      <h2 class={OrtakCss.Mavi}>{{
+        en: "Learn & Earn with your KPass.",
+        tr: "KPass’inle öğren ve kazan."
+      }}</h2>
+      <span class={AnaCss.Açıklama}>{{
+        en: "Delve into KimlikDAO's blog for in-depth articles on cryptography and the " +
+          "mathematical aspects of cryptocurrencies. Answer a few simple questions and present " +
+          "your KPass’s completely anonymous HumanID section to claim your reward from a pool " +
+          "worth tens of thousands of dollars. Coming soon!",
+        tr: "KimlikDAO blog’un bilgi dolu ve ödüllü makalelerini oku, basit soruları cevapla, " +
+          "KPass’inin %100 anonim HumanID kısmını sunarak on binlerce dolarlık havuzdan ödülünü topla.Çok yakında!"
+      }}</span>
+      <br />
+      <a href={{ en: "//blog.kimlikdao.org/en", tr: "//blog.kimlikdao.org/tr" }}
+        class={[OrtakCss.Düğme, "info", "anust"]}>{{
+          en: "Learn & earn (Soon!)",
+          tr: "Öğren ve kazan (Yakında!)"
+        }}</a>
     </div>
     <EliptikImza href="" />
     <EliptikEğriler href="" />

diff --git a/ana/raporlar/birim.jsx b/ana/raporlar/birim.jsx
@@ -1,12 +1,14 @@
-import Jan24 from "birim/blog/2025.01/birim.jsx";
+import AnaCss from "../sayfa.css";
+import Jan25 from "/birim/blog/2025.01/birim.jsx";
+import OrtakCss from "/birim/ortakcss/birim.css";
 
 export default () => (
-  <div id="ra" class="an3">
+  <div id="ra" class={AnaCss.Üçlü}>
     <div></div>
-    <Jan24 href={{ en: "", tr: "" }} loading="lazy" />
-    <div class="ansag">
-      <h2 data-en="KimlikDAO progress reports." class="oprp">KimlikDAO ilerleme raporları.</h2>
-      <span class="anac">{{
+    <Jan25 href={{ en: "", tr: "" }} loading="lazy" />
+    <div class={AnaCss.SağaYaslı}>
+      <h2 data-en="KimlikDAO progress reports." class={OrtakCss.Mor}>KimlikDAO ilerleme raporları.</h2>
+      <span class={AnaCss.Açıklama}>{{
         en:
           "Read about the progress at KimlikDAO, from advancements in the KimlikDAO " +
           "protocol to new uses of KPass, from the events we participate in, to the " +
@@ -16,7 +18,10 @@ export default () => (
           "katıldığımız etkinliklerden, kurduğumuz yeni ortaklıklara tüm " +
           "gelişmelerini aylık ilerleme raporlarından okuyun."
       }}</span><br />
-      <a href="//blog.kimlikdao.org" class="more btn anust" data-en="All progress reports">Tüm ilerleme raporları</a>
+      <a href="//blog.kimlikdao.org" class={[OrtakCss.Düğme, "more", "anust"]}>{{
+        en: "All progress reports",
+        tr: "Tüm ilerleme raporları"
+      }}</a>
     </div>
   </div >
 );
diff --git a/ana/sahipler/birim.css b/ana/sahipler/birim.css
@@ -1,7 +1,13 @@
+/**
+ * @name {Kök}
+ */
 #sa {
   background: linear-gradient(90deg, #F8F8F8 -9.07%, rgba(132, 199, 255, 0.2) 100%, rgba(255, 255, 255, 0.8) 69.02%);
 }
 
+/**
+ * @name {İçerik}
+ */
 #sai {
   display: flex;
   flex-direction: row-reverse;
@@ -11,6 +17,10 @@
   padding: 0 20px;
 }
 
+/**
+ * Ağları gösteren balonlar
+ * @name {Balonlar}
+ */
 #sak {
   margin: 0 auto;
   padding: 35px 0 50px;

diff --git a/ana/sahipler/birim.jsx b/ana/sahipler/birim.jsx
@@ -1,4 +1,5 @@
 import OkResmi from "../ok.svg";
+import AnaCss from "../sayfa.css";
 import Css from "./birim.css";
 import { ağResmi } from "/birim/ağlar/birim";
 import { Page } from "/crate";
@@ -33,10 +34,10 @@ const Balon = ({ chainId }) => (
 );
 
 const Sahipler = () => (
-  <div id="sa">
+  <div id={Css.Kök}>
     <Css />
-    <div id="sai">
-      <div class="ansag">
+    <div id={Css.İçerik}>
+      <div class={AnaCss.SağaYaslı}>
         <h2>{{
           tr: <>Ağlara göre<br />KPass sahipleri.</>,
           en: <>KPass holders<br />by chain.</>
@@ -51,7 +52,7 @@ const Sahipler = () => (
         }} <OkResmi inline /></a>
         </div>
       </div>
-      <div id="sak">{Object.keys(Tablo).map((chainId) => <Balon chainId={chainId} />)}</div>
+      <div id={Css.Balonlar}>{Object.keys(Tablo).map((chainId) => <Balon chainId={chainId} />)}</div>
     </div>
   </div>
 );

diff --git a/ana/sayfa.css b/ana/sayfa.css
@@ -34,6 +34,10 @@
   line-height: 1.4;
 }
 
+/**
+ * Üç sütunlu alt hero
+ * @name {Üçlü}
+ */
 .an3 {
   display: grid;
   gap: 20px;
@@ -42,6 +46,10 @@
   max-width: 1200px;
 }
 
+/**
+ * Raporların sağ üstteki eylem düğmesi
+ * @name {SağaYaslı}
+ */
 .ansag {
   text-align: right;
   padding: 0 20px;