gitea/kbin-core
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Remove old views and components, init entry views

Browse source
This commit is contained in:
Ernest Wiśniewski 2023-02-02 19:06:08 +01:00
parent 183008080b
commit b381947a18
480 changed files with 3722 additions and 31198 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
assets/app.js
View file

@ -1,13 +1,12 @@
import './bootstrap'
import './styles/app.scss';
import KDatepicker from "./utils/datepicker";
import Navbar from "./utils/navbar";
import KMasonry from './utils/masonry';
import RemoteMentions from "./utils/remote-mentions";
/*
* Welcome to your app's main JavaScript file!
*
* We recommend including the built version of this JavaScript file
* (and its CSS file) in your base layout (base.html.twig).
*/
window.addEventListener('load', function (event) {
const datepicker = new KDatepicker();
const navbar = new Navbar();
const masonry = new KMasonry();
const remoteMentions = new RemoteMentions();
});
// any CSS you import will output into a single css file (app.css in this case)
import './styles/app.scss';
// start the Stimulus application
import './bootstrap';

13
assets/bootstrap.js vendored
View file

@ -1,10 +1,4 @@
import {startStimulusApp} from '@symfony/stimulus-bridge';
import Reveal from '@symfony/stimulus-bridge/lazy-controller-loader?lazy=true!stimulus-reveal-controller';
import Clipboard from '@symfony/stimulus-bridge/lazy-controller-loader?lazy=true!stimulus-clipboard';
import ScrollProgress from '@symfony/stimulus-bridge/lazy-controller-loader?lazy=true!stimulus-scroll-progress';
import CharacterCounter from '@symfony/stimulus-bridge/lazy-controller-loader?lazy=true!stimulus-character-counter';
import AnimatedNumber from '@symfony/stimulus-bridge/lazy-controller-loader?lazy=true!stimulus-animated-number';
import Timeago from "./utils/timeago";
// Registers Stimulus controllers from controllers.json and in the controllers/ directory
const app = startStimulusApp(require.context(
@ -13,11 +7,4 @@ const app = startStimulusApp(require.context(
/\.(j|t)sx?$/
));
app.register('reveal', Reveal);
app.register('clipboard', Clipboard);
app.register('scroll-progress', ScrollProgress);
app.register('timeago', Timeago);
app.register('character-counter', CharacterCounter);
app.register('animated-number', AnimatedNumber)
export {app};

29
assets/controllers.json
View file

@ -1,39 +1,10 @@
{
"controllers": {
"@symfony/ux-autocomplete": {
"autocomplete": {
"enabled": true,
"fetch": "eager",
"autoimport": {
"tom-select/dist/css/tom-select.default.css": false,
"tom-select/dist/css/tom-select.bootstrap5.css": true
}
}
},
"@symfony/ux-chartjs": {
"chart": {
"enabled": true,
"fetch": "eager"
}
},
"@symfony/ux-dropzone": {
"dropzone": {
"enabled": true,
"fetch": "eager",
"autoimport": {
"@symfony/ux-dropzone/src/style.css": true
}
}
},
"@symfony/ux-turbo": {
"turbo-core": {
"enabled": true,
"fetch": "eager"
},
"mercure-turbo-stream": {
"enabled": false,
"fetch": "eager"
}
}
},
"entrypoints": []

51
assets/controllers/block-controller.js
View file

@ -1,51 +0,0 @@
import {Controller} from '@hotwired/stimulus';
import {fetch, ok} from "../utils/http";
export default class extends Controller {
static targets = ['form'];
static classes = ['active'];
static values = {
isBlocked: Boolean,
loading: Boolean,
addUrl: String,
removeUrl: String,
};
async toggle(event) {
event.preventDefault();
this.loadingValue = true;
if (!window.KBIN_LOGGED_IN) {
window.location = window.KBIN_LOGIN;
return;
}
try {
let response = await fetch(this.isBlockedValue ? this.removeUrlValue : this.addUrlValue, {
method: 'POST',
body: new FormData(event.target)
});
response = await ok(response);
response = await response.json();
this.isBlockedValue = response.isBlocked;
} catch (e) {
alert('Oops, something went wrong.');
throw e;
} finally {
this.loadingValue = false;
}
}
isBlockedValueChanged(isBlocked) {
if (isBlocked) {
this.formTarget.classList.add(this.activeClass);
this.element.closest('.kbin-sub').getElementsByClassName('kbin-sub-form')[0].classList.remove('kbin-sub--active')
this.element.closest('.kbin-sub').dataset.subscribeIsSubscribedValue = false;
} else {
this.formTarget.classList.remove(this.activeClass);
}
}
}

42
assets/controllers/cardano-tx-controller.js
View file

@ -1,42 +0,0 @@
import {Controller} from '@hotwired/stimulus';
import {useDebounce} from 'stimulus-use'
import router from "../utils/routing";
import {ok} from "../utils/http";
export default class extends Controller {
static debounces = ['calculateFee']
static targets = ['fee', 'sum', 'address'];
static values = {
walletid: String
}
connect() {
useDebounce(this, {wait: 500})
}
async send(event) {
}
async calculateFee(e) {
try {
const url = router().generate('cardano_estimate_fee');
let response = await fetch(url, {
method: 'POST',
body: JSON.stringify({
'address': this.addressTarget.value,
'amount': e.target.value,
'walletId': this.walletidValue
}),
});
response = await ok(response);
response = await response.json();
this.sumTarget.innerHTML = response.sum;
this.feeTarget.value = response.fee;
} catch (e) {
throw e;
}
}
}

44
assets/controllers/cardano-tx-init-controller.js
View file

@ -1,44 +0,0 @@
import {Controller} from '@hotwired/stimulus';
import {fetch, ok} from "../utils/http";
export default class extends Controller {
static values = {
url: String
}
static targets = ['counter'];
async observe(event) {
event.preventDefault();
try {
let response = await fetch(this.urlValue, {method: 'POST'});
response = await ok(response);
clearInterval(this.interval);
this.startTimer(60 * 5);
} catch (e) {
throw e;
}
}
startTimer(duration) {
let timer = duration, minutes, seconds;
let target = this.counterTarget;
this.interval = setInterval(function () {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
target.innerHTML = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
}

38
assets/controllers/cardano-wallet-create-controller.js
View file

@ -1,38 +0,0 @@
import {Controller} from '@hotwired/stimulus';
import {fetch, ok} from "../utils/http";
export default class extends Controller {
static targets = ['button', 'loading', 'address', 'mnemonic', 'content'];
async create(event) {
event.preventDefault();
try {
this.showLoading();
let response = await fetch(event.target.closest('a').href, {method: 'GET'});
response = await ok(response);
response = await response.json();
this.addressTarget.value = response.address;
this.mnemonicTarget.value = response.mnemonic;
this.removeLoading();
} catch (e) {
alert('Oops, something went wrong.');
throw e;
}
}
showLoading() {
this.contentTarget.classList.add('visually-hidden');
this.buttonTarget.classList.add('visually-hidden');
this.loadingTarget.classList.remove('visually-hidden');
}
removeLoading() {
this.contentTarget.classList.remove('visually-hidden');
this.buttonTarget.classList.remove('visually-hidden');
this.loadingTarget.classList.add('visually-hidden');
}
}

8
assets/controllers/channel-info-controller.js
View file

@ -1,8 +0,0 @@
import {Controller} from '@hotwired/stimulus';
import Cookies from 'js-cookie';
export default class extends Controller {
close() {
Cookies.set('channel-info', true);
}
}

88
assets/controllers/comment-controller.js
View file

@ -1,88 +0,0 @@
import {Controller} from '@hotwired/stimulus';
import {fetch, ok} from "../utils/http";
import CommentFactory from "../utils/comment-factory";
import Modal from 'bootstrap/js/dist/modal';
export default class extends Controller {
static targets = ['form'];
static values = {
loading: Boolean,
url: String,
form: String,
level: Number,
nested: Boolean
};
async reply(event) {
await this.handle(event);
}
async edit(event) {
await this.handle(event, true);
}
async handle(event, edit = false) {
event.preventDefault();
this.loadingValue = true;
try {
let response = await fetch(event.target.href, {method: 'GET'});
response = await ok(response);
response = await response.json();
this.formTarget.innerHTML = response.form;
let self = this;
this.formTarget.getElementsByTagName('form')[0].addEventListener('submit', function (e) {
self.send(e, edit);
});
let modal = Modal.getOrCreateInstance(this.formTarget.getElementsByClassName('modal')[0]);
modal._element.addEventListener('shown.bs.modal', function (event) {
self.formTarget.classList.add('position-relative')
event.target.classList.add('postition-absolute')
document.getElementsByClassName('modal-backdrop')[0].remove();
document.body.style.removeProperty('overflow')
document.body.style.removeProperty('padding-right')
})
} catch (e) {
if (!window.KBIN_LOGGED_IN) {
window.location = window.KBIN_LOGIN;
return;
}
throw e
} finally {
this.loadingValue = false;
}
}
async send(event, edit = false) {
event.preventDefault();
this.loadingValue = true;
try {
let response = await fetch(event.target.action, {method: 'POST', body: new FormData(event.target)});
response = await ok(response);
response = await response.json();
if (edit) {
CommentFactory.edit(response.html, event.target.closest('.kbin-comment'));
} else {
CommentFactory.create(response.html, event.target.closest('.kbin-comment'), this.nestedValue);
}
event.target.parentNode.innerHTML = ''
} catch (e) {
throw e;
} finally {
this.loadingValue = false;
}
}
}

60
assets/controllers/comment-list-controller.js
View file

@ -1,60 +0,0 @@
import { ApplicationController } from 'stimulus-use'
import CommentFactory from "../utils/comment-factory";
import router from "../utils/routing";
import { fetch, ok } from "../utils/http";
import Cookies from 'js-cookie';
export default class extends ApplicationController {
static values = {
subjectId: Number,
};
async add(notification) {
const subjectId = notification.detail.subject.id;
const route = notification.detail.op === 'EntryCommentCreatedNotification' ? 'ajax_fetch_entry_comment' : 'ajax_fetch_post_comment';
const idPrefix = notification.detail.op === 'EntryCommentCreatedNotification' ? 'entry-comment-' : 'post-comment-';
if (this.hasSubjectIdValue && this.subjectIdValue !== subjectId) {
return;
}
if (document.getElementById(`${idPrefix}${notification.detail.id}`)) {
return;
}
if (Cookies.get('user_option_auto_refresh') === 'true') {
try {
const url = router().generate(route, { 'id': notification.detail.id });
let response = await fetch(url, { method: 'GET' });
response = await ok(response);
response = await response.json();
const html = response.html;
let div = document.createElement('div');
div.innerHTML = html;
let parent = div.firstElementChild.dataset.commentParentValue;
parent = this.element.querySelector(`[data-comment-id-value='${parent}']`);
const existed = div.firstElementChild.dataset.commentIdValue;
if (this.element.querySelector(`[data-comment-id-value='${existed}']`)) {
return;
}
if (parent) {
notification.detail.op === 'EntryCommentCreatedNotification'
? CommentFactory.create(html, parent)
: this.element.append(div.firstElementChild);
} else {
notification.detail.op === 'EntryCommentCreatedNotification'
? this.element.prepend(div.firstElementChild)
: this.element.append(div.firstElementChild);
}
} catch (e) {
}
}
}
}

36
assets/controllers/content-popup-controller.js
View file

@ -1,36 +0,0 @@
import {Controller} from '@hotwired/stimulus';
import {fetch, ok} from "../utils/http";
import Modal from 'bootstrap/js/dist/modal';
export default class extends Controller {
async open(e) {
e.preventDefault();
try {
let response = await fetch(e.target.closest('a').href);
response = await ok(response);
response = await response.json();
let div = document.createElement('div');
div.innerHTML = response.html;
e.target.closest('article').after(div);
(new Modal(document.getElementById('content-popup'))).show();
const popup = document.getElementById('content-popup');
popup.addEventListener('hidden.bs.modal', (e) => {
this.close();
});
} catch (e) {
alert('Oops, something went wrong.');
} finally {
}
}
close() {
document.getElementById('content-popup').remove();
}
}

9
assets/controllers/cookie-info-controller.js
View file

@ -1,9 +0,0 @@
import {Controller} from '@hotwired/stimulus';
import Cookies from 'js-cookie';
export default class extends Controller {
close() {
Cookies.set('cookie-info', true);
this.element.classList.add('d-none');
}
}

27
assets/controllers/dropzone-controller.js
View file

@ -1,27 +0,0 @@
import { Controller } from '@hotwired/stimulus';
export default class extends Controller {
connect() {
this.element.addEventListener('dropzone:connect', this._onConnect);
this.element.addEventListener('dropzone:change', this._onChange);
this.element.addEventListener('dropzone:clear', this._onClear);
}
disconnect() {
// You should always remove listeners when the controller is disconnected to avoid side-effects
this.element.removeEventListener('dropzone:connect', this._onConnect);
this.element.removeEventListener('dropzone:change', this._onChange);
this.element.removeEventListener('dropzone:clear', this._onClear);
}
_onConnect(event) {
}
_onChange(event) {
// The dropzone just changed
}
_onClear(event) {
// The dropzone has just been cleared
}
}

149
assets/controllers/editor-controller.js
View file

@ -1,149 +0,0 @@
import {Controller} from '@hotwired/stimulus';
import {fetch, ok} from "../utils/http";
import router from "../utils/routing";
import bootstrap from "bootstrap/dist/js/bootstrap.min";
import {trim} from "core-js/internals/string-trim";
import EasyMDE from "easymde";
export default class extends Controller {
static values = {
focus: Boolean,
};
connect() {
super.connect();
this.element.querySelectorAll('.kbin-editor').forEach(el => {
this.build(el, this.focusValue)
});
}
build(el, focus = true) {
this.editor = new EasyMDE({
element: el,
hideIcons: ['guide', 'fullscreen', 'side-by-side', 'preview', 'heading', 'table'],
showIcons: ['code', 'table'],
spellChecker: false,
nativeSpellcheck: true,
status: true,
toolbarTips: false,
promptURLs: true,
styleSelectedText: false,
autofocus: focus,
forceSync: true,
});
this.addExtraKeys(el);
this.addMentions();
this.handleFocus();
this.handleUserAutocomplete();
this.handleTagAutocomplete();
}
addMention(replyTo) {
if (this.editor.value()) {
return;
}
if (Array.from(replyTo)[0] !== '@') {
replyTo = '@' + replyTo;
}
let doc = this.editor.codemirror.getDoc();
let cursor = doc.getCursor();
let line = doc.getLine(cursor.line);
let pos = {
line: cursor.line, ch: line.length - 1
}
doc.replaceRange(replyTo + ' ', pos);
}
addExtraKeys(el) {
this.editor.codemirror.setOption("extraKeys", {
'Ctrl-Enter': (e) => {
el.closest('form').querySelector('[type="submit"]').click();
},
});
}
addMentions() {
try {
if (this.element.closest('article')) {
this.addMention(this.element.closest('article').getElementsByClassName('kbin-user')[0].innerHTML.trim())
} else if (this.element.closest('blockquote')) {
const isEntryComment = this.element.closest('blockquote').id.startsWith('entry-comment');
if (!isEntryComment) {
this.addMention(this.element.closest('blockquote').getElementsByClassName('kbin-user')[0].innerHTML.trim())
}
}
} catch (e) {
throw e;
}
}
handleFocus() {
if (!focus) {
const textarea = this.editor.element.parentNode.getElementsByClassName('CodeMirror')[0].getElementsByTagName('textarea')[0]
const toolbar = this.editor.element.parentElement.getElementsByClassName('editor-toolbar')[0];
toolbar.classList.add('visually-hidden');
textarea.addEventListener('focus', (evt => {
toolbar.classList.remove('visually-hidden');
}));
}
}
handleUserAutocomplete() {
let self = this;
this.editor.codemirror.on("change", function (e) {
self.lastWord = trim(self.editor.value().split(' ').pop());
let list = self.element.getElementsByClassName('kbin-suggests');
for (let item of list) {
item.remove();
}
if (self.lastWord.startsWith('@')) {
if (self.lastWord.length > 2) {
self.fetchUsers(self.lastWord, self.element)
}
}
});
}
async fetchUsers(username, elem) {
try {
let response = await fetch(router().generate('ajax_fetch_users_suggestions', {username: username}));
response = await ok(response);
response = await response.json();
let div = document.createElement('div');
div.setAttribute("id", "kbin-suggest");
div.innerHTML = response.html;
elem.getElementsByClassName('editor-statusbar')[0].after(div);
const dropdownElem = new bootstrap.Dropdown(div.querySelectorAll('.dropdown-toggle')[0]);
dropdownElem.show();
} catch (e) {
}
}
acceptSuggest(e) {
e.preventDefault();
this.editor.value(this.editor.value().replace(new RegExp(this.lastWord + "\\b", 'ig'), '@' + e.target.innerHTML + ' '));
this.editor.element.focus(); // @todo
}
handleTagAutocomplete() {
}
}

129
assets/controllers/embed-controller.js
View file

@ -1,129 +0,0 @@
import {Controller} from '@hotwired/stimulus';
import {fetch, ok} from "../utils/http";
import router from "../utils/routing";
export default class extends Controller {
static targets = ['embed', 'container', 'close'];
static classes = ['hidden', 'loading', 'embed'];
static values = {
type: String,
image: String,
isVisible: Boolean,
loading: Boolean,
url: String,
html: String
};
async fetch(event) {
event.preventDefault();
if (this.isVisibleValue) {
this.close();
return;
}
if (this.htmlValue) {
this.loadScripts();
this.show();
return;
}
if (this.typeValue === 'image' && this.hasImageValue) {
this.htmlValue = `<img src='${this.imageValue}'>`;
this.show();
return;
}
this.loadingValue = true;
try {
if (this.typeValue === 'image') {
return;
}
const url = router().generate('ajax_fetch_embed', {url: this.urlValue});
let response = await fetch(url, {method: 'GET'});
response = await ok(response);
response = await response.json();
if (response.html === null) {
return;
}
this.htmlValue = response.html;
this.loadScripts();
this.show();
} catch (e) {
throw e;
} finally {
this.loadingValue = false;
}
}
close() {
this.containerTarget.innerHTML = '';
this.containerTarget.classList.add(this.hiddenClass);
this.closeTarget.classList.add(this.hiddenClass);
this.embedTarget.classList.add('d-inline');
this.isVisibleValue = false;
if (this.element.classList.contains('kbin-embed-content')) {
this.element.getElementsByClassName('kbin-clearfix')[0].remove();
}
}
show() {
this.containerTarget.innerHTML = this.htmlValue
this.containerTarget.classList.remove(this.hiddenClass);
this.closeTarget.classList.remove(this.hiddenClass);
this.embedTarget.classList.remove('d-inline');
this.isVisibleValue = true;
if (this.element.classList.contains('kbin-embed-content')) {
const span = document.createElement('span')
span.classList.add('clearfix', 'kbin-clearfix');
const link = this.element.getElementsByTagName('a')[0];
link.parentNode.insertBefore(span, link.nextSibling);
}
}
loadingValueChanged() {
if (this.loadingValue) {
this.embedTarget.classList.remove(this.embedClass);
this.embedTarget.classList.add(this.loadingClass);
} else {
if (this.hasEmbedTarget) {
this.embedTarget.classList.remove(this.loadingClass);
this.embedTarget.classList.add(this.embedClass);
}
}
}
loadScripts() {
let tmp = document.createElement("div");
tmp.innerHTML = this.htmlValue;
let el = tmp.getElementsByTagName('script');
if (el.length) {
let script = document.createElement("script");
script.setAttribute("src", el[0].getAttribute('src'));
script.setAttribute("async", "false");
// let exists = [...document.head.querySelectorAll('script')]
// .filter(value => value.getAttribute('src') >= script.getAttribute('src'));
//
// if (exists.length) {
// return;
// }
let head = document.head;
head.insertBefore(script, head.firstElementChild);
this.containerTarget.classList.remove('ratio')
this.containerTarget.classList.remove('ratio-16x9')
}
}
}

41
assets/controllers/entry-comment-controller.js
View file

@ -1,41 +0,0 @@
import {Controller} from '@hotwired/stimulus';
import router from "../utils/routing";
import {fetch, ok} from "../utils/http";
export default class extends Controller {
static values = {
id: Number,
};
remove(notification) {
if (this.idValue !== notification.detail.id) {
return;
}
this.element.remove();
}
async edit(notification) {
if (this.idValue !== notification.detail.id) {
return;
}
try {
const url = router().generate('ajax_fetch_entry_comment', {'id': notification.detail.id});
let response = await fetch(url, {method: 'GET'});
response = await ok(response);
response = await response.json();
const classList = this.element.classList;
let div = document.createElement('div');
div.innerHTML = response.html;
div.classList = classList;
this.element.innerHTML = div.firstElementChild.innerHTML;
} catch (e) {
}
}
}

48
assets/controllers/entry-controller.js
View file

@ -1,48 +0,0 @@
import {Controller} from '@hotwired/stimulus';
import router from "../utils/routing";
import {fetch, ok} from "../utils/http";
export default class extends Controller {
static targets = ['commentCounter'];
static values = {
id: Number,
};
remove(notification) {
if (this.idValue !== notification.detail.id) {
return;
}
this.element.remove();
}
async edit(notification) {
if (this.idValue !== notification.detail.id) {
return;
}
try {
const url = router().generate('ajax_fetch_entry', {'id': notification.detail.id});
let response = await fetch(url, {method: 'GET'});
response = await ok(response);
response = await response.json();
this.element.outerHTML = response.html;
} catch (e) {
}
}
increaseComments(notification) {
if (this.idValue === notification.detail.subject.id && this.hasCommentCounterTarget) {
this.commentCounterTarget.textContent = Number(this.commentCounterTarget.textContent) + 1;
}
}
decreaseComments(notification) {
if (this.idValue === notification.detail.subject.id && this.hasCommentCounterTarget) {
this.commentCounterTarget.textContent = Number(this.commentCounterTarget.textContent) - 1;
}
}
}

72
assets/controllers/entry-create-controller.js
View file

@ -1,72 +0,0 @@
import {Controller} from '@hotwired/stimulus';
import {useDebounce} from 'stimulus-use'
import {fetch, ok} from '../utils/http';
import router from '../utils/routing';
import Modal from 'bootstrap/js/dist/modal';
export default class extends Controller {
static debounces = ['fetchTitle']
static targets = ['sendButton', 'url', 'title', 'description', 'entries'];
static values = {
loading: Boolean,
};
connect() {
useDebounce(this, {wait: 800})
}
async fetchDuplicates() {
try {
const url = router().generate('ajax_fetch_duplicates');
let response = await fetch(url, {method: 'POST', body: JSON.stringify({'url': this.urlTarget.value})});
response = await ok(response);
response = await response.json();
if (response.total > 0) {
this.entriesTarget.innerHTML = response.html;
(new Modal(document.getElementById('duplicatesModal'))).show();
}
} catch (e) {
}
}
async fetchTitle() {
if (this.titleTarget.value) {
return;
}
if (!this.urlTarget.value) {
return;
}
this.loadingValue = true;
try {
const url = router().generate('ajax_fetch_title');
let response = await fetch(url, {method: 'POST', body: JSON.stringify({'url': this.urlTarget.value})});
response = await ok(response);
response = await response.json();
this.titleTarget.value = response.title;
this.descriptionTarget.value = response.description;
this.titleTarget.dispatchEvent(new Event('input'));
} catch (e) {
alert('Oops, something went wrong.');
throw e;
} finally {
this.loadingValue = false;
}
}
loadingValueChanged(loading) {
if (loading) {
this.sendButtonTarget.setAttribute('disabled', 'disabled')
this.titleTarget.setAttribute('disabled', 'disabled')
} else {
this.sendButtonTarget.removeAttribute('disabled')
this.titleTarget.removeAttribute('disabled')
}
}
}

88
assets/controllers/entry-list-controller.js
View file

@ -1,88 +0,0 @@
import { ApplicationController } from 'stimulus-use'
import { fetch, ok } from "../utils/http";
import router from "../utils/routing";
import Cookies from 'js-cookie';
export default class extends ApplicationController {
static values = {
magazineName: String,
counter: Boolean
};
async add(notification) {
const magazineName = notification.detail.magazine.name;
if (this.hasMagazineNameValue && this.magazineNameValue !== magazineName) {
return;
}
if (document.getElementById(`entry-${notification.detail.id}`)) {
return;
}
if (Cookies.get('user_option_auto_refresh') === 'true') {
try {
const url = router().generate('ajax_fetch_entry', { 'id': notification.detail.id });
let response = await fetch(url, { method: 'GET' });
response = await ok(response);
response = await response.json();
const html = response.html;
let div = document.createElement('div');
div.innerHTML = html;
this.element.prepend(div);
} catch (e) {
}
} else {
if(this.counterValue) {
this.increaseCounter();
}
}
}
async refresh() {
try {
let url = window.location.href;
let pagination = this.element.getElementsByClassName('pagination');
if(pagination.length) {
let items = pagination[0].getElementsByTagName('li');
for (let item of items) {
if(item.firstChild.innerHTML == 1) {
url = item.firstChild.href;
}
}
}
let response = await fetch(url, { method: 'GET' });
response = await ok(response);
response = await response.json();
const html = response.html;
let div = document.createElement('div');
div.innerHTML = html;
this.element.replaceWith(div);
this.resetCounter();
} catch (e) {
}
}
increaseCounter() {
let notificationCounter = document.getElementById('kbin-activity-counter');
notificationCounter.innerHTML = parseInt(notificationCounter.innerHTML) + 1;
notificationCounter.parentElement.classList.remove('visually-hidden');
}
resetCounter() {
let notificationCounter = document.getElementById('kbin-activity-counter');
notificationCounter.innerHTML = 0;
notificationCounter.parentElement.classList.add('visually-hidden');
}
}

41
assets/controllers/favourite-controller.js
View file

@ -1,41 +0,0 @@
import {Controller} from '@hotwired/stimulus';
import {fetch, ok} from "../utils/http";
export default class extends Controller {
static targets = ['counter'];
async toggle(event) {
event.preventDefault();
if (!window.KBIN_LOGGED_IN) {
window.location = window.KBIN_LOGIN;
return;
}
try {
let response = await fetch(event.target.action, {
method: 'POST',
body: new FormData(event.target)
});
response = await ok(response);
response = await response.json();
this.counterTarget.innerHTML = `(${response.count})`;
const btn = event.target.getElementsByTagName('button')[0];
if(response.isFavored) {
this.counterTarget.classList.remove('visually-hidden');
btn.classList.add('text-decoration-underline');
} else {
this.counterTarget.classList.add('visually-hidden');
btn.classList.remove('text-decoration-underline');
}
} catch (e) {
alert('Oops, something went wrong.');
throw e;
}
}
}

86
assets/controllers/infinite-scroll-controller.js
View file

@ -1,86 +0,0 @@
import {Controller} from '@hotwired/stimulus';
import {fetch, ok} from "../utils/http";
import Cookies from "js-cookie";
export default class extends Controller {
static targets = ['loading'];
static values = {
loading: Boolean
};
connect() {
if (Cookies.get('user_option_infinite_scroll') === 'true') {
// this.loadingValue = false;
window.infiniteScrollUrls = [];
this.handleInfiniteScroll()
}
}
async handleInfiniteScroll() {
let self = this;
let observer = new IntersectionObserver(function (pagination, observer) {
if (self.loadingValue === true) {
return;
}
if (pagination[0].isIntersecting !== true) {
return;
}
try {
self.loadingValue = true;
const paginationElem = pagination[0].target.getElementsByClassName('active')[0].nextElementSibling;
if (paginationElem.classList.contains('disabled')) {
return;
}
const url = paginationElem.getElementsByTagName('a')[0].href;
if (window.infiniteScrollUrls.includes(url)) {
return;
}
window.infiniteScrollUrls.push(url)
self.handleEntries(url);
} catch (e) {
} finally {
this.loadingValue = false;
observer.unobserve(self.element);
}
}, {threshold: [0]});
observer.observe(this.element);
}
async handleEntries(url) {
let response = await fetch(url, {method: 'GET'});
response = await ok(response);
response = await response.json();
let div = document.createElement('div');
div.innerHTML = response.html;
let articles = div.getElementsByTagName('article');
articles = [...articles];
for (const article of articles) {
if (null === document.getElementById(article.id)) {
this.element.before(article);
let comments = div.querySelector(`[data-comment-list-subject-id-value='${article.dataset.postIdValue}']`);
if (comments) {
this.element.before(comments)
}
}
}
this.element.after(div.querySelector(`[data-controller='infinite-scroll']`));
this.element.remove();
}
loadingValueChanged(val) {
this.loadingTarget.style.display = val === true ? 'block' : 'none';
}
}

72
assets/controllers/kbin-controller.js
View file

@ -1,72 +0,0 @@
import {Controller} from '@hotwired/stimulus';
import {fetch, ok} from "../utils/http";
import Cookies from 'js-cookie';
export default class extends Controller {
static targets = ['topBar', 'icon'];
static values = {
url: String,
}
connect() {
if (window.KBIN_LOGGED_IN) {
return true;
}
// const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
if (!Cookies.get('theme')) {
Cookies.set('theme', 'kbin-dark');
document.body.classList.toggle('kbin-dark');
}
}
toggleTopBar(e) {
e.preventDefault();
this.topBarTarget.classList.toggle('visually-hidden');
document.querySelector('.navbar-collapse').classList.remove('show')
let icons = document.querySelectorAll(`[data-kbin-target='icon']`);
icons.forEach(function (elem) {
if (elem.classList.contains('fa-caret-down')) {
elem.classList.remove('fa-caret-down');
elem.classList.add('fa-caret-up');
} else {
elem.classList.remove('fa-caret-up');
elem.classList.add('fa-caret-down');
}
})
}
async toggleTheme(e) {
e.preventDefault();
if (window.KBIN_LOGGED_IN) {
try {
let url = this.hasUrlValue ? this.urlValue : e.target.href;
let response = await fetch(url, {method: 'POST'});
response = await ok(response);
await response.json();
document.body.classList.toggle('kbin-dark');
} catch (e) {
document.body.classList.toggle('kbin-dark');
} finally {
}
} else {
if (!Cookies.get('theme')) {
document.body.classList.add('kbin-dark');
Cookies.set('theme', 'kbin-dark');
return true;
}
Cookies.set('theme', document.body.classList.contains('kbin-dark') ? 'kbin-light' : 'kbin-dark');
document.body.classList.toggle('kbin-dark');
}
}
}

9
assets/controllers/lightbox-controller.js
View file

@ -1,9 +0,0 @@
import {Controller} from '@hotwired/stimulus';
import GLightbox from 'glightbox';
export default class extends Controller {
connect() {
const params = {selector: '.kbin-thumb', openEffect: 'none', closeEffect: 'none', slideEffect: 'none'};
GLightbox(params);
}
}

17
assets/controllers/magazine-panel-theme-controller.js
View file

@ -1,17 +0,0 @@
import {Controller} from '@hotwired/stimulus';
export default class extends Controller {
static targets = ['basic', 'advanced']
changeMode(event) {
event.preventDefault();
if (this.advancedTarget.classList.contains('visually-hidden')) {
this.advancedTarget.classList.remove('visually-hidden')
this.basicTarget.classList.add('visually-hidden')
} else {
this.basicTarget.classList.remove('visually-hidden')
this.advancedTarget.classList.add('visually-hidden')
}
}
}

36
assets/controllers/markdown-popup-controller.js
View file

@ -1,36 +0,0 @@
import {Controller} from '@hotwired/stimulus';
import {fetch, ok} from "../utils/http";
import Modal from 'bootstrap/js/dist/modal';
export default class extends Controller {
async open(e) {
e.preventDefault();
try {
let response = await fetch(e.target.closest('a').href);
response = await ok(response);
response = await response.json();
let div = document.createElement('div');
div.innerHTML = response.html;
div.firstElementChild.setAttribute('id', 'markdown-popup')
document.body.appendChild(div);
(new Modal(document.getElementById('markdown-popup'))).show();
document.getElementById('markdown-popup').addEventListener('hidden.bs.modal', (e) => {
this.close();
});
} catch (e) {
alert('Oops, something went wrong.');
} finally {
}
}
close() {
document.getElementById('markdown-popup').remove();
}
}

65
assets/controllers/media-controller.js
View file

@ -1,65 +0,0 @@
import {Controller} from '@hotwired/stimulus';
import {fetch, ok} from "../utils/http";
export default class extends Controller {
static targets = ['modalButton', 'deleteButton', 'fileInput', 'canvas', 'thumb', 'close']
add() {
let reader = new FileReader();
let self = this;
reader.onload = function (event) {
let img = new Image();
let ctx = self.canvasTarget.getContext('2d');
img.onload = function () {
self.canvasTarget.width = img.width;
self.canvasTarget.height = img.height;
ctx.drawImage(img, 0, 0);
}
img.src = event.target.result;
}
reader.readAsDataURL(this.fileInputTarget.files[0]);
this.canvasTarget.classList.remove('d-none');
this.deleteButtonTarget.classList.remove('d-none');
this.modalButtonTarget.classList.add('d-none');
this.closeTarget.click();
}
async delete(event) {
event.preventDefault();
if (confirm('Jesteś pewien?') === false) {
return;
}
if (!this.canvasTarget.classList.contains('d-none')) {
this.canvasTarget.getContext('2d').clearRect(0, 0, 0, 0);
this.canvasTarget.classList.add('d-none');
this.deleteButtonTarget.classList.add('d-none');
this.modalButtonTarget.classList.remove('d-none');
this.fileInputTarget.value = '';
return;
}
try {
let response = await fetch(event.params.url, {method: 'POST'});
response = await ok(response);
response = await response.json();
this.thumbTarget.classList.add('d-none');
this.deleteButtonTarget.classList.add('d-none');
this.modalButtonTarget.classList.remove('d-none');
this.fileInputTarget.value = '';
} catch (e) {
alert('Oops, something went wrong.');
throw e;
}
}
}

13
assets/controllers/mention-popover-controller.js
View file

@ -1,13 +0,0 @@
import {Controller} from '@hotwired/stimulus';
import Popover from "bootstrap/js/dist/popover";
export default class extends Controller {
connect() {
super.connect();
const popoverTriggerList = [].slice.call(this.element.querySelectorAll('[data-bs-toggle="popover"]'))
popoverTriggerList.map(function (popoverTriggerEl) {
return new Popover(popoverTriggerEl)
})
}
}

16
assets/controllers/nav-search-controller.js
View file

@ -1,16 +0,0 @@
import {Controller} from '@hotwired/stimulus';
export default class extends Controller {
static targets = ['input'];
toggleSearch(e) {
e.preventDefault();
if(this.inputTarget.classList.contains('visually-hidden')) {
this.inputTarget.classList.remove('visually-hidden');
this.inputTarget.focus();
} else {
this.inputTarget.closest('form').submit();
}
}
}

144
assets/controllers/notify-controller.js
View file

@ -1,144 +0,0 @@
import bootstrap from "bootstrap/dist/js/bootstrap.min";
import {ApplicationController} from 'stimulus-use'
import Subscribe from '../event-source';
import Cookies from "js-cookie";
export default class extends ApplicationController {
static values = {
magazineName: String,
username: String,
entryId: Number
};
connect() {
this.es(
this.getTopics()
);
window.onbeforeunload = function (event) {
if (document.es !== undefined) {
document.es.close();
}
};
}
es(topics) {
if (document.es !== undefined) {
document.es.close();
}
let self = this;
let cb = function (e) {
let data = JSON.parse(e.data);
if (data.op.includes('Notification')) {
self.dispatch('Notification', data);
}
if (data.op === 'PostCreatedNotification' || data.op === 'EntryCreatedNotification') {
if (data.toast) {
if (Cookies.get('user_option_notifications') === undefined || Cookies.get('user_option_notifications') === 'true') {
self.toast(data.toast);
}
}
self.notify(data);
}
self.dispatch(data.op, data);
}
document.es = Subscribe(topics, cb);
// firefox bug: https://github.com/dunglas/mercure/issues/339#issuecomment-650978605
if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
document.es.onerror = (e) => {
Subscribe(topics, cb);
};
}
}
getTopics() {
let topics = [
'pub',
'count'
];
if (this.hasMagazineNameValue || this.hasUsernameValue || this.hasPostIdValue) {
topics = [
'count',
]
if (this.hasMagazineNameValue) {
topics.push(`/api/magazines/${this.magazineNameValue}`);
} else {
topics.push(`/api/magazines/{id}`);
}
if (this.hasUsernameValue) {
topics.push(`/api/user/${this.usernameValue}`);
}
if (this.hasEntryIdValue) {
topics.push(`/api/entries/${this.entryIdValue}`);
}
}
return topics;
}
toast(html) {
let div = document.createElement('div');
div.innerHTML = html;
div = div.firstElementChild;
let container = document.getElementById('kbin-toast-container')
container.append(div);
let t = new bootstrap.Toast(div);
t.show();
if (container.children.length >= 2) {
container.removeChild(container.firstChild);
}
t._element.addEventListener('hidden.bs.toast', function (e) {
e.target.remove();
})
}
notify(content) {
if (Cookies.get('user_option_browser_notifications') === undefined || Cookies.get('user_option_browser_notifications') === 'false') {
return;
}
if ('granted' === Notification.permission) {
this.createNotification(content);
return;
}
if ('denied' !== Notification.permission) {
Notification.requestPermission().then((permission) => {
if ('granted' === permission) {
this.createNotification(content);
}
});
}
}
createNotification(content) {
const notification = new Notification(content.title, {
...{body: content.body},
...(content.icon && {icon: content.icon}),
...(content.image && {image: content.image})
});
notification.addEventListener('click', function (event) {
window.focus();
if (content.url) {
window.location = content.url;
event.close();
}
})
}
}

62
assets/controllers/notify-counter-controller.js
View file

@ -1,62 +0,0 @@
import {ApplicationController} from 'stimulus-use'
import router from "../utils/routing";
import {fetch, ok} from '../utils/http';
export default class extends ApplicationController {
static targets = ['notifications', 'messages']
static classes = ['hidden']
connect() {
super.connect();
if (window.KBIN_LOGGED_IN) {
this.updateCounter();
}
}
async notification(event) {
if (!this.hasNotificationsTarget) {
return;
}
this.updateCounter();
}
async updateCounter() {
// let response = {
// count: 1
// };
// if (window.KBIN_LOGGED_IN) {
// response = {
// count: 0
// };
// const url = router().generate('ajax_fetch_user_notifications_count', {username: window.KBIN_USERNAME});
// response = await fetch(url);
// response = await ok(response);
// response = await response.json();
// }
// if (response.count > 0) {
// this.notificationsTarget.classList.remove('visually-hidden');
// let elem = this.notificationsTarget.getElementsByTagName('span')[0];
// elem.innerHTML = response.count;
// }
}
message(event) {
if (!this.hasMessagesTarget) {
return;
}
let elem = this.messagesTarget.getElementsByTagName('span')[0];
elem.innerHTML = parseInt(elem.innerHTML) + 1;
this.messagesTarget.classList.remove(this.hiddenClass);
}
}

37
assets/controllers/online-controller.js
View file

@ -1,37 +0,0 @@
import {Controller} from '@hotwired/stimulus';
import {fetch, ok} from "../utils/http";
import router from "../utils/routing";
export default class extends Controller {
static targets = ['counter'];
static classes = ['active'];
static values = {
magazineName: String,
entryId: Number,
};
async connect() {
return true;
let topic = 'count';
if (this.hasEntryIdValue) {
topic = encodeURIComponent('/api/entries/' + this.entryIdValue);
} else if (this.hasMagazineNameValue) {
topic = encodeURIComponent('/api/magazines/' + this.magazineNameValue);
}
try {
const url = router().generate('ajax_fetch_online', { topic: topic });
let response = await fetch(url);
response = await ok(response);
response = await response.json();
this.counterTarget.innerHTML = response.online;
} catch (e) {
throw e;
}
}
}

35
assets/controllers/post-comment-controller.js
View file

@ -1,35 +0,0 @@
import {Controller} from '@hotwired/stimulus';
import router from "../utils/routing";
import {fetch, ok} from "../utils/http";
export default class extends Controller {
static values = {
id: Number,
};
remove(notification) {
if (this.idValue !== notification.detail.id) {
return;
}
this.element.remove();
}
async edit(notification) {
if (this.idValue !== notification.detail.id) {
return;
}
try {
const url = router().generate('ajax_fetch_post_comment', {'id': notification.detail.id});
let response = await fetch(url, {method: 'GET'});
response = await ok(response);
response = await response.json();
this.element.outerHTML = response.html;
} catch (e) {
}
}
}

157
assets/controllers/post-controller.js
View file

@ -1,157 +0,0 @@
import {Controller} from '@hotwired/stimulus';
import {fetch, ok} from "../utils/http";
import router from "../utils/routing";
import RemoteMentions from "../utils/remote-mentions";
export default class extends Controller {
static targets = ['expand', 'form', 'commentCounter'];
static values = {
loading: Boolean,
id: Number,
commentList: String,
form: String,
};
async reply(event) {
event.preventDefault();
this.loadingValue = true;
try {
const url = event.target.href;
let response = await fetch(url, {method: 'GET'});
response = await ok(response);
response = await response.json();
this.formTarget.innerHTML = response.form;
let self = this;
this.formTarget.getElementsByTagName('form')[0].addEventListener('submit', function (e) {
self.send(e);
});
} catch (e) {
if (!window.KBIN_LOGGED_IN) {
window.location = window.KBIN_LOGIN;
return;
}
throw e;
} finally {
this.loadingValue = false;
}
}
async send(event) {
event.preventDefault();
this.loadingValue = true;
try {
const url = event.target.action;
let response = await fetch(url, {method: 'POST', body: new FormData(event.target)});
response = await ok(response);
response = await response.json();
this.element.nextElementSibling.insertAdjacentHTML('beforeend', response.html);
event.target.parentNode.innerHTML = ''
} catch (e) {
throw e;
} finally {
this.loadingValue = false;
}
}
async expand(event) {
event.preventDefault();
this.loadingValue = true;
let loader = document.createElement("span");
loader.classList.add('spinner-border', 'me-2');
this.expandTarget.parentNode.replaceChild(loader, this.expandTarget)
try {
const url = router().generate('ajax_fetch_post_comments', {'id': this.idValue});
let response = await fetch(url, {method: 'GET'});
response = await ok(response);
response = await response.json();
this.element.parentElement
.querySelectorAll(`[data-comment-list-subject-id-value="${this.idValue}"]`)
.forEach(e => {
e.remove()
})
// User profile page
let el = this.element.nextElementSibling
let comments = [];
while (el) {
if ('BLOCKQUOTE' !== el.nodeName) {
break;
}
comments.push(el);
el = el.nextElementSibling;
}
comments.map((blocquote) => {
blocquote.remove();
});
this.element.insertAdjacentHTML('afterend', response.html);
} catch (e) {
alert('Coś poszło nie tak...')
} finally {
loader.remove();
new RemoteMentions(); // @todo
this.loadingValue = false;
}
}
remove(notification) {
if (this.idValue !== notification.detail.id) {
return;
}
this.element.remove();
document.querySelector(`[data-comment-list-subject-id-value='${notification.detail.id}']`).remove()
}
async edit(notification) {
if (this.idValue !== notification.detail.id) {
return;
}
try {
const url = router().generate('ajax_fetch_post', {'id': notification.detail.id});
let response = await fetch(url, {method: 'GET'});
response = await ok(response);
response = await response.json();
this.element.outerHTML = response.html;
} catch (e) {
}
}
increaseComments(notification) {
if (this.idValue === notification.detail.subject.id && this.hasCommentCounterTarget) {
this.commentCounterTarget.textContent = Number(this.commentCounterTarget.textContent) + 1;
}
}
decreaseComments(notification) {
if (this.idValue === notification.detail.subject.id && this.hasCommentCounterTarget) {
this.commentCounterTarget.textContent = Number(this.commentCounterTarget.textContent) - 1;
}
}
}

84
assets/controllers/post-list-controller.js
View file

@ -1,84 +0,0 @@
import { ApplicationController } from 'stimulus-use'
import { fetch, ok } from "../utils/http";
import router from "../utils/routing";
import Cookies from 'js-cookie';
export default class extends ApplicationController {
static added = [];
static values = {
magazineName: String,
counter: Boolean
};
async add(notification) {
const magazineName = notification.detail.magazine.name;
if (this.hasMagazineNameValue && this.magazineNameValue !== magazineName) {
return;
}
if (document.getElementById(`post-${notification.detail.id}`)) {
return;
}
if (Cookies.get('user_option_auto_refresh') === 'true') {
try {
const url = router().generate('ajax_fetch_post', { 'id': notification.detail.id });
let response = await fetch(url, { method: 'GET' });
response = await ok(response);
response = await response.json();
this.element.insertAdjacentHTML('afterbegin', response.html);
} catch (e) {
}
} else {
if(this.counterValue) {
this.increaseCounter();
}
}
}
async refresh() {
try {
let url = window.location.href;
let pagination = this.element.getElementsByClassName('pagination');
if(pagination.length) {
let items = pagination[0].getElementsByTagName('li');
for (let item of items) {
if(item.firstChild.innerHTML == 1) {
url = item.firstChild.href;
}
}
}
let response = await fetch(url, { method: 'GET' });
response = await ok(response);
response = await response.json();
const html = response.html;
let div = document.createElement('div');
div.innerHTML = html;
this.element.replaceWith(div);
this.resetCounter();
} catch (e) {
}
}
increaseCounter() {
let notificationCounter = document.getElementById('kbin-activity-counter');
notificationCounter.innerHTML = parseInt(notificationCounter.innerHTML) + 1;
notificationCounter.parentElement.classList.remove('visually-hidden');
}
resetCounter() {
let notificationCounter = document.getElementById('kbin-activity-counter');
notificationCounter.innerHTML = 0;
notificationCounter.parentElement.classList.add('visually-hidden');
}
}

67
assets/controllers/report-controller.js
View file

@ -1,67 +0,0 @@
import {Controller} from '@hotwired/stimulus';
import {fetch, ok} from "../utils/http";
export default class extends Controller {
static targets = ['form'];
static values = {
loading: Boolean
};
async report(event) {
event.preventDefault();
this.loadingValue = true;
if (!window.KBIN_LOGGED_IN) {
window.location = window.KBIN_LOGIN;
return;
}
try {
let response = await fetch(event.target.href, {method: 'GET'});
response = await ok(response);
response = await response.json();
this.formTarget.innerHTML = '<div class="clearfix"></div>';
this.formTarget.innerHTML += response.form;
let self = this;
this.formTarget.getElementsByTagName('form')[0].addEventListener('submit', function (e) {
self.send(e);
});
} catch (e) {
alert('Oops, something went wrong.');
throw e;
} finally {
this.loadingValue = false;
}
}
async send(event) {
event.preventDefault();
this.loadingValue = true;
if (!window.KBIN_LOGGED_IN) {
window.location = window.KBIN_LOGIN;
return;
}
try {
let response = await fetch(event.target.action, {method: 'POST', body: new FormData(event.target)});
response = await ok(response);
response = await response.json();
event.target.parentNode.innerHTML = '';
alert('👍👍👍');
} catch (e) {
alert('Oops, something went wrong.');
throw e;
} finally {
this.loadingValue = false;
}
}
}

35
assets/controllers/scroll-top-controller.js
View file

@ -1,35 +0,0 @@
import {Controller} from '@hotwired/stimulus';
import Cookies from 'js-cookie';
import { useDispatch } from 'stimulus-use'
export default class extends Controller {
connect() {
useDispatch(this)
let self = this;
window.onscroll = function () {
self.scroll();
};
}
scroll(){
if (
document.body.scrollTop > 20 ||
document.documentElement.scrollTop > 20
) {
this.element.style.display = "block";
} else {
this.element.style.display = "none";
}
}
up() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
let notificationCounter = document.getElementById('kbin-activity-counter');
if(parseInt(notificationCounter.innerHTML) > 0) {
this.dispatch('up');
}
}
}

56
assets/controllers/show-more-controller.js
View file

@ -1,56 +0,0 @@
import {Controller} from '@hotwired/stimulus';
export default class extends Controller {
static values = {
isExpanded: Boolean
};
connect() {
this.checkHeight();
}
checkHeight() {
this.isExpandedValue = false;
this.element.style.maxHeight = '25rem'
if (this.element.scrollHeight - 30 > this.element.clientHeight
|| this.element.scrollWidth > this.element.clientWidth) {
this.moreBtn = this.createMoreBtn();
this.more();
} else {
this.element.style.maxHeight = null;
}
}
createMoreBtn() {
let moreBtn = document.createElement('div')
moreBtn.innerHTML = 'pokaż więcej';
moreBtn.classList.add('kbin-more', 'text-center', 'font-weight-bold');
this.element.parentNode.insertBefore(moreBtn, this.element.nextSibling);
return moreBtn;
}
more() {
this.moreBtn.addEventListener('click', e => {
if (e.target.previousSibling.style.maxHeight) {
e.target.previousSibling.style.maxHeight = null;
e.target.innerHTML = 'ukryj';
this.isExpandedValue = true;
} else {
e.target.previousSibling.style.maxHeight = '25rem';
e.target.innerHTML = 'pokaż więcej';
e.target.previousSibling.scrollIntoView();
this.isExpandedValue = false;
}
})
}
expand() {
if (!this.isExpandedValue) {
this.moreBtn.click();
}
}
}

65
assets/controllers/subscribe-controller.js
View file

@ -1,65 +0,0 @@
import {Controller} from '@hotwired/stimulus';
import {fetch, ok} from "../utils/http";
export default class extends Controller {
static targets = ['form', 'subCount'];
static classes = ['active'];
static values = {
isSubscribed: Boolean,
loading: Boolean,
subCount: Number,
addUrl: String,
removeUrl: String,
follow: String,
unfollow: String,
};
async subOrUnsub(event) {
event.preventDefault();
this.loadingValue = true;
if (!window.KBIN_LOGGED_IN) {
window.location = window.KBIN_LOGIN;
return;
}
try {
let response = await fetch(this.isSubscribedValue ? this.removeUrlValue : this.addUrlValue, {
method: 'POST',
body: new FormData(event.target)
});
response = await ok(response);
response = await response.json();
this.isSubscribedValue = response.isSubscribed;
this.subCountValue = response.subCount;
} catch (e) {
alert('Oops, something went wrong.');
throw e;
} finally {
this.loadingValue = false;
}
}
isSubscribedValueChanged(isSub) {
if (!this.hasFormTarget) {
return;
}
if (isSub) {
this.formTarget.classList.add(this.activeClass);
this.element.closest('.kbin-sub').getElementsByClassName('kbin-block-form')[0].classList.remove('kbin-block--active');
this.element.closest('.kbin-sub').getElementsByClassName('kbin-block')[0].dataset.blockIsBlockedValue = false;
this.formTarget.getElementsByTagName('button')[0].innerHTML = this.unfollowValue
} else {
this.formTarget.classList.remove(this.activeClass);
this.formTarget.getElementsByTagName('button')[0].innerHTML = this.followValue
}
}
subCountValueChanged(count) {
this.subCountTarget.innerHTML = count;
}
}

31
assets/controllers/tip-controller.js
View file

@ -1,31 +0,0 @@
import {Controller} from '@hotwired/stimulus';
import {fetch, ok} from "../utils/http";
export default class extends Controller {
static targets = ['container'];
async fetch(event) {
event.preventDefault();
try {
let response = await fetch(event.target.closest('a').href, {method: 'GET'});
response = await ok(response);
response = await response.json();
this.containerTarget.innerHTML = response.html;
this.element.style.backgroundColor = 'transparent';
} catch (e) {
alert('Oops, something went wrong.');
throw e;
} finally {
this.loadingValue = false;
}
}
close() {
this.element.style.backgroundColor = null;
this.containerTarget.innerHTML = '';
}
}

17
assets/controllers/title-counter-controller.js
View file

@ -1,17 +0,0 @@
import CharacterCounter from 'stimulus-character-counter'
export default class extends CharacterCounter {
static values = {
max: Number
}
update() {
super.update();
if (this.count > this.maxValue) {
this.counterTarget.classList.add('text-danger');
} else {
this.counterTarget.classList.remove('text-danger');
}
}
}

38
assets/controllers/user-data-controller.js
View file

@ -1,38 +0,0 @@
import {Controller} from '@hotwired/stimulus';
import Cookies from 'js-cookie';
export default class extends Controller {
static targets = ['auto_refresh', 'topbar', 'auto_embed', 'notifications', 'federation'];
connect() {
if (Cookies.get('user_option_auto_embed') === 'true') {
document.addEventListener('turbo:load', () => {
this.togglePreview()
});
}
}
toggle(e) {
Cookies.set('user_option_' + e.target.dataset.userDataValue, e.target.checked);
if (e.target.dataset.userDataValue === 'auto_embed' || e.target.dataset.userDataValue === 'topbar' || e.target.dataset.userDataValue === 'infinite_scroll') {
location.reload();
}
}
async togglePreview() {
const sleep = ms => new Promise(r => setTimeout(r, Math.random() * (500 - 2000) + 500));
let observer = new IntersectionObserver(function (entries, observer) {
if (entries[0].isIntersecting === true) {
entries[0].target.click();
observer.unobserve(entries[0].target);
}
}, {threshold: [0]});
for (const el of document.querySelectorAll('.kbin-preview')) {
observer.observe(el);
await sleep();
}
}
}

46
assets/controllers/user-popup-controller.js
View file

@ -1,46 +0,0 @@
import {Controller} from '@hotwired/stimulus';
import {fetch, ok} from "../utils/http";
import router from "../utils/routing";
import Modal from "bootstrap/js/dist/modal";
export default class extends Controller {
static values = {
username: String,
};
async mouse(e) {
e.preventDefault();
let self = this;
this.timeout = window.setTimeout(function () {
self.on();
}, 1000)
}
out() {
if (this.timeout) window.clearTimeout(this.timeout)
}
async on() {
this.element.classList.add('kbin-link-block');
const url = router().generate('ajax_fetch_user_popup', {username: this.usernameValue});
let response = await fetch(url, {method: 'GET'});
response = await ok(response);
response = await response.json();
if (document.contains(document.getElementById("kbin-user-popup"))) {
document.getElementById("kbin-user-popup").remove();
}
let div = document.createElement('div');
div.innerHTML = response.html;
document.getElementById('kbin').prepend(div);
(new Modal(document.getElementById("kbin-user-popup")).show());
this.element.classList.remove('kbin-link-block');
}
}

94
assets/controllers/vote-controller.js
View file

@ -1,94 +0,0 @@
import {Controller} from '@hotwired/stimulus';
import {fetch, ok} from "../utils/http";
const VOTE_UP = 1;
const VOTE_DOWN = -1;
export default class extends Controller {
static targets = ['upVote', 'upVoteCount', 'downVote', 'downVoteCount'];
static classes = ['uv', 'dv'];
static values = {
alreadyVoted: Boolean,
choice: Number,
upVoteCount: Number,
downVoteCount: Number,
loading: Boolean,
uvUrl: String,
dvUrl: String,
};
async up(event) {
event.preventDefault();
(async () => await this.vote(event, VOTE_UP))();
}
async down(event) {
event.preventDefault();
(async () => await this.vote(event, VOTE_DOWN))();
}
async vote(event, val) {
this.loadingValue = true;
this.alreadyVotedValue = true;
if (!window.KBIN_LOGGED_IN) {
window.location = window.KBIN_LOGIN;
return;
}
try {
let voteUrl = this.uvUrlValue;
if (val === VOTE_DOWN) {
voteUrl = this.dvUrlValue;
}
let response = await fetch(voteUrl, {
method: 'POST',
body: new FormData(event.target)
});
response = await ok(response);
response = await response.json();
this.choiceValue = response.choice;
this.upVoteCountValue = response.upVotes;
if (this.hasDownVoteTarget) {
this.downVoteCountValue = response.downVotes;
}
} catch (e) {
alert('Oops, something went wrong');
throw e;
} finally {
this.loadingValue = false;
}
}
loadingValueChanged(loading) {
if (loading) {
} else {
}
}
choiceValueChanged(event) {
if (!this.alreadyVotedValue) {
return;
}
this.upVoteTarget.classList.remove(this.uvClass);
if (this.hasDownVoteTarget) {
this.downVoteTarget.classList.remove(this.dvClass);
}
if (event === VOTE_UP) {
this.upVoteTarget.classList.add(this.uvClass);
} else if (event === VOTE_DOWN) {
this.downVoteTarget.classList.add(this.dvClass);
}
this.upVoteCountTarget.innerHTML = this.upVoteCountValue
if (this.hasDownVoteTarget) {
this.downVoteCountTarget.innerHTML = this.downVoteCountValue
}
}
}

17
assets/controllers/vote-counter-controller.js
View file

@ -1,17 +0,0 @@
import {ApplicationController} from 'stimulus-use'
export default class extends ApplicationController {
static targets = ['upVotes', 'downVotes'];
static values = {
subjectId: Number,
};
refresh(notification) {
if(this.subjectIdValue === notification.detail.id){
this.upVotesTarget.textContent = notification.detail.up;
if(this.hasDownVotesTarget) {
this.downVotesTarget.textContent = notification.detail.down;
}
}
}
}

17
assets/controllers/voters-inline-controller.js
View file

@ -1,17 +0,0 @@
import {Controller} from '@hotwired/stimulus';
import {fetch, ok} from "../utils/http";
export default class extends Controller {
static targets = ['container'];
async fetch(e) {
e.preventDefault();
let response = await fetch(e.target.parentElement.href, {method: 'GET'});
response = await ok(response);
response = await response.json();
this.element.innerHTML = response.html;
}
}

145
assets/styles/_variables.scss
View file

@ -1,66 +1,83 @@
$kbin-background: #fff;
$kbin-dark-background: #222;
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
) !default;
//colors
$kbin-blue: $primary;
$kbin-green: #4e805d;
$kbin-blue-shadow: #414f61;
$kbin-grey: #fbfbfb;
$kbin-grey-shadow: #eaeaea;
$font-size: (
small: 1.4rem,
default: 1.6rem,
large: 2.4rem,
optionsTitle: .9rem
);
// Links
$kbin-link-color: $link-color;
$kbin-link-hover-color: $link-hover-color;
$kbin-link-visited-color: #6a87a0;
$kbin-button-border-color: #ced4da;
// topbar
$kbin-topbar-background-color: #121212;
$kbin-topbar-link-hover-background-color: #282828;
$kbin-topbar-link-active-background-color: $kbin-grey;
$kbin-topbar-link-active-hover-background-color: $kbin-grey;
// navbar
$kbin-navbar-background-color: $kbin-grey;
$kbin-navbar-border-color: #d2d2d2;
$kbin-navbar-link-color: $kbin-link-color;
$kbin-navbar-link-hover-color: $kbin-link-visited-color;
$kbin-navbar-link-hover-border-color: #8c8c8c;
$kbin-navbar-link-active-border-color: $kbin-grey-shadow;
$kbin-navbar-quicklinks-hover-background-color: $kbin-grey;
$kbin-dark-navbar-background-color: #343738;
$kbin-dark-navbar-border-color: #525658;
$kbin-dark-navbar-link-color: $kbin-link-color;
// sidebar
$kbin-sidebar-button-border-color: $kbin-button-border-color;
// entry-list
$kbin-entry-list-item-border-color: #eaeaea;
$kbin-entry-list-item-nth-background-color: $kbin-grey;
$kbin-entry-vote-button-background-color: #efefef;
$kbin-entr-vote-button-hover-background-color: #656565;
$kbin-dark-entry-list-item-border-color: #191919;
$kbin-dark-entry-list-item-nth-background-color: #2c2c2c;
$kbin-dark-entry-vote-button-background-color: #1a1a1a;
// comment-list
$kbin-comment-list-item-border-color: #eaeaea;
$kbin-comment-list-item-nth-background-color: $kbin-grey;
$kbin-comment-vote-button-background-color: #efefef;
$kbin-comment-vote-button-hover-background-color: #656565;
$kbin-dark-comment-list-item-border-color: #191919;
$kbin-dark-comment-list-item-nth-background-color: #2c2c2c;
$kbin-dark-comment-vote-button-background-color: #1f1f1f;
$kbin-dark-comment-vote-button-hover-background-color: #1f1f1f;
// vote
$kbin-vote-up: $kbin-green;
$kbin-vote-down: #b0403d;
$kbin-vote-none: #a56b1f;
$kbin-dark-vote-up: #24422d;
$kbin-dark-vote-down: #69110f;
$themes: (
light:(
// layout
bgColor: #ecf0f1,
// typo
textColor: #0f0f0f,
linkColor: #37769e,
linkColorHover:#275878,
metaTextColor: #606060,
metaBorder: 1px dashed #e5eaec,
iconFilter: invert(68%) sepia(5%) saturate(544%) hue-rotate(135deg) brightness(95%) contrast(89%),
iconFilterHover: invert(21%) sepia(14%) saturate(1463%) hue-rotate(170deg) brightness(101%) contrast(84%),
// header
headerBgColor: #367FB5,
headerLinkColor: #fff,
headerLinkColorHover: #e8e8e8,
headerIconFilter: brightness(0) invert(1),
headerIconFilterHover: brightness(0) invert(1),
// options
optionsBgColor: #fff,
optionsBorder: 1px solid #e5eaec,
optionsLinkColor: #95a5a6,
optionsLinkColorHover: #32465b,
optionsLinkHoverBorder: 3px solid #32465b,
optionsIconFilter: invert(68%) sepia(5%) saturate(544%) hue-rotate(135deg) brightness(95%) contrast(89%),
optionsIconFilterHover: invert(21%) sepia(14%) saturate(1463%) hue-rotate(170deg) brightness(101%) contrast(84%),
// main
mainSectionBgColor: #fff,
mainSectionBorder: 1px solid #e5eaec,
// sidebar
sidebarSectionBgColor: #fff,
sidebarSectionBorder: 1px solid #e5eaec,
sidebarSectionTextColor: #606060,
sidebarSectionHeaderTextColor: #909ea2,
sidebarSectionHeaderBorder: 1px solid #e5eaec,
sidebarSectionMetaBorder: 1px dashed #e5eaec,
sidebarSectionFooterLinkColor: #37769e,
sidebarSectionFooterLinkColorHover: #275878,
// entry
entryBgColor: #fff,
entryBorder: 1px solid #e5eaec,
entryLinkColor: #37769e,
entryLinkColorHover: #275878,
entryLinkColorVisited: #7e8f99,
entryMetaLinkColor: #606060,
// user
avatarBorder: 3px solid #ecf0f1,
//vote
voteBgColor: #f3f3f3,
voteTextColor: #b6b6b6,
voteTextColorHover: #000,
//forms
formInputBorder: 1px solid #e5eaec,
formInputFocusOutline: 1px solid #367FB5,
buttonBgColor: #367fb5,
buttonBgColorHover: #345d7b,
buttonSecondaryBgColor: #fff,
buttonSecondaryTextColor: #606060,
buttonSecondaryTextHoverColor: #f3f3f3,
buttonSecondaryBorder: 1px dashed #e5eaec,
// footer
footerBgColor: #367FB5,
footerTextColor: #fff,
footerLinkColor: #fff,
footerLinkColorHover: #fff,
),
);

466
assets/styles/app.scss
View file

@ -1,450 +1,18 @@
$link-color: #346a98;
$link-hover-color: #23527c;
$primary: #556880;
@import "mixins/animations.scss";
@import "mixins/theme.scss";
@import "_variables.scss";
@import "layout/_normalize.scss";
@import "layout/_breakpoints.scss";
@import "layout/_layout.scss";
@import "layout/_typo.scss";
@import "layout/_forms.scss";
@import "layout/_icons.scss";
@import "components/_header.scss";
@import "components/_sidebar.scss";
@import "components/_main.scss";
@import "components/_vote.scss";
@import "components/_entry.scss";
@import "components/_comments.scss";
@import "components/_post.scss";
@import "components/_footer.scss";
@import "~bootstrap/scss/bootstrap";
svg.ada {
fill: $body-color;
width: 1.5rem;
.kbin-dark & {
fill: #d4d4d4;
}
}
html {
scroll-behavior: auto !important;
}
@import "~@fortawesome/fontawesome-free/css/all.min.css";
@import "easymde/dist/easymde.min.css";
@import "glightbox/dist/css/glightbox.min.css";
@import "variables";
@import "components/darkstyle";
@import "components/user_content";
@import "components/toast";
@import "components/cookies";
@import "components/user_popup";
@import "components/media";
@import "components/featured-magazines";
@import "components/navbar";
@import "components/main-menu";
@import "components/footer";
@import "components/sidebar";
@import "components/magazine";
@import "components/entry";
@import "components/comment";
@import "components/post";
@import "components/vote";
@import "components/sub_buttons";
@import "components/people";
@import "components/datepicker";
@import "components/profile";
@import "components/show-more";
@import "components/landing";
#kbin {
padding-top: 1.7rem;
//background-image: linear-gradient(#e5e5e5 0%, $kbin-background 120px);
//.kbin-dark & {
// background-image: linear-gradient(#000, #161616 120px);
//}
}
.kbin-container {
@include media-breakpoint-down(lg) {
position: relative;
}
.kbin-main {
@include media-breakpoint-up(lg) {
position: relative;
}
}
}
.kbin-magazine-background {
background: url("../images/create-magazine-bg.png") no-repeat top right;
background-size: 50%;
z-index: -1;
width: 100%;
height: 100%;
position: absolute;
.kbin-dark & {
background-image: none;
}
@include media-breakpoint-down(xxl) {
opacity: .1;
}
@include media-breakpoint-up(lg) {
top: -1rem;
right: -1.5rem;
}
}
.kbin-cardano-background {
background: url("../images/ada.png") no-repeat 90% 20%;
background-size: 40%;
z-index: -1;
width: 100%;
height: 100%;
position: absolute;
opacity: .7;
@include media-breakpoint-down(lg) {
opacity: .1;
}
@include media-breakpoint-down(lg) {
bottom: 0;
right: 0;
}
}
.font-weight-bold {
font-weight: bold;
}
.font-weight-light {
font-weight: 200;
}
.choices__inner {
background: initial;
font-size: initial;
}
.nav-tabs {
font-size: small;
}
.EasyMDEContainer {
.editor-toolbar {
button {
i {
.kbin-dark & {
color: white !important;
}
}
&:hover {
.kbin-dark & {
background: grey;
}
}
}
}
}
.CodeMirror,
.CodeMirror-scroll {
min-height: 100px !important;
}
.display-none {
display: none !important;
}
.link-to-title {
text-decoration: none;
}
.kbin-logo-color {
color: #6c757d !important;
}
a {
text-decoration: none !important;
&:hover {
text-decoration: none !important;
}
}
.kbin-link-block {
pointer-events: none;
}
.spinner-border {
width: 1rem;
height: 1rem;
}
.scroll-progress {
height: 1px;
position: fixed;
z-index: 1000;
background: $kbin-navbar-border-color;
}
.loading-cursor {
cursor: progress;
}
.opacity-50 {
opacity: .5;
}
.choices__list--dropdown {
z-index: 100;
}
.choices[data-type*=select-one] .choices__input {
.kbin-dark & {
background-color: #1f1f1f;
}
}
.choices__inner,
.choices.is-disabled .choices__inner, .choices.is-disabled .choices__input {
background: #fff;
.kbin-dark & {
background: #1f1f1f;
}
}
.btn-link {
text-decoration: none;
background: none;
}
.turbo-progress-bar {
background-color: $kbin-grey !important;
}
hr {
height: 5px !important;
color: $kbin-entry-list-item-border-color;
.kbin-dark & {
color: $kbin-dark-entry-list-item-border-color;
}
}
thead, tbody {
border-bottom: 5px solid $kbin-entry-list-item-border-color;
.kbin-dark & {
border-bottom: 5px solid $kbin-dark-entry-list-item-border-color;
}
}
.kbin-users {
.kbin-avatar {
max-width: 2rem;
float: left;
margin-right: .5rem;
}
}
.scrolled-down {
transform: translateY(-100%);
transition: all 0.3s ease-in-out;
}
.scrolled-up {
transform: translateY(0);
transition: all 0.3s ease-in-out;
}
.kbin-embed, .kbin-embed-container {
display: block;
}
.accordion-item {
background: none;
}
.nav-pills .active {
color: white !important;
background-image: var(--bs-gradient) !important;
}
.choices__list--multiple .choices__item {
background-color: $primary !important;
border: 0 !important;
}
.choices[data-type*=select-multiple] .choices__button, .choices[data-type*=text] .choices__button {
border-color: $kbin-blue-shadow;
}
.choices__input {
background: none !important;
}
.choices__input {
.kbin-dark & {
color: white;
}
}
.offcanvas {
@include media-breakpoint-down(lg) {
overflow: auto;
}
.kbin-dark & {
background: $kbin-dark-background;
}
}
.dot {
height: 15px;
width: 15px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
select {
padding: 7px;
}
.disabled {
cursor: not-allowed;
}
.CodeMirror-cursor {
.kbin-dark & {
border-color: white !important;
}
}
.choices__input {
caret-color: white !important;
}
.alert {
.btn-close {
filter: none;
}
a {
color: $primary;
&:hover {
color: black !important;
}
}
}
.kbin-preview {
cursor: pointer;
}
.nav-item {
.fa-lightbulb {
background: yellow;
.kbin-dark & {
background: none;
}
}
}
.kbin-post-thumb {
max-height: 500px;
}
.kbin-entry-thumb {
max-height: 300px;
object-fit: contain;
}
.popover-header {
font-size: .8rem;
border-radius: 10px;
.kbin-dark & {
color: #000000;
}
}
.input-group-tags {
.focus .ts-control {
box-shadow: none !important;
}
.ts-control {
background: none;
box-shadow: none !important;
border: none !important;
}
}
.kbin-dark .modal-backdrop.show {
opacity: 0;
}
.modal-backdrop.show {
opacity: 0;
}
.modal-backdrop.fade {
opacity: 0;
}
.modal-backdrop {
--bs-backdrop-zindex: 0;
--bs-backdrop-bg: #000;
--bs-backdrop-opacity: 0.5;
position: fixed;
top: 0;
left: 0;
z-index: 0;
width: 0;
height: 0;
}
.reddit-post {
background: white;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
.kbin-dark & {
background: #262626;
}
}
.nav-pills .nav-link {
border-radius: unset;
}
.kbin-dark .nav-tabs .nav-item.show .nav-link, .kbin-dark .nav-tabs .nav-link.active {
background: #191919;
}
.hr {
.kbin-dark & {
opacity: .7;
}
opacity: .2;
width: 250px;
height: 1px;
background: rgb(79, 79, 79);
background: linear-gradient(90deg, rgba(79, 79, 79, 1) 0%, rgba(79, 79, 79, 1) 61%, rgba(34, 34, 34, 1) 100%);
}
#btn-back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
//display: none;
}
// @include media-breakpoint-down(md) { ... }
// @include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xxl) {
.container {
max-width: 1280px !important;
}
}

167
assets/styles/components/_comments.scss Normal file
View file

@ -0,0 +1,167 @@
.kbin-comments,
.kbin-comment-add {
margin-bottom: .5rem;
font-size: map-get($font-size, 'small');
&--no-comments {
color: #95a6a6;
font-size: 2.2rem;
font-weight: bold;
text-align: center;
@include themify($themes) {
background-color: themed('mainSectionBgColor');
border: themed('mainSectionBorder');
}
}
}
.kbin-comment-add {
padding: 2rem 2rem;
@include themify($themes) {
background-color: themed('mainSectionBgColor');
border: themed('mainSectionBorder');
}
textarea {
width: 100%;
height: 10rem;
}
&-actions {
display: flex;
justify-content: flex-end;
gap: 1rem;
button {
i {
@include themify($themes) {
filter: themed('iconFilter');
&:hover {
filter: themed('iconFilterHover');
}
}
}
&:hover,
&:focus-visible {
i {
@include themify($themes) {
filter: themed('iconFilterHover');
}
}
}
}
}
}
.kbin-comment {
display: grid;
grid-gap: 1rem;
grid-template-columns: min-content auto min-content;
grid-template-areas: "avatar header vote"
"avatar body body"
"avatar footer footer";
padding: 2rem 1rem;
margin: 0 0 1rem 0;
@include themify($themes) {
background-color: themed('mainSectionBgColor');
border: themed('mainSectionBorder');
}
header {
opacity: .7;
grid-area: header;
@include themify($themes) {
color: themed('metaTextColor');
a {
font-weight: bold;
}
span {
a {
font-weight: normal !important;
color: themed('metaTextColor') !important;
}
}
}
}
aside {
grid-area: vote;
}
div {
grid-area: body;
p {
margin-top: 0
}
}
figure {
margin: 0;
grid-area: avatar;
img {
@include themify($themes) {
border: themed('avatarBorder');
}
}
}
footer {
opacity: .7;
grid-area: footer;
menu {
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
list-style: none;
column-gap: 1rem;
a {
padding: .8rem;
font-size: 1.2rem;
@include themify($themes) {
color: themed('entryMetaLinkColor') !important;
&:hover {
color: themed('linkColorHover') !important;
}
}
}
li:first-child a {
padding-left: 0;
}
}
}
&:hover,
&:focus-visible {
header, footer {
-webkit-animation: fadein .5s linear 1 normal forwards;
@-webkit-keyframes fadein {
from {
opacity: .7;
}
to {
opacity: 1;
}
}
}
}
.kbin-vote {
display: flex;
gap: 1rem;
button {
width: 7rem;
height: 2.5rem;
}
}
}

14
assets/styles/components/_cookies.scss
View file

@ -1,14 +0,0 @@
.kbin-cookies {
z-index: 1001;
background: white;
position: fixed;
bottom: 0;
width: 100%;
border-top: 1px solid $kbin-entry-list-item-border-color;
.kbin-dark & {
background: $kbin-dark-entry-list-item-nth-background-color;
border-top: 1px solid $kbin-dark-entry-list-item-border-color;
color: #fff !important;
}
}

699
assets/styles/components/_darkstyle.scss
View file

@ -1,699 +0,0 @@
$kbin-dark-link-color: #cacece;
.kbin-dark {
color: $kbin-dark-link-color;
background: $kbin-dark-background;
background-repeat: repeat;
background-position: top left;
.btn-close {
color: #fff;
filter: invert(1) grayscale(100%) brightness(200%);
}
.accordion-item {
color: $kbin-dark-link-color;
}
a {
color: $kbin-dark-link-color;
}
a:hover,
a:active {
color: #eee !important;
}
.text-dark {
color: #fff !important;
}
.list-group-item {
color: $white;
}
.kbin-footer {
background-color: #2b2b2b;
border-top: 1px solid #1f1f1f;
}
.CodeMirror {
border-color: #313131 !important;
color: #fff !important;
background: #1f1f1f;
}
.editor-toolbar a {
color: #fff !important;
}
.kbin-search-btn {
border-color: #333;
color: #eee;
}
.kbin-sub .btn, .kbin-follow .btn, .kbin-block .btn {
border-color: #202425;
}
.kbin-comment-header {
border-color: #191919;
}
.kbin-sidebar .kbin-add .kbin-quick-links a {
background: #2b2b2b;
border-color: #2b2b2b;
color: #fff;
}
.kbin-sidebar .kbin-add .kbin-quick-links a.active {
background: #1f1f1f !important;
}
.kbin-sidebar .kbin-add .kbin-quick-links a:hover {
background: #1f1f1f;
}
.kbin-sidebar .kbin-add a {
color: white;
}
/* BUTTONS */
.btn-link {
color: #cacece;
text-decoration: none;
background: none;
&:hover {
color: #eee;
}
}
.btn-dark {
color: #1f1f1f;
background-color: #f8f9fa;
border-color: #f8f9fa;
}
.btn-dark:hover {
color: #1f1f1f;
background-color: #f9fafb;
border-color: #f9fafb;
}
.btn-check:focus + .btn-dark,
.btn-dark:focus {
color: #1f1f1f;
background-color: #f9fafb;
border-color: #f9fafb;
box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5);
}
.btn-check:checked + .btn-dark,
.btn-check:active + .btn-dark,
.btn-dark:active,
.btn-dark.active,
.show > .btn-dark.dropdown-toggle {
color: #1f1f1f;
background-color: #f9fafb;
border-color: #f9fafb;
}
.btn-check:checked + .btn-dark:focus,
.btn-check:active + .btn-dark:focus,
.btn-dark:active:focus,
.btn-dark.active:focus,
.show > .btn-dark.dropdown-toggle:focus {
box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5);
}
.btn-dark:disabled,
.btn-dark.disabled {
color: #1f1f1f;
background-color: #f8f9fa;
border-color: #f8f9fa;
}
.btn-light {
color: #fff;
background-color: #212529;
border-color: #212529;
}
.btn-light:hover {
color: #fff;
background-color: #1c1f23;
border-color: #1a1e21;
}
.btn-check:focus + .btn-light,
.btn-light:focus {
color: #fff;
background-color: #1c1f23;
border-color: #1a1e21;
box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5);
}
.btn-check:checked + .btn-light,
.btn-check:active + .btn-light,
.btn-light:active,
.btn-light.active,
.show > .btn-light.dropdown-toggle {
color: #fff;
background-color: #1a1e21;
border-color: #191c1f;
}
.btn-check:checked + .btn-light:focus,
.btn-check:active + .btn-light:focus,
.btn-light:active:focus,
.btn-light.active:focus,
.show > .btn-light.dropdown-toggle:focus {
box-shadow: 0 0 0 0.25rem rgba(66, 70, 73, 0.5);
}
.btn-light:disabled,
.btn-light.disabled {
color: #fff;
background-color: #212529;
border-color: #212529;
}
.btn-outline-dark {
color: #f8f9fa;
border-color: #f8f9fa;
}
.btn-outline-dark:hover {
color: #1f1f1f;
background-color: #f8f9fa;
border-color: #f8f9fa;
}
.btn-check:focus + .btn-outline-dark,
.btn-outline-dark:focus {
box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5);
}
.btn-check:checked + .btn-outline-dark,
.btn-check:active + .btn-outline-dark,
.btn-outline-dark:active,
.btn-outline-dark.active,
.btn-outline-dark.dropdown-toggle.show {
color: #1f1f1f;
background-color: #f8f9fa;
border-color: #f8f9fa;
}
.btn-check:checked + .btn-outline-dark:focus,
.btn-check:active + .btn-outline-dark:focus,
.btn-outline-dark:active:focus,
.btn-outline-dark.active:focus,
.btn-outline-dark.dropdown-toggle.show:focus {
box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5);
}
.btn-outline-dark:disabled,
.btn-outline-dark.disabled {
color: #f8f9fa;
background-color: transparent;
}
.btn-outline-light {
color: #212529;
border-color: #212529;
}
.btn-outline-light:hover {
color: #fff;
background-color: #212529;
border-color: #212529;
}
.btn-check:focus + .btn-outline-light,
.btn-outline-light:focus {
box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5);
}
.btn-check:checked + .btn-outline-light,
.btn-check:active + .btn-outline-light,
.btn-outline-light:active,
.btn-outline-light.active,
.btn-outline-light.dropdown-toggle.show {
color: #fff;
background-color: #212529;
border-color: #212529;
}
.btn-check:checked + .btn-outline-light:focus,
.btn-check:active + .btn-outline-light:focus,
.btn-outline-light:active:focus,
.btn-outline-light.active:focus,
.btn-outline-light.dropdown-toggle.show:focus {
box-shadow: 0 0 0 0.25rem rgba(33, 37, 41, 0.5);
}
.btn-outline-light:disabled,
.btn-outline-light.disabled {
color: #212529;
background-color: transparent;
}
/* DROPDOWNS */
.dropdown-menu {
color: #dee2e6;
background-color: #343a40;
border-color: rgba(0, 0, 0, 0.15);
}
.dropdown-menu .dropdown-item {
color: #dee2e6;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
color: #fff;
background-color: rgba(0, 0, 0, 0.15);
}
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
color: #fff;
background-color: #333;
}
.dropdown-menu .dropdown-item.disabled,
.dropdown-menu .dropdown-item:disabled {
color: #adb5bd;
}
.dropdown-menu .dropdown-divider {
border-color: rgba(0, 0, 0, 0.15);
}
.dropdown-menu .dropdown-item-text {
color: #dee2e6;
}
.dropdown-menu .dropdown-header {
color: #adb5bd;
}
/* LIST GROUPS */
.list-group-item-action {
color: #fff;
}
.list-group-item-action:hover,
.list-group-item-action:focus {
color: #fff;
background-color: #333;
}
.list-group-item-action:active {
color: #fff;
background-color: #1f1f1f;
}
.list-group-item {
background-color: #202020;
border: 1px solid #333;
}
.list-group-item:not(:first-child) {
border-top: none;
}
.list-group-item.disabled,
.list-group-item:disabled {
color: #fff;
background-color: #1f1f1f;
}
.list-group-item.active {
color: #fff;
background-color: #333;
border-color: #333;
}
/* TABS */
.nav-tabs {
border-bottom: 1px solid #1f1f1f;
}
.nav-tabs .nav-link:hover,
.kbin-dark.nav-tabs .nav-link:focus {
border-color: #212529 #212529 #1f1f1f;
}
.nav-tabs .nav-link.disabled {
color: #333;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
color: #fff;
background-color: #1f1f1f;
border-color: #212529 #212529 #1f1f1f;
}
/* PAGINATION */
.page-link {
color: #fff;
background-color: #202020;
border: 1px solid #333;
}
.page-link:hover {
color: #fff;
background-color: #333;
border-color: #333;
}
.page-link:focus {
color: #fff;
background-color: #1f1f1f;
}
.page-item.active .page-link {
color: #fff;
background-color: #333;
border-color: #333;
}
.page-item.disabled .page-link {
color: #fff;
background-color: #1f1f1f;
border-color: #333;
}
/* BACKGROUNDS */
.bg-light {
background-color: #212529 !important;
}
.bg-dark {
background-color: #f8f9fa !important;
}
.bg-white {
background-color: #1f1f1f !important;
}
.bg-white.text-white,
.bg-dark.text-white,
.bg-warning.text-dark,
.bg-info.text-dark {
color: #212529 !important;
}
/* BORDERS */
.border,
.border-top,
.border-end,
.border-bottom,
.border-start {
border-color: #212529 !important;
}
/* BREADCRUMB */
.breadcrumb.border {
border-color: #333 !important;
}
/* SHADOWS */
.shadow {
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}
.shadow-sm {
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}
.shadow-lg {
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}
/* CARDS */
.card {
background-color: #1f1f1f;
border: 1px solid rgba(0, 0, 0, 0.125);
}
/* MODALS */
.modal-content {
background-color: #1f1f1f;
border: 1px solid rgba(0, 0, 0, 0.2);
}
.modal-header {
border-bottom: 1px solid #212529;
}
.modal-footer {
border-top: 1px solid #212529;
}
.modal-backdrop.show {
opacity: 0.75;
}
/* TOASTS */
.toast {
background-color: rgba(0, 0, 0, 0.85);
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.toast-header {
color: #6c757d;
background-color: rgba(0, 0, 0, 0.85);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
/* ACCORDIONS */
.accordion:not(.accordion-flush) {
border-top: 1px solid #333;
border-top-left-radius: 0.25rem !important;
border-top-right-radius: 0.25rem !important;
}
.accordion-button {
color: #fff;
background-color: #1f1f1f;
border: 1px solid #333;
border-top: none;
}
.accordion-button:not(.collapsed) {
color: #fff;
background-color: #202020;
border-bottom: none;
}
.accordion-button::after {
filter: invert(1) grayscale(100%) brightness(200%);
}
.accordion-collapse {
border: 1px solid #333;
}
.accordion-flush .accordion-button {
border-right: 0;
border-left: 0;
border-radius: 0;
}
.accordion-flush .accordion-collapse {
border-width: 0;
}
.accordion-flush .accordion-item:first-of-type .accordion-button {
border-top-width: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.accordion-flush .accordion-item:last-of-type .accordion-button.collapsed {
border-bottom-width: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
/* PROGRESS BARS */
.progress {
background-color: #333;
}
/* FORMS */
.form-control::-webkit-input-placeholder,
.form-control::-moz-placeholder,
.form-control::placeholder {
color: #ccc;
}
.form-control-plaintext {
color: #ccc;
}
.form-control {
color: #fff;
background-color: #1f1f1f;
border: 1px solid #333;
}
.input-group-text {
color: #fff;
background-color: #333;
border: 1px solid #333;
}
.form-select {
color: #fff;
border-color: #333 !important;
background: #1f1f1f url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23ffffff' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
border: 1px solid #202020;
}
.form-select option {
color: #fff;
}
.form-select:disabled {
color: #666;
background-color: #333;
}
.form-select:-moz-focusring {
text-shadow: 0 0 0 #495057;
}
.form-floating > .form-control::-webkit-input-placeholder,
.form-floating > .form-control::-moz-placeholder,
.form-floating > .form-control::placeholder {
color: transparent;
}
.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label,
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label,
.form-floating > .form-control:-webkit-autofill ~ label {
opacity: 0.65;
}
.form-control.is-invalid, .was-validated .form-control:invalid {
border-color: #dc3545;
}
.form-control.is-valid, .was-validated .form-control:valid {
border-color: #198754;
}
.form-range::-webkit-slider-runnable-track {
background-color: #333;
}
.form-range::-moz-range-thumb {
background-color: #333;
}
.form-range::-moz-range-thumb:active {
background-color: #b6d4fe;
}
.form-range::-moz-range-track {
background-color: #333;
}
.form-range:disabled::-webkit-slider-thumb {
background-color: #666;
}
.form-range:disabled::-moz-range-thumb {
background-color: #666;
}
/* CAROUSEL - CSS here if you want it... */
/*
.carousel .carousel-control-prev-icon,
.carousel .carousel-control-next-icon { filter: invert(1) grayscale(100); }
.carousel .carousel-indicators li { background-color: #1f1f1f; }
.carousel .carousel-caption { color: #1f1f1f; }
*/
/* TABLES */
.table {
--bs-table-bg: transparent;
--bs-table-striped-color: #fff;
--bs-table-striped-bg: rgba(0, 0, 0, 0.05);
--bs-table-active-color: #fff;
--bs-table-active-bg: rgba(0, 0, 0, 0.1);
--bs-table-hover-color: #fff;
--bs-table-hover-bg: rgba(0, 0, 0, 0.075);
color: #fff;
border-color: #333 !important;
}
/* TOOLTIPS */
.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
border-top-color: #fff;
}
.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
border-right-color: #fff;
}
.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
border-bottom-color: #fff;
}
.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
border-left-color: #fff;
}
.tooltip-inner {
color: #1f1f1f;
background-color: #fff;
}
.img-thumbnail {
background-color: #202020;
border-color: #2e2f2f;
}
.kbin-post-content,
.kbin-comment-content,
.kbin-entry-content {
a {
color: #718db1;
}
}
select {
color: #fff;
background-color: #1f1f1f;
}
}

