Home: Difference between revisions
From Treeverse
More actions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
<!DOCTYPE html> | |||
<html lang="en"> | <html lang="en"> | ||
<head> | <head> | ||
| Line 15: | Line 15: | ||
.season2-block { | .season2-block { | ||
border: 1px solid #e5e7eb; | |||
border-radius: 12px; | border-radius: 12px; | ||
background: #ffffff; | background: #ffffff; | ||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); | box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); | ||
overflow: hidden; | overflow: hidden; | ||
margin: 12px 0; | margin: 12px 0; /* left aligned (no auto margins) */ | ||
width: | width: 100%; /* occupy full row so content below isn't squashed */ | ||
max-width: 900px; /* nice readable max width on desktop */ | |||
} | } | ||
.season2-inner { | .season2-inner { | ||
display: grid; | display: grid; | ||
grid-template-columns: 130px auto; | grid-template-columns: 130px auto; /* image + text */ | ||
gap: 12px; | gap: 12px; | ||
padding: 8px 12px; | padding: 8px 12px; /* compact height per your request */ | ||
align-items: center; | align-items: center; | ||
} | } | ||
| Line 39: | Line 40: | ||
.season2-media img { | .season2-media img { | ||
width: 112px; | width: 112px; /* keep same image size */ | ||
height: auto; | height: auto; | ||
border-radius: 8px; | border-radius: 8px; | ||
| Line 48: | Line 49: | ||
.season2-content { | .season2-content { | ||
display: grid; | display: grid; | ||
row-gap: 4px; | row-gap: 4px; | ||
} | } | ||
| Line 56: | Line 57: | ||
color: #111827; | color: #111827; | ||
margin: 0; | margin: 0; | ||
white-space: nowrap; | white-space: nowrap; /* desktop no-wrap */ | ||
} | } | ||
| Line 64: | Line 65: | ||
color: #4b5563; | color: #4b5563; | ||
margin: 0; | margin: 0; | ||
white-space: nowrap; | white-space: nowrap; /* desktop no-wrap */ | ||
} | } | ||
| Line 82: | Line 83: | ||
border-radius: 8px; | border-radius: 8px; | ||
transition: transform 0.15s ease; | transition: transform 0.15s ease; | ||
white-space: nowrap; | white-space: nowrap; /* desktop no-wrap */ | ||
width: fit-content; | width: fit-content; | ||
} | } | ||
.season2-button:hover { | .season2-button:hover { transform: scale(1.03); } | ||
/* Mobile: stack + allow wrapping so nothing gets squashed */ | |||
@media (max-width: 640px) { | |||
.season2-inner { | |||
grid-template-columns: 1fr; /* stack image above text */ | |||
align-items: start; | |||
} | |||
.season2-headline, | |||
.season2-subtitle, | |||
.season2-button { | |||
white-space: normal; /* allow wrap on small screens */ | |||
} | |||
} | } | ||
</style> | </style> | ||
| Line 103: | Line 115: | ||
<p class="season2-headline">🔥 Alpha: Season 2</p> | <p class="season2-headline">🔥 Alpha: Season 2</p> | ||
<p id="season2-heading" class="season2-subtitle">Sneak peek at what's to come</p> | <p id="season2-heading" class="season2-subtitle">Sneak peek at what's to come</p> | ||
<a href=" | <a href="Season 2" class="season2-button">Learn More ➜</a> | ||
</div> | </div> | ||
</div> | </div> | ||
| Line 109: | Line 121: | ||
</body> | </body> | ||
</html> | </html> | ||
<span style="font-size:150%;">'''Welcome to the Treeverse Wiki'''</span> | <span style="font-size:150%;">'''Welcome to the Treeverse Wiki'''</span> | ||