diff --git a/ventures/glitztype/style.css b/ventures/glitztype/style.css index a1ef099..5bd8905 100644 --- a/ventures/glitztype/style.css +++ b/ventures/glitztype/style.css @@ -78,15 +78,16 @@ header .note { display: flex; flex-direction: column; align-items: center; - gap: 2rem; + gap: 1.5rem; } .input-area { display: flex; - gap: 1rem; + gap: 0.75rem; width: 100%; - max-width: 500px; + max-width: 640px; justify-content: center; + align-items: center; flex-wrap: wrap; } @@ -114,24 +115,43 @@ header .note { background: var(--primary-dark); } +/* Secondary share link — not a second primary button */ +.input-area a#shareLink { + color: var(--primary); + font-weight: 600; + font-size: 0.95rem; + text-decoration: underline; + padding: 0.75rem 0.25rem; +} + +.input-area a#shareLink:hover { + color: var(--primary-dark); +} + /* Style Grid */ .style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); - gap: 1rem; + gap: 0.75rem; width: 100%; - max-width: 800px; + max-width: 920px; } .style-option { background: white; border: 1px solid var(--border); border-radius: 4px; - padding: 1rem; + padding: 0.5rem 0.5rem 0.65rem; text-align: center; cursor: pointer; transition: all 0.2s; - font-size: 0.9rem; + font-size: 0.8rem; + font-family: inherit; + color: var(--dark); + display: flex; + flex-direction: column; + align-items: center; + gap: 0.25rem; } .style-option:hover { @@ -145,19 +165,33 @@ header .note { font-weight: 600; } -/* Preview */ +.style-thumb { + width: 100%; + height: auto; + background: transparent; + display: block; +} + +/* Preview — transparent canvas, checkerboard so the PNG reads as a sticker */ .preview-container { width: 100%; - max-width: 500px; + max-width: 640px; text-align: center; } #previewCanvas { - max-width: 100%; + width: 100%; + max-width: 640px; height: auto; - border: 1px solid var(--border); border-radius: 4px; - background: white; + background-color: #fff; + background-image: + linear-gradient(45deg, #ececec 25%, transparent 25%), + linear-gradient(-45deg, #ececec 25%, transparent 25%), + linear-gradient(45deg, transparent 75%, #ececec 75%), + linear-gradient(-45deg, transparent 75%, #ececec 75%); + background-size: 20px 20px; + background-position: 0 0, 0 10px, 10px -10px, -10px 0; } /* Controls */ @@ -165,7 +199,7 @@ header .note { display: flex; gap: 2rem; width: 100%; - max-width: 500px; + max-width: 640px; justify-content: center; flex-wrap: wrap; } @@ -179,11 +213,19 @@ header .note { } .controls select, -.controls input[type="range"] { - padding: 0.5rem; +.controls input[type="range"], +.controls input[type="color"] { + padding: 0.35rem; border: 1px solid var(--border); border-radius: 4px; font-size: 0.9rem; + background: white; +} + +.friday-note { + text-align: center; + color: var(--gray); + font-size: 0.85rem; } /* Sections */ @@ -289,30 +331,30 @@ footer a:hover { gap: 0.5rem; text-align: center; } - + header .tagline { margin-left: 0; } - + #try { padding: 1rem; min-height: calc(100vh - 120px); } - + .input-area, .controls { flex-direction: column; align-items: center; gap: 1rem; } - + .input-area input, .input-area button { width: 100%; max-width: 300px; } - + section { padding: 2rem 1rem; } -} \ No newline at end of file +}