90
assets/styles/components/_datepicker.scss
View file

@ -1,90 +0,0 @@
@import '../datepicker/datepicker';
@import '../datepicker/mixins';
$dp-background-color: $white !default;
$dp-border-color: $border-color !default;
$dp-border-radius: $border-radius !default;
$dp-border-radius-small: $border-radius-sm !default;
$dp-line-height-base: 1.5 !default;
$dp-font-size-normal: $font-size-base !default;
$dp-font-size-small: $font-size-sm !default;
$dp-font-weight-semibold: 600 !default;
$dp-font-weight-bold: $font-weight-bold !default;
$dp-dropdown-offset: 4px !default;
$dp-dropdown-shadow: $dropdown-box-shadow !default;
$dp-dropdown-z: $zindex-dropdown !default;
$dp-title-background-color: $light !default;
$dp-cell-size-base: 2.25rem !default;
$dp-cell-focus-background-color: darken($dropdown-link-hover-bg, 2.5) !default;
$dp-cell-prevnext-color: color('gray') !default;
$dp-cell-disabled-color: $dropdown-link-disabled-color !default;
$dp-cell-selected-background-color: $dropdown-link-active-bg !default;
$dp-cell-selected-color: $dropdown-link-active-color !default;
$dp-cell-selected-font-weight: 600 !default;
$dp-cell-today-background-color: $teal !default;
$dp-cell-today-color: $white !default;
$dp-cell-highlighted-background-color: $gray-100 !default;
$dp-range-start-end-background-color: $secondary !default;
$dp-range-start-end-color: $dp-cell-selected-color !default;
$dp-range-background-color: $gray-200 !default;
$dp-range-today-background-color: $dp-cell-today-background-color !default;
$dp-week-color: $gray-300 !default;
$dp-footer-background-color: $light !default;
$dp-input-in-edit-border-color: darken($input-focus-border-color, 5%) !default;
$dp-input-in-edit-focus-box-shadow-size: 0 0 0.25em 0.25em !default;
@mixin dp-button {
.btn {
// use custom version of .btn-light
$background: $light;
$border: $light;
$hover-background: darken($background, 7.5%);
$hover-border: darken($border, 10%);
$active-background: darken($background, 10%);
$active-border: darken($border, 12.5%);
border-color: $border;
background-color: $dp-background-color;
&:hover {
border-color: $hover-border;
background-color: $hover-background;
color: color-contrast($hover-background);
}
&:focus {
border-color: $hover-border;
box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-contrast($background), $border, 15%), 0.5);
background-color: $hover-background;
color: color-contrast($hover-background);
}
&:disabled {
border-color: $border;
background-color: $background;
color: color-contrast($background);
}
&:not(:disabled):active {
border-color: $active-border;
background-color: $active-background;
color: color-contrast($active-background);
&:focus {
box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-contrast($background), $border, 15%), 0.5);
}
}
.datepicker-header & {
@include dp-header-button-common;
}
.datepicker-footer & {
@include dp-footer-button-common;
}
}
}

