Files
NewsSite/volumes/web/static/css/blog.css
hubble_dubble 3667c678e4 Please enter the commit message for your changes. Lines starting
with '#' will be ignored, and an empty message aborts the commit.

On branch main

Initial commit

Changes to be committed:
	new file:   .DS_Store
	new file:   .env
	new file:   .gitignore
	new file:   ai-worker/Dockerfile
	new file:   ai-worker/requirements.txt
	new file:   ai-worker/worker.py
	new file:   background-worker/Dockerfile
	new file:   background-worker/go.mod
	new file:   background-worker/go.sum
	new file:   background-worker/main.go
	new file:   background-worker/market.go
	new file:   background-worker/rmv.go
	new file:   background-worker/rss.go
	new file:   background-worker/sql_work.go
	new file:   db/Dockerfile
	new file:   db/init.sql
	new file:   docker-compose.yml
	new file:   server-app/dockerfile
	new file:   server-app/go.mod
	new file:   server-app/go.sum
	new file:   server-app/main.go
	new file:   volumes/.DS_Store
	new file:   volumes/db-init/.DS_Store
	new file:   volumes/db-init/data/news_rss_feeds.csv
	new file:   volumes/web/.DS_Store
	new file:   volumes/web/static/css/blog.css
	new file:   volumes/web/static/css/index-lite.css
	new file:   volumes/web/static/css/index.css
	new file:   volumes/web/static/css/mandelbrot.css
	new file:   volumes/web/static/img/minecraft.png
	new file:   volumes/web/static/js/blog.js
	new file:   volumes/web/static/js/index-lite.js
	new file:   volumes/web/static/js/index.js
	new file:   volumes/web/static/js/mandelbrot.js
	new file:   volumes/web/static/media/cantina.mp3
	new file:   volumes/web/static/media/countdowns.json
	new file:   volumes/web/static/media/gong.mp4
	new file:   volumes/web/template/blog.html
	new file:   volumes/web/template/index-lite.html
	new file:   volumes/web/template/index.html
	new file:   volumes/web/template/mandelbrot.html
2026-01-26 00:19:54 +01:00

91 lines
1.6 KiB
CSS

:root {
--tile-size: 512px;
--gap: 0px;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
background: #000;
color: #f5f5f5;
font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}
main.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--gap);
width: 100vw;
min-height: 100vh;
}
.tile {
position: relative;
width: min(var(--tile-size), 100%);
aspect-ratio: 1 / 1;
background: #111;
border-radius: 0;
overflow: hidden;
cursor: pointer;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tile:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7);
}
.tile img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: filter 0.25s ease;
}
.tile.open img {
filter: blur(2px) brightness(0.4);
}
.overlay {
position: absolute;
inset: 0;
padding: 16px;
display: flex;
flex-direction: column;
gap: 10px;
background: linear-gradient(180deg, rgba(0,0,0,0.78), rgba(0,0,0,0.92));
opacity: 0;
transition: opacity 0.25s ease;
overflow: auto;
}
.tile.open .overlay {
opacity: 1;
}
.overlay h3 {
margin: 0;
font-size: 18px;
line-height: 1.3;
}
.overlay p {
margin: 0;
font-size: 14px;
line-height: 1.45;
color: #d8d8d8;
white-space: pre-line;
}
.overlay a {
margin-top: auto;
align-self: flex-start;
color: #8ad8ff;
text-decoration: none;
font-weight: 600;
letter-spacing: 0.2px;
}
.overlay a:hover {
text-decoration: underline;
}
.empty {
grid-column: 1 / -1;
text-align: center;
color: #888;
padding: 40px 0;
}