c3cat/c3cat-landingpage
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Activity Actions

Compare commits

base: c3cat:10505ec0421a09dbf1c078d9f90539925cd0b416
Branches Tags
c3cat:main
c3cat:new-rgb-guide
c3cat:ci-test-staging-pr
..
compare: c3cat:50ef30e54dc48f364be5a3afda7a33f145f3d51a
Branches Tags
c3cat:new-rgb-guide
c3cat:main
c3cat:ci-test-staging-pr

1 commit
10505ec042 ... 50ef30e54d

Author SHA1 Message Date
lilly
50ef30e54d
 		[wip] new rgb guide
All checks were successful
/ build (pull_request) Successful in 26s
Details
2025-12-15 16:23:05 +01:00
3 changed files with 195 additions and 204 deletions
Download patch file Download diff file Expand all files Collapse all files

98
assets/css/style.css
View file

@ -1,6 +1,3 @@
@layer base, per-site;
@layer base {
:root {
/* Use a shade of the c3cat logos pink, which works nicely as a link color. */
--accent-color-light: #DC049B;
@ -46,6 +43,7 @@
width: 100%;
}
a:link, a:visited {
color: var(--accent-color);
}
@ -92,4 +90,98 @@
margin-right: 0;
}
}
ol.step-by-step-instructions {
margin-top: 1rem;
li {
margin-top: 0.5rem;
margin-bottom: 1rem;
&::marker {
color: color-mix(in hsl, var(--accent-color) 50%, var(--fg-color) 50%);
font-size: larger;
}
&>div {
display: flex;
flex-direction: row;
gap: 1ch;
justify-content: space-between;
}
input[type="checkbox"] {
margin: 4px;
width: 2rem;
height: 2rem;
flex-shrink: 0;
flex-grow: 0;
}
}
}
dl.key-value {
display: grid;
grid-template-columns: 2ch [keys] fit-content(30ch) [values] auto;
column-gap: 2ch;
row-gap: 0.2rem;
&>dt {
text-decoration-line: underline;
text-decoration-color: var(--accent-color);
grid-column-start: keys;
text-align: end;
}
&>dd {
margin-left: 0;
grid-column-start: values;
&::before {
content: "➡";
margin-right: 2ch;
color: color-mix(in hsl, var(--bg-color) 30%, var(--fg-color) 70%);
}
}
}
fieldset#detail-grade-picker {
border-color: color-mix(in hsl, var(--accent-color) 50%, var(--fg-color) 50%);
display: flex;
align-items: baseline;
label {
flex-grow: 1;
margin-left: 0.5ch;
}
input,label {
cursor: pointer;
}
/* input[type="radio"]:checked+label {
text-decoration-line: underline;
text-decoration-color: var(--accent-color);
} */
}
/* hide items with .detail-default-hide if the corresponding .detail-show-(all|simplified|short) is not currently active */
body:not(:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="all"]:checked)) .detail-default-hide.detail-show-all {
display: none;
}
body:not(:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="simplified"]:checked)) .detail-default-hide.detail-show-simplified {
display: none;
}
body:not(:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="short"]:checked)) .detail-default-hide.detail-show-short {
display: none;
}
/* hide items with .detail-hide-(all|simplified|short) if the corresponding radio button is active */
body:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="all"]:checked) .detail-hide-all {
display: none;
}
body:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="simplified"]:checked) .detail-hide-simplified {
display: none;
}
body:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="short"]:checked) .detail-hide-short {
display: none;
}

2
index.html
View file

@ -10,7 +10,6 @@
<style>
/* site-specific styles */
@layer per-site {
.resources-container {
display: flex;
flex-wrap: wrap;
@ -39,7 +38,6 @@
}
}
}
}
</style>
</head>
<body class="container">

101
rgb-ears-39c3.html
View file

@ -5,105 +5,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/style.css" />
<title>c3cat</title>
<style>
@layer per-site {
ol.step-by-step-instructions {
margin-top: 1rem;
li {
margin-top: 0.5rem;
margin-bottom: 1rem;
&::marker {
color: color-mix(in hsl, var(--accent-color) 50%, var(--fg-color) 50%);
font-size: larger;
}
&>div {
display: flex;
flex-direction: row;
gap: 1ch;
justify-content: space-between;
}
input[type="checkbox"] {
margin: 4px;
width: 2rem;
height: 2rem;
flex-shrink: 0;
flex-grow: 0;
}
}
}
dl.key-value {
display: grid;
grid-template-columns: 2ch [keys] fit-content(30ch) [values] auto;
column-gap: 2ch;
row-gap: 0.2rem;
&>dt {
text-decoration-line: underline;
text-decoration-color: var(--accent-color);
grid-column-start: keys;
text-align: end;
}
&>dd {
margin-left: 0;
grid-column-start: values;
&::before {
content: "➡";
margin-right: 2ch;
color: color-mix(in hsl, var(--bg-color) 30%, var(--fg-color) 70%);
}
}
}
fieldset#detail-grade-picker {
border-color: color-mix(in hsl, var(--accent-color) 50%, var(--fg-color) 50%);
display: flex;
align-items: baseline;
label {
flex-grow: 1;
margin-left: 0.5ch;
}
input,label {
cursor: pointer;
}
/* input[type="radio"]:checked+label {
text-decoration-line: underline;
text-decoration-color: var(--accent-color);
} */
}
/* hide items with .detail-default-hide if the corresponding .detail-show-(all|simplified|short) is not currently active */
body:not(:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="all"]:checked)) .detail-default-hide.detail-show-all {
display: none;
}
body:not(:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="simplified"]:checked)) .detail-default-hide.detail-show-simplified {
display: none;
}
body:not(:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="short"]:checked)) .detail-default-hide.detail-show-short {
display: none;
}
/* hide items with .detail-hide-(all|simplified|short) if the corresponding radio button is active */
body:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="all"]:checked) .detail-hide-all {
display: none;
}
body:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="simplified"]:checked) .detail-hide-simplified {
display: none;
}
body:has(#detail-grade-picker input[type="radio"][name="detail-grade-picker"][value="short"]:checked) .detail-hide-short {
display: none;
}
}
</style>
</head>
<body class="container">
<main>
@ -117,7 +18,7 @@
<section id="introduction">
<fieldset id="detail-grade-picker">
<legend>Choose the grade of details you want this guide to appear in</legend>
<input type="radio" id="detail-picker-all" name="detail-grade-picker" value="all" checked>
<input type="radio" id="detail-picker-all" name="detail-grade-picker" value="all">
<label for="detail-picker-all">Show everything</label>
<input type="radio" id="detail-picker-simplified" name="detail-grade-picker" value="simplified">