179
assets/styles/components/_entry.scss Normal file
View file

@ -0,0 +1,179 @@
.kbin-entry {
display: grid;
grid-template-columns: min-content min-content auto;
grid-template-areas: "vote image title"
"vote image meta"
"vote image description"
"vote image footer"
"body body body";
padding: 2rem 1rem .5rem 1rem;
margin-bottom: .5rem;
font-size: map-get($font-size, 'small');
grid-gap: 1rem;
@include themify($themes) {
background-color: themed('entryBgColor');
border: themed('entryBorder');
}
.kbin-vote {
grid-area: vote;
}
figure {
margin: 0;
grid-area: image;
img {
object-fit: none;
}
}
header {
grid-area: title;
p {
margin: 0;
}
}
&__body {
line-height: 2.5rem;
letter-spacing: 0.01rem;
padding: 0 2rem;
grid-area: body;
font-size: map-get($font-size, 'default');
}
&__meta {
opacity: .7;
grid-area: meta;
padding-bottom: .4rem;
font-size: 1.3rem;
@include themify($themes) {
color: themed('metaTextColor');
}
a {
padding: .5rem 0;
font-weight: bold;
}
}
footer menu {
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
list-style: none;
column-gap: 1rem;
opacity: .7;
a {
padding: .8rem;
font-size: 1.2rem;
@include themify($themes) {
color: themed('entryMetaLinkColor') !important;
&:hover {
color: themed('linkColorHover') !important;
}
}
}
li:first-child a {
padding-left: 0;
}
}
h2 {
margin: 0 0 1.5rem;
font-size: 1.8rem;
a {
@include themify($themes) {
color: themed('entryTitleColor') !important;
&:visited {
color: themed('entryLinkColorVisited') !important;
}
&:hover {
color: themed('entryLinkColorHover') !important;
}
}
}
}
&__domain {
font-size: 1rem;
position: relative;
bottom: 0.3rem;
@include themify($themes) {
color: themed('metaTextColor') !important;
}
a {
@include themify($themes) {
color: themed('entryMetaLinkColor') !important;
&:hover {
color: themed('linkColorHover') !important;
}
}
}
}
&:hover,
&:focus-within {
footer menu {
-webkit-animation: fadein .5s linear 1 normal forwards;
@-webkit-keyframes fadein {
from {
opacity: .7;
}
to {
opacity: 1;
}
}
}
.kbin-entry__meta {
-webkit-animation: fadein .5s linear 1 normal forwards;
@-webkit-keyframes fadein {
from {
opacity: .7;
}
to {
opacity: 1;
}
}
}
}
&--single {
border-top: 0 !important;
h1 {
font-size: map-get($font-size, 'large');
margin: 0 0 1.5rem;
}
h2 {
font-size: 2.2rem;
}
h3 {
font-size: 2rem;
}
h3 {
font-size: 1.8rem;
}
h4 {
font-size: 1.6rem;
}
}
}

