|
|
|
@ -1,9 +1,47 @@
|
|
|
|
|
:root {
|
|
|
|
|
--alternate-row-color: #e8e8e8;
|
|
|
|
|
--body-margin: 8px; /* Default value in browsers */
|
|
|
|
|
--max-font-size-unitless: 18;
|
|
|
|
|
|
|
|
|
|
/* Measurements of the width of all columns
|
|
|
|
|
except name and description on smaller screens */
|
|
|
|
|
--collapsed-static-column-width-px: 400px;
|
|
|
|
|
--collapsed-static-column-width: calc(
|
|
|
|
|
( 400 / var(--max-font-size-unitless) ) * 1rem
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
/* Measurements of the width of all columns
|
|
|
|
|
except name and description on wider screens */
|
|
|
|
|
--expanded-static-column-width-px: 800px;
|
|
|
|
|
--expanded-static-column-width: calc(
|
|
|
|
|
( 800 / var(--max-font-size-unitless) ) * 1rem
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
/* Space left for the name and description columns,
|
|
|
|
|
in the collapsed and expanded cases. */
|
|
|
|
|
--collapsed-dynamic-columns-width:
|
|
|
|
|
calc(
|
|
|
|
|
100vw
|
|
|
|
|
- var(--collapsed-static-column-width)
|
|
|
|
|
- 2 * var(--body-margin);
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
--expanded-dynamic-columns-width:
|
|
|
|
|
calc(
|
|
|
|
|
100vw
|
|
|
|
|
- var(--expanded-static-column-width)
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
/* Default for wide screens. */
|
|
|
|
|
--dynamic-columns-width: var(--expanded-dynamic-columns-width);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
html {
|
|
|
|
|
font-size: clamp(10px, 2vw, 18px);
|
|
|
|
|
font-size: clamp(10px, 2vw, var(--max-font-size-unitless) * 1px);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
margin: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
html.js .noscript, .hidden {
|
|
|
|
@ -29,6 +67,8 @@ header {
|
|
|
|
|
direction: row;
|
|
|
|
|
/* Push items as far apart as possible */
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
padding-top: var(--body-margin);
|
|
|
|
|
padding-inline: var(--body-margin);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#headline {
|
|
|
|
@ -40,6 +80,7 @@ header {
|
|
|
|
|
|
|
|
|
|
#tbl_communities {
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
|
|
|
|
--cell-padding-h: 0.5em;
|
|
|
|
|
--cell-padding-v: 0.5em;
|
|
|
|
|
--cell-padding: var(--cell-padding-h) var(--cell-padding-v);
|
|
|
|
@ -49,7 +90,6 @@ header {
|
|
|
|
|
|
|
|
|
|
/* Cells in general */
|
|
|
|
|
#tbl_communities th {
|
|
|
|
|
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
@ -112,8 +152,17 @@ header {
|
|
|
|
|
font-family: monospace;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.td_name {
|
|
|
|
|
max-width: 15vw;
|
|
|
|
|
#th_name, .td_name {
|
|
|
|
|
width: calc(
|
|
|
|
|
0.375 * (
|
|
|
|
|
var(--dynamic-columns-width)
|
|
|
|
|
)
|
|
|
|
|
);
|
|
|
|
|
max-width: calc(
|
|
|
|
|
0.375 * (
|
|
|
|
|
var(--dynamic-columns-width)
|
|
|
|
|
)
|
|
|
|
|
);
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
|
}
|
|
|
|
@ -126,9 +175,7 @@ header {
|
|
|
|
|
content: "\2753";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#th_description { }
|
|
|
|
|
.td_description {
|
|
|
|
|
max-width: 25vw;
|
|
|
|
|
position: relative;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
@ -138,6 +185,20 @@ header {
|
|
|
|
|
-webkit-line-clamp: 3;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#th_description, .td_description {
|
|
|
|
|
width: calc(
|
|
|
|
|
0.625 * (
|
|
|
|
|
var(--dynamic-columns-width)
|
|
|
|
|
)
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
max-width: calc(
|
|
|
|
|
0.625 * (
|
|
|
|
|
var(--dynamic-columns-width)
|
|
|
|
|
)
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.td_description::after {
|
|
|
|
|
/* Cover overflowing description lines with internal border. */
|
|
|
|
|
position: absolute;
|
|
|
|
@ -235,6 +296,17 @@ a[href^="https:"] .protocol-indicator::after {
|
|
|
|
|
#th_preview, .td_preview {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:root {
|
|
|
|
|
--dynamic-columns-width: var(--collapsed-dynamic-columns-width);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: 500px) {
|
|
|
|
|
:root {
|
|
|
|
|
/* ! For when descriptions don't wrap and 100vw doesn't work. */
|
|
|
|
|
--dynamic-columns-width: 15rem;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.join_url_container {
|
|
|
|
@ -255,8 +327,11 @@ footer {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
width: 100%;
|
|
|
|
|
max-width: 100%;
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
|
|
padding-top: var(--body-margin);
|
|
|
|
|
padding-inline: var(--body-margin);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
footer p {
|
|
|
|
|