diff --git a/assets/dist/_colors.css b/assets/dist/_colors.css index 6a5e0f8..0c2e594 100644 --- a/assets/dist/_colors.css +++ b/assets/dist/_colors.css @@ -2,7 +2,7 @@ :root { --white1: #fff; --white2: #777; - --gray1: #111; + --gray1: #1c1c1c; --gray2: #222; --gray3: #333; --gray4: #444; @@ -13,16 +13,16 @@ --blue1: #3a9fde; --blue2: #66befe; --blue3: #82d8fd; - --error1: #860000; - --error2: #ff9796; + --error1: #ff5555; + --error2: #fddec6; --error3: #dd2c2c; --error-link: #01318C; - --green1: #94E749; + --green1: #baf39e; --info-fg: var(--gray1); --info-bg: #b3ddff; --info-link: var(--error-link); --fg: var(--white1); - --bg: var(--gray2); + --bg: var(--gray1); --bg-trans: rgba(77, 78, 86, 0.62); --bg-accent: var(--gray3); --fg-accent: var(--blue3); diff --git a/assets/dist/base.css b/assets/dist/base.css index 8bdc551..71c4cb8 100644 --- a/assets/dist/base.css +++ b/assets/dist/base.css @@ -30,9 +30,9 @@ } html { - -o-tab-size: 2; + font-size: 20px; + line-height: 1.25; tab-size: 2; - line-height: 1.15; -webkit-text-size-adjust: 100%; } @@ -97,7 +97,7 @@ select, textarea { font-family: inherit; font-size: 100%; - line-height: 1.15; + line-height: 1.25; margin: 0; } @@ -176,35 +176,55 @@ body { 'Apple Color Emoji', 'Segoe UI Emoji'; } +nav +, nav * +, footer +, footer * +{ all: unset +; margin: 0 +; padding: 0 +; display: flex +; flex-wrap: wrap +; box-sizing: border-box +; font-family + : 'Kadwa' + , 'DejaVu Sans' + , 'PT Sans' + , 'Helvetica' + , 'Helvetica Rounded' + , sans-serif +} +nav +{ padding : 3rem 1rem +; justify-content: center +} body { - padding: 1rem; + padding: 0 1rem; margin: 0 auto; - min-height: 100vh; max-width: 60rem; - gap: 1rem; - line-height: 1.5em; - display: flex; flex-direction: column; - - justify-content: space-evenly; + justify-content: flex-start; } .hidden { display: none; } + + h1 { margin: 0; line-height: 2.4rem; } -a { - transition: all 0.25s ease-out; - color: var(--link-fg); +a:any-link { + cursor: pointer; + transition: box-shadow 0.25s ease-out; + color: var(--link-fg); } header { @@ -449,82 +469,77 @@ hr { } footer { - display: flex; flex-wrap: wrap; justify-content: center; padding: 3rem 1rem; - gap: 2rem; + align-content: flex-end; + flex-grow: 1; + flex-direction: row; } -footer * -{ display: flex } -footer .round +.round { border-radius: 999px } -footer .bg-icon -{ background-image : url( '/button-gradient.svg' ) - , url('/icon.png') !important +.bg-icon +{ background-image : + url( '/button-gradient.svg' ) + , url('/icon.png') + !important } footer img -{ max-width : 100vw -; overflow : hidden -} -footer .buttons -{ gap : 1rem -; padding : 1rem -; background : white -; flex-wrap : nowrap +{ max-width: 100vw +; overflow: hidden } -footer .buttons img -{ height : 2rem } +.red { --b: #ff5555 } +.yellow { --b: #f4e7a3 } +.green { --b: #baf39e } +.blue { --b: #82d8fd } +.rose { --b: #fddec6 } +.teal { --b: #85F3CF } +.orange { --b: #ffbf57 } +.pink { --b: #FFA6FF } +.gray { --b: #ccc } -footer .buttons > * -{ height : 2rem -; min-width : 2rem +.buttons +{ gap: 1rem +; padding: 1rem +; background: white +; flex-wrap: nowrap } -footer .buttons > a:any-link +.buttons img +{ height: 2rem } + +.buttons > * +{ height: 2rem +; min-width: 2rem +} + +.buttons > a:any-link { background : - var( --b, #ccc ) - url( '/button-gradient.svg' ) - 50% 50% no-repeat -; background-size : cover + var( --b, #ccc ) + url( '/button-gradient.svg' ) + 50% 50% no-repeat +; background-size: cover ; box-shadow - : inset 0 0 0 0.125rem #fff0 - , 0 0 0 0.125rem #0000 + : inset 0 0 0 0.125rem #fff0 + , 0 0 0 0.125rem #0000 } -footer .buttons > a:any-link:is( :hover, :focus, :active ) +.buttons > a:any-link:hover +, .buttons > a:any-link:focus +, .buttons > a:any-link:active { box-shadow - : inset 0 0 0 0.125rem #fff - , 0 0 0 0.125rem var( --b, #ccc ) + : inset 0 0 0 0.125rem #fff + , 0 0 0 0.125rem var( --b, #808080 ) } -footer .buttons .group -{ padding : 0 } +.buttons .group +{ padding: 0 } -footer .buttons.round > * -{ border-radius : 999px } +.buttons.round > * +{ border-radius: 999px } -@media screen and (max-width: 600px) { - header { - text-align: center; - } - - footer { - grid-template-columns: 1fr; - } - - footer div { - text-align: initial; - width: 100%; - } - - section.apps .applist { - grid-template-columns: 1fr; - } -} - .emoji { width: 1.45em; height: 1.45em; @@ -652,20 +667,90 @@ label { color: var(--fg); } + .about { - display: flex; - flex-direction: column; - gap: 1rem; + gap: 3rem; + display: grid; + grid-template-columns: 10rem 1fr; + align-items: baseline; +} +.about a { + border-radius: 0.125rem; +} +.about a[href^='https://dym.sh/'] { + color: var(--green1); +} +.about a:active, +.about a:focus, +.about a:hover { + background: var(--bg); + box-shadow: + 0 0 0 0.125rem var(--bg) + , 0 0 0 0.25rem var(--fg) + , 0 0 0 0.5rem var(--bg); } -.about h2 { - margin: 2rem 0 0 0; - } +.about h1, +.about h2, +.about h3 { + margin: 0; + text-align: right; + font-size: 1rem; + color: var(--orange2); + font-weight: 500; +} .about ul, .about p { - margin: 0; + margin: 0; +} +.about ul { + padding-left: 0; + list-style: none; + padding: 1rem 0; +} +.col-2 { + columns: 2; +} +.about h1 + ul, +.about h2 + ul, +.about h3 + ul { + padding-top: 0; +} +.about ul + h1, +.about ul + h2, +.about ul + h3, +.about ul: last-child { + padding-bottom: 0; +} +ul li { + margin-left: 1rem; +} +ul li::before { + content: "–"; + margin-left: -2rem; + padding-right: 0.5rem; + width: 2rem; + display: inline-block; + text-align: right; +} + + +@media screen and (max-width: 600px) { + .about { + display: flex; + flex-direction: column; + gap: 1rem; } + .about h2 { + align-content: flex-start; + } +} +@media screen and (max-width: 1000px) { + .about .col-2.tablet-col-1 { + columns: 1; + } +} .account-card { display: inline-grid; diff --git a/assets/dist/profile.css b/assets/dist/profile.css index 34c6b8b..19c0cfc 100644 --- a/assets/dist/profile.css +++ b/assets/dist/profile.css @@ -9,167 +9,92 @@ This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License - along with this program. If not, see . + along with this program. If not, see . */ -.page { - grid-template-columns: 1fr minmax(auto, 60rem) 1fr; /* fallback for lack of min() support */ - grid-template-columns: 1fr min(92%, 65rem) 1fr; -} - .profile { + display: flex; + gap: 1rem; +} +.profile .header { + display: flex; + flex-direction: column; + gap: 1rem; + justify-content: flex-start; + width: 20rem; + word-break: break-all; +} + +.profile .header > * { + border-radius: var(--br); +} + +.profile figure { + background-size: cover; + background-position: 50% 50%; + background-repeat: no-repeat; + margin: 0; + border-radius: var(--br); + display: flex; + justify-content: space-between; padding: 0.5rem; +} + +.profile figure img { + width: 5rem; + height: 5rem; + object-fit: fill; border-radius: var(--br); } -.profile .column-split { - display: flex; - flex-wrap: wrap; - gap: 1rem; - } - -.profile .header { +.profile .header .user { background: var(--profile-bg); + display: flex; + flex-direction: column; + gap: 0.25rem; + padding: 1rem; +} + +.profile .header .displayname { + font-size: 1rem; + font-weight: 500; +} + +.profile .header .username { + min-width: 0; + font-size: 1rem; + color: var(--fg-accent); + -webkit-user-select: all; + user-select: all; +} + +.profile .header .role { + background: var(--bg); + color: var(--fg); + + border: 0.075rem solid var(--bg); border-radius: var(--br); - overflow: hidden; - margin-bottom: 1rem; + padding: 0.25rem; + line-height: 0.75em; + font-size: 0.75rem; + font-variant: small-caps; + align-self: flex-start; } -.profile .header .header-image { - position: relative; - padding-top: 33.33%; - } - -/* aspect-ratio 1/3 */ - -.profile .header .header-image img { - position: absolute; - top: 0; - left: 0; - right: 0; - width: 100%; - height: 100%; - -o-object-fit: cover; - object-fit: cover; - } - -.profile .header { - --avatar-size: 8.5rem; - --name-size: 3rem; - --username-size: 2rem; - - --overlap: calc(var(--avatar-size) - var(--name-size) - var(--username-size)); +.profile .header .role.admin { + color: var(--role-admin); + border-color: var(--role-admin); } -/* - Basic info container has the user's avatar, display- and username, and role - It's partially overlapped over the header image, by a negative margin-top - */ - -.profile .header .basic-info { - position: relative; - display: grid; - box-sizing: border-box; - grid-template-columns: var(--avatar-size) auto 1fr; - grid-template-rows: var(--overlap) var(--name-size) auto; - grid-template-areas: - " avatar . . . " - " avatar displayname displayname stats " - " avatar username role stats "; - - margin: 1rem; - margin-top: calc(-1 * var(--overlap)); - gap: 0 1rem; - } - -.profile .header .basic-info .avatar { - grid-area: avatar; - height: var(--avatar-size); - width: var(--avatar-size); - border: 0.2rem solid var(--avatar-border); - border-radius: var(--br); - overflow: hidden; - } - -/* prevents image extending beyond rounded borders */ - -.profile .header .basic-info .avatar img { - height: 100%; - width: 100%; - -o-object-fit: cover; - object-fit: cover; - } - -.profile .header .basic-info .displayname { - grid-area: displayname; - line-height: var(--name-size); - font-size: 1.5rem; - font-weight: bold; - } - -.profile .header .basic-info .username { - min-width: 0; - grid-area: username; - line-height: var(--username-size); - - font-size: 1rem; - font-weight: bold; - color: var(--fg-accent); - -webkit-user-select: all; - user-select: all; - } - -.profile .header .basic-info .role { - background: var(--bg); - color: var(--fg); - - border: 0.1rem solid var(--bg); - grid-area: role; - align-self: center; - justify-self: start; - border-radius: var(--br); - padding: 0.25rem 0.5rem 0.35rem 0.5rem; - line-height: 0.75rem; - font-size: 0.75rem; - font-variant: small-caps; - } - -.profile .header .basic-info .role.admin { - color: var(--role-admin); - border-color: var(--role-admin); - } - -.profile .header .basic-info .role.moderator { - color: var(--role-mod); - border-color: var(--role-mod); - } - -@media screen and (max-width: 750px) { - .profile .header .basic-info { - grid-template-columns: auto 1fr; - grid-template-rows: var(--avatar-size) var(--name-size) auto; - grid-template-areas: - " avatar avatar " - " displayname displayname " - " username role " - " stats stats "; - } - - .profile .header .basic-info .displayname { - font-size: 1.4rem; - } +.profile .header .role.moderator { + color: var(--role-mod); + border-color: var(--role-mod); } -.profile .col-header h1, .profile .col-header h2 { - font-size: 1.2rem; - line-height: 1.3rem; - margin: 0; - } - .profile .toots { flex: 65 25rem; display: flex; @@ -178,105 +103,81 @@ } .profile .toots .col-header { - display: grid; - grid-template-columns: auto 1fr; - gap: 1rem; - } - -.profile .toots .col-header a { - justify-self: end; - } - -.profile .rss-icon .fa { - font-size: 2rem; - -o-object-fit: contain; - object-fit: contain; - vertical-align: middle; - color: var(--orange2); - /* can't size a single-color background, so we use a linear-gradient that's effectively white */ - background: linear-gradient(to right, var(--white1) 100%, transparent 0) no-repeat center center; - background-size: 1.2rem 1.4rem; - } - -.profile .toots .toot { - border-radius: var(--br); - } -.toot .info { - flex-direction: row; - gap: 1rem; - } - -.profile .toots .backnextlinks { - display: flex; - justify-content: space-between; - } - -.profile .toots .backnextlinks .next { - margin-left: auto; - } - -.profile .about-user { - overflow: hidden; - display: flex; - flex-direction: column; + display: grid; + grid-template-columns: auto 1fr; gap: 1rem; } -.profile .about-user > * { + +.profile .toots .col-header a { + justify-self: end; +} + +.profile .toots .toot { + border-radius: var(--br); +} +.toot .info { + flex-direction: row; + gap: 1rem; +} +.toot .info { + flex-direction: row; + gap: 1rem; +} + +.profile .toots .backnextlinks { + display: flex; + justify-content: space-between; +} + +.profile .toots .backnextlinks .next { + margin-left: auto; +} + +.profile .col-header { + margin-bottom: -0.25rem; +} + + +.profile > * { border-radius: var(--br); } -.profile .about-user .col-header { - margin-bottom: -0.25rem; - } - -.profile .about-user .fields { - background: var(--profile-bg); - display: grid; - grid-template-columns: auto auto; - padding: 0.5rem; - } - -.profile .about-user .fields > * { - padding: 0.5rem; - } -.profile .about-user .fields > b { - align-self: center; - justify-self: flex-end; - } -.profile .about-user .fields > span { - } -.profile .about-user .fields > span + b { - border-top: 0.1rem solid var(--gray2); - } - -.profile .about-user .bio { - background: var(--profile-bg); - padding: 1rem; - } - -.profile .accountstats { - grid-area: stats; - display: grid; - grid-auto-flow: column; - grid-template: repeat(2, 1fr) / repeat(4, auto); - gap: 0 1rem; - align-self: center; - } - -.profile .accountstats > * { - padding: 0.5rem; - justify-self: center; - } - -.profile .accountstats > *, -.profile .accountstats > * > * { - justify-content: center; - text-align: center; - display: flex; - gap: 0.25rem; - line-height: 20px; - } - -.profile .accountstats > b { - border-bottom: 0.1rem solid var(--gray2); +.profile .fields { + background: var(--profile-bg); + display: grid; + grid-template-columns: 1fr 2fr; + padding: 0.5rem; +} + +.profile .fields > * { + padding: 0.5rem; +} +.profile .fields > b { + align-self: center; + justify-self: flex-end; +} +.profile .fields > span + b, +.profile .fields > time + b { + border-top: 0.1rem solid var(--gray2); + align-self: flex-start; + text-align: right; +} + +.profile .rss-icon, +.profile .rss-icon img { + width: 20px; + height: 20px; +} + +.profile .fields .flex, +.profile .fields .flex * { + display: flex; + line-height: 1rem; + gap: 0.5rem; + align-items: center; +} + +.profile .bio { + background: var(--profile-bg); + padding: 1rem; } diff --git a/assets/dist/status.css b/assets/dist/status.css index 687e43e..c6310f3 100644 --- a/assets/dist/status.css +++ b/assets/dist/status.css @@ -495,16 +495,10 @@ a.plyr__control{text-decoration:none} .plyr--full-ui input[type=range]::-moz-range-track{background:#0000;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-moz-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none} .plyr--full-ui input[type=range]::-moz-range-thumb{background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);height:13px;height:var(--plyr-range-thumb-height,13px);position:relative;-moz-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)} .plyr--full-ui input[type=range]::-moz-range-progress{background:currentColor;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px)} -.plyr--full-ui input[type=range]::-ms-track{color:#0000} -.plyr--full-ui input[type=range]::-ms-fill-upper,.plyr--full-ui input[type=range]::-ms-track{background:#0000;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-ms-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none} -.plyr--full-ui input[type=range]::-ms-fill-lower{background:#0000;background:currentColor;border:0;border-radius:2.5px;border-radius:calc(var(--plyr-range-track-height, 5px)/2);height:5px;height:var(--plyr-range-track-height,5px);-ms-transition:box-shadow .3s ease;transition:box-shadow .3s ease;user-select:none} -.plyr--full-ui input[type=range]::-ms-thumb{background:#fff;background:var(--plyr-range-thumb-background,#fff);border:0;border-radius:100%;box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33);height:13px;height:var(--plyr-range-thumb-height,13px);margin-top:0;position:relative;-ms-transition:all .2s ease;transition:all .2s ease;width:13px;width:var(--plyr-range-thumb-height,13px)} -.plyr--full-ui input[type=range]::-ms-tooltip{display:none} .plyr--full-ui input[type=range]::-moz-focus-outer{border:0} .plyr--full-ui input[type=range]:focus{outline:0} .plyr--full-ui input[type=range]:focus-visible::-webkit-slider-runnable-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px} .plyr--full-ui input[type=range]:focus-visible::-moz-range-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px} -.plyr--full-ui input[type=range]:focus-visible::-ms-track{outline:2px dashed #00b2ff;outline:2px dashed var(--plyr-focus-visible-color,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));outline-offset:2px} .plyr__poster{background-color:#000;background-color:var(--plyr-video-background,var(--plyr-video-background,#000));background-position:50% 50%;background-repeat:no-repeat;background-size:contain;height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .2s ease;width:100%;z-index:1} .plyr--stopped.plyr__poster-enabled .plyr__poster{opacity:1} .plyr--youtube.plyr--paused.plyr__poster-enabled:not(.plyr--stopped) .plyr__poster{display:none} @@ -528,7 +522,6 @@ a.plyr__control{text-decoration:none} .plyr__progress__buffer::-webkit-progress-bar{background:#0000} .plyr__progress__buffer::-webkit-progress-value{background:currentColor;border-radius:100px;min-width:5px;min-width:var(--plyr-range-track-height,5px);-webkit-transition:width .2s ease;transition:width .2s ease} .plyr__progress__buffer::-moz-progress-bar{background:currentColor;border-radius:100px;min-width:5px;min-width:var(--plyr-range-track-height,5px);-moz-transition:width .2s ease;transition:width .2s ease} -.plyr__progress__buffer::-ms-fill{border-radius:100px;-ms-transition:width .2s ease;transition:width .2s ease} .plyr--loading .plyr__progress__buffer{-webkit-animation:plyr-progress 1s linear infinite;animation:plyr-progress 1s linear infinite;background-image:linear-gradient(-45deg,#23282f99 25%,#0000 0,#0000 50%,#23282f99 0,#23282f99 75%,#0000 0,#0000);background-image:linear-gradient(-45deg,var(--plyr-progress-loading-background,#23282f99) 25%,#0000 25%,#0000 50%,var(--plyr-progress-loading-background,#23282f99) 50%,var(--plyr-progress-loading-background,#23282f99) 75%,#0000 75%,#0000);background-repeat:repeat-x;background-size:25px 25px;background-size:var(--plyr-progress-loading-size,25px) var(--plyr-progress-loading-size,25px);color:#0000} .plyr--video.plyr--loading .plyr__progress__buffer{background-color:#ffffff40;background-color:var(--plyr-video-progress-buffered-background,#ffffff40)} .plyr--audio.plyr--loading .plyr__progress__buffer{background-color:#c1c8d199;background-color:var(--plyr-audio-progress-buffered-background,#c1c8d199)} @@ -540,10 +533,8 @@ a.plyr__control{text-decoration:none} .plyr--audio .plyr__control:focus-visible,.plyr--audio .plyr__control:hover,.plyr--audio .plyr__control[aria-expanded=true]{background:#00b2ff;background:var(--plyr-audio-control-background-hover,var(--plyr-color-main,var(--plyr-color-main,#00b2ff)));color:#fff;color:var(--plyr-audio-control-color-hover,#fff)} .plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))} .plyr--full-ui.plyr--audio input[type=range]::-moz-range-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))} -.plyr--full-ui.plyr--audio input[type=range]::-ms-track{background-color:#c1c8d199;background-color:var(--plyr-audio-range-track-background,var(--plyr-audio-progress-buffered-background,#c1c8d199))} .plyr--full-ui.plyr--audio input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)} .plyr--full-ui.plyr--audio input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)} -.plyr--full-ui.plyr--audio input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #23282f1a;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#23282f1a)} .plyr--audio .plyr__progress__buffer{color:#c1c8d199;color:var(--plyr-audio-progress-buffered-background,#c1c8d199)} .plyr--video{overflow:hidden} .plyr--video.plyr--menu-open{overflow:visible} @@ -563,10 +554,8 @@ a.plyr__control{text-decoration:none} .plyr--full-ui.plyr--video .plyr__control--overlaid{display:block} .plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))} .plyr--full-ui.plyr--video input[type=range]::-moz-range-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))} -.plyr--full-ui.plyr--video input[type=range]::-ms-track{background-color:#ffffff40;background-color:var(--plyr-video-range-track-background,var(--plyr-video-progress-buffered-background,#ffffff40))} .plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)} .plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)} -.plyr--full-ui.plyr--video input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px #23282f26,0 0 0 1px #23282f33,0 0 0 3px #ffffff80;box-shadow:var(--plyr-range-thumb-shadow,0 1px 1px #23282f26,0 0 0 1px #23282f33),0 0 0 var(--plyr-range-thumb-active-shadow-width,3px) var(--plyr-audio-range-thumb-active-shadow-color,#ffffff80)} .plyr--video .plyr__progress__buffer{color:#ffffff40;color:var(--plyr-video-progress-buffered-background,#ffffff40)} .plyr:-webkit-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%} .plyr:fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%} diff --git a/screenshot.png b/screenshot.png index bfd2dfb..805bb17 100644 Binary files a/screenshot.png and b/screenshot.png differ diff --git a/template/about.tmpl b/template/about.tmpl index 212961b..f0ffe70 100644 --- a/template/about.tmpl +++ b/template/about.tmpl @@ -18,71 +18,60 @@ */ -}} {{ template "header.tmpl" .}}
-

fediverse

-
- {{.instance.Description | noescape}} -
+

/about

-

social profiles

- - -

server software

- - -

features

-
    -
  • - Registration is - {{if .instance.Registrations}} - enabled{{if .instance.ApprovalRequired}}, but requires admin approval{{end}}. - {{else}} - disabled. - {{end}} -
    • - {{if .instance.Configuration.Accounts.AllowCustomCSS}} -
  • - Users are allowed to set Custom CSS for their profiles. -
    • - {{end}} -
  • - Toots can contain up to {{.instance.Configuration.Statuses.MaxCharacters}} characters and - {{.instance.Configuration.Statuses.MaxMediaAttachments}} media attachments. -
    • -
  • - Polls can have up to {{.instance.Configuration.Polls.MaxOptions}} options, with - {{.instance.Configuration.Polls.MaxCharactersPerOption}} characters each. -
    • -
- -

moderated servers

-

- ActivityPub instances exchange (federate) data with other servers, including accounts and toots. - This can be prevented for specific domains by suspending them. None of their content is stored, - and interaction with their users is blocked both ways.
- {{if .blocklistExposed}} - View the list of suspended domains - {{else}} - This instance does not publically share this list. - {{end}} +

Personal homepage of Dym Sohin, a professional Web/App/Ui Developer

-

stats

+

(self-imposed)
terms of service

    -
  • Users: {{.instance.Stats.user_count}}
    • -
  • Posts: {{.instance.Stats.status_count}}
    • -
  • Federates with: {{.instance.Stats.domain_count}} instances
    • +
  • no hate
    • +
  • no drama
    • +
  • no bullshit
    • +
+ +

content license

+
+

Unless noted otherwise,

+
    +
  • texts, pictures, and audio/visual media are distributed under + CC BY-NC 4.0 +
    • +
  • code snippets are distributed under + 0BSD +
    • +
+

(regular use within fediverse and blogosphere already complies with those by default) +

+

you can contact me for other uses (i.e. commercial distribution) +

+
+ +

fediverse

+
    +
  • server runs on GoToSocial
    • +
  • see official source code repo
    • +
  • also applied my custom templates
    • +
  • posts can contain up to {{.instance.Configuration.Statuses.MaxCharacters}} characters and + {{.instance.Configuration.Statuses.MaxMediaAttachments}} media attachments +
    • +
  • polls can have up to {{.instance.Configuration.Polls.MaxOptions}} options, with + {{.instance.Configuration.Polls.MaxCharactersPerOption}} characters each +
    • +
  • federating with {{.instance.Stats.domain_count}} instances
    • +
  • list of suspended domians +
+ +

social profiles

+
diff --git a/template/header.tmpl b/template/header.tmpl index 57e8989..2d18ebc 100644 --- a/template/header.tmpl +++ b/template/header.tmpl @@ -73,3 +73,18 @@ + + diff --git a/template/profile.tmpl b/template/profile.tmpl index 059a5c0..a05125e 100644 --- a/template/profile.tmpl +++ b/template/profile.tmpl @@ -20,110 +20,99 @@ {{ template "header.tmpl" .}}
+
-
- {{ if .account.Header }} - - {{ end }} -
- -
- joined - posts - {{ if .rssFeed }} - - - - {{ end }} - {{.account.StatusesCount}} - - followers{{.account.FollowersCount}} - follows{{.account.FollowingCount}} -
+
+ {{ if .pinned_statuses }} +
+ {{ range .pinned_statuses }} +
+ {{ template "status_profile.tmpl" .}} +
+ {{ end }} +
+ {{ end }} + +
+ {{ if not .statuses }} +
Nothing here!
+ {{ else }} + {{ range .statuses }} +
+ {{ template "status_profile.tmpl" .}} +
+ {{ end }} + {{ end }} +
+ +
+ {{ if .show_back_to_top }} + Back to top + {{ end }} + {{ if .statuses_next }} + + {{ end }}
+
-
- -
- -
- -
- {{ if .account.Note }} - {{emojify .account.Emojis (noescape .account.Note)}} - {{else}} - no bio - {{end}} -
- -
- {{ range .account.Fields }} - {{emojify $.account.Emojis (noescape .Name)}} - {{emojify $.account.Emojis (noescape .Value)}} - {{ end }} -
- -
- -
- {{ if .pinned_statuses }} -
-

Pinned posts

- jump to recent -
-
- {{ range .pinned_statuses }} -
- {{ template "status_profile.tmpl" .}} -
- {{ end }} -
- {{ end }} - -
- {{ if not .statuses }} -
Nothing here!
- {{ else }} - {{ range .statuses }} -
- {{ template "status_profile.tmpl" .}} -
- {{ end }} - {{ end }} -
- -
- {{ if .show_back_to_top }} - Back to top - {{ end }} - {{ if .statuses_next }} - - {{ end }} -
-
-
{{ template "footer.tmpl" .}} \ No newline at end of file diff --git a/template/status_profile.tmpl b/template/status_profile.tmpl index c8e7e64..1042292 100644 --- a/template/status_profile.tmpl +++ b/template/status_profile.tmpl @@ -85,6 +85,6 @@ {{if .Pinned}} /pinned {{end}}{{if .RepliesCount | eq 0 | not}} - replies:{{.RepliesCount}} + replies: {{.RepliesCount}} {{end}} - \ No newline at end of file +