58
assets/styles/components/_footer.scss Normal file
View file

@ -0,0 +1,58 @@
#kbin-footer {
font-size: map-get($font-size, 'small');
display: grid;
grid-template-columns: repeat(4, 1fr);
padding-top: 3rem;
padding-bottom: 3.5rem;
@include themify($themes) {
color: themed('footerTextColor');
background-color: themed('footerBgColor');
}
h5 {
margin-top: 0;
font-size: 2.3rem;
margin-bottom: 1.5rem;
}
a {
@include themify($themes) {
color: themed('footerLinkColor');
&:hover {
color: themed('footerLinkColorHover');
text-decoration: underline;
}
}
}
div {
margin-bottom: .5rem;
}
li {
list-style: none;
padding: .3rem;
}
section:last-child {
text-align: center;
align-self: center;
h5 {
font-size: 1.4rem;
}
menu {
display: flex;
align-items: baseline;
inline-size: max-content;
margin: 0 auto;
li {
padding: 1rem 1rem;
filter: brightness(0) invert(1);
}
}
}
}

112
assets/styles/components/_header.scss Normal file
View file

@ -0,0 +1,112 @@
#kbin-header {
display: grid;
grid-template-areas: "sr-nav brand magazine nav menu";
grid-template-columns:min-content max-content max-content auto max-content;
align-items: end;
position: relative;
@include themify($themes) {
background-color: themed('headerBgColor');
}
a {
text-decoration: none;
font-weight: bold;
@include themify($themes) {
color: themed('headerLinkColor');
&:hover {
color: themed('headerLinkColorHover');
}
i {
filter: themed('headerIconFilter');
&:hover {
filter: themed('headerIconFilterHover');
}
}
}
}
nav {
margin-left: 2rem;
grid-area: nav;
}
menu {
grid-area: menu;
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
list-style: none;
align-items: end;
font-size: map-get($font-size, 'small');
li {
a {
display: block;
padding: 2rem 1.5rem 1.5rem 1.5rem;
border-bottom: 3px solid transparent;
&:hover {
border-bottom: 3px solid white;
}
}
}
}
.kbin {
&-sr-nav {
grid-area: sr-nav;
a {
font-size: map-get($font-size, 'large');
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
left: 0;
top: 0;
background-color: white;
padding: 0.5rem 1rem;
&:focus {
color: black;
position: absolute;
width: auto;
height: auto;
overflow: visible;
clip: auto;
white-space: normal;
outline: solid 4px darkorange;
}
}
}
&-brand {
grid-area: brand;
place-self: center;
font-size: map-get($font-size, 'large');
text-decoration: none;
}
&-magazine {
grid-area: magazine;
place-self: center;
margin-left: 1rem;
padding-top: .2rem;
span {
font-weight: 100;
opacity: .7;
@include themify($themes) {
color: themed('headerLinkColor');
}
}
}
}
}

