gravel
/
sessioncommunities.online
mirror of https://codeberg.org/gravel/sessioncommunities.online
1
0
Fork 0
Code Issues 2 Packages Projects Releases Wiki Activity

Optimize CSS

Browse Source
dev
gravel 2 years ago
parent fc14e4586a
commit 68aada55dd
Signed by: gravel
GPG Key ID: C0538F3C906B308F
6 changed files with 80 additions and 75 deletions
Show Stats Download Patch File Download Diff File

99
output/index.css
Unescape Escape View File

@ -133,11 +133,11 @@ html.js .noscript, .hidden {
/* box-shadow: 0.05em 0.05em 0.1em 0 #4444;*/ /* box-shadow: 0.05em 0.05em 0.1em 0 #4444;*/
} }
#tbl_communities .room-label, #details-modal .room-label, .sample-search { .room-label, .sample-search {
color: black; color: black;
} }
#tbl_communities .room-label { .room-label-view-main {
opacity: 0.75; opacity: 0.75;
} }
@ -161,7 +161,7 @@ html.js .noscript, .hidden {
background-color: whitesmoke; background-color: whitesmoke;
} }
#tbl_communities .room-label:not(.room-label-highlighted) { .room-label-view-main:not(.room-label-highlighted) {
background-color: transparent; background-color: transparent;
color: var(--primary-color); color: var(--primary-color);
} }
@ -231,7 +231,7 @@ header {
color: red; color: red;
} }
#search-bar:placeholder-shown ~ .btn-clear-search { #search-bar:placeholder-shown + #btn-clear-search {
visibility: hidden; visibility: hidden;
} }
@ -257,20 +257,20 @@ header {
} }
/* Cells in general */ /* Cells in general */
#tbl_communities th { .tbl_communities__th {
white-space: nowrap; white-space: nowrap;
} }
#tbl_communities :is(th, td) { .tbl_communities__th, .tbl_communities__td {
padding: var(--cell-padding-v) var(--cell-padding-h); padding: var(--cell-padding-v) var(--cell-padding-h);
} }
#tbl_communities th.sortable { .tbl_communities__th.sortable {
position: relative; position: relative;
padding-right: calc( 1.35em + var(--cell-padding-h) ); padding-right: calc( 1.35em + var(--cell-padding-h) );
} }
#tbl_communities th.sortable::after { .tbl_communities__th.sortable::after {
position: absolute; position: absolute;
right: calc( var(--cell-padding-h) ); right: calc( var(--cell-padding-h) );
top: 50%; top: 50%;
@ -296,30 +296,24 @@ header {
font-size: 1em; font-size: 1em;
} }
#tbl_communities th { .tbl_communities__th {
background-color: var(--secondary-color-heading); background-color: var(--secondary-color-heading);
} }
#tbl_communities tr { .room-row {
background-color: var(--row-color); background-color: var(--row-color);
} }
#tbl_communities tr:nth-child(even) { .room-row:nth-child(even) {
background-color: var(--secondary-color); background-color: var(--secondary-color);
--row-color: var(--secondary-color); --row-color: var(--secondary-color);
} }
#tbl_communities tr:nth-child(odd) { .room-row:nth-child(odd) {
background-color: var(--secondary-color-shaded); background-color: var(--secondary-color-shaded);
--row-color: var(--secondary-color-shaded); --row-color: var(--secondary-color-shaded);
} }
#tbl_communities h2 {
font-size: inherit;
margin: inherit;
font-weight: inherit;
display: inherit;
}
/* Particular columns */ /* Particular columns */
.td_identifier { .td_identifier {
@ -408,19 +402,19 @@ header {
text-shadow: 0 0 0.5em #0003; text-shadow: 0 0 0.5em #0003;
} }
a[href^="http:"] .protocol-indicator { a.protocol-indicator__parent[href^="http:"] > .protocol-indicator {
background-color: var(--color-http); background-color: var(--color-http);
} }
a[href^="https:"] .protocol-indicator { a.protocol-indicator__parent[href^="https:"] > .protocol-indicator {
background-color: var(--color-https); background-color: var(--color-https);
} }
a[href^="http:"] .protocol-indicator::after { a.protocol-indicator__parent[href^="http:"] > .protocol-indicator::after {
content: "HTTP"; content: "HTTP";
} }
a[href^="https:"] .protocol-indicator::after { a.protocol-indicator__parent[href^="https:"] > .protocol-indicator::after {
content: "HTTPS"; content: "HTTPS";
} }
@ -449,12 +443,12 @@ a[href^="https:"] .protocol-indicator::after {
background-size: cover; background-size: cover;
} }
.td_server_icon-circle span { .td_server_icon-circle > .td_server_icon-text {
position: relative; position: relative;
top: 0.05em; top: 0.05em;
} }
.td_join_url { .td_join_url {
font-family: monospace; font-family: monospace;
white-space: nowrap; white-space: nowrap;
font-size: .8em; font-size: .8em;
@ -516,7 +510,7 @@ footer nav:first-of-type {
margin-block-start: 1em; margin-block-start: 1em;
} }
footer nav :is(a, span) { .footer__nav-target {
display: inline-block; display: inline-block;
padding: .75em .25em; padding: .75em .25em;
margin-inline: .1em; margin-inline: .1em;
@ -525,7 +519,7 @@ footer nav :is(a, span) {
white-space: nowrap; white-space: nowrap;
} }
footer h2 { .footer__h2 {
margin-block: 0.5em; margin-block: 0.5em;
} }
@ -585,11 +579,6 @@ footer h2 {
flex-direction: row; flex-direction: row;
} }
#details-modal-panes, .details-modal-pane {
/* Jank overlap with actions when overflows */
/* height: 100%; */
}
#details-modal-start { #details-modal-start {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -626,18 +615,21 @@ footer h2 {
border-radius: 100%; border-radius: 100%;
} }
#details-modal-community-icon-wrapper[data-has-icon="false"] { #details-modal-community-icon-wrapper:is([data-has-icon="false"], [data-icon-safety="-1"]) {
display: none; display: none;
} }
#details-modal-community-icon-wrapper[data-icon-safety="-1"] { /* For hiding navigation targets, I think */
#details-modal-community-icon-wrapper:is([data-has-icon="false"], [data-icon-safety="-1"]) > #details-modal-community-icon {
display: none; display: none;
} }
/*
#details-modal-community-icon-wrapper:is([data-has-icon="false"], [data-icon-safety="-1"]) #details-modal-community-icon { #details-modal-community-icon-wrapper:not(:hover) > #details-modal-community-icon[data-icon-safety="-1"] {
display: none; opacity: 0.5;
filter: blur(3px);
} }
*/
#details-modal-community-icon { #details-modal-community-icon {
position: absolute; position: absolute;
@ -649,29 +641,24 @@ footer h2 {
transition: filter 0.15s, opacity 0.15s; transition: filter 0.15s, opacity 0.15s;
} }
#details-modal-community-icon[data-icon-safety="-1"]:not(#details-modal-community-icon-wrapper:hover > *) { /*#details-modal-start*/ #details-modal-description-inner:empty::after {
opacity: 0.5;
filter: blur(3px);
}
#details-modal-start #details-modal-description-inner:empty::after {
content: "No description"; content: "No description";
font-style: italic; font-style: italic;
} }
#details-modal-start #details-modal-language-flag:empty::after { /*#details-modal-start*/ #details-modal-language-flag:empty::after {
content: "Unknown"; content: "Unknown";
font-style: italic; font-style: italic;
} }
#details-modal-end #details-modal-qr-code { /*#details-modal-end*/ #details-modal-qr-code {
aspect-ratio: 1; aspect-ratio: 1;
width: 15em; width: 15em;
height: 15em; height: 15em;
margin: 1em; margin: 1em;
} }
#details-modal-end #details-modal-qr-code-label { /*#details-modal-end*/ #details-modal-qr-code-label {
text-align: center; text-align: center;
} }
@ -684,7 +671,7 @@ footer h2 {
row-gap: .5em; row-gap: .5em;
} }
#details-modal .themed-button { /*#details-modal*/ .themed-button {
color: var(--primary-color); color: var(--primary-color);
background-color: var(--secondary-color); background-color: var(--secondary-color);
border-radius: 10%; border-radius: 10%;
@ -701,22 +688,22 @@ input.carousel-trigger {
display: none; display: none;
} }
.carousel-trigger:not(:checked) + :not(p) + p { .carousel-trigger:not(:checked) + .carousel-label + .carousel-target {
display: none; display: none;
} }
.carousel-trigger + :not(p) + p { .carousel-target {
padding: 1em 0.5em; padding: 1em 0.5em;
background-color: var(--secondary-color-shaded); background-color: var(--secondary-color-shaded);
} }
.carousel-trigger + .carousel-label label::after { .carousel-label > label::after {
content: "+"; content: "+";
padding-inline-start: 1em; padding-inline-start: 1em;
font-size: 1.5em; font-size: 1.5em;
} }
.carousel-trigger:checked + .carousel-label label::after { .carousel-trigger:checked + .carousel-label > label::after {
content: "−"; content: "−";
} }
@ -746,35 +733,35 @@ input.carousel-trigger {
} }
/* Responsive properties */ /* Responsive properties */
.td_name .room-label:nth-of-type(5) ~ .room-label { .room-label-view-main:nth-of-type(5) ~ .room-label {
display: none; display: none;
} }
@media (max-width: 1600px) { @media (max-width: 1600px) {
.td_name .room-label:nth-of-type(4) ~ .room-label { .room-label-view-main:nth-of-type(4) ~ .room-label {
display: none; display: none;
} }
} }
@media (max-width: 1500px) { @media (max-width: 1500px) {
.td_name .room-label:nth-of-type(3) ~ .room-label { .room-label-view-main:nth-of-type(3) ~ .room-label {
display: none; display: none;
} }
} }
@media (max-width: 1400px) { @media (max-width: 1400px) {
.td_name .room-label:nth-of-type(2) ~ .room-label { .room-label-view-main:nth-of-type(2) ~ .room-label {
display: none; display: none;
} }
} }
@media (max-width: 1200px) { @media (max-width: 1200px) {
.td_name .room-label:nth-of-type(1) ~ .room-label { .room-label-view-main:nth-of-type(1) ~ .room-label {
display: none; display: none;
} }
} }
.td_name .room-label:not(.room-label-showcased) { .room-label-view-main:not(.room-label-showcased) {
display: none; display: none;
} }

