responsive font sizes for cards, fixed ratio card-content to card-image, minor fixes

This commit is contained in:
marko
2025-07-15 11:04:38 +02:00
parent bcf16151c0
commit 4e25454507
4 changed files with 50 additions and 13 deletions

View File

@@ -1,4 +1,4 @@
version: '3.3'
version: "3.3"
services:
web:
# check the php version you need for your project
@@ -7,7 +7,7 @@ services:
context: .
dockerfile: PHP.dockerfile
ports:
# this line maps your pc port to the container port
# this line maps your pc port to the container port
- "8080:80"
depends_on:
# this line links this container to the db container
@@ -22,11 +22,11 @@ services:
image: mariadb:latest
restart: always
environment:
MYSQL_USER: "cwsvjudo_marko"
MYSQL_DATABASE: "cwsvjudo_main"
MYSQL_ROOT_PASSWORD_FILE: /run/secrets/db_root_password
MYSQL_PASSWORD_FILE: /run/secrets/db_password
MYSQL_TCP_PORT: 3306
MARIADB_USER: "cwsvjudo_marko"
MARIADB_DATABASE: "cwsvjudo_main"
MARIADB_ROOT_PASSWORD_FILE: /run/secrets/db_root_password
MARIADB_PASSWORD_FILE: /run/secrets/db_password
MARIADB_TCP_PORT: "3306"
volumes:
# this line maps the content of ./mysql_data in your pc to the /var/lib/mysql of the container
- mysqldata:/var/lib/mysql
@@ -55,4 +55,4 @@ secrets:
db_root_password:
file: db_root_password.txt
db_password:
file: db_password.txt
file: db_password.txt

View File

@@ -1,9 +1,46 @@
.card.horizontal .card-image {
/* width: 38%; */
.card.horizontal>.card-image {
width: 38.2%;
}
.card.horizontal>.card-content {
width: 61.2%;
hyphens: auto;
}
.card.horizontal .card-image img {
.card.horizontal>.card-image>img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* responsive font sizes */
.card-content{
font-size: 3cqw;
}
@media only screen and (min-width: 600px) {
.card-content {
font-size: 2cqw;
}
}
@media only screen and (min-width: 992px) {
.card-content {
font-size: 1.5cqw;
}
}
@media only screen and (min-width: 1200px) {
.card-content {
font-size: 1.25cqw;
}
}
.card .card-title {
font-size: 1.618em;
}
.card time {
font-size: 0.618em;
}

View File

@@ -2,5 +2,5 @@
width: 100%;
}
.promo>i {
font-size: 7rem;
font-size: 4rem;
}

View File

@@ -165,7 +165,7 @@ function main($sections, $wallpapers)
<body>
<header>
<nav class="nav-extended">
<nav class="nav navbar">
<div class="nav-wrapper" style="font-family: 'Orbitron-Medium', Impact, Charcoal, sans-serif;">
<!-- <img style="height:100%;width:auto;" width="128" height="104" title="Judo im Chemnitzer WSV"
alt="Judo im Chemnitzer WSV - Logo" src="/ressourcen/graphiken/logos/cwsvJudoLogoWappen.128w.png"