71
assets/styles/components/_main-menu.scss
View file

@ -1,71 +0,0 @@
.kbin-main-menu {
background-image: linear-gradient(#e5e5e5 0%, $kbin-background 120px);
z-index: 200;
position: fixed;
top: 0;
width: 100%;
font-size: .95rem;
border-bottom: 1px solid $kbin-navbar-border-color;
.kbin-dark & {
background-image: linear-gradient(#151515 0%, #202020 120px);
border-bottom: 1px solid $kbin-dark-navbar-border-color;
}
li {
list-style: none;
}
.list-group-item {
border: 0;
}
&-page-view {
font-size: .95rem;
li {
list-style: none;
}
}
}
.kbin-featured-magazines-list-item--active,
.kbin-page-view-item--active {
background-color: $kbin-topbar-link-active-background-color;
a {
background: $kbin-grey;
&:hover,
&.highlighted:hover {
background-color: $kbin-topbar-link-active-background-color;
}
&.highlighted {
background: transparent;
}
font-weight: bold;
color: #556880 !important;
text-shadow: 0 0 2px #9ab4ca;
&:hover {
color: #556880 !important;
background-color: $kbin-topbar-link-active-background-color;
}
.kbin-dark & {
background: #131313;
color: white !important;
background: rgba(0, 0, 0, 0.15);
border-color: $kbin-dark-navbar-border-color !important;
}
}
.kbin-dark & {
background: #131313;
color: white !important;
background: rgba(0, 0, 0, 0.15);
border-color: $kbin-dark-navbar-border-color !important;
}
}

109
assets/styles/components/_main.scss Normal file
View file

@ -0,0 +1,109 @@
#kbin-main {
.kbin-options {
display: grid;
grid-template-areas: "start middle beforeEnd end";
grid-template-columns: max-content auto max-content max-content;
align-items: center;
margin-bottom: .5rem;
font-size: map-get($font-size, 'small');
&__sort,
&__filters,
&__layout,
&__title {
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
align-self: self-end;
list-style: none;
align-items: center;
margin: 0;
padding: 0;
a {
padding: 1.2rem 1.5rem;
text-decoration: none;
border-bottom: 3px solid transparent;
display: block;
@include themify($themes) {
color: themed('optionsLinkColor');
i {
filter: themed('optionsIconFilter');
}
&:hover,
&:focus-visible {
border-bottom: themed('optionsLinkHoverBorder');
color: themed('optionsLinkColorHover');
i {
filter: themed('optionsIconFilterHover');
}
}
}
}
}
&__title {
grid-area: start;
font-size: map-get($font-size, 'optionsTitle');
padding: 0 1rem;
text-transform: uppercase;
align-self: normal;
}
&__sort {
grid-area: middle;
}
&__filters {
grid-area: end;
}
&__layout {
grid-area: beforeEnd;
}
}
.kbin-user-list {
padding: 1rem;
margin-bottom: .5rem;
@include themify($themes) {
background-color: themed('mainSectionBgColor');
border: themed('mainSectionBorder');
}
ul {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 1rem;
padding: 0;
margin: 0;
figure {
margin: 0 .5rem 0 0;
}
li {
font-size: map-get($font-size, 'small');
list-style: none;
display: flex;
align-items: center;
position: relative;
a {
display: block
}
small {
font-size: 1.1rem;
@include themify($themes) {
color: themed('metaTextColor');
}
}
}
}
}
}

5
assets/styles/components/_media.scss
View file

@ -1,5 +0,0 @@
.kbin-media {
canvas, img {
max-height: 40px !important;
}
}

171
assets/styles/components/_post.scss Normal file
View file

@ -0,0 +1,171 @@
.kbin-post,
.kbin-post-add {
margin-bottom: .5rem;
font-size: map-get($font-size, 'small');
&--no-posts {
color: #95a6a6;
font-size: 2.2rem;
font-weight: bold;
text-align: center;
@include themify($themes) {
background-color: themed('mainSectionBgColor');
border: themed('mainSectionBorder');
}
}
}
.kbin-post-add {
padding: 2rem 2rem;
@include themify($themes) {
background-color: themed('mainSectionBgColor');
border: themed('mainSectionBorder');
}
textarea {
width: 100%;
height: 10rem;
}
&-actions {
display: flex;
justify-content: flex-end;
gap: 1rem;
button {
i {
@include themify($themes) {
filter: themed('iconFilter');
&:hover {
filter: themed('iconFilterHover');
}
}
}
&:hover,
&:focus-visible {
i {
@include themify($themes) {
filter: themed('iconFilterHover');
}
}
}
}
}
&--top {
border-top: 0 !important;
}
}
.kbin-post {
display: grid;
grid-gap: 1rem;
grid-template-columns: min-content auto min-content;
grid-template-areas: "avatar header vote"
"avatar body body"
"avatar footer footer";
padding: 2rem 1rem;
margin: 0 0 1rem 0;
@include themify($themes) {
background-color: themed('mainSectionBgColor');
border: themed('mainSectionBorder');
}
header {
opacity: .7;
grid-area: header;
@include themify($themes) {
color: themed('metaTextColor');
a {
font-weight: bold;
}
span {
a {
font-weight: normal !important;
color: themed('metaTextColor') !important;
}
}
}
}
aside {
grid-area: vote;
}
div {
grid-area: body;
p {
margin-top: 0
}
}
figure {
margin: 0;
grid-area: avatar;
img {
@include themify($themes) {
border: themed('avatarBorder');
}
}
}
footer {
opacity: .7;
grid-area: footer;
menu {
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
list-style: none;
column-gap: 1rem;
a {
padding: .8rem;
font-size: 1.2rem;
@include themify($themes) {
color: themed('entryMetaLinkColor') !important;
&:hover {
color: themed('linkColorHover') !important;
}
}
}
li:first-child a {
padding-left: 0;
}
}
}
&:hover,
&:focus-visible {
header, footer {
-webkit-animation: fadein .5s linear 1 normal forwards;
@-webkit-keyframes fadein {
from {
opacity: .7;
}
to {
opacity: 1;
}
}
}
}
.kbin-vote {
display: flex;
gap: 1rem;
button {
width: 7rem;
height: 2.5rem;
}
}
}

347
assets/styles/components/_sidebar.scss Normal file
View file

@ -0,0 +1,347 @@
#kbin-sidebar {
section {
padding: 1rem;
margin-bottom: 1rem;
font-size: 1.3rem;
@include themify($themes) {
background: themed('sidebarSectionBgColor');
border: themed('sidebarSectionBorder');
color: themed('sidebarSectionTextColor');
}
figure,
blockquote {
margin: 0;
padding: 0;
}
h3 {
text-align: left;
letter-spacing: .1rem;
margin-top: 0;
padding-bottom: 0.5rem;
text-transform: uppercase;
font-size: 1.3rem;
@include themify($themes) {
color: themed('sidebarSectionHeaderTextColor');
border-bottom: themed('sidebarSectionHeaderBorder');
}
}
.kbin-meta, .kbin-info {
list-style: none;
margin: 0;
padding: 0;
@include themify($themes) {
color: themed('metaTextColor');
}
li {
opacity: .7;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 1rem 1rem;
position: relative;
@include themify($themes) {
border-bottom: themed('sidebarSectionMetaBorder');
&:first-child {
border-top: themed('sidebarSectionMetaBorder');
}
}
span {
@include themify($themes) {
color: themed('metaTextColor');
}
}
a {
font-weight: bold;
}
}
&:hover,
&:focus-within {
footer a {
-webkit-animation: fadein .5s linear 1 normal forwards;
@-webkit-keyframes fadein {
from {
opacity: .7;
}
to {
opacity: 1;
}
}
}
}
}
.kbin-info {
margin: 2.5rem 0;
li {
justify-content: flex-start;
&:last-child {
border-bottom: none;
}
}
span {
margin-left: .5rem;
}
}
footer {
a {
text-decoration: none;
font-size: 1.3rem;
@include themify($themes) {
color: themed('sidebarSectionFooterLinkColor');
&:hover,
&:focus-visible {
color: themed('sidebarSectionFooterLinkColorHover');
}
}
}
}
}
.kbin-entry-info {
text-align: center;
header {
margin-bottom: 1.5rem;
h4 {
font-size: 1.5rem;
margin-bottom: .5rem;
}
}
&_name {
margin-top: 0;
margin-bottom: 3rem;
}
&:hover,
&:focus-within {
ul li {
-webkit-animation: fadein .5s linear 1 normal forwards;
@-webkit-keyframes fadein {
from {
opacity: .7;
}
to {
opacity: 1;
}
}
}
}
}
.kbin-magazine {
text-align: center;
header {
margin-bottom: 1.5rem;
h4 {
font-size: 1.5rem;
margin-bottom: .5rem;
}
}
&_name {
margin-top: 0;
margin-bottom: 3rem;
}
&_descirption,
&_rules {
text-align: left;
}
&:hover,
&:focus-within {
ul li {
-webkit-animation: fadein .5s linear 1 normal forwards;
@-webkit-keyframes fadein {
from {
opacity: .7;
}
to {
opacity: 1;
}
}
}
}
}
.kbin-related-posts {
figure {
padding-bottom: 1.5rem;
margin-bottom: 1.5rem;
@include themify($themes) {
border-bottom: themed('sidebarSectionMetaBorder');
}
&:last-child {
margin-bottom: 0;
}
img {
object-fit: cover;
width: 100%;
height: 100px;
}
blockquote {
a {
@include themify($themes) {
color: themed('sidebarSectionTextColor');
}
}
}
figcaption {
text-align: right;
opacity: .7;
@include themify($themes) {
color: themed('metaTextColor');
}
}
&:hover,
&:focus-within {
figcaption {
-webkit-animation: fadein .5s linear 1 normal forwards;
@-webkit-keyframes fadein {
from {
opacity: .7;
}
to {
opacity: 1;
}
}
}
}
}
}
.kbin-options {
padding: 0;
font-size: map-get($font-size, 'small');
border-top: 0;
margin-bottom: 0.5rem;
menu {
display: flex;
li {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
flex-shrink: 0;
flex-grow: 1;
a {
text-decoration: none;
border-bottom: 3px solid transparent;
padding: 1.2rem 1.5rem;
border-bottom: 3px solid transparent;
display: block;
@include themify($themes) {
color: themed('optionsLinkColor');
i {
filter: themed('optionsIconFilter');
}
&:hover,
&:focus-visible {
border-bottom: 3px solid #32465b;
color: #32465b;
i {
filter: themed('optionsIconFilterHover');
}
}
}
}
}
}
}
.kbin-moderators {
ul {
margin: 0;
padding: 0;
li {
list-style: none;
display: flex;
align-items: center;
position: relative;
padding: .5rem 0;
@include themify($themes) {
border-top: themed('sidebarSectionMetaBorder');
}
&:first-child {
border-top: 0;
padding-top: 0;
}
&:last-child {
@include themify($themes) {
border-bottom: themed('sidebarSectionMetaBorder');
}
}
a {
padding: 1rem;
}
}
}
footer {
opacity: .7;
margin-top: 1rem;
padding: 1rem 0;
text-align: center;
position: relative;
a {
@include themify($themes) {
color: themed('metaTextColor')
}
}
}
&:hover,
&:focus-within {
footer {
-webkit-animation: fadein .5s linear 1 normal forwards;
@-webkit-keyframes fadein {
from {
opacity: .7;
}
to {
opacity: 1;
}
}
}
}
}
}

22
assets/styles/components/_sub_buttons.scss
View file

