Improve SiteCard, defining padding as prop

atomicojs · Aug 9, 2022 · 77886e1 · 77886e1
1 parent c5f4d04
commit 77886e1
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 20 deletions.
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "0.2.1",
+    "version": "0.3.0",
     "type": "module",
     "scripts": {
         "start": "vite --force",

diff --git a/src/site-big-title/site-big-title.tsx b/src/site-big-title/site-big-title.tsx
@@ -14,15 +14,16 @@ siteBigTitle.styles = [
     tokens,
     css`
         :host {
-            --font-big-label: 30vh;
-            font-size: var(--font-big-label);
+            --font-weight: var(--font-weight-title);
+            --font-size: 30vh;
+            font-size: var(--font-size);
             color: transparent;
             text-stroke: 1px var(--color-orbe);
             -webkit-text-stroke: 1px var(--color-orbe);
             position: relative;
             line-height: 1em;
-            font-weight: var(--font-weight-title);
-            margin-bottom: calc(var(--font-big-label) * -0.25);
+            font-weight: var(--font-weight);
+            margin-bottom: calc(var(--font-size) * -0.25);
         }
         .gradient {
             position: absolute;
@@ -38,7 +39,7 @@ siteBigTitle.styles = [
         }
         @media (max-width: 768px) {
             :host {
-                --font-big-label: 15vh;
+                --font-size: 15vh;
             }
         }
     `,

diff --git a/src/site-card/site-card.tsx b/src/site-card/site-card.tsx
@@ -17,6 +17,7 @@ function siteCard({ dotColor }: Props<typeof siteCard>) {
 siteCard.props = {
     dotColor: { type: String, reflect: true },
     overflow: { type: Boolean, reflect: true },
+    padding: { type: Boolean, reflect: true },
 };
 
 siteCard.styles = [
@@ -28,7 +29,7 @@ siteCard.styles = [
             --radius: var(--size-2);
             --dot-size: var(--size-2);
             --dot-transition: 1s ease all;
-            padding: var(--padding);
+
             background: var(--color-card-background);
             border: 1px solid var(--color-card-border);
             box-sizing: border-box;
@@ -70,6 +71,9 @@ siteCard.styles = [
         :host([overflow]) {
             overflow: hidden;
         }
+        :host([padding]) {
+            padding: var(--padding);
+        }
         .content {
             display: grid;
             position: relative;

diff --git a/src/site-why.tsx b/src/site-why.tsx
@@ -188,7 +188,7 @@ function why() {
                                 </SiteText>
                             </SiteText>
                         </SiteGrid>
-                        <SiteCard overflow>
+                        <SiteCard>
                             <CompareContent style={`padding: var(--size-4)`}>
                                 <img
                                     slot="content"

diff --git a/src/site.tsx b/src/site.tsx
@@ -135,7 +135,7 @@ function site() {
                                 IMPORT
                             </SiteText>
                         </SiteCount>
-                        <SiteCard>
+                        <SiteCard padding overflow>
                             <img class="step-img" src={imgStep1} alt="" />
                         </SiteCard>
                     </div>
@@ -145,7 +145,7 @@ function site() {
                                 WEBCOMPONENT
                             </SiteText>
                         </SiteCount>
-                        <SiteCard>
+                        <SiteCard padding overflow>
                             <img class="step-img" src={imgStep2} alt="" />
                         </SiteCard>
                     </div>
@@ -155,7 +155,7 @@ function site() {
                                 STYLES
                             </SiteText>
                         </SiteCount>
-                        <SiteCard>
+                        <SiteCard padding overflow>
                             <img class="step-img" src={imgStep3} alt="" />
                         </SiteCard>
                     </div>
@@ -165,7 +165,7 @@ function site() {
                                 DECLARATIONS
                             </SiteText>
                         </SiteCount>
-                        <SiteCard>
+                        <SiteCard padding overflow>
                             <img class="step-img" src={imgStep4} alt="" />
                         </SiteCard>
                     </div>
@@ -183,7 +183,7 @@ function site() {
                 </SiteText>
                 <img slot="right" src={imgAtom} />
                 <SiteGrid slot="content" columns="1, 2 768px, 3 980px">
-                    <SiteCard dotColor="#FFE600">
+                    <SiteCard padding overflow dotColor="#FFE600">
                         <SiteText color="subtitle">
                             <h4>@atomico/exports</h4>
                         </SiteText>
@@ -194,7 +194,7 @@ function site() {
                             </small>
                         </SiteText>
                     </SiteCard>
-                    <SiteCard dotColor="#0088FF">
+                    <SiteCard padding overflow dotColor="#0088FF">
                         <SiteText color="subtitle">
                             <h4>@atomico/router</h4>
                         </SiteText>
@@ -205,7 +205,7 @@ function site() {
                             </small>
                         </SiteText>
                     </SiteCard>
-                    <SiteCard dotColor="#00FF90">
+                    <SiteCard padding overflow dotColor="#00FF90">
                         <SiteText color="subtitle">
                             <h4>@atomico/store</h4>
                         </SiteText>
@@ -216,7 +216,7 @@ function site() {
                             </small>
                         </SiteText>
                     </SiteCard>
-                    <SiteCard dotColor="#00FF90">
+                    <SiteCard padding overflow dotColor="#00FF90">
                         <SiteText color="subtitle">
                             <h4>@atomico/hooks</h4>
                         </SiteText>
@@ -227,7 +227,7 @@ function site() {
                             </small>
                         </SiteText>
                     </SiteCard>
-                    <SiteCard dotColor="#00FF90">
+                    <SiteCard padding overflow dotColor="#00FF90">
                         <SiteText color="subtitle">
                             <h4>@atomico/react</h4>
                         </SiteText>
@@ -238,7 +238,7 @@ function site() {
                             </small>
                         </SiteText>
                     </SiteCard>
-                    <SiteCard dotColor="#00FF90">
+                    <SiteCard padding overflow dotColor="#00FF90">
                         <SiteText color="subtitle">
                             <h4>@atomico/router</h4>
                         </SiteText>
@@ -249,7 +249,7 @@ function site() {
                             </small>
                         </SiteText>
                     </SiteCard>
-                    <SiteCard dotColor="#00FF90">
+                    <SiteCard padding overflow dotColor="#00FF90">
                         <SiteText color="subtitle">
                             <h4>@atomico/components</h4>
                         </SiteText>
@@ -260,7 +260,7 @@ function site() {
                             </small>
                         </SiteText>
                     </SiteCard>
-                    <SiteCard dotColor="#00FF90">
+                    <SiteCard padding overflow dotColor="#00FF90">
                         <SiteText color="subtitle">
                             <h4>@atomico/ui</h4>
                         </SiteText>