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

5
output/main.js
Unescape Escape View File

@ -166,12 +166,13 @@ function onLoad() {
* @param {string} param0.text Tag name
* @param {"user"|"reserved"} param0.type Tag classification
* @param {string} param0.description Tag details
* @param {boolean} [inMainView] Whether to apply styles for tags in outside view.
* @returns HTMLElement
*/
const tagBody = ({text, type, description}) => element.span({
const tagBody = ({text, type, description}, inMainView = false) => element.span({
// todo: truncate
textContent: text,
className: `room-label room-label-${type} badge`,
className: `room-label room-label-view-${inMainView ? 'main' : 'secondary'} room-label-${type} badge`,
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">
<?php // Phantom element for alignnment ?>
<?php
// Phantom element for alignnment
?>
<span class="btn-clear-search" style="visibility: hidden;" tabindex="-1">×</span>
<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>

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

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

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

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

8
sites/index.php
Unescape Escape View File

@ -129,16 +129,16 @@
</span>.
</p>
<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>
<p>
<h2 class="carousel-label footer__h2"><label for="carousel-1a">What is Session Messenger?</label></h2>
<p class="carousel-target">
<a href="https://getsession.org/" rel="follow external">Session</a>
is a private messaging app that protects your meta-data,
encrypts your communications, and makes sure your messaging activities
leave no digital trail behind. <a href="./about">Read more.</a>
</p>
<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>
<p>
<h2 class="carousel-label footer__h2"><label for="carousel-1b">What are Session Communities?</label></h2>
<p class="carousel-target">
Session Communities are public chatrooms accessible from within Session Messenger.
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>

Write Preview
Loading…
Cancel
Save