@ -1,22 +0,0 @@
.kbin-sub, .kbin-follow, .kbin-block {
&--active {
.btn {
background: $kbin-green;
color: $kbin-grey !important;
}
}
.btn {
border-radius: 0;
border: 1px solid $kbin-grey-shadow;
}
}
.kbin-block {
&--active {
.btn {
background: $kbin-vote-down;
color: $kbin-grey !important;
}
}
}

9
assets/styles/components/_toast.scss
View file

@ -1,9 +0,0 @@
.kbin-toast-container {
z-index: 10000;
.kbin-toast, .toast-header {
.kbin-dark & {
color: #fff !important;
}
}
}

40
assets/styles/components/_user_content.scss
View file

@ -1,40 +0,0 @@
.kbin-post-content,
.kbin-comment-content,
.kbin-entry-content,
.kbin-terms-page,
.kbin-privacy-policy-page {
h1, h2, h3, h4, h5, h6 {
margin-top: 2.5rem;
margin-bottom: 1.5rem;
}
h1 {
padding-bottom: .5rem;
border-bottom: 5px solid $kbin-entry-list-item-nth-background-color;
.kbin-dark & {
border-bottom: 5px solid $kbin-dark-entry-list-item-nth-background-color;
}
}
blockquote {
color: $kbin-vote-up;
padding-left: 20px;
border-left: 4px solid $kbin-vote-down;
}
pre {
background: $kbin-entry-list-item-nth-background-color;
padding: 1rem;
.kbin-dark & {
background: $kbin-dark-entry-list-item-nth-background-color;
}
}
table {
font-size: .7rem;
margin-bottom: $spacer * .5;;
margin-top: $spacer * .5;;
}
}

12
assets/styles/components/_user_popup.scss
View file

@ -1,12 +0,0 @@
#kbin-user-popup {
textarea {
width: 100%;
border: 1px solid $kbin-entry-list-item-border-color;
.kbin-dark & {
color: #fff;
border: 1px solid $kbin-dark-entry-list-item-border-color;
background: $kbin-dark-entry-list-item-border-color;
}
}
}

29
assets/styles/components/_vote.scss Normal file
View file

@ -0,0 +1,29 @@
.kbin-vote {
opacity: 1;
display: grid;
grid-template-rows: min-content min-content;
row-gap: 1rem;
button {
margin: 0;
padding: 0;
font-weight: bold;
cursor: pointer;
border: 0;
width: 8rem;
height: 3rem;
@include themify($themes) {
background-color: themed('voteBgColor');
color: themed('voteTextColor');
&:hover,
&:focus-visible {
color: themed('voteTextColorHover');
}
}
span {
font-weight: normal;
}
}
}

236
assets/styles/components/comment.scss
View file

@ -1,236 +0,0 @@
$levels: ('#ac5353', '#71ac53', '#ffa500', '#538eac', '#6253ac', '#ac53ac', '#ac5353');
$comment-margin-xl: 3rem;
$comment-margin-lg: 1rem;
$comment-margin-sm: .5rem;
.kbin-comment-wrapper {
blockquote {
z-index: 2;
margin: 0;
}
.kbin-comment {
font-size: .9rem;
padding: .6rem .3rem;
display: flow-root;
position: relative;
background: white;
overflow: hidden;
h1, h2, h3 {
font-size: 1rem;
}
a {
&:hover {
color: black;
}
}
.kbin-dark & {
background: #282828;
}
&:nth-child(even) {
border-top: 1px solid $kbin-comment-list-item-border-color;
border-bottom: 1px solid $kbin-comment-list-item-border-color;
background-color: $kbin-comment-list-item-nth-background-color;
.kbin-dark & {
border-top: 1px solid $kbin-dark-comment-list-item-border-color;
border-bottom: 1px solid $kbin-dark-comment-list-item-border-color;
background-color: $kbin-dark-comment-list-item-nth-background-color;
}
}
&-mask {
background: red;
width: 20px;
height: 100%;
top: 0;
position: absolute;
left: 0;
}
&-list {
position: relative;
}
@for $i from 2 to 8 {
&-line--#{$i} {
bottom: 0;
position: absolute;
opacity: .4;
z-index: 1;
height: 100%;
border-left: .12rem dashed unquote(nth($levels, $i));
left: $comment-margin-lg * ($i - 1);
@include media-breakpoint-up(xl) {
left: $comment-margin-xl * ($i - 1);
}
@include media-breakpoint-down(sm) {
left: $comment-margin-sm * ($i - 1);
}
}
}
&-main {
display: flow-root;
@include media-breakpoint-down(sm) {
clear: both;
padding-top: 1rem;
}
}
&-vote {
float: right;
margin-left: .3rem;
width: 3.5rem;
&-list {
list-style-type: none;
padding: 0;
@include media-breakpoint-down(sm) {
margin-bottom: 0;
}
&-item {
margin: 3px 0;
background: $kbin-comment-vote-button-background-color;
button {
width: 100%;
border: 0;
color: #c1c1c1;
display: block;
text-align: center;
font-weight: 700;
font-size: .7rem;
&:hover {
color: $kbin-comment-vote-button-hover-background-color;
}
}
}
}
}
&-avatar {
float: left;
margin-right: .6rem;
margin-bottom: 0;
display: table-cell;
height: 100%;
@include media-breakpoint-up(sm) {
padding-top: .5rem;
}
img {
width: 3rem;
}
}
&-meta {
font-size: .9rem;
display: inline;
button {
padding: 0;
font-size: .78rem;
font-weight: 700;
color: grey;
margin: 0 .5rem 0 0;
text-decoration: none;
vertical-align: revert;
}
&-list {
display: flow-root;
&-item {
margin-right: 0 !important;
&-links {
a {
font-size: .75rem;
font-weight: bold;
color: gray;
margin-right: .5rem;
}
}
}
}
}
&-content {
display: block;
word-break: break-word;
overflow: hidden;
blockquote {
color: green;
padding-left: 20px;
}
img {
max-width: 100%;
height: auto;
}
}
.mask {
position: absolute;
width: 2px;
left: -4.7rem;
top: 0;
z-index: -100;
height: 100%;
border: 2px solid white;
}
&-level {
@for $i from 2 to 8 {
&--#{$i} {
border-left: .15rem solid unquote(nth($levels, $i));
margin-left: $comment-margin-lg * ($i - 1);
@include media-breakpoint-up(xl) {
margin-left: $comment-margin-xl * ($i - 1);
}
@include media-breakpoint-down(sm) {
margin-left: $comment-margin-sm * ($i - 1);
}
}
}
&--last {
border-left: .15rem solid #ac5353;
margin-left: $comment-margin-lg * (7 - 1);
@include media-breakpoint-up(xl) {
margin-left: $comment-margin-xl * (7 - 1);
}
@include media-breakpoint-down(sm) {
margin-left: $comment-margin-sm * (7 - 1);
}
}
}
}
.kbin-post-comment {
border-left: 1px solid $kbin-comment-list-item-border-color !important;
.kbin-dark & {
border-left: 1px solid $kbin-dark-comment-list-item-border-color !important;
}
}
}

228
assets/styles/components/entry.scss
View file

@ -1,228 +0,0 @@
.kbin-entry {
@include media-breakpoint-down(sm) {
margin-left: -1rem;
margin-right: -1rem;
padding-left: 1rem;
padding-right: 1rem;
}
.kbin-related-wrapper & {
opacity: 0.7;
&:hover {
opacity: 1;
}
}
padding: 2rem 1rem;
display: flow-root;
position: relative;
background: #fff;
.kbin-dark & {
background-color: #282828;
}
&:nth-child(even) {
border-top: 5px solid $kbin-entry-list-item-border-color;
border-bottom: 5px solid $kbin-entry-list-item-border-color;
background-color: $kbin-entry-list-item-nth-background-color;
overflow: hidden;
.kbin-dark & {
border-top: 5px solid $kbin-dark-entry-list-item-border-color;
border-bottom: 5px solid $kbin-dark-entry-list-item-border-color;
background-color: $kbin-dark-entry-list-item-nth-background-color;
}
}
&-main {
display: flow-root;
@include media-breakpoint-down(md) {
.kbin-has-image & {
clear: both;
padding-top: 1rem;
}
}
}
&-vote {
float: left;
margin-right: .5rem;
width: 4rem;
&-list {
list-style-type: none;
padding: 0;
@include media-breakpoint-down(md) {
margin-bottom: 0;
}
&-item {
margin: 3px 0;
button {
width: 100%;
border: 0;
color: #c1c1c1;
display: block;
text-align: center;
font-weight: 700;
padding: 2px 0;
font-size: .8rem !important;
&:hover {
color: $kbin-comment-vote-button-hover-background-color;
}
}
}
}
}
&-image {
margin-bottom: 0;
padding-top: .2rem;
display: table-cell;
height: 100%;
img {
width: 12rem;
height: 10rem;
object-fit: cover;
}
@include media-breakpoint-down(md) {
img {
max-height: 5rem;
width: 15rem;
}
}
}
&-main {
display: flow-root;
}
&-title {
margin-bottom: 5px;
font-size: 1.4rem;
.kbin-entry-list & {
font-size: 1rem;
}
&-domain {
font-size: .7rem;
position: relative;
bottom: .1rem;
.kbin-entry-single & {
bottom: .2rem;
}
}
}
&-meta, {
font-size: .9rem;
button {
padding: 0;
font-size: .75rem;
font-weight: bold;
color: gray;
text-decoration: none;
margin: 0 .5rem 0 0;
vertical-align: revert;
.kbin-dark & {
color: gray;
}
&:hover {
color: black;
.kbin-dark & {
color: $white;
}
}
}
a {
&:hover {
color: black;
}
}
&-list {
&-item {
margin-right: 0 !important;
&-links {
a {
font-size: .75rem;
font-weight: bold;
color: gray;
margin-right: .5rem;
.ada {
fill: gray !important;
width: .6rem;
&:hover {
fill: black !important;
.kbin-dark & {
fill: $white !important;
}
}
}
}
}
}
}
}
&-content {
display: block;
word-break: break-word;
overflow: hidden;
img {
max-width: 35rem;
max-height: 25rem;
@include media-breakpoint-down(lg) {
max-width: 100%;
}
}
}
@include media-breakpoint-down(md) {
.kbin-no-image {
clear: both;
padding-top: 1rem;
}
}
}
// Create page
.kbin-entry-create-lead {
@include media-breakpoint-up(lg) {
max-width: 45rem;
}
}
.kbin-embed {
//overflow: scroll;
img {
max-width: 100%;
}
.ratio > * {
position: absolute !important;
}
}

60
assets/styles/components/featured-magazines.scss
View file

@ -1,60 +0,0 @@
.kbin-top-featured-magazines {
z-index: 50;
height: 1.2rem;
padding: 0;
background-color: $kbin-topbar-background-color;
width: 100%;
white-space: nowrap;
overflow: hidden;
&-list {
position: relative;
padding-left: 0;
margin-bottom: 0;
list-style-type: none;
&-item {
float: left;
a {
color: #fff !important;
font-size: .7rem;
padding: .1rem .5rem;
display: block;
&:hover,
&.highlighted:hover {
background-color: $kbin-topbar-link-hover-background-color;
}
&.highlighted {
background: $kbin-topbar-link-hover-background-color;
}
}
&--active {
background-color: $kbin-topbar-link-active-background-color;
a {
&:hover,
&.highlighted:hover {
background-color: $kbin-topbar-link-active-background-color;
}
&.highlighted {
background: transparent;
}
font-weight: bold;
color: #000 !important;
text-shadow: 0 0 2px #9ab4ca;
&:hover {
color: #556880 !important;
background-color: $kbin-topbar-link-active-background-color;
}
}
}
}
}
}

4
assets/styles/components/footer.scss
View file

@ -1,4 +0,0 @@
.kbin-footer {
background-color: $kbin-grey;
border-top: 1px solid $kbin-grey-shadow;
}

155
assets/styles/components/landing.scss
View file

@ -1,155 +0,0 @@
.kbin-about {
position: relative;
margin-top: 25vh;
@include media-breakpoint-down(sm) {
margin-top: 10vh;
}
.row {
position: relative;
z-index: 1;
}
p, h1, h4 {
max-width: 800px;
}
h1 {
margin-top: 0;
margin-bottom: 48px;
color: #111;
font-size: 86px;
line-height: 1.2;
font-weight: 700;
letter-spacing: -2.5px;
@include media-breakpoint-down(md) {
font-size: 44px;
line-height: 46px;
letter-spacing: 0;
}
}
.section1 & {
padding-bottom: 220px !important;
@include media-breakpoint-down(sm) {
padding-bottom: 5vh !important;
}
.bg-images {
left: 140px !important;
top: 172px !important;
}
}
.section2 & {
color: white;
padding-top: 25vh;
padding-bottom: 220px !important;
@include media-breakpoint-down(sm) {
padding-top: 5vh;
padding-bottom: 5vh !important;
}
h1 {
color: white;
}
.bg-images {
top: 230px !important;
left: -685px !important;
@include media-breakpoint-down(lg) {
display: none;
}
}
}
.section3 & {
padding-bottom: 15vh;
@include media-breakpoint-down(sm) {
padding-top: 5vh;
padding-bottom: 5vh !important;
}
.bg-images {
left: 215px !important;
top: 150px !important;
img {
width: 900px;
}
}
}
.section4 & {
color: white;
padding-top: 25vh;
padding-bottom: 15vh;
@include media-breakpoint-down(sm) {
padding-top: 5vh;
padding-bottom: 5vh !important;
}
h1 {
color: white;
}
.bg-images {
left: -541px;
opacity: .4;
top: 200px;
img {
width: 500px;
}
}
}
.section5 & {
padding-bottom: 15vh;
@include media-breakpoint-down(sm) {
padding-top: 5vh;
padding-bottom: 5vh !important;
}
}
}
.bg-images {
@include media-breakpoint-down(sm) {
display: none !important;
}
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: auto;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 100%;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.section2 {
background: #6767AB;
}
.section4 {
background: #0F3BA8;
}

36
assets/styles/components/magazine.scss
View file

@ -1,36 +0,0 @@
.kbin-magazine-create,
.kbin-magazine-edit {
.kbin-magazine-create-lead {
@include media-breakpoint-up(lg) {
max-width: 45rem;
}
}
}
.ts-wrapper.single .ts-control {
background: $white;
border-color: #ddd;
min-height: 47px;
padding-top: 14px;
font-size: 1.1rem;
.clear-button {
padding-top: 5px;
}
.kbin-dark & {
color: white;
background-color: #1f1f1f;
border: 1px solid #333;
box-shadow: none;
}
}
.ts-dropdown {
.kbin-dark & {
background-color: #1f1f1f;
border: 1px solid #333;
box-shadow: none;
color: $white;
}
}

207
assets/styles/components/navbar.scss
View file

@ -1,207 +0,0 @@
.kbin-header {
padding-left: 0;
padding-right: 0;
.kbin-nav {
padding-bottom: 0;
padding-top: 10px;
background-color: $kbin-navbar-background-color;
border-bottom: 1px solid $kbin-navbar-border-color;
.kbin-dark & {
background-color: $kbin-dark-navbar-background-color !important;
border-bottom: 1px solid $kbin-dark-navbar-border-color !important;
button {
color: $kbin-dark-link-color !important;
}
}
@include media-breakpoint-down(lg) {
.dropdown-menu {
position: absolute;
left: -190px;
}
}
@include media-breakpoint-up(lg) {
position: relative;
.offcanvas {
flex-direction: row;
.kbin-dark & {
background-color: $kbin-dark-navbar-background-color !important;
}
}
}
@include media-breakpoint-down(lg) {
.offcanvas {
margin-left: 0 !important;
background: $kbin-background;
padding: $spacer * .5;
.kbin-dark & {
background-color: $kbin-dark-navbar-background-color !important;
}
.navbar-nav {
width: 100%;
text-align: center;
}
}
}
&-brand, span a {
font-weight: bold;
.kbin-dark & {
color: $kbin-dark-link-color !important;
}
&:hover {
color: black !important;
.kbin-dark & {
color: white !important;
}
}
}
&-navbar {
font-weight: bold;
font-size: .82rem;
@include media-breakpoint-up(lg) {
position: relative;
}
.dropdown {
&-menu {
width: 770px;
font-size: .75rem;
@include media-breakpoint-down(lg) {
width: 100%;
}
}
}
&-item {
margin-right: 2px;
a {
border-bottom: 2px solid transparent;
}
&--active {
a {
border-bottom: 2px solid #5b5b5b;
.kbin-dark & {
border-color: #fff;
}
}
}
a:hover {
border-bottom: 2px solid #5b5b5b;
.kbin-dark & {
border-color: #fff;
}
}
a, button {
color: #252526 !important;
display: block;
font-size: .9rem;
padding: 0.55rem 1rem;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
.kbin-dark & {
color: #dedede !important;
}
}
}
}
.navbar-toggler {
font-size: 1rem;
}
}
.kbin-nav-mobile {
background-color: $kbin-navbar-background-color;
border-bottom: 1px solid $kbin-navbar-border-color;
.kbin-dark & {
background-color: $kbin-dark-navbar-background-color !important;
border-bottom: 1px solid $kbin-dark-navbar-border-color !important;
}
}
ul {
list-style-type: none;
}
}
.kbin-filters {
background: #fbfbfb;
.kbin-dark & {
background: #2c2c2c;
a {
color: #cacece;
}
}
&-sort {
@media (min-width: 555px) {
float: left;
}
}
justify-content: flex-start !important;
.kbin-dark & {
a:active {
color: #eee !important;
}
}
.nav-tabs {
border: none;
}
&-sort {
a {
border-bottom: 2px solid transparent;
}
.active,
a:hover {
border-bottom: 2px solid #5b5b5b;
.kbin-dark & {
border-color: #fff;
}
}
.active {
font-weight: bold;
}
li {
margin-right: 5px;
}
}
&-buttons {
@media (min-width: 555px) {
justify-content: flex-end !important;
}
}
}

7
assets/styles/components/people.scss
View file

@ -1,7 +0,0 @@
.kbin-people-page {
.card {
h1, h2, h3 {
font-size: 1rem;
}
}
}

244
assets/styles/components/post.scss
View file

@ -1,244 +0,0 @@
$levels: ('#ac5353', '#71ac53', '#ffa500', '#538eac', '#6253ac', '#ac53ac', '#ac5353');
$post-margin-xl: 4.5rem;
$post-margin-lg: 1rem;
$post-margin-sm: .5rem;
.kbin-post-wrapper {
article {
margin: 0;
&:not(:first-child) {
margin-top: 2rem !important;
}
}
&-header {
border-bottom: 1px solid $kbin-comment-list-item-border-color;
}
.kbin-post {
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
z-index: 10;
border-left: .15rem solid #d3d3d3;
font-size: .9rem;
padding: .6rem .3rem;
display: flow-root;
position: relative;
overflow: hidden;
h1, h2, h3 {
font-size: 1rem;
}
&.kbin-post-list-item {
border-bottom: 1px solid $kbin-entry-list-item-border-color;
.kbin-dark & {
border-bottom: 1px solid $kbin-dark-entry-list-item-border-color;
}
}
a {
&:hover {
color: black;
}
}
border-top: 1px solid $kbin-entry-list-item-border-color;
border-bottom: 1px solid $kbin-entry-list-item-border-color;
background-color: $kbin-entry-list-item-nth-background-color;
.kbin-dark & {
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2);
border-left: .15rem solid #4a4e4e;
border-top: 1px solid $kbin-dark-entry-list-item-border-color;
border-bottom: 1px solid $kbin-dark-entry-list-item-border-color;
background-color: $kbin-dark-entry-list-item-nth-background-color;
}
&-mask {
background: red;
width: 20px;
height: 100%;
top: 0;
position: absolute;
left: 0;
}
&-list {
position: relative;
}
@for $i from 2 to 8 {
&-line--#{$i} {
bottom: 0;
position: absolute;
opacity: .4;
z-index: -100;
height: 100%;
border-left: .12rem dashed unquote(nth($levels, $i));
left: $post-margin-lg * ($i - 1);
@include media-breakpoint-up(xl) {
left: $post-margin-xl * ($i - 1);
}
@include media-breakpoint-down(sm) {
left: $post-margin-sm * ($i - 1);
}
}
}
&-main {
display: flow-root;
@include media-breakpoint-down(sm) {
clear: both;
padding-top: 1rem;
}
}
&-vote {
float: right;
margin-left: .3rem;
width: 3.5rem;
&-list {
list-style-type: none;
padding: 0;
@include media-breakpoint-down(sm) {
margin-bottom: 0;
}
&-item {
margin: 3px 0;
background: $kbin-comment-vote-button-background-color;
button {
width: 100%;
border: 0;
color: #c1c1c1;
display: block;
text-align: center;
font-weight: 700;
font-size: .7rem;
&:hover {
color: $kbin-comment-vote-button-hover-background-color;
}
}
}
}
}
&-avatar {
float: left;
margin-right: .6rem;
margin-bottom: 0;
display: table-cell;
height: 100%;
@include media-breakpoint-up(sm) {
padding-top: .5rem;
}
img {
width: 3rem;
}
}
&-main {
display: flow-root;
}
&-meta {
font-size: .9rem;
display: inline;
button {
padding: 0;
font-size: .78rem;
font-weight: 700;
color: grey;
margin: 0 .5rem 0 0;
text-decoration: none;
vertical-align: revert;
}
&-list {
display: flow-root;
&-item {
margin-right: 0 !important;
&-links {
a {
font-size: .75rem;
font-weight: bold;
color: gray;
margin-right: .5rem;
&:hover {
color: initial;
}
}
}
}
}
}
&-content {
display: block;
word-break: break-word;
overflow: hidden;
img {
max-width: 100%;
height: auto;
}
}
.mask {
position: absolute;
width: 2px;
left: -4.7rem;
top: 0;
z-index: -100;
height: 100%;
border: 2px solid white;
}
&-level {
@for $i from 2 to 8 {
&--#{$i} {
border-left: .15rem solid unquote(nth($levels, $i));
margin-left: $post-margin-lg * ($i - 1);
@include media-breakpoint-up(xl) {
margin-left: $post-margin-xl * ($i - 1);
}
@include media-breakpoint-down(sm) {
margin-left: $post-margin-sm * ($i - 1);
}
}
}
&--last {
border-left: .15rem solid #ac5353;
margin-left: $post-margin-lg * (7 - 1);
@include media-breakpoint-up(xl) {
margin-left: $post-margin-xl * (7 - 1);
}
@include media-breakpoint-down(sm) {
margin-left: $post-margin-sm * (7 - 1);
}
}
}
}
}

