diff --git a/site/index.html b/site/index.html index d688555..878d008 100644 --- a/site/index.html +++ b/site/index.html @@ -6,13 +6,39 @@ Puercito Fiction - + -
-

Hola

-

Stay tuned for what's coming.

-
+
+
+

hola

+
+ + + +
+

stories from the little town

+
+ + +
diff --git a/site/styles.css b/site/styles.css index f1a627b..81c4000 100644 --- a/site/styles.css +++ b/site/styles.css @@ -5,29 +5,112 @@ } body { - font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + font-family: 'Special Elite', monospace; line-height: 1.6; - color: #333; - background: #fef6e4; + color: #191919; + background: #ffffff; min-height: 100vh; display: flex; align-items: center; justify-content: center; + padding: 1rem; +} + +.container { + max-width: 20rem; + width: 100%; + display: flex; + flex-direction: column; + gap: 0; +} + +header { + text-align: center; + margin-bottom: 1rem; +} + +h1 { + font-family: 'Permanent Marker', cursive; + font-size: 2.5rem; + font-weight: 400; + margin-bottom: 0.5rem; + color: #191919; + letter-spacing: 0.02em; +} + +.byline { + font-family: 'Special Elite', monospace; + font-size: 0.875rem; + color: #666666; + font-weight: 400; +} + +nav { + display: flex; + justify-content: center; + gap: 2rem; + flex-wrap: wrap; +} + +nav a { + font-family: 'Special Elite', monospace; + font-size: 1rem; + color: #292929; + text-decoration: none; + position: relative; + padding: 0.25rem 0; + transition: color 0.3s ease; +} + +nav a::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 0; + height: 1px; + background-color: #E6507D; + transition: width 0.3s ease; +} + +nav a:hover { + color: #E6507D; +} + +nav a:hover::after { + width: 100%; } main { text-align: center; } -h1 { - font-family: 'Permanent Marker', cursive; - font-size: 3rem; - font-weight: 400; - margin-bottom: 1rem; +footer { + margin-top: auto; } -p { - font-size: 1rem; - color: #666; - font-weight: 300; +.social-links { + display: flex; + justify-content: center; + gap: 1.5rem; +} + +.social-links a { + color: #333333; + transition: all 0.3s ease; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.5rem; + border-radius: 50%; +} + +.social-links a:hover { + color: #E6507D; + transform: translateY(-2px); +} + +.social-links svg { + width: 20px; + height: 20px; }