mirror of
https://gitlab.com/brutaldon/brutaldon.git
synced 2024-09-07 15:34:15 -04:00
Merge branch 'main' into 'main'
Brutal CSS Strip See merge request brutaldon/brutaldon!14
This commit is contained in:
Dorian Vertumna
commit
17b3193060
@ -26,4 +26,6 @@ We currently lack a formal process for this. Translations can be submitted via m
|
||||
|
||||
## Documentation
|
||||
|
||||
We would love assistance in creating a formal documentation process for this project.
|
||||
Current documentation efforts are focused on adding usable comments in the code itself.
|
||||
Guides on how to set up and admin a brutaldon instance are likely to follow after that.
|
||||
Feel free to send in a merge request with other documentation ideas you have!
|
||||
|
||||
3
Pipfile
3
Pipfile
@ -25,5 +25,8 @@ Django = "~=3.2"
|
||||
django-html_sanitizer = "*"
|
||||
inscriptis = "*"
|
||||
lxml = "*"
|
||||
uwsgi = "*"
|
||||
django-debug-toolbar = "*"
|
||||
gunicorn = "*"
|
||||
|
||||
[dev-packages]
|
||||
|
||||
@ -64,5 +64,8 @@ People love screenshots, whatever the project, so here we are. These screenshots
|
||||
* [X] Add support for following, blocking, and muting users.
|
||||
|
||||
## Aesthetic
|
||||
|
||||
No automatic page updates: refresh the page to see new toots. No endless scroll: there's a "next page" link. No autocompletion of anything: use another lynx process in another screen window to look things up. UTF8 clean.
|
||||
Brutaldon seeks to be a minimalist activity-pub client, taking visual and functional inspiration from the web of the 90s. HTML only websites are quite usable actually. Very little CSS and javascript should be used to polish the edges of a powerful and robust tool.
|
||||
- Brutaldon will function without javascript.
|
||||
- Brutaldon will function without css.
|
||||
- No automatic page updates.
|
||||
- UTF8 clean.
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
# Module for reversing urls.
|
||||
# In the sense of a reverse proxy I think.
|
||||
from django.urls import reverse
|
||||
|
||||
|
||||
def bookmarklet_url(request):
|
||||
# takes var request and add a /share/ to the end of the url
|
||||
share_url = request.build_absolute_uri(reverse("share"))
|
||||
# return the share_url embedded in a string of other stuff.
|
||||
# not yet sure what that other stuff is for.
|
||||
return {
|
||||
"bookmarklet_url": f"javascript:location.href='{share_url}?url='+encodeURIComponent(location.href)+';title='+encodeURIComponent(document.title)"
|
||||
}
|
||||
|
||||
@ -1,6 +1,13 @@
|
||||
# The Forms modules supplies tools for http get and post,
|
||||
# and building the <form> html elements to use them.
|
||||
from django import forms
|
||||
# This module gives us access to the settings given to
|
||||
# Django at runtime via settings files.
|
||||
from django.conf import settings
|
||||
# Module for translating text, returns strings
|
||||
from django.utils.translation import gettext as _
|
||||
# Module for calculating times
|
||||
# Note: Python 3.9 or later projects should be using internal libraries per pytz docs
|
||||
from pytz import common_timezones
|
||||
from .models import Theme, Preference
|
||||
|
||||
|
||||
@ -19,58 +19,6 @@ def set_up_default_themes(apps, schema_editor):
|
||||
is_brutalist=False,
|
||||
)
|
||||
dark.save()
|
||||
lux = Theme(
|
||||
name="Lux",
|
||||
main_css="css/bulmaswatch-lux.min.css",
|
||||
tweaks_css="css/brutaldon.css",
|
||||
is_brutalist=False,
|
||||
)
|
||||
lux.save()
|
||||
solar = Theme(
|
||||
name="Solar",
|
||||
main_css="css/bulmaswatch-solar.min.css",
|
||||
tweaks_css="css/brutaldon.css",
|
||||
is_brutalist=False,
|
||||
)
|
||||
solar.save()
|
||||
material = Theme(
|
||||
name="Material",
|
||||
main_css="css/bulmaswatch-materia.min.css",
|
||||
tweaks_css="css/brutaldon-material.css",
|
||||
is_brutalist=False,
|
||||
)
|
||||
material.save()
|
||||
brutalism = Theme(
|
||||
name="FULLBRUTALISM", main_css="css/fullbrutalism.css", is_brutalist=True
|
||||
)
|
||||
brutalism.save()
|
||||
brutstrap = Theme(
|
||||
name="Brutstrap",
|
||||
main_css="css/brutstrap.css",
|
||||
is_brutalist=True,
|
||||
tweaks_css="css/brutstrap-tweaks.css",
|
||||
)
|
||||
brutstrap.save()
|
||||
large = Theme(
|
||||
name="Minimalist Large", main_css="css/minimal-large.css", is_brutalist=True
|
||||
)
|
||||
large.save()
|
||||
small = Theme(
|
||||
name="Minimalist Small", main_css="css/minimal-small.css", is_brutalist=True
|
||||
)
|
||||
small.save()
|
||||
dark2 = Theme(
|
||||
name="Minimalist Dark", main_css="css/minimal-dark.css", is_brutalist=True
|
||||
)
|
||||
dark2.save()
|
||||
vt240 = Theme(
|
||||
name="vt240 amber", main_css="css/vt240don-amber.css", is_brutalist=True
|
||||
)
|
||||
vt240.save()
|
||||
vt240_green = Theme(
|
||||
name="vt240 green", main_css="css/vt240don-green.css", is_brutalist=True
|
||||
)
|
||||
vt240_green.save()
|
||||
minimal = Theme(name="No styling at all", main_css=None, is_brutalist=True)
|
||||
minimal.save()
|
||||
|
||||
|
||||
18
brutaldon/migrations/0026_alter_preference_timezone.py
Normal file
18
brutaldon/migrations/0026_alter_preference_timezone.py
Normal file
File diff suppressed because one or more lines are too long
@ -1,6 +1,10 @@
|
||||
from django.db import models
|
||||
# Module to access variables given to Django at runtime
|
||||
from django.conf import settings
|
||||
# Module to translate strings
|
||||
from django.utils.translation import gettext as _
|
||||
# Module for calculating time
|
||||
# Note: Python 3.9 or later programs should use internal libraries, per pytz docs
|
||||
from pytz import common_timezones
|
||||
|
||||
timezones = [(tz, tz) for tz in common_timezones]
|
||||
|
||||
@ -41,9 +41,11 @@ INSTALLED_APPS = [
|
||||
"sanitizer",
|
||||
"django.contrib.humanize",
|
||||
"brutaldon",
|
||||
"debug_toolbar",
|
||||
]
|
||||
|
||||
MIDDLEWARE = [
|
||||
"debug_toolbar.middleware.DebugToolbarMiddleware",
|
||||
"django.middleware.security.SecurityMiddleware",
|
||||
"django.contrib.sessions.middleware.SessionMiddleware",
|
||||
"django.middleware.common.CommonMiddleware",
|
||||
@ -216,3 +218,8 @@ DEFAULT_AUTO_FIELD='django.db.models.AutoField'
|
||||
|
||||
# Version number displayed on about page
|
||||
BRUTALDON_VERSION = "2.15.0"
|
||||
|
||||
# Set the internal IP address, this needs to be explicitly set for the debug toolbar to work.
|
||||
INTERNAL_IPS = [
|
||||
"127.0.0.1",
|
||||
]
|
||||
|
||||
3
brutaldon/static/css/brutal-css.css
Normal file
3
brutaldon/static/css/brutal-css.css
Normal file
@ -0,0 +1,3 @@
|
||||
img.avatar {
|
||||
height: 90px;
|
||||
}
|
||||
1
brutaldon/static/css/bulma-badge.min.css
vendored
1
brutaldon/static/css/bulma-badge.min.css
vendored
File diff suppressed because one or more lines are too long
1
brutaldon/static/css/bulma-tooltip.min.css
vendored
1
brutaldon/static/css/bulma-tooltip.min.css
vendored
File diff suppressed because one or more lines are too long
1
brutaldon/static/css/bulma.min.css
vendored
1
brutaldon/static/css/bulma.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
6
brutaldon/static/css/bulmaswatch-lux.min.css
vendored
6
brutaldon/static/css/bulmaswatch-lux.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
7068
brutaldon/static/css/bulmaswatch-solar.min.css
vendored
7068
brutaldon/static/css/bulmaswatch-solar.min.css
vendored
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -145,7 +145,7 @@ input[type=button] {width: auto; overflow: visible;}
|
||||
|
||||
body {
|
||||
font-family: Terminus, Inconsolata, Consolas, "Droid Sans Mono", "DejaVu Sans Mono", "Monaco", monospace;
|
||||
background-color: #CCC;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
margin: 1em;
|
||||
}
|
||||
@ -236,12 +236,12 @@ img.is-32x32 {
|
||||
.media {
|
||||
padding: 1em;
|
||||
margin: 4px;
|
||||
border: 8px ridge #CCC;
|
||||
border: 8px #000;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.media.active-context {
|
||||
background-color: #DDD;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
summary::before {
|
||||
@ -332,10 +332,10 @@ img.emoji
|
||||
.modal-content
|
||||
{
|
||||
z-index: 60;
|
||||
background-color: #CCC;
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
padding: 1ex;
|
||||
border: 8px ridge #CCC;
|
||||
border: 8px ridge #fff;
|
||||
max-height: 90vh;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@ -1,351 +0,0 @@
|
||||
/* Magnific Popup CSS */
|
||||
.mfp-bg {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1042;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
background: #0b0b0b;
|
||||
opacity: 0.8; }
|
||||
|
||||
.mfp-wrap {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1043;
|
||||
position: fixed;
|
||||
outline: none !important;
|
||||
-webkit-backface-visibility: hidden; }
|
||||
|
||||
.mfp-container {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: 0 8px;
|
||||
box-sizing: border-box; }
|
||||
|
||||
.mfp-container:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
vertical-align: middle; }
|
||||
|
||||
.mfp-align-top .mfp-container:before {
|
||||
display: none; }
|
||||
|
||||
.mfp-content {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
z-index: 1045; }
|
||||
|
||||
.mfp-inline-holder .mfp-content,
|
||||
.mfp-ajax-holder .mfp-content {
|
||||
width: 100%;
|
||||
cursor: auto; }
|
||||
|
||||
.mfp-ajax-cur {
|
||||
cursor: progress; }
|
||||
|
||||
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
|
||||
cursor: -moz-zoom-out;
|
||||
cursor: -webkit-zoom-out;
|
||||
cursor: zoom-out; }
|
||||
|
||||
.mfp-zoom {
|
||||
cursor: pointer;
|
||||
cursor: -webkit-zoom-in;
|
||||
cursor: -moz-zoom-in;
|
||||
cursor: zoom-in; }
|
||||
|
||||
.mfp-auto-cursor .mfp-content {
|
||||
cursor: auto; }
|
||||
|
||||
.mfp-close,
|
||||
.mfp-arrow,
|
||||
.mfp-preloader,
|
||||
.mfp-counter {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none; }
|
||||
|
||||
.mfp-loading.mfp-figure {
|
||||
display: none; }
|
||||
|
||||
.mfp-hide {
|
||||
display: none !important; }
|
||||
|
||||
.mfp-preloader {
|
||||
color: #CCC;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: auto;
|
||||
text-align: center;
|
||||
margin-top: -0.8em;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
z-index: 1044; }
|
||||
.mfp-preloader a {
|
||||
color: #CCC; }
|
||||
.mfp-preloader a:hover {
|
||||
color: #FFF; }
|
||||
|
||||
.mfp-s-ready .mfp-preloader {
|
||||
display: none; }
|
||||
|
||||
.mfp-s-error .mfp-content {
|
||||
display: none; }
|
||||
|
||||
button.mfp-close,
|
||||
button.mfp-arrow {
|
||||
overflow: visible;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
display: block;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
z-index: 1046;
|
||||
box-shadow: none;
|
||||
touch-action: manipulation; }
|
||||
|
||||
button::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0; }
|
||||
|
||||
.mfp-close {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
opacity: 0.65;
|
||||
padding: 0 0 18px 10px;
|
||||
color: #FFF;
|
||||
font-style: normal;
|
||||
font-size: 28px;
|
||||
font-family: Arial, Baskerville, monospace; }
|
||||
.mfp-close:hover,
|
||||
.mfp-close:focus {
|
||||
opacity: 1; }
|
||||
.mfp-close:active {
|
||||
top: 1px; }
|
||||
|
||||
.mfp-close-btn-in .mfp-close {
|
||||
color: #333; }
|
||||
|
||||
.mfp-image-holder .mfp-close,
|
||||
.mfp-iframe-holder .mfp-close {
|
||||
color: #FFF;
|
||||
right: -6px;
|
||||
text-align: right;
|
||||
padding-right: 6px;
|
||||
width: 100%; }
|
||||
|
||||
.mfp-counter {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
color: #CCC;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
white-space: nowrap; }
|
||||
|
||||
.mfp-arrow {
|
||||
position: absolute;
|
||||
opacity: 0.65;
|
||||
margin: 0;
|
||||
top: 50%;
|
||||
margin-top: -55px;
|
||||
padding: 0;
|
||||
width: 90px;
|
||||
height: 110px;
|
||||
-webkit-tap-highlight-color: transparent; }
|
||||
.mfp-arrow:active {
|
||||
margin-top: -54px; }
|
||||
.mfp-arrow:hover,
|
||||
.mfp-arrow:focus {
|
||||
opacity: 1; }
|
||||
.mfp-arrow:before,
|
||||
.mfp-arrow:after {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin-top: 35px;
|
||||
margin-left: 35px;
|
||||
border: medium inset transparent; }
|
||||
.mfp-arrow:after {
|
||||
border-top-width: 13px;
|
||||
border-bottom-width: 13px;
|
||||
top: 8px; }
|
||||
.mfp-arrow:before {
|
||||
border-top-width: 21px;
|
||||
border-bottom-width: 21px;
|
||||
opacity: 0.7; }
|
||||
|
||||
.mfp-arrow-left {
|
||||
left: 0; }
|
||||
.mfp-arrow-left:after {
|
||||
border-right: 17px solid #FFF;
|
||||
margin-left: 31px; }
|
||||
.mfp-arrow-left:before {
|
||||
margin-left: 25px;
|
||||
border-right: 27px solid #3F3F3F; }
|
||||
|
||||
.mfp-arrow-right {
|
||||
right: 0; }
|
||||
.mfp-arrow-right:after {
|
||||
border-left: 17px solid #FFF;
|
||||
margin-left: 39px; }
|
||||
.mfp-arrow-right:before {
|
||||
border-left: 27px solid #3F3F3F; }
|
||||
|
||||
.mfp-iframe-holder {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px; }
|
||||
.mfp-iframe-holder .mfp-content {
|
||||
line-height: 0;
|
||||
width: 100%;
|
||||
max-width: 900px; }
|
||||
.mfp-iframe-holder .mfp-close {
|
||||
top: -40px; }
|
||||
|
||||
.mfp-iframe-scaler {
|
||||
width: 100%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
padding-top: 56.25%; }
|
||||
.mfp-iframe-scaler iframe {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
|
||||
background: #000; }
|
||||
|
||||
/* Main image in popup */
|
||||
img.mfp-img {
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
line-height: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 40px 0 40px;
|
||||
margin: 0 auto; }
|
||||
|
||||
/* The shadow behind the image */
|
||||
.mfp-figure {
|
||||
line-height: 0; }
|
||||
.mfp-figure:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 40px;
|
||||
bottom: 40px;
|
||||
display: block;
|
||||
right: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
z-index: -1;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
|
||||
background: #444; }
|
||||
.mfp-figure small {
|
||||
color: #BDBDBD;
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
line-height: 14px; }
|
||||
.mfp-figure figure {
|
||||
margin: 0; }
|
||||
|
||||
.mfp-bottom-bar {
|
||||
margin-top: -36px;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
cursor: auto; }
|
||||
|
||||
.mfp-title {
|
||||
text-align: left;
|
||||
line-height: 18px;
|
||||
color: #F3F3F3;
|
||||
word-wrap: break-word;
|
||||
padding-right: 36px; }
|
||||
|
||||
.mfp-image-holder .mfp-content {
|
||||
max-width: 100%; }
|
||||
|
||||
.mfp-gallery .mfp-image-holder .mfp-figure {
|
||||
cursor: pointer; }
|
||||
|
||||
@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
|
||||
/**
|
||||
* Remove all paddings around the image on small screen
|
||||
*/
|
||||
.mfp-img-mobile .mfp-image-holder {
|
||||
padding-left: 0;
|
||||
padding-right: 0; }
|
||||
.mfp-img-mobile img.mfp-img {
|
||||
padding: 0; }
|
||||
.mfp-img-mobile .mfp-figure:after {
|
||||
top: 0;
|
||||
bottom: 0; }
|
||||
.mfp-img-mobile .mfp-figure small {
|
||||
display: inline;
|
||||
margin-left: 5px; }
|
||||
.mfp-img-mobile .mfp-bottom-bar {
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
bottom: 0;
|
||||
margin: 0;
|
||||
top: auto;
|
||||
padding: 3px 5px;
|
||||
position: fixed;
|
||||
box-sizing: border-box; }
|
||||
.mfp-img-mobile .mfp-bottom-bar:empty {
|
||||
padding: 0; }
|
||||
.mfp-img-mobile .mfp-counter {
|
||||
right: 5px;
|
||||
top: 3px; }
|
||||
.mfp-img-mobile .mfp-close {
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
padding: 0; } }
|
||||
|
||||
@media all and (max-width: 900px) {
|
||||
.mfp-arrow {
|
||||
-webkit-transform: scale(0.75);
|
||||
transform: scale(0.75); }
|
||||
.mfp-arrow-left {
|
||||
-webkit-transform-origin: 0;
|
||||
transform-origin: 0; }
|
||||
.mfp-arrow-right {
|
||||
-webkit-transform-origin: 100%;
|
||||
transform-origin: 100%; }
|
||||
.mfp-container {
|
||||
padding-left: 6px;
|
||||
padding-right: 6px; } }
|
||||
@ -1,296 +0,0 @@
|
||||
body, input, textarea, select {
|
||||
font-family: sans-serif;
|
||||
background-color: #111111;
|
||||
color: #CCCCCC;
|
||||
margin: 1ex;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
input[text], textarea
|
||||
{
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 100em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: cornflowerblue;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: lightcoral;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: orchid;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
img.is-32x32 {
|
||||
float: left;
|
||||
max-width: 32px;
|
||||
max-height: auto;
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.container {
|
||||
max-width: 960px;
|
||||
width: 960px;
|
||||
}
|
||||
.container.is-fluid {
|
||||
margin-left: 64px;
|
||||
margin-right: 64px;
|
||||
max-width: none;
|
||||
width: auto;
|
||||
}
|
||||
.navbar,
|
||||
.navbar-menu,
|
||||
.navbar-start,
|
||||
.navbar-end {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
}
|
||||
.navbar-start {
|
||||
justify-content: flex-start;
|
||||
margin-right: auto;
|
||||
}
|
||||
.navbar-end {
|
||||
justify-content: flex-end;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1279px) {
|
||||
.container.is-widescreen {
|
||||
max-width: 1152px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1471px) {
|
||||
.container.is-fullhd {
|
||||
max-width: 1344px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1280px) {
|
||||
.container {
|
||||
max-width: 1152px;
|
||||
width: 1152px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1472px) {
|
||||
.container {
|
||||
max-width: 1344px;
|
||||
width: 1344px;
|
||||
}
|
||||
}
|
||||
|
||||
main > div.container {
|
||||
max-width: 100ex;
|
||||
}
|
||||
|
||||
.level {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 3ex;
|
||||
font-weight: bold;
|
||||
margin-top: 1ex;
|
||||
margin-bottom: 1ex;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 1.5ex;
|
||||
font-weight: bold;
|
||||
margin-top: 0.25ex;
|
||||
margin-bottom: 0.25ex;
|
||||
}
|
||||
.toot {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.image.is-32x32, .is-32x32 img, img.is-32x32 {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.image.is-48x48, .is-48x48 img, img.is-48x48 {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.image.is-64x64, .is-64x64 img, img.is-64x64 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.image.is-96x96, .is-96x96 img, img.is-96x96 {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
}
|
||||
|
||||
.is-max-128 {
|
||||
max-height: 128px;
|
||||
max-width: 128px;
|
||||
}
|
||||
|
||||
.is-max-256 {
|
||||
max-height: 256px;
|
||||
max-width: 256px;
|
||||
}
|
||||
|
||||
.media {
|
||||
padding: 1ex;
|
||||
margin: 4px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.media.active-context {
|
||||
background-color: #2C2C2C;
|
||||
}
|
||||
|
||||
|
||||
.field
|
||||
{
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
label
|
||||
{
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.control, .select
|
||||
{
|
||||
margin-top: 0.5ex;
|
||||
margin-bottom: 0.5ex;
|
||||
}
|
||||
|
||||
.account-avatar
|
||||
{
|
||||
display: inline-block;
|
||||
}
|
||||
.reblog-icon
|
||||
{
|
||||
margin-top: 32px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.media-content
|
||||
{
|
||||
margin-top: 1ex;
|
||||
}
|
||||
|
||||
.media-content > div > p
|
||||
{
|
||||
margin-bottom: 1ex;
|
||||
}
|
||||
|
||||
.textarea
|
||||
{
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.errorlist
|
||||
{
|
||||
color: #FF0000;
|
||||
}
|
||||
|
||||
img.emoji
|
||||
{
|
||||
display: inline;
|
||||
max-height: 1.5rem;
|
||||
max-width: 1.5rem;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
hr.is-hidden
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.box
|
||||
{
|
||||
border-radius: 3px;
|
||||
border: 1px solid #000;
|
||||
padding: 1em;
|
||||
margin-bottom: 1em;
|
||||
background-color: #1C1C1C;
|
||||
color: #CCCCCC;
|
||||
}
|
||||
|
||||
.modal {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
z-index: 40;
|
||||
}
|
||||
.modal-background {
|
||||
position: absolute;
|
||||
background-color: rgba(10,10,10,.86);
|
||||
}
|
||||
.modal, .modal-background {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.modal-content
|
||||
{
|
||||
height: 90vh;
|
||||
overflow: auto;
|
||||
z-index: 60;
|
||||
}
|
||||
|
||||
.modal.is-active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.navbar-item span {
|
||||
padding-right: 1ex;
|
||||
}
|
||||
|
||||
.card
|
||||
{
|
||||
padding: 1em;
|
||||
margin-top: 1em;
|
||||
border: 0.2em solid white;
|
||||
}
|
||||
|
||||
.card-header
|
||||
{
|
||||
padding-bottom: 1em;
|
||||
border-bottom: 0.2em solid white;
|
||||
}
|
||||
|
||||
.card-image
|
||||
{
|
||||
padding: 1em;
|
||||
margin 0, auto;
|
||||
}
|
||||
|
||||
.button
|
||||
{
|
||||
border: 0.2em solid #CCC;
|
||||
display: inline;
|
||||
padding: 0.4em;
|
||||
}
|
||||
@ -1,267 +0,0 @@
|
||||
body, input, textarea, select {
|
||||
font-family: sans-serif;
|
||||
background-color: #FAFAFA;
|
||||
color: #000;
|
||||
margin: 1em;
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
input[text], textarea
|
||||
{
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 120em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: blue;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: red;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: purple;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
img.is-32x32 {
|
||||
float: left;
|
||||
max-width: 512px;
|
||||
max-height: auto;
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.container {
|
||||
max-width: 960px;
|
||||
width: 960px;
|
||||
}
|
||||
.container.is-fluid {
|
||||
margin-left: 64px;
|
||||
margin-right: 64px;
|
||||
max-width: none;
|
||||
width: auto;
|
||||
}
|
||||
.navbar,
|
||||
.navbar-menu,
|
||||
.navbar-start,
|
||||
.navbar-end {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
}
|
||||
.navbar-start {
|
||||
justify-content: flex-start;
|
||||
margin-right: auto;
|
||||
}
|
||||
.navbar-end {
|
||||
justify-content: flex-end;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1279px) {
|
||||
.container.is-widescreen {
|
||||
max-width: 1152px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1471px) {
|
||||
.container.is-fullhd {
|
||||
max-width: 1344px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1280px) {
|
||||
.container {
|
||||
max-width: 1152px;
|
||||
width: 1152px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1472px) {
|
||||
.container {
|
||||
max-width: 1344px;
|
||||
width: 1344px;
|
||||
}
|
||||
}
|
||||
|
||||
body > section > div.container {
|
||||
max-width: 100ex;
|
||||
}
|
||||
|
||||
.level {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 3ex;
|
||||
font-weight: bold;
|
||||
margin-top: 1ex;
|
||||
margin-bottom: 1ex;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 1.5ex;
|
||||
font-weight: bold;
|
||||
margin-top: 0.25ex;
|
||||
margin-bottom: 0.25ex;
|
||||
}
|
||||
.toot {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.image.is-32x32, .is-32x32 img, img.is-32x32 {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.image.is-48x48, .is-48x48 img, img.is-48x48 {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.image.is-64x64, .is-64x64 img, img.is-64x64 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.image.is-96x96, .is-96x96 img, img.is-96x96 {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
}
|
||||
|
||||
.is-max-128 {
|
||||
max-height: 128px;
|
||||
max-width: 128px;
|
||||
}
|
||||
|
||||
.is-max-256 {
|
||||
max-height: 256px;
|
||||
max-width: 256px;
|
||||
}
|
||||
|
||||
.media {
|
||||
padding: 1ex;
|
||||
margin: 4px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.media.active-context {
|
||||
background-color: #DDD;
|
||||
}
|
||||
|
||||
|
||||
.field
|
||||
{
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
label
|
||||
{
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.control, .select
|
||||
{
|
||||
margin-top: 0.5ex;
|
||||
margin-bottom: 0.5ex;
|
||||
}
|
||||
|
||||
.account-avatar
|
||||
{
|
||||
display: inline-block;
|
||||
}
|
||||
.reblog-icon
|
||||
{
|
||||
margin-top: 32px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.media-content
|
||||
{
|
||||
margin-top: 1ex;
|
||||
}
|
||||
|
||||
.media-content > div > p
|
||||
{
|
||||
margin-bottom: 1ex;
|
||||
}
|
||||
|
||||
.textarea
|
||||
{
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.errorlist
|
||||
{
|
||||
color: #FF0000;
|
||||
}
|
||||
|
||||
img.emoji
|
||||
{
|
||||
display: inline;
|
||||
max-height: 1.5rem;
|
||||
max-width: 1.5rem;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
hr.is-hidden
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.box
|
||||
{
|
||||
border-radius: 5px;
|
||||
border: 1px solid #000;
|
||||
padding: 1.5em;
|
||||
margin-bottom: 1.5em;
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.modal {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
z-index: 40;
|
||||
}
|
||||
.modal-background {
|
||||
position: absolute;
|
||||
background-color: rgba(10,10,10,.86);
|
||||
}
|
||||
.modal, .modal-background {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.modal-content
|
||||
{
|
||||
height: 90vh;
|
||||
overflow: auto;
|
||||
z-index: 60;
|
||||
}
|
||||
|
||||
.modal.is-active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@ -1,296 +0,0 @@
|
||||
body, input, textarea, select {
|
||||
font-family: sans-serif;
|
||||
background-color: #FAFAFA;
|
||||
color: #000;
|
||||
margin: 1ex;
|
||||
font-size: 11pt;
|
||||
}
|
||||
|
||||
input[text], textarea
|
||||
{
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 100em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: blue;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: red;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: purple;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
img.is-32x32 {
|
||||
float: left;
|
||||
max-width: 32px;
|
||||
max-height: auto;
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.container {
|
||||
max-width: 960px;
|
||||
width: 960px;
|
||||
}
|
||||
.container.is-fluid {
|
||||
margin-left: 64px;
|
||||
margin-right: 64px;
|
||||
max-width: none;
|
||||
width: auto;
|
||||
}
|
||||
.navbar,
|
||||
.navbar-menu,
|
||||
.navbar-start,
|
||||
.navbar-end {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
}
|
||||
.navbar-start {
|
||||
justify-content: flex-start;
|
||||
margin-right: auto;
|
||||
}
|
||||
.navbar-end {
|
||||
justify-content: flex-end;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1279px) {
|
||||
.container.is-widescreen {
|
||||
max-width: 1152px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1471px) {
|
||||
.container.is-fullhd {
|
||||
max-width: 1344px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1280px) {
|
||||
.container {
|
||||
max-width: 1152px;
|
||||
width: 1152px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1472px) {
|
||||
.container {
|
||||
max-width: 1344px;
|
||||
width: 1344px;
|
||||
}
|
||||
}
|
||||
|
||||
main > div.container {
|
||||
max-width: 100ex;
|
||||
}
|
||||
|
||||
.level {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 3ex;
|
||||
font-weight: bold;
|
||||
margin-top: 1ex;
|
||||
margin-bottom: 1ex;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 1.5ex;
|
||||
font-weight: bold;
|
||||
margin-top: 0.25ex;
|
||||
margin-bottom: 0.25ex;
|
||||
}
|
||||
.toot {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.image.is-32x32, .is-32x32 img, img.is-32x32 {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.image.is-48x48, .is-48x48 img, img.is-48x48 {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.image.is-64x64, .is-64x64 img, img.is-64x64 {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.image.is-96x96, .is-96x96 img, img.is-96x96 {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
}
|
||||
|
||||
.is-max-128 {
|
||||
max-height: 128px;
|
||||
max-width: 128px;
|
||||
}
|
||||
|
||||
.is-max-256 {
|
||||
max-height: 256px;
|
||||
max-width: 256px;
|
||||
}
|
||||
|
||||
.media {
|
||||
padding: 1ex;
|
||||
margin: 4px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.media.active-context {
|
||||
background-color: #DDD;
|
||||
}
|
||||
|
||||
|
||||
.field
|
||||
{
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
label
|
||||
{
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.control, .select
|
||||
{
|
||||
margin-top: 0.5ex;
|
||||
margin-bottom: 0.5ex;
|
||||
}
|
||||
|
||||
.account-avatar
|
||||
{
|
||||
display: inline-block;
|
||||
}
|
||||
.reblog-icon
|
||||
{
|
||||
margin-top: 32px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.media-content
|
||||
{
|
||||
margin-top: 1ex;
|
||||
}
|
||||
|
||||
.media-content > div > p
|
||||
{
|
||||
margin-bottom: 1ex;
|
||||
}
|
||||
|
||||
.textarea
|
||||
{
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.errorlist
|
||||
{
|
||||
color: #FF0000;
|
||||
}
|
||||
|
||||
img.emoji
|
||||
{
|
||||
display: inline;
|
||||
max-height: 1.5rem;
|
||||
max-width: 1.5rem;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
hr.is-hidden
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.box
|
||||
{
|
||||
border-radius: 3px;
|
||||
border: 1px solid #000;
|
||||
padding: 1em;
|
||||
margin-bottom: 1em;
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.modal {
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: none;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
z-index: 40;
|
||||
}
|
||||
.modal-background {
|
||||
position: absolute;
|
||||
background-color: rgba(10,10,10,.86);
|
||||
}
|
||||
.modal, .modal-background {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.modal-content
|
||||
{
|
||||
height: 90vh;
|
||||
overflow: auto;
|
||||
z-index: 60;
|
||||
}
|
||||
|
||||
.modal.is-active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.navbar-item span {
|
||||
padding-right: 1ex;
|
||||
}
|
||||
|
||||
.card
|
||||
{
|
||||
padding: 1em;
|
||||
margin-top: 1em;
|
||||
border: 0.2em solid black;
|
||||
}
|
||||
|
||||
.card-header
|
||||
{
|
||||
padding-bottom: 1em;
|
||||
border-bottom: 0.2em solid black;
|
||||
}
|
||||
|
||||
.card-image
|
||||
{
|
||||
padding: 1em;
|
||||
margin 0, auto;
|
||||
}
|
||||
|
||||
.button
|
||||
{
|
||||
border: 0.2em solid #444;
|
||||
display: inline;
|
||||
padding: 0.4em;
|
||||
}
|
||||
704
brutaldon/static/css/simple.css
Normal file
704
brutaldon/static/css/simple.css
Normal file
@ -0,0 +1,704 @@
|
||||
/* Global variables. */
|
||||
:root,
|
||||
::backdrop {
|
||||
/* Set sans-serif & mono fonts */
|
||||
--sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
|
||||
"Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica,
|
||||
"Helvetica Neue", sans-serif;
|
||||
--mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
|
||||
--standard-border-radius: 5px;
|
||||
|
||||
/* Default (light) theme */
|
||||
--bg: #fff;
|
||||
--accent-bg: #f5f7ff;
|
||||
--text: #212121;
|
||||
--text-light: #585858;
|
||||
--border: #898EA4;
|
||||
--accent: #0d47a1;
|
||||
--accent-hover: #1266e2;
|
||||
--accent-text: var(--bg);
|
||||
--code: #d81b60;
|
||||
--preformatted: #444;
|
||||
--marked: #ffdd33;
|
||||
--disabled: #efefef;
|
||||
}
|
||||
|
||||
/* Dark theme */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root,
|
||||
::backdrop {
|
||||
color-scheme: dark;
|
||||
--bg: #212121;
|
||||
--accent-bg: #2b2b2b;
|
||||
--text: #dcdcdc;
|
||||
--text-light: #ababab;
|
||||
--accent: #ffb300;
|
||||
--accent-hover: #ffe099;
|
||||
--accent-text: var(--bg);
|
||||
--code: #f06292;
|
||||
--preformatted: #ccc;
|
||||
--disabled: #111;
|
||||
}
|
||||
/* Add a bit of transparency so light media isn't so glaring in dark mode */
|
||||
img,
|
||||
video {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
/* Reset box-sizing */
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Reset default appearance */
|
||||
textarea,
|
||||
select,
|
||||
input,
|
||||
progress {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
}
|
||||
|
||||
html {
|
||||
/* Set the font globally */
|
||||
font-family: var(--sans-font);
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* Make the body a nice central block */
|
||||
body {
|
||||
color: var(--text);
|
||||
background-color: var(--bg);
|
||||
font-size: 1.15rem;
|
||||
line-height: 1.5;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr min(45rem, 90%) 1fr;
|
||||
margin: 0;
|
||||
}
|
||||
body > * {
|
||||
grid-column: 2;
|
||||