9
assets/styles/components/profile.scss
View file

@ -1,9 +0,0 @@
.kbin-profile {
.kbin-avatar {
margin: 0 auto;
}
}
.kbin-notifications {
font-size: .79rem;
}

24
assets/styles/components/show-more.scss
View file

@ -1,24 +0,0 @@
[show-more-controller] {
max-height: 25rem;
overflow: hidden;
overflow-y: scroll;
}
.kbin-more {
font-size: .8rem;
background: transparent;
border: 1px solid black;
color: black;
cursor: pointer;
opacity: .5;
width: 100%;
&:hover {
opacity: 1;
}
.kbin-dark & {
border: 1px solid white;
color: white;
}
}

106
assets/styles/components/sidebar.scss
View file

@ -1,106 +0,0 @@
.kbin-sidebar {
@include media-breakpoint-up(lg) {
.offcanvas {
z-index: 100;
visibility: visible !important;
display: block !important;
position: relative !important;
width: auto !important;
transform: none !important;
border: none !important;
background: none !important;
}
}
@include media-breakpoint-down(lg) {
.offcanvas {
padding: $spacer * .5;
}
}
.kbin-search {
&-btn {
border: 1px solid $kbin-sidebar-button-border-color;
border-radius: 0 .25rem .25rem 0;
}
}
.list-group-item + .list-group-item.active,
.list-group-item.active {
background-color: #f8f9fa;
border-color: #f8f9fa;
color: #000;
.kbin-dark & {
background-color: #333;
border-color: #333;
color: #fff;
}
}
.kbin-quick-links {
&--hide {
display: none;
}
a.active {
color: #fff;
}
a {
color: #000;
&:hover {
//background: $kbin-navbar-quicklinks-hover-background-color;
}
}
&-heading {
font-size: 1.1rem;
}
&-text {
font-size: .9rem;
line-height: 1.3;
}
p {
margin-bottom: 0;
}
}
.kbin-magazine {
.lead {
font-size: 1rem;
}
}
.kbin-entry {
font-size: .9rem;
&-avatar {
img {
width: 6.6rem;
}
}
}
.kbin-entry-info-user,
.kbin-post-info-user {
.card-title {
font-size: .83rem;
}
}
&--close {
width: 100%;
position: fixed;
background: inherit;
z-index: 10;
}
h6 {
font-size: .8rem;
}
}

60
assets/styles/components/vote.scss
View file

@ -1,60 +0,0 @@
.kbin-color-up-vote {
color: $kbin-vote-up;
.kbin-dark & {
color: $kbin-dark-vote-up;
}
}
.kbin-color-down-vote {
color: $kbin-vote-down;
.kbin-dark & {
color: $kbin-dark-vote-down;
}
}
.kbin-vote {
button {
font-size: .8rem;
background-color: $kbin-entry-vote-button-background-color;
.kbin-dark & {
background-color: $kbin-dark-entry-vote-button-background-color;
}
}
}
.kbin-vote-uv {
&--active {
button {
color: white !important;
background: $kbin-vote-up;
.kbin-dark & {
background: $kbin-dark-vote-up;
}
&:hover {
color: white !important;
}
}
}
}
.kbin-vote-dv {
&--active {
button {
color: white !important;
background: $kbin-vote-down;
.kbin-dark & {
background: $kbin-dark-vote-down;
}
&:hover {
color: white !important;
}
}
}
}

436
assets/styles/datepicker/datepicker.scss
View file

@ -1,436 +0,0 @@
//== foundational variables ==//
$black: hsl(0, 0%, 4%) !default;
$white: hsl(0, 0%, 100%) !default;
$light: hsl(0, 0%, 96%) !default; // white-ter
$dark: hsl(0, 0%, 21%) !default; // grey-darker
$link: hsl(217, 71%, 53%) !default; // blue
$grey-dark: lighten($black, 25%) !default;
$grey-light: darken($light, 25%) !default;
$grey-lighter: darken($light, 10%) !default;
//== datepicker variables ==//
$dp-background-color: $white !default;
$dp-border-color: $grey-lighter !default;
$dp-border-radius: 4px !default;
$dp-border-radius-small: 2px !default;
$dp-line-height-base: 1.5 !default;
$dp-font-size-normal: 1rem !default;
$dp-font-size-small: 0.75rem !default;
$dp-font-weight-semibold: 600 !default;
$dp-font-weight-bold: 700 !default;
$dp-dropdown-offset: 4px !default;
$dp-dropdown-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default;
$dp-dropdown-z: 20 !default;
$dp-title-background-color: $light !default;
$dp-cell-size-base: 2.25rem !default;
$dp-cell-focus-background-color: darken($light, 5%) !default;
$dp-cell-prevnext-color: hsl(0, 0%, 48%) !default; // grey
$dp-cell-disabled-color: $grey-lighter !default;
$dp-cell-selected-background-color: $link !default;
$dp-cell-selected-color: #fff !default; // link(blue)-invert
$dp-cell-selected-font-weight: 600 !default;
$dp-cell-today-background-color: hsl(171, 100%, 41%) !default; // turquoise (primary)
$dp-cell-today-color: #fff !default; // turquoise-invert
$dp-cell-highlighted-background-color: $light !default;
$dp-range-start-end-background-color: $grey-light !default;
$dp-range-start-end-color: $dp-cell-selected-color !default;
$dp-range-background-color: $grey-lighter !default;
$dp-range-today-background-color: $dp-cell-today-background-color !default;
$dp-week-color: $grey-light !default;
$dp-footer-background-color: $light !default;
$dp-input-in-edit-border-color: darken($link, 5%) !default;
$dp-input-in-edit-focus-box-shadow-size: 0 0 0.25em 0.25em !default;
//== non-configurable variables ==//
$dp-cell-shrink-threshold: $dp-cell-size-base * 10; // = 8 * 1.25
$dp-cell-shrinked-width: $dp-cell-size-base * 7 / 8;
//== mixins ==//
@import 'mixins';
//== styles ==//
.datepicker {
display: none;
&.active {
display: block;
}
}
.datepicker-dropdown {
position: absolute;
top: 0;
left: 0;
z-index: $dp-dropdown-z;
padding-top: $dp-dropdown-offset;
&.datepicker-orient-top {
padding-top: 0;
padding-bottom: $dp-dropdown-offset;
}
}
.datepicker-picker {
display: inline-block;
border-radius: $dp-border-radius;
background-color: $dp-background-color;
.datepicker-dropdown & {
box-shadow: $dp-dropdown-shadow;
}
span {
display: block;
flex: 1;
border: 0;
border-radius: $dp-border-radius;
cursor: default;
text-align: center;
-webkit-touch-callout: none;
user-select: none;
}
}
.datepicker-main {
padding: 2px;
}
.datepicker-footer {
box-shadow: inset 0 1px 1px rgba($black, 0.1);
background-color: $dp-footer-background-color;
}
%flex-container {
display: flex;
}
%flex-wrap {
flex-wrap: wrap;
}
%flex-basis-day {
flex-basis: percentage(1 / 7);
}
%flex-basis-month-year {
flex-basis: 25%;
}
%datepicker-cell-height {
height: $dp-cell-size-base;
line-height: $dp-cell-size-base;
}
.datepicker-title {
box-shadow: inset 0 -1px 1px rgba($black, 0.1);
background-color: $dp-title-background-color;
padding: 0.375rem 0.75rem;
text-align: center;
font-weight: $dp-font-weight-bold;
}
.datepicker-controls {
@extend %flex-container;
.datepicker-header & {
padding: 2px 2px 0;
}
@if mixin-exists(dp-button) {
@include dp-button;
} @else {
.button {
$button-color: $dark;
$button-background-color: $white;
$button-border-color: $grey-lighter;
$button-border-width: 1px;
$button-padding-vertical: calc(0.375em - #{$button-border-width});
$button-padding-horizontal: 0.75em;
$button-hover-color: $dark; // link-hover
$button-hover-border-color: $grey-light; // link-hover-border
$button-focus-color: $dark; // link-focus
$button-focus-border-color: $link; // link-focus-border
$button-focus-box-shadow-size: 0 0 0 0.125em;
$button-focus-box-shadow-color: rgba($link, 0.25);
$button-active-color: $dark; // link-active
$button-active-border-color: $grey-dark; // link-active-border
display: inline-flex;
position: relative;
align-items: center;
justify-content: center;
margin: 0;
border: $button-border-width solid $button-border-color;
border-radius: $dp-border-radius; // control-radius
box-shadow: none;
background-color: $button-background-color;
cursor: pointer;
padding: $button-padding-vertical $button-padding-horizontal;
height: 2.25em; // control-height
vertical-align: top;
text-align: center;
line-height: $dp-line-height-base; // control-line-height
white-space: nowrap;
color: $button-color;
font-size: $dp-font-size-normal; // size-normal
&:focus,
&:active {
outline: none;
}
&:hover {
border-color: $button-hover-border-color;
color: $button-hover-color;
}
&:focus {
border-color: $button-focus-border-color;
color: $button-focus-color;
&:not(:active) {
box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color;
}
}
&:active {
border-color: $button-active-border-color;
color: $button-active-color;
}
&[disabled] {
cursor: not-allowed;
}
.datepicker-header & {
@include dp-header-button-common;
&:hover {
background-color: darken($white, 2.5%);
}
&:focus {
&:not(:active) {
box-shadow: 0 0 0 0.125em rgba($white, 0.25);
}
}
&:active {
background-color: darken($white, 5%);
}
&[disabled] {
box-shadow: none;
}
}
.datepicker-footer & {
@include dp-footer-button-common;
}
}
}
.view-switch {
flex: auto;
}
.prev-btn,
.next-btn {
padding-right: 0.375rem;
padding-left: 0.375rem;
width: $dp-cell-size-base;
&.disabled {
visibility: hidden;
}
}
}
.datepicker-view {
@extend %flex-container;
.days-of-week {
@extend %flex-container;
}
.dow {
@extend %flex-basis-day;
height: $dp-font-size-normal * $dp-line-height-base;
line-height: $dp-font-size-normal * $dp-line-height-base;
font-size: ($dp-font-size-small + $dp-font-size-normal) / 2;
font-weight: $dp-font-weight-bold;
}
.week {
@extend %datepicker-cell-height;
width: $dp-cell-size-base;
color: $dp-week-color;
font-size: $dp-font-size-small;
@media (max-width: $dp-cell-shrink-threshold) {
width: $dp-cell-shrinked-width;
}
}
}
.datepicker-grid {
@extend %flex-container;
@extend %flex-wrap;
width: $dp-cell-size-base * 7;
@media (max-width: $dp-cell-shrink-threshold) {
.calendar-weeks + .days & {
width: $dp-cell-shrinked-width * 7;
}
}
}
.datepicker-cell {
@extend %datepicker-cell-height;
&:not(.disabled):hover {
background-color: darken($dp-background-color, 2.5%);
cursor: pointer;
}
&.focused:not(.selected) {
background-color: $dp-cell-focus-background-color;
}
&.selected {
&,
&:hover {
background-color: $dp-cell-selected-background-color;
color: $dp-cell-selected-color;
font-weight: $dp-cell-selected-font-weight;
}
}
&.disabled {
color: $dp-cell-disabled-color;
}
&.prev,
&.next {
&:not(.disabled) {
color: $dp-cell-prevnext-color;
}
&.selected {
color: darken($dp-cell-selected-color, 10%);
}
}
&.highlighted:not(.selected):not(.range):not(.today) {
border-radius: 0;
background-color: $dp-cell-highlighted-background-color;
&:not(.disabled):hover {
background-color: darken($dp-cell-highlighted-background-color, 2.5%);
}
&.focused {
background-color: $dp-cell-focus-background-color;
}
}
&.today {
&:not(.selected) {
background-color: $dp-cell-today-background-color;
&:not(.disabled) {
color: $dp-cell-today-color;
}
}
&.focused:not(.selected) {
background-color: darken($dp-cell-today-background-color, 2.5%);
}
}
&%range-start-end-common {
background-color: $dp-range-start-end-background-color;
color: $dp-range-start-end-color;
}
&%range-start-end-focused-common {
background-color: darken($dp-range-start-end-background-color, 2.5%);
}
&.range-start {
border-radius: $dp-border-radius 0 0 $dp-border-radius;
&:not(.selected) {
@extend %range-start-end-common;
}
&.focused:not(.selected) {
@extend %range-start-end-focused-common;
}
}
&.range-end {
border-radius: 0 $dp-border-radius $dp-border-radius 0;
&:not(.selected) {
@extend %range-start-end-common;
}
&.focused:not(.selected) {
@extend %range-start-end-focused-common;
}
}
&.range {
border-radius: 0;
background-color: $dp-range-background-color;
&:not(.disabled):not(.focused):not(.today):hover {
background-color: darken($dp-range-background-color, 2.5%);
}
&.disabled {
color: darken($dp-range-background-color, 10%);
}
&.focused {
background-color: darken($dp-range-background-color, 5%);
}
@if $dp-range-today-background-color != $dp-cell-today-background-color {
&.today {
background-color: $dp-range-today-background-color;
}
}
}
.datepicker-view .days & {
@extend %flex-basis-day;
}
.datepicker-view.datepicker-grid & {
@extend %flex-basis-month-year;
height: $dp-cell-size-base * 2;
line-height: $dp-cell-size-base * 2;
}
}
.datepicker-input.in-edit {
border-color: $dp-input-in-edit-border-color;
&:focus,
&:active {
box-shadow: $dp-input-in-edit-focus-box-shadow-size rgba($dp-input-in-edit-border-color, 0.2);
}
}

11
assets/styles/datepicker/mixins.scss
View file

@ -1,11 +0,0 @@
@mixin dp-header-button-common {
border-color: transparent;
font-weight: bold;
}
@mixin dp-footer-button-common {
margin: calc(0.375rem - 1px) 0.375rem;
border-radius: $dp-border-radius-small;
width: 100%;
font-size: $dp-font-size-small;
}

1
assets/styles/icons/_add.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 430 B

1
assets/styles/icons/_bulb.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M112.1 454.3c0 6.297 1.816 12.44 5.284 17.69l17.14 25.69c5.25 7.875 17.17 14.28 26.64 14.28h61.67c9.438 0 21.36-6.401 26.61-14.28l17.08-25.68c2.938-4.438 5.348-12.37 5.348-17.7L272 415.1h-160L112.1 454.3zM192 0C90.02 .3203 16 82.97 16 175.1c0 44.38 16.44 84.84 43.56 115.8c16.53 18.84 42.34 58.23 52.22 91.45c.0313 .25 .0938 .5166 .125 .7823h160.2c.0313-.2656 .0938-.5166 .125-.7823c9.875-33.22 35.69-72.61 52.22-91.45C351.6 260.8 368 220.4 368 175.1C368 78.8 289.2 .0039 192 0zM288.4 260.1c-15.66 17.85-35.04 46.3-49.05 75.89h-94.61c-14.01-29.59-33.39-58.04-49.04-75.88C75.24 236.8 64 206.1 64 175.1C64 113.3 112.1 48.25 191.1 48C262.6 48 320 105.4 320 175.1C320 206.1 308.8 236.8 288.4 260.1zM176 80C131.9 80 96 115.9 96 160c0 8.844 7.156 16 16 16S128 168.8 128 160c0-26.47 21.53-48 48-48c8.844 0 16-7.148 16-15.99S184.8 80 176 80z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

1
assets/styles/icons/_channel.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM432 256c0 79.5-64.5 144-144 144s-144-64.5-144-144s64.5-144 144-144s144 64.5 144 144zM288 192c0 35.3-28.7 64-64 64c-11.5 0-22.3-3-31.6-8.4c-.2 2.8-.4 5.5-.4 8.4c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-2.8 0-5.6 .1-8.4 .4c5.3 9.3 8.4 20.1 8.4 31.6z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 781 B

1
assets/styles/icons/_clock.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M75 75L41 41C25.9 25.9 0 36.6 0 57.9V168c0 13.3 10.7 24 24 24H134.1c21.4 0 32.1-25.9 17-41l-30.8-30.8C155 85.5 203 64 256 64c106 0 192 86 192 192s-86 192-192 192c-40.8 0-78.6-12.7-109.7-34.4c-14.5-10.1-34.4-6.6-44.6 7.9s-6.6 34.4 7.9 44.6C151.2 495 201.7 512 256 512c141.4 0 256-114.6 256-256S397.4 0 256 0C185.3 0 121.3 28.7 75 75zm181 53c-13.3 0-24 10.7-24 24V256c0 6.4 2.5 12.5 7 17l72 72c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-65-65V152c0-13.3-10.7-24-24-24z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 713 B

230
assets/styles/icons/_fediverse.svg Normal file
View file

@ -0,0 +1,230 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
viewBox="10 0 190 190"
version="1.1"
id="svg8"
inkscape:version="0.92.2 2405546, 2018-03-11"
sodipodi:docname="Logo_penta_connectat-imbrincat_BiN.svg"
inkscape:export-filename="/home/nestor/Pictures/Fediversal/Logo_penta_connectat-imbrincat_mono-512x.png"
inkscape:export-xdpi="66.175453"
inkscape:export-ydpi="66.175453">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.35646619"
inkscape:cx="-324.56885"
inkscape:cy="378.80956"
inkscape:document-units="mm"
inkscape:current-layer="layer2"
showgrid="false"
inkscape:snap-smooth-nodes="true"
inkscape:snap-midpoints="true"
inkscape:snap-global="false"
inkscape:window-width="1366"
inkscape:window-height="736"
inkscape:window-x="0"
inkscape:window-y="32"
inkscape:window-maximized="1"
fit-margin-top="5"
fit-margin-left="5"
fit-margin-right="5"
fit-margin-bottom="5" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Hexagons"
inkscape:groupmode="layer"
id="layer1"
style="display:none"
transform="translate(6.6789703,-32.495842)">
<circle
style="fill:#00a3ff;fill-opacity:0.99596773;fill-rule:nonzero;stroke:#d79611;stroke-width:11;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path830"
cx="91.581032"
cy="130.75584"
r="87.760002" />
<path
sodipodi:type="star"
style="display:inline;fill:#0000d4;fill-opacity:1;fill-rule:nonzero;stroke:#4b4b40;stroke-width:9.88948536;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path1669"
sodipodi:sides="5"
sodipodi:cx="103.97202"
sodipodi:cy="134.41467"
sodipodi:r1="98.801643"
sodipodi:r2="79.932205"
sodipodi:arg1="1.0471976"
sodipodi:arg2="1.6755161"
inkscape:flatsided="true"
inkscape:rounded="0"
inkscape:randomized="0"
d="M 153.37284,219.97941 37.860816,207.8386 13.712232,94.22842 114.29961,36.154276 l 86.315,77.718384 z"
inkscape:transform-center-x="-2.409305"
inkscape:transform-center-y="-4.7910078"
transform="matrix(0.75493711,0,0,0.75474706,13.251553,29.556024)" />
</g>
<g
inkscape:groupmode="layer"
id="layer4"
inkscape:label="Linies_originals"
style="display:none">
<path
transform="translate(6.6789702,-32.495842)"
sodipodi:nodetypes="cc"
inkscape:connector-curvature="0"
id="path1690"
d="M 165.18127,119.35405 38.636939,183.48684"
style="display:inline;fill:none;stroke:#5496be;stroke-width:11;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
transform="translate(6.6789702,-32.495842)"
style="display:inline;fill:none;stroke:#a730b8;stroke-width:11;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 25.096981,96.875251 125.21379,197.3795"
id="path1684"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" />
<path
transform="translate(6.6789702,-32.495842)"
sodipodi:nodetypes="cc"
inkscape:connector-curvature="0"
id="path1686"
d="M 38.636939,183.48684 103.30568,57.239007"
style="display:inline;fill:none;stroke:#ce3d1a;stroke-width:11;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<path
transform="translate(6.6789702,-32.495842)"
style="display:inline;fill:none;stroke:#46ae3a;stroke-width:11;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 125.21379,197.3795 103.30568,57.239007"
id="path1688"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc" />
<path
transform="translate(6.6789702,-32.495842)"
sodipodi:nodetypes="cc"
inkscape:connector-curvature="0"
id="path1682"
d="m 25.096981,106.16365 140.084289,22.4788"
style="display:inline;fill:none;stroke:#d79611;stroke-width:11;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
</g>
<g
inkscape:groupmode="layer"
id="layer2"
inkscape:label="Linies"
style="display:inline"
transform="translate(6.6789703,-32.495842)">
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:41.5748024;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="M 181.13086 275.13672 A 68.892408 68.892408 0 0 1 151.66602 304.46484 L 313.42383 466.85352 L 352.42188 447.08984 L 181.13086 275.13672 z M 394.49414 489.32422 L 355.49609 509.08789 L 437.45898 591.37109 A 68.892409 68.892409 0 0 1 466.92969 562.03906 L 394.49414 489.32422 z "
transform="matrix(0.26458333,0,0,0.26458333,-6.6789703,32.495842)"
id="path9722" />
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:41.5748024;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="M 581.64648 339.39062 L 490.07031 385.80078 L 496.82227 428.99023 L 600.4375 376.47656 A 68.892409 68.892409 0 0 1 581.64648 339.39062 z M 436.9082 412.74219 L 220.38281 522.47656 A 68.892408 68.892408 0 0 1 239.17773 559.56641 L 443.66016 455.93359 L 436.9082 412.74219 z "
transform="matrix(0.26458333,0,0,0.26458333,-6.6789703,32.495842)"
id="path9729" />
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:41.5748024;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="M 367.27539 142.4375 L 262.79492 346.4082 L 293.64258 377.375 L 404.26562 161.41797 A 68.892408 68.892408 0 0 1 367.27539 142.4375 z M 235.62109 399.45898 L 182.69922 502.77344 A 68.892409 68.892409 0 0 1 219.68555 521.75195 L 266.4668 430.42383 L 235.62109 399.45898 z "
transform="matrix(0.26458333,0,0,0.26458333,-6.6789703,32.495842)"
id="path9713" />
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:41.5748024;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="M 150.76758 304.91797 A 68.892408 68.892408 0 0 1 116.35156 312.11328 A 68.892408 68.892408 0 0 1 109.70117 311.41797 L 140.60352 509.08008 A 68.892409 68.892409 0 0 1 175.01953 501.88477 A 68.892409 68.892409 0 0 1 181.66602 502.58008 L 150.76758 304.91797 z "
transform="matrix(0.26458333,0,0,0.26458333,-6.6789703,32.495842)"
id="path1015" />
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:41.5748024;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="M 239.3418 560.54492 A 68.892408 68.892408 0 0 1 240.0625 574.42188 A 68.892408 68.892408 0 0 1 232.79492 601.60156 L 430.42383 633.31445 A 68.892409 68.892409 0 0 1 429.70117 619.43555 A 68.892409 68.892409 0 0 1 436.9707 592.25781 L 239.3418 560.54492 z "
transform="matrix(0.26458333,0,0,0.26458333,-6.6789703,32.495842)"
id="path1674" />
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:41.5748024;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="M 601.13281 377.19922 L 509.91406 555.28125 A 68.892408 68.892408 0 0 1 546.9082 574.26367 L 638.125 396.18359 A 68.892409 68.892409 0 0 1 601.13281 377.19922 z "
transform="matrix(0.26458333,0,0,0.26458333,-6.6789703,32.495842)"
id="path1676" />
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:41.5748024;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="M 476.72266 125.33008 A 68.892408 68.892408 0 0 1 447.25195 154.66211 L 588.51758 296.47266 A 68.892409 68.892409 0 0 1 617.98633 267.14062 L 476.72266 125.33008 z "
transform="matrix(0.26458333,0,0,0.26458333,-6.6789703,32.495842)"
id="path1678" />
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:41.5748024;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="M 347.78711 104.63086 L 169.21094 195.12891 A 68.892409 68.892409 0 0 1 188.00391 232.21484 L 366.57812 141.71289 A 68.892408 68.892408 0 0 1 347.78711 104.63086 z "
transform="matrix(0.26458333,0,0,0.26458333,-6.6789703,32.495842)"
id="path1680" />
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:41.5748024;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="M 446.92578 154.82617 A 68.892408 68.892408 0 0 1 411.94336 162.30859 A 68.892408 68.892408 0 0 1 405.91406 161.67578 L 421.73242 262.9668 L 464.89453 269.89258 L 446.92578 154.82617 z M 430.92578 321.85352 L 468.32617 561.33594 A 68.892409 68.892409 0 0 1 502.24023 554.39258 A 68.892409 68.892409 0 0 1 509.44727 555.18359 L 474.08984 328.77734 L 430.92578 321.85352 z "
transform="matrix(0.26458333,0,0,0.26458333,-6.6789703,32.495842)"
id="path9758" />
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:41.5748024;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="M 188.13086 232.97461 A 68.892408 68.892408 0 0 1 188.88867 247.07031 A 68.892408 68.892408 0 0 1 181.72852 274.05273 L 283.09766 290.33398 L 303.02148 251.42578 L 188.13086 232.97461 z M 361.86719 260.875 L 341.94141 299.78711 L 581.45508 338.25391 A 68.892409 68.892409 0 0 1 580.75977 324.53516 A 68.892409 68.892409 0 0 1 588.10938 297.21094 L 361.86719 260.875 z "
transform="matrix(0.26458333,0,0,0.26458333,-6.6789703,32.495842)"
id="path9760" />
</g>
<g
inkscape:groupmode="layer"
id="layer3"
inkscape:label="Nodes"
style="display:inline;opacity:1"
transform="translate(6.6789703,-32.495842)">
<circle
style="fill:#000000;fill-opacity:0.99596773;stroke:none;stroke-width:0.26458332;stroke-opacity:0.96078431"
id="path817"
cx="106.26596"
cy="51.535553"
r="16.570711"
transform="rotate(3.1178174)" />
<circle
id="path819"
style="fill:#000000;fill-opacity:0.99596773;stroke:none;stroke-width:0.26458332;stroke-opacity:0.96078431"
cx="171.42836"
cy="110.19328"
r="16.570711"
transform="rotate(3.1178174)" />
<circle
id="path823"
style="fill:#000000;fill-opacity:0.99596773;stroke:none;stroke-width:0.26458332;stroke-opacity:0.96078431"
cx="135.76379"
cy="190.27704"
r="16.570711"
transform="rotate(3.1178174)" />
<circle
style="fill:#000000;fill-opacity:0.99596773;stroke:none;stroke-width:0.26458332;stroke-opacity:0.96078431"
id="path825"
cx="48.559471"
cy="181.1138"
r="16.570711"
transform="rotate(3.1178174)" />
<circle
id="path827"
style="fill:#000000;fill-opacity:0.99596773;stroke:none;stroke-width:0.26458332;stroke-opacity:0.96078431"
cx="30.328812"
cy="95.366837"
r="16.570711"
transform="rotate(3.1178174)" />
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

1
assets/styles/icons/_layout.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M264.5 5.2c14.9-6.9 32.1-6.9 47 0l218.6 101c8.5 3.9 13.9 12.4 13.9 21.8s-5.4 17.9-13.9 21.8l-218.6 101c-14.9 6.9-32.1 6.9-47 0L45.9 149.8C37.4 145.8 32 137.3 32 128s5.4-17.9 13.9-21.8L264.5 5.2zM476.9 209.6l53.2 24.6c8.5 3.9 13.9 12.4 13.9 21.8s-5.4 17.9-13.9 21.8l-218.6 101c-14.9 6.9-32.1 6.9-47 0L45.9 277.8C37.4 273.8 32 265.3 32 256s5.4-17.9 13.9-21.8l53.2-24.6 152 70.2c23.4 10.8 50.4 10.8 73.8 0l152-70.2zm-152 198.2l152-70.2 53.2 24.6c8.5 3.9 13.9 12.4 13.9 21.8s-5.4 17.9-13.9 21.8l-218.6 101c-14.9 6.9-32.1 6.9-47 0L45.9 405.8C37.4 401.8 32 393.3 32 384s5.4-17.9 13.9-21.8l53.2-24.6 152 70.2c23.4 10.8 50.4 10.8 73.8 0z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 878 B

1
assets/styles/icons/_media.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M256 0H576c35.3 0 64 28.7 64 64V288c0 35.3-28.7 64-64 64H256c-35.3 0-64-28.7-64-64V64c0-35.3 28.7-64 64-64zM476 106.7C471.5 100 464 96 456 96s-15.5 4-20 10.7l-56 84L362.7 169c-4.6-5.7-11.5-9-18.7-9s-14.2 3.3-18.7 9l-64 80c-5.8 7.2-6.9 17.1-2.9 25.4s12.4 13.6 21.6 13.6h80 48H552c8.9 0 17-4.9 21.2-12.7s3.7-17.3-1.2-24.6l-96-144zM336 96c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32s32-14.3 32-32zM64 128h96V384v32c0 17.7 14.3 32 32 32H320c17.7 0 32-14.3 32-32V384H512v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V192c0-35.3 28.7-64 64-64zm8 64c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16H88c8.8 0 16-7.2 16-16V208c0-8.8-7.2-16-16-16H72zm0 104c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16H88c8.8 0 16-7.2 16-16V312c0-8.8-7.2-16-16-16H72zm0 104c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16H88c8.8 0 16-7.2 16-16V416c0-8.8-7.2-16-16-16H72zm336 16v16c0 8.8 7.2 16 16 16h16c8.8 0 16-7.2 16-16V416c0-8.8-7.2-16-16-16H424c-8.8 0-16 7.2-16 16z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

1
assets/styles/icons/_question.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM169.8 165.3c7.9-22.3 29.1-37.3 52.8-37.3h58.3c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24V250.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1H222.6c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM288 352c0 17.7-14.3 32-32 32s-32-14.3-32-32s14.3-32 32-32s32 14.3 32 32z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 743 B

1
assets/styles/icons/_rss.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M0 64C0 46.3 14.3 32 32 32c229.8 0 416 186.2 416 416c0 17.7-14.3 32-32 32s-32-14.3-32-32C384 253.6 226.4 96 32 96C14.3 96 0 81.7 0 64zM128 416c0 35.3-28.7 64-64 64s-64-28.7-64-64s28.7-64 64-64s64 28.7 64 64zM32 160c159.1 0 288 128.9 288 288c0 17.7-14.3 32-32 32s-32-14.3-32-32c0-123.7-100.3-224-224-224c-17.7 0-32-14.3-32-32s14.3-32 32-32z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 588 B

1
assets/styles/icons/_search.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352c79.5 0 144-64.5 144-144s-64.5-144-144-144S64 128.5 64 208s64.5 144 144 144z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 516 B

1
assets/styles/icons/_settings.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M0 416c0-17.7 14.3-32 32-32l54.7 0c12.3-28.3 40.5-48 73.3-48s61 19.7 73.3 48L480 384c17.7 0 32 14.3 32 32s-14.3 32-32 32l-246.7 0c-12.3 28.3-40.5 48-73.3 48s-61-19.7-73.3-48L32 448c-17.7 0-32-14.3-32-32zm192 0c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32s32-14.3 32-32zM384 256c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32s32-14.3 32-32zm-32-80c32.8 0 61 19.7 73.3 48l54.7 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-54.7 0c-12.3 28.3-40.5 48-73.3 48s-61-19.7-73.3-48L32 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l246.7 0c12.3-28.3 40.5-48 73.3-48zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32s32-14.3 32-32s-14.3-32-32-32zm73.3 0L480 64c17.7 0 32 14.3 32 32s-14.3 32-32 32l-214.7 0c-12.3 28.3-40.5 48-73.3 48s-61-19.7-73.3-48L32 128C14.3 128 0 113.7 0 96S14.3 64 32 64l86.7 0C131 35.7 159.2 16 192 16s61 19.7 73.3 48z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1 KiB

1
assets/styles/icons/_user.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0S96 57.3 96 128s57.3 128 128 128zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 458 B

129
assets/styles/layout/_breakpoints.scss Normal file
View file

@ -0,0 +1,129 @@
// https://github.com/twbs/bootstrap/blob/main/scss/mixins/_breakpoints.scss
//
// Breakpoint viewport sizes and media queries.
//
// Breakpoints are defined as a map of (name: minimum width), order from small to large:
//
// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px)
//
// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
// Name of the next breakpoint, or null for the last breakpoint.
//
// >> breakpoint-next(sm)
// md
// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
// md
// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl xxl))
// md
@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
$n: index($breakpoint-names, $name);
@if not $n {
@error "breakpoint `#{$name}` not found in `#{$breakpoints}`";
}
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
}
// Minimum breakpoint width. Null for the smallest (first) breakpoint.
//
// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
// 576px
@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
$min: map-get($breakpoints, $name);
@return if($min != 0, $min, null);
}
// Maximum breakpoint width.
// The maximum value is reduced by 0.02px to work around the limitations of
// `min-` and `max-` prefixes and viewports with fractional widths.
// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
// See https://bugs.webkit.org/show_bug.cgi?id=178261
//
// >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
// 767.98px
@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
$max: map-get($breakpoints, $name);
@return if($max and $max > 0, $max - .02, null);
}
// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
// Useful for making responsive utilities.
//
// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
// "" (Returns a blank string)
// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px))
// "-sm"
@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
@return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
}
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the @content apply to the given breakpoint and wider.
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
$min: breakpoint-min($name, $breakpoints);
@if $min {
@media (min-width: $min) {
@content;
}
} @else {
@content;
}
}
// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
// Makes the @content apply to the given breakpoint and narrower.
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
$max: breakpoint-max($name, $breakpoints);
@if $max {
@media (max-width: $max) {
@content;
}
} @else {
@content;
}
}
// Media that spans multiple breakpoint widths.
// Makes the @content apply between the min and max breakpoints
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
$min: breakpoint-min($lower, $breakpoints);
$max: breakpoint-max($upper, $breakpoints);
@if $min != null and $max != null {
@media (min-width: $min) and (max-width: $max) {
@content;
}
} @else if $max == null {
@include media-breakpoint-up($lower, $breakpoints) {
@content;
}
} @else if $min == null {
@include media-breakpoint-down($upper, $breakpoints) {
@content;
}
}
}
// Media between the breakpoint's minimum and maximum widths.
// No minimum for the smallest breakpoint, and no maximum for the largest one.
// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
$min: breakpoint-min($name, $breakpoints);
$next: breakpoint-next($name, $breakpoints);
$max: breakpoint-max($next, $breakpoints);
@if $min != null and $max != null {
@media (min-width: $min) and (max-width: $max) {
@content;
}
} @else if $max == null {
@include media-breakpoint-up($name, $breakpoints) {
@content;
}
} @else if $min == null {
@include media-breakpoint-down($next, $breakpoints) {
@content;
}
}
}

