MediaWiki:Common.css: Unterschied zwischen den Versionen
Erscheinungsbild
Die Seite wurde neu angelegt: „→Das folgende CSS wird für alle Benutzeroberflächen geladen.: .writeacy-home { max-width: 1200px; margin: 0 auto; } .writeacy-hero { padding: 4rem 2rem; margin-bottom: 2rem; text-align: center; border-radius: 1rem; background: linear-gradient(135deg, #f4f0e8, #ffffff); border: 1px solid #ded8cc; } .writeacy-hero__title { margin: 0; font-size: clamp(2.8rem, 8vw, 5rem); line-height: 1; letter-spacing: -0.04em; } .writeacy-hero__claim {…“ |
Keine Bearbeitungszusammenfassung |
||
| Zeile 1: | Zeile 1: | ||
/* | /* Main page container */ | ||
.writeacy-home { | .writeacy-home { | ||
max-width: | max-width: 1400px; | ||
margin: 0 auto; | margin: 0 auto; | ||
} | } | ||
/* Compact hero section */ | |||
.writeacy-hero { | .writeacy-hero { | ||
margin-bottom: 2rem; | margin-bottom: 2rem; | ||
padding: 2rem 2.5rem; | |||
text-align: center; | text-align: center; | ||
background: linear-gradient(135deg, #f7f3ed 0%, #ffffff 100%); | |||
background: linear-gradient(135deg, # | border: 1px solid #ddd5ca; | ||
border: 1px solid # | border-radius: 16px; | ||
} | } | ||
/* Main title */ | |||
.writeacy-hero__title { | .writeacy-hero__title { | ||
margin: 0; | margin: 0; | ||
font-size: | font-size: 2.5rem; | ||
line-height: 1; | font-weight: 700; | ||
line-height: 1.1; | |||
letter-spacing: -0.04em; | letter-spacing: -0.04em; | ||
} | } | ||
/* Claim below the title */ | |||
.writeacy-hero__claim { | .writeacy-hero__claim { | ||
margin: | margin-top: 0.25rem; | ||
font-size: 1. | font-size: 1.15rem; | ||
font-style: italic; | font-style: italic; | ||
color: #625d56; | |||
} | } | ||
/* Short description */ | |||
.writeacy-hero__description { | .writeacy-hero__description { | ||
max-width: 700px; | max-width: 700px; | ||
margin: | margin: 1rem auto 0; | ||
font-size: 1.05rem; | font-size: 1.05rem; | ||
line-height: 1. | line-height: 1.5; | ||
color: #403c37; | |||
} | } | ||
/* Card grid */ | |||
.writeacy-grid { | .writeacy-grid { | ||
display: grid; | display: grid; | ||
grid-template-columns: repeat(3, minmax(0, 1fr)); | grid-template-columns: repeat(3, minmax(0, 1fr)); | ||
gap: 1.25rem; | gap: 1.25rem; | ||
} | } | ||
/* Topic card */ | |||
.writeacy-card { | .writeacy-card { | ||
padding: 1.5rem | padding: 1.5rem 1.6rem; | ||
background: #fff; | background: #fff; | ||
box-shadow: 0 | border: 1px solid #ddd8d0; | ||
border-radius: 14px; | |||
box-shadow: 0 2px 10px rgba(40, 32, 24, 0.035); | |||
transition: | |||
transform 160ms ease, | |||
box-shadow 160ms ease, | |||
border-color 160ms ease; | |||
} | |||
/* Card hover effect */ | |||
.writeacy-card:hover { | |||
transform: translateY(-2px); | |||
border-color: #cfc5b8; | |||
box-shadow: 0 8px 24px rgba(40, 32, 24, 0.08); | |||
} | } | ||
/* Card heading */ | |||
.writeacy-card h2 { | .writeacy-card h2 { | ||
margin | margin: 0 0 0.7rem; | ||
padding | padding: 0; | ||
border- | border: 0; | ||
font-size: 1. | font-family: inherit; | ||
font-size: 1.2rem; | |||
font-weight: 650; | |||
line-height: 1.25; | |||
letter-spacing: -0.015em; | |||
color: #211f1c; | |||
} | } | ||
/* Remove default list styling */ | |||
.writeacy-card ul { | .writeacy-card ul { | ||
margin | display: flex; | ||
padding- | flex-direction: column; | ||
gap: 0.1rem; | |||
margin: 0; | |||
padding: 0; | |||
list-style: none; | |||
} | } | ||
/* List item */ | |||
.writeacy-card li { | .writeacy-card li { | ||
margin: 0.45rem 0; | margin: 0; | ||
padding: 0; | |||
} | |||
/* Topic links */ | |||
.writeacy-card li a { | |||
display: block; | |||
position: relative; | |||
padding: 0.45rem 1.8rem 0.45rem 0; | |||
border-radius: 6px; | |||
color: #403b35; | |||
font-size: 0.95rem; | |||
line-height: 1.35; | |||
text-decoration: none; | |||
transition: | |||
background-color 140ms ease, | |||
color 140ms ease, | |||
padding-left 140ms ease; | |||
} | |||
/* Arrow indicator */ | |||
.writeacy-card li a::after { | |||
content: "→"; | |||
position: absolute; | |||
right: 0.5rem; | |||
top: 50%; | |||
transform: translateY(-50%); | |||
color: #aaa198; | |||
opacity: 0; | |||
transition: | |||
opacity 140ms ease, | |||
right 140ms ease; | |||
} | |||
/* Topic link hover effect */ | |||
.writeacy-card li a:hover { | |||
padding-left: 0.5rem; | |||
background: #f7f4ef; | |||
color: #171513; | |||
text-decoration: none; | |||
} | } | ||
.writeacy- | /* Show arrow on hover */ | ||
.writeacy-card li a:hover::after { | |||
right: 0.65rem; | |||
opacity: 1; | |||
} | } | ||
.writeacy- | /* Missing pages */ | ||
.writeacy-card li a.new { | |||
color: #9b4032; | |||
} | } | ||
. | /* Missing page hover effect */ | ||
.writeacy-card li a.new:hover { | |||
color: #762d23; | |||
background: #faf1ee; | |||
} | } | ||
. | /* Footer */ | ||
.writeacy-footer { | |||
margin-top: 2rem; | |||
padding: 1.5rem; | |||
text-align: center; | |||
color: #625d56; | |||
} | } | ||
@media screen and (max-width: | /* Tablet layout */ | ||
@media screen and (max-width: 1100px) { | |||
.writeacy-grid { | .writeacy-grid { | ||
grid-template-columns: repeat(2, minmax(0, 1fr)); | grid-template-columns: repeat(2, minmax(0, 1fr)); | ||
| Zeile 94: | Zeile 167: | ||
} | } | ||
@media screen and (max-width: | /* Mobile layout */ | ||
@media screen and (max-width: 700px) { | |||
.writeacy-hero { | .writeacy-hero { | ||
padding: | padding: 1.5rem; | ||
} | |||
.writeacy-hero__title { | |||
font-size: 2rem; | |||
} | } | ||
.writeacy-grid { | .writeacy-grid { | ||
grid-template-columns: 1fr; | grid-template-columns: 1fr; | ||
gap: 1rem; | |||
} | |||
.writeacy-card { | |||
padding: 1.3rem 1.4rem; | |||
} | } | ||
} | } | ||
Aktuelle Version vom 11. Juli 2026, 13:29 Uhr
/* Main page container */
.writeacy-home {
max-width: 1400px;
margin: 0 auto;
}
/* Compact hero section */
.writeacy-hero {
margin-bottom: 2rem;
padding: 2rem 2.5rem;
text-align: center;
background: linear-gradient(135deg, #f7f3ed 0%, #ffffff 100%);
border: 1px solid #ddd5ca;
border-radius: 16px;
}
/* Main title */
.writeacy-hero__title {
margin: 0;
font-size: 2.5rem;
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.04em;
}
/* Claim below the title */
.writeacy-hero__claim {
margin-top: 0.25rem;
font-size: 1.15rem;
font-style: italic;
color: #625d56;
}
/* Short description */
.writeacy-hero__description {
max-width: 700px;
margin: 1rem auto 0;
font-size: 1.05rem;
line-height: 1.5;
color: #403c37;
}
/* Card grid */
.writeacy-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.25rem;
}
/* Topic card */
.writeacy-card {
padding: 1.5rem 1.6rem;
background: #fff;
border: 1px solid #ddd8d0;
border-radius: 14px;
box-shadow: 0 2px 10px rgba(40, 32, 24, 0.035);
transition:
transform 160ms ease,
box-shadow 160ms ease,
border-color 160ms ease;
}
/* Card hover effect */
.writeacy-card:hover {
transform: translateY(-2px);
border-color: #cfc5b8;
box-shadow: 0 8px 24px rgba(40, 32, 24, 0.08);
}
/* Card heading */
.writeacy-card h2 {
margin: 0 0 0.7rem;
padding: 0;
border: 0;
font-family: inherit;
font-size: 1.2rem;
font-weight: 650;
line-height: 1.25;
letter-spacing: -0.015em;
color: #211f1c;
}
/* Remove default list styling */
.writeacy-card ul {
display: flex;
flex-direction: column;
gap: 0.1rem;
margin: 0;
padding: 0;
list-style: none;
}
/* List item */
.writeacy-card li {
margin: 0;
padding: 0;
}
/* Topic links */
.writeacy-card li a {
display: block;
position: relative;
padding: 0.45rem 1.8rem 0.45rem 0;
border-radius: 6px;
color: #403b35;
font-size: 0.95rem;
line-height: 1.35;
text-decoration: none;
transition:
background-color 140ms ease,
color 140ms ease,
padding-left 140ms ease;
}
/* Arrow indicator */
.writeacy-card li a::after {
content: "→";
position: absolute;
right: 0.5rem;
top: 50%;
transform: translateY(-50%);
color: #aaa198;
opacity: 0;
transition:
opacity 140ms ease,
right 140ms ease;
}
/* Topic link hover effect */
.writeacy-card li a:hover {
padding-left: 0.5rem;
background: #f7f4ef;
color: #171513;
text-decoration: none;
}
/* Show arrow on hover */
.writeacy-card li a:hover::after {
right: 0.65rem;
opacity: 1;
}
/* Missing pages */
.writeacy-card li a.new {
color: #9b4032;
}
/* Missing page hover effect */
.writeacy-card li a.new:hover {
color: #762d23;
background: #faf1ee;
}
/* Footer */
.writeacy-footer {
margin-top: 2rem;
padding: 1.5rem;
text-align: center;
color: #625d56;
}
/* Tablet layout */
@media screen and (max-width: 1100px) {
.writeacy-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Mobile layout */
@media screen and (max-width: 700px) {
.writeacy-hero {
padding: 1.5rem;
}
.writeacy-hero__title {
font-size: 2rem;
}
.writeacy-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.writeacy-card {
padding: 1.3rem 1.4rem;
}
}