5
output/main.js
Unescape Escape View File

@ -166,12 +166,13 @@ function onLoad() {
* @param {string} param0.text Tag name * @param {string} param0.text Tag name
* @param {"user"|"reserved"} param0.type Tag classification * @param {"user"|"reserved"} param0.type Tag classification
* @param {string} param0.description Tag details * @param {string} param0.description Tag details
* @param {boolean} [inMainView] Whether to apply styles for tags in outside view.
* @returns HTMLElement * @returns HTMLElement
*/ */
const tagBody = ({text, type, description}) => element.span({ const tagBody = ({text, type, description}, inMainView = false) => element.span({
// todo: truncate // todo: truncate
textContent: text, textContent: text,
className: `room-label room-label-${type} badge`, className: `room-label room-label-view-${inMainView ? 'main' : 'secondary'} room-label-${type} badge`,
title: description title: description
}); });

4
sites/+components/communities-search.php
Unescape Escape View File

@ -24,7 +24,9 @@
<div id="search-container" class="collapsed"> <div id="search-container" class="collapsed">
<div id="search"> <div id="search">
<?php // Phantom element for alignnment ?> <?php
// Phantom element for alignnment
?>
<span class="btn-clear-search" style="visibility: hidden;" tabindex="-1">×</span> <span class="btn-clear-search" style="visibility: hidden;" tabindex="-1">×</span>
<input id="search-bar" autocomplete="off" type="text" placeholder="Search for Communities"> <input id="search-bar" autocomplete="off" type="text" placeholder="Search for Communities">
<span id="btn-clear-search" class="btn-clear-search anchorstyle clickable enter-clicks" tabindex="0" title="Clear search">×</span> <span id="btn-clear-search" class="btn-clear-search anchorstyle clickable enter-clicks" tabindex="0" title="Clear search">×</span>

16
sites/+components/footer.php
Unescape Escape View File

@ -9,41 +9,49 @@
<nav id="about-us"> <nav id="about-us">
<a <a
href="./about" href="./about"
class="footer__nav-target"
target="_blank" target="_blank"
title="About sessioncommunities.online" title="About sessioncommunities.online"
>About</a >About</a
><a ><a
href="./privacy" href="./privacy"
class="footer__nav-target"
target="_blank" target="_blank"
title="Read sessioncommunities.online's Privacy Policy." title="Read sessioncommunities.online's Privacy Policy."
>Privacy</a >Privacy</a
><a ><a
href="<?=$REPOSITORY_CANONICAL_URL?>" href="<?=$REPOSITORY_CANONICAL_URL?>"
class="footer__nav-target"
target="_blank" target="_blank"
title="sessioncommunities.online official repository." title="sessioncommunities.online official repository."
>Source Code</a >Source Code</a
><a ><a
href="<?=$REPOSITORY_MIRROR_URL?>" href="<?=$REPOSITORY_MIRROR_URL?>"
class="footer__nav-target"
target="_blank" target="_blank"
title="sessioncommunities.online alternate repository." title="sessioncommunities.online alternate repository."
>Source Code (Mirror)</a >Source Code (Mirror)</a
><a ><a
href="<?=$API_CANONICAL_URL?>" href="<?=$API_CANONICAL_URL?>"
class="footer__nav-target"
target="_blank" target="_blank"
title="Visit the index page of our Session Listing Provider API." title="Visit the index page of our Session Listing Provider API."
>API</a >API</a
><a ><a
href="./donate" href="./donate"
class="footer__nav-target"
target="_blank" target="_blank"
title="Support sessioncommunities.online" title="Support sessioncommunities.online"
>$$</a >$$</a
><a ><a
href="<?=$REPOSITORY_CANONICAL_URL_FILES?>/for-sogops.md" href="<?=$REPOSITORY_CANONICAL_URL_FILES?>/for-sogops.md"
class="footer__nav-target"
target="_blank" target="_blank"
title="Read our recommendations for Open Group operators" title="Read our recommendations for Open Group operators"
>Host a Community?</a >Host a Community?</a
><a ><a
href="./about#contact-us" href="./about#contact-us"
class="footer__nav-target"
target="_blank" target="_blank"
title="Information on how to contact the maintainer(s) of sessioncommunities.online" title="Information on how to contact the maintainer(s) of sessioncommunities.online"
>Report an issue</a >Report an issue</a
@ -52,16 +60,19 @@
<nav id="more-sites"> <nav id="more-sites">
<a <a
href="https://lokilocker.com/Mods/Session-Groups/wiki/Session-Closed-Groups" href="https://lokilocker.com/Mods/Session-Groups/wiki/Session-Closed-Groups"
class="footer__nav-target"
target="_blank" target="_blank"
title="Closed groups curated by community moderators" title="Closed groups curated by community moderators"
>Closed Groups</a >Closed Groups</a
><a ><a
href="https://session.directory/" href="https://session.directory/"
class="footer__nav-target"
target="_blank" target="_blank"
title="User-submitted closed groups, communities and user profiles. Not safe for work." title="User-submitted closed groups, communities and user profiles. Not safe for work."
>session.directory (NSFW)</a >session.directory (NSFW)</a
><a ><a
href="https://oxen.directory/" href="https://oxen.directory/"
class="footer__nav-target""
target="_blank" target="_blank"
title="Discover more resources in the Oxen ecosystem." title="Discover more resources in the Oxen ecosystem."
>oxen.directory</a >oxen.directory</a
@ -69,7 +80,7 @@
if (basename($_SERVER['SCRIPT_FILENAME']) == "index.php"): if (basename($_SERVER['SCRIPT_FILENAME']) == "index.php"):
?><span ?><span
id="more-sites-info-button" id="more-sites-info-button"
class="clickable enter-clicks" class="clickable enter-clicks footer__nav-target"
href="#" href="#"
title="Read more about sites hosting additional groups." title="Read more about sites hosting additional groups."
tabindex="0" tabindex="0"
@ -78,15 +89,18 @@ if (basename($_SERVER['SCRIPT_FILENAME']) == "index.php"):
<nav id="about-session" class="highlight"> <nav id="about-session" class="highlight">
<a <a
href="https://getsession.org/" href="https://getsession.org/"
class="footer__nav-target"
title="Download Session private messenger for Android, iOS, Windows, Linux, or Mac." title="Download Session private messenger for Android, iOS, Windows, Linux, or Mac."
>Download Session</a >Download Session</a
><a ><a
href="https://github.com/oxen-io/session-pysogs" href="https://github.com/oxen-io/session-pysogs"
class="footer__nav-target"
target="_blank" target="_blank"
title="Information about running a community server." title="Information about running a community server."
>Host Your Own Community</a >Host Your Own Community</a
><a ><a
href="https://getsession.org/terms-of-service" href="https://getsession.org/terms-of-service"
class="footer__nav-target"
target="_blank" target="_blank"
>Session Terms Of Service</a> >Session Terms Of Service</a>
</nav> </nav>

23
sites/+components/tbl-communities.php
Unescape Escape View File

@ -41,7 +41,7 @@
<table id="tbl_communities"> <table id="tbl_communities">
<tr> <tr>
<?php foreach ($TABLE_COLUMNS as $colno => $column): ?> <?php foreach ($TABLE_COLUMNS as $colno => $column): ?>
<th<?=sort_onclick($colno)?> id="th_<?=$column['id']?>"> <th<?=sort_onclick($colno)?> id="th_<?=$column['id']?>" class="tbl_communities__th">
<?=$column['name']?> <?=$column['name']?>
</th> </th>
@ -90,8 +90,8 @@
data-icon-safe='<?=$room->icon_safety()?>' data-icon-safe='<?=$room->icon_safety()?>'
data-created='<?=html_sanitize($room->created)?>' data-created='<?=html_sanitize($room->created)?>'
> >
<td class="td_language" title="Language flag for '<?=$name?>'"><?=$language?></td> <td class="td_language tbl_communities__td" title="Language flag for '<?=$name?>'"><?=$language?></td>
<td class="td_name" <td class="td_name tbl_communities__td"
data-sort-by="<?=strtolower($name)?>" data-sort-by="<?=strtolower($name)?>"
> >
<a <a
@ -107,7 +107,7 @@
<span class="room-labels-container noindex robots-noindex robots-nocontent"><!--noindex--> <span class="room-labels-container noindex robots-noindex robots-nocontent"><!--noindex-->
<?php foreach ($room->get_room_tags() as $tag): if (CommunityTag::is_showcased_tag($tag->text)): ?> <?php foreach ($room->get_room_tags() as $tag): if (CommunityTag::is_showcased_tag($tag->text)): ?>
<span <span
class="room-label <?=$tag->get_tag_classname()?> badge" class="room-label room-label-view-main <?=$tag->get_tag_classname()?> badge"
title="<?=$tag->description?>" title="<?=$tag->description?>"
><?= ><?=
truncate($tag->get_text(), 16) truncate($tag->get_text(), 16)
@ -116,19 +116,20 @@
<!--/noindex--></span> <!--/noindex--></span>
</td> </td>
<!--noindex--><td <!--noindex--><td
class="td_description noindex robots-noindex robots-nocontent" class="td_description tbl_communities__td noindex robots-noindex robots-nocontent"
title="Description for '<?=$name?>': title="Description for '<?=$name?>':
<?=$desc?>" <?=$desc?>"
itemprop="description" itemprop="description"
><?=$desc?></td><!--/noindex--> ><?=$desc?></td><!--/noindex-->
<td <td
class="td_users" class="td_users tbl_communities__td"
title="'<?=$name?>' has had <?=$users?> active users in the last <?=$users_cutoff?>." title="'<?=$name?>' has had <?=$users?> active users in the last <?=$users_cutoff?>."
><?=$users?></td> ><?=$users?></td>
<td class="td_preview"> <td class="td_preview tbl_communities__td">
<a <a
href="<?=$preview_link?>" href="<?=$preview_link?>"
class="protocol-indicator__parent"
title="Click here to preview '<?=$name?>'" title="Click here to preview '<?=$name?>'"
target="_blank" target="_blank"
rel="noopener noreferrer external nofollow" rel="noopener noreferrer external nofollow"
@ -136,7 +137,7 @@
<span class="protocol-indicator"></span> <span class="protocol-indicator"></span>
</a> </a>
</td> </td>
<td class="td_qr_code"> <td class="td_qr_code tbl_communities__td">
<a <a
class="qr-code-button" class="qr-code-button"
href="<?=room_qr_code($room)?>" href="<?=room_qr_code($room)?>"
@ -152,20 +153,20 @@
> >
</a> </a>
</td> </td>
<td class="td_server_icon" <td class="td_server_icon tbl_communities__td"
data-sort-by="<?=$pubkey?>" data-sort-by="<?=$pubkey?>"
title="Host: <?=$hostname?> (<?=$pubkey?>)" title="Host: <?=$hostname?> (<?=$pubkey?>)"
item="image" item="image"
> >
<?php if (empty($server_icon)): ?> <?php if (empty($server_icon)): ?>
<div class="td_server_icon-circle" style="background-color: <?=$icon_color?>"> <div class="td_server_icon-circle" style="background-color: <?=$icon_color?>">
<span><?=strtoupper($pubkey[0] . $pubkey[1])?></span> <span class="td_server_icon-text"><?=strtoupper($pubkey[0] . $pubkey[1])?></span>
</div> </div>
<?php else: ?> <?php else: ?>
<div class="td_server_icon-circle" style="background-image: url('<?=$server_icon?>')"></div> <div class="td_server_icon-circle" style="background-image: url('<?=$server_icon?>')"></div>
<?php endif; ?> <?php endif; ?>
</td> </td>
<td class="td_join_url"> <td class="td_join_url tbl_communities__td">
<div class="join_url_container" data-url="<?=$join_link?>"> <div class="join_url_container" data-url="<?=$join_link?>">
<span class="join_url show-from-w5" title="<?=$join_link?>" <span class="join_url show-from-w5" title="<?=$join_link?>"
><?=truncate($join_link, 32)?></span> ><?=truncate($join_link, 32)?></span>

8
sites/index.php
Unescape Escape View File

@ -129,16 +129,16 @@
</span>. </span>.
</p> </p>
<input type="checkbox" id="carousel-1a" name="carousel-1" class="carousel-trigger"/> <input type="checkbox" id="carousel-1a" name="carousel-1" class="carousel-trigger"/>
<h2 class="carousel-label"><label for="carousel-1a">What is Session Messenger?</label></h2> <h2 class="carousel-label footer__h2"><label for="carousel-1a">What is Session Messenger?</label></h2>
<p> <p class="carousel-target">
<a href="https://getsession.org/" rel="follow external">Session</a> <a href="https://getsession.org/" rel="follow external">Session</a>
is a private messaging app that protects your meta-data, is a private messaging app that protects your meta-data,
encrypts your communications, and makes sure your messaging activities encrypts your communications, and makes sure your messaging activities
leave no digital trail behind. <a href="./about">Read more.</a> leave no digital trail behind. <a href="./about">Read more.</a>
</p> </p>
<input type="checkbox" id="carousel-1b" name="carousel-1" class="carousel-trigger"/> <input type="checkbox" id="carousel-1b" name="carousel-1" class="carousel-trigger"/>
<h2 class="carousel-label"><label for="carousel-1b">What are Session Communities?</label></h2> <h2 class="carousel-label footer__h2"><label for="carousel-1b">What are Session Communities?</label></h2>
<p> <p class="carousel-target">
Session Communities are public chatrooms accessible from within Session Messenger. Session Communities are public chatrooms accessible from within Session Messenger.
This web project crawls known sources of Session Communities, and This web project crawls known sources of Session Communities, and
displays information about them as a static HTML page. <a href="./about">Read more.</a> displays information about them as a static HTML page. <a href="./about">Read more.</a>

Write Preview
Loading…
Cancel
Save