50
assets/styles/layout/_forms.scss Normal file
View file

@ -0,0 +1,50 @@
textarea {
padding: 2rem;
box-sizing: border-box;
resize: vertical;
@include themify($themes) {
border: themed('formInputBorder');
&:focus-visible {
outline: themed('formInputFocusOutline');
}
}
}
input[type="submit"],
button {
@include themify($themes) {
background-color: themed('formSubmitBgColor');
color: themed('formSubmitTextColor');
border: themed('formSubmitBorder');
&:hover,
&:focus-visible {
background-color: themed('buttonBgColorHover');
}
}
background-color: #367fb5;
color: white;
font-weight: bold;
padding: 1.2rem;
margin: 2rem 0;
border: 1px solid #325e7f;
}
.kbin-btn {
&-secondry {
@include themify($themes) {
background-color: themed('buttonSecondaryBgColor');
color: themed('buttonSecondaryTextColor');
border: themed('buttonSecondaryBorder');
}
&:hover,
&:focus-visible {
@include themify($themes) {
background-color: themed('buttonSecondaryTextHoverColor');
}
}
}
}

121
assets/styles/layout/_icons.scss Normal file
View file

@ -0,0 +1,121 @@
.kbin-icon {
&__search {
&::after {
content: url('../icons/_search.svg');
display: block;
height: 1.2em;
width: 1.2em;
margin: 0 auto;
}
}
&__add {
&::after {
content: url('../icons/_add.svg');
display: block;
height: 1.2em;
width: 1.2em;
margin: 0 auto;
}
}
&__channel {
&::after {
content: url('../icons/_channel.svg');
display: block;
height: 1.2em;
width: 1.2em;
margin: 0 auto;
}
}
&__user {
&::after {
content: url('../icons/_user.svg');
display: block;
height: 1.2em;
width: 1.2em;
margin: 0 auto;
}
}
&__clock {
&::after {
content: url('../icons/_clock.svg');
display: block;
height: 1.2em;
width: 1.2em;
margin: 0 auto;
}
}
&__media {
&::after {
content: url('../icons/_media.svg');
display: block;
height: 1.2em;
width: 1.2em;
margin: 0 auto;
}
}
&__layout {
&::after {
content: url('../icons/_layout.svg');
display: block;
height: 1.2em;
width: 1.2em;
margin: 0 auto;
}
}
&__settings {
&::after {
content: url('../icons/_settings.svg');
display: block;
height: 1.2em;
width: 1.2em;
margin: 0 auto;
}
}
&__rss {
&::after {
content: url('../icons/_rss.svg');
display: block;
height: 1.2em;
width: 1.2em;
margin: 0 auto;
}
}
&__bulb {
&::after {
content: url('../icons/_bulb.svg');
display: block;
height: 1.2em;
width: 1.2em;
margin: 0 auto;
}
}
&__fediverse {
&::after {
content: url('../icons/_fediverse.svg');
display: block;
height: 1.2em;
width: 1.2em;
margin: 0 auto;
}
}
&__question {
&::after {
content: url('../icons/_question.svg');
display: block;
height: 1.2em;
width: 1.2em;
margin: 0 auto;
}
}
}

121
assets/styles/layout/_layout.scss Normal file
View file

@ -0,0 +1,121 @@
body {
position: relative;
}
#kbin {
font-size: map-get($font-size, "default");
@include themify($themes) {
background-color: themed('bgColor');
}
&-header {
z-index: 5;
padding: 0 .75rem;
grid-area: header;
}
&-main {
padding: 0 .75rem;
grid-area: main;
}
&-sidebar {
padding: 0 .75rem;
grid-area: sidebar;
}
&-footer {
z-index: 5;
padding: 0 .75rem;
grid-area: footer;
}
.kbin-container {
margin: 0 auto;
max-width: 1360px;
grid-template-columns: 3fr 1fr;
display: grid;
grid-template-areas: "header header"
"main sidebar"
"footer footer";
}
.kbin-group {
position: relative;
overflow: hidden;
}
.kbin-stretched-link {
&::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
content: "";
}
}
a {
&:focus-visible {
outline: solid 4px darkorange;
}
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
&:focus-visible {
outline: solid 4px darkorange;
}
}
menu {
margin: 0;
padding: 0;
}
.kbin-options {
@include themify($themes) {
background-color: themed('optionsBgColor');
border: themed('optionsBorder');
}
&--top {
border-top: 0 !important;
}
}
p {
line-height: 2.2rem;
}
}
#kbin-tools {
.header-bg {
position: absolute;
width: 100%;
top: 0;
left: 0;
height: 5.5rem;
z-index: 0;
@include themify($themes) {
background-color: themed('footerBgColor');
}
}
.footer-bg {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
height: 26.1rem;
z-index: 0;
@include themify($themes) {
background-color: themed('footerBgColor');
}
}
}

349
assets/styles/layout/_normalize.scss Normal file
View file

@ -0,0 +1,349 @@
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}

26
assets/styles/layout/_typo.scss Normal file
View file

@ -0,0 +1,26 @@
:root {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 62.5%;
}
#kbin {
@include themify($themes) {
color: themed('textColor');
}
a {
@include themify($themes) {
color: themed('entryLinkColor');
}
text-decoration: none;
@include themify($themes) {
color: themed('linkColor');
&:hover {
color: themed('linkColorHover');
}
}
}
}

15
assets/styles/mixins/animations.scss Normal file
View file

@ -0,0 +1,15 @@
@mixin fade-in($waitTime) {
animation:
wait #{$waitTime},
fade-in 800ms #{$waitTime};
}
@keyframes wait {
0% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}

17
assets/styles/mixins/theme.scss Normal file
View file

@ -0,0 +1,17 @@
@mixin themify($themes) {
@each $theme, $map in $themes {
.kbin-theme--#{$theme} & {
$theme-map: () !global;
@each $key, $submap in $map {
$value: map-get(map-get($themes, $theme), '#{$key}');
$theme-map: map-merge($theme-map, ($key: $value)) !global;
}
@content;
$theme-map: null !global;
}
}
}
@function themed($key) {
@return map-get($theme-map, $key);
}

48
assets/utils/comment-factory.js
View file

@ -1,48 +0,0 @@
export default class CommentFactory {
static create(html, parent, nested) {
const id = parent.dataset.commentIdValue;
let level = parent.dataset.commentLevelValue;
const div = document.createElement('div');
div.innerHTML = html;
// Create node
level = (level >= 7 ? 7 : parseInt(level) + 1);
div.firstElementChild.classList.add('kbin-comment-level--' + level);
div.firstElementChild.dataset.commentLevelValue = level;
let children = parent
.parentNode
.querySelectorAll(`[data-comment-parent-value='${id}']`);
if (children.length && nested) {
let child = children[children.length - 1];
while (true) {
if (!child.nextElementSibling.dataset.commentLevelValue || (child.nextElementSibling.dataset.commentLevelValue <= Number(level))) {
break;
}
child = child.nextElementSibling;
}
child.parentNode.insertBefore(div.firstElementChild, child.nextSibling);
} else {
parent
.parentNode
.insertBefore(div.firstElementChild, parent.nextSibling);
}
}
static edit(html, parent) {
const level = parent.dataset.commentLevelValue;
let div = document.createElement('div');
div.innerHTML = html;
// Edit node
div.firstElementChild.classList.add('kbin-comment-level--' + level);
div.firstElementChild.dataset.commentLevelValue = level;
parent.replaceWith(div.firstElementChild);
}
}

Some files were not shown because too many files have changed in this diff Show more