mirror of
https://gitlab.com/brutaldon/brutaldon.git
synced 2024-12-04 14:46:24 -05:00
Add first draft of brutstrap[1] theme.
[1]: https://git.sr.ht/~emsenn/brutstrap
This commit is contained in:
Jason McBrayer
parent
bc33dbcb9f
commit
46aea0fff9
@ -23,6 +23,11 @@ def set_up_default_themes(apps, schema_editor):
|
|||||||
main_css="css/fullbrutalism.css",
|
main_css="css/fullbrutalism.css",
|
||||||
is_brutalist=True)
|
is_brutalist=True)
|
||||||
brutalism.save()
|
brutalism.save()
|
||||||
|
brutstrap = Theme(name="Brutstrap",
|
||||||
|
min_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",
|
large = Theme(name="Minimalist Large", main_css="css/minimal-large.css",
|
||||||
is_brutalist=True)
|
is_brutalist=True)
|
||||||
large.save()
|
large.save()
|
||||||
|
|||||||
286
brutaldon/static/css/brutstrap-tweaks.css
Normal file
286
brutaldon/static/css/brutstrap-tweaks.css
Normal file
@ -0,0 +1,286 @@
|
|||||||
|
/* Tweaks to make brutstrap work with brutaldon's existing html */
|
||||||
|
|
||||||
|
/* Re-implemented brutstrap features for brutaldon's html structure */
|
||||||
|
|
||||||
|
nav
|
||||||
|
{
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
nav .navbar-menu, nav .navbar-brand
|
||||||
|
{
|
||||||
|
display: flex;
|
||||||
|
margin: 0.2em;
|
||||||
|
padding: 0;
|
||||||
|
padding-bottom: 0.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav .navbar-item
|
||||||
|
{
|
||||||
|
display: inline;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
article /* As brutstrap's section */
|
||||||
|
{
|
||||||
|
border-bottom: 0.1em solid #444;
|
||||||
|
margin-top: 0.25em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
article + hr /* Now redundant */
|
||||||
|
{
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Bulma styles re-implemented for compatibility */
|
||||||
|
|
||||||
|
img.is-32x32 {
|
||||||
|
float: left;
|
||||||
|
max-width: 512px;
|
||||||
|
max-height: auto;
|
||||||
|
margin: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 img, .is-max-256 img
|
||||||
|
{
|
||||||
|
display: block;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
.is-max-128 {
|
||||||
|
max-height: 128px;
|
||||||
|
max-width: 128px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-max-256 {
|
||||||
|
max-height: 256px;
|
||||||
|
max-width: 256px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img.emoji
|
||||||
|
{
|
||||||
|
display: inline;
|
||||||
|
max-height: 1.5rem;
|
||||||
|
max-width: 1.5rem;
|
||||||
|
vertical-align: text-bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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
|
||||||
|
{
|
||||||
|
z-index: 60;
|
||||||
|
background-color: #CCC;
|
||||||
|
color: #000;
|
||||||
|
padding: 1em;
|
||||||
|
border: 0.2em solid #444;
|
||||||
|
max-height: 90vh;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal.is-active {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fscking levels */
|
||||||
|
.level {
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.level code {
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.level img {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.level.is-mobile {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.level.is-mobile .level-left,
|
||||||
|
.level.is-mobile .level-right {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.level.is-mobile .level-left + .level-right {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.level.is-mobile .level-item {
|
||||||
|
margin-right: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.level.is-mobile .level-item:not(:last-child) {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.level-item {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
flex-basis: auto;
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.level-item .title,
|
||||||
|
.level-item .subtitle {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.level-left,
|
||||||
|
.level-right {
|
||||||
|
flex-basis: auto;
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.level-left {
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.level-right {
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.media {
|
||||||
|
align-items: flex-start;
|
||||||
|
display: flex;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* Remaining brutaldon-specific tweaks */
|
||||||
|
|
||||||
|
input, textarea
|
||||||
|
{
|
||||||
|
font-family: sans-serif;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea
|
||||||
|
{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
input#id_spoiler_text
|
||||||
|
{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.reblog-icon {
|
||||||
|
position: relative;
|
||||||
|
top: -24px;
|
||||||
|
left: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img.fav-avatar {
|
||||||
|
display: inline;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#status_count
|
||||||
|
{
|
||||||
|
margin-left: 90%;
|
||||||
|
margin-top: 1rem;
|
||||||
|
background-color: #888;
|
||||||
|
color: #FFF;
|
||||||
|
float: right;
|
||||||
|
padding: 0.5ex;
|
||||||
|
border-radius: 5px;
|
||||||
|
min-height: 1.5rem;
|
||||||
|
min-width: 1.5rem;
|
||||||
|
font-size: 0.8em;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
#username_autocomplete
|
||||||
|
{
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
190
brutaldon/static/css/brutstrap.css
Normal file
190
brutaldon/static/css/brutstrap.css
Normal file
@ -0,0 +1,190 @@
|
|||||||
|
/* Components */
|
||||||
|
body {
|
||||||
|
position: relative;
|
||||||
|
background-color: #eee;
|
||||||
|
color: #444;
|
||||||
|
font-family: serif;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding-bottom: 6rem;
|
||||||
|
min-height: 100%;
|
||||||
|
font-size: 1.4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
font-family: sans-serif;
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
border-bottom: 0.5rem dashed #444;
|
||||||
|
}
|
||||||
|
main {
|
||||||
|
width: 75vw;
|
||||||
|
max-width: 40em;
|
||||||
|
margin: 0 auto;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin-bottom: 8rem;
|
||||||
|
}
|
||||||
|
footer {
|
||||||
|
padding: 1em 0;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
border-top: 0.25em dashed #444;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul {
|
||||||
|
list-style-type: none;
|
||||||
|
margin: 0.2em;
|
||||||
|
padding: 0;
|
||||||
|
padding-bottom: 0.1em;
|
||||||
|
}
|
||||||
|
nav ul li {
|
||||||
|
display: inline;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
::selection { background-color: #777; color: #eee; }
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-family: sans-serif;
|
||||||
|
margin: 0.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
border-bottom: 0.1em solid #444;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-family: sans-serif;
|
||||||
|
margin: 0.5em;
|
||||||
|
font-size: 1.4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admonition {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 55vw;
|
||||||
|
max-width: 30em;
|
||||||
|
margin-top: 1em;
|
||||||
|
padding: 1em;
|
||||||
|
border: 0.2em solid #444;
|
||||||
|
}
|
||||||
|
.admonition > .h2 {
|
||||||
|
margin: 1em 0 0.5em 0;
|
||||||
|
}
|
||||||
|
.admonition p { margin: 0.3em; }
|
||||||
|
|
||||||
|
.blockQuote {
|
||||||
|
padding: 0.5rem;
|
||||||
|
border-left: 0.1em solid #444;
|
||||||
|
}
|
||||||
|
.codeBlock {
|
||||||
|
padding: 0.5em;
|
||||||
|
border: 0.1em solid #444;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
overflow-x: scroll;
|
||||||
|
text-overflow: clip;
|
||||||
|
}
|
||||||
|
ul li { margin-bottom: 0.5em;}
|
||||||
|
ul li p {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
border-bottom: 0.1rem dotted;
|
||||||
|
line-height: 1.2;
|
||||||
|
transition: border 0.3s;
|
||||||
|
}
|
||||||
|
a:visited {
|
||||||
|
color: #777;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
outline-style: none;
|
||||||
|
border-bottom: 0.1rem solid;
|
||||||
|
}
|
||||||
|
a:focus {
|
||||||
|
outline-style: none;
|
||||||
|
border-bottom: 0.1rem solid;
|
||||||
|
background: #777;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.-advertisement {
|
||||||
|
width: 40vw;
|
||||||
|
max-width: 30rem;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.-colophon {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 50vw;
|
||||||
|
max-width: 40rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.-motd {
|
||||||
|
text-align: center;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.-copyright {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 50vw;
|
||||||
|
max-width: 40rem;
|
||||||
|
padding-bottom: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.-disclaimer {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.-invertColor {
|
||||||
|
background-color: #444;
|
||||||
|
color: #eee;
|
||||||
|
}
|
||||||
|
.-invertColor ::selection {
|
||||||
|
background-color: #eee;
|
||||||
|
color: #444;
|
||||||
|
}
|
||||||
|
.-invertColor a:before {
|
||||||
|
background: #eee;
|
||||||
|
}
|
||||||
|
.-invertColor a:focus {
|
||||||
|
outline: 0.1em solid #eee;
|
||||||
|
background: inherit;
|
||||||
|
}
|
||||||
|
.-invertColor a:visited { color: #bbb; }
|
||||||
|
.-invertColor .admonition { border-color: #eee;}
|
||||||
|
|
||||||
|
.-monospace { font-family: monospace; }
|
||||||
|
|
||||||
|
.-colorLinks a { color: #3ac; }
|
||||||
|
.-colorLinks a:hover { color: #5ce; }
|
||||||
|
.-colorLinks a:visited { color: #b8c; }
|
||||||
|
.-colorLinks a:visited:hover { color: #dae; }
|
||||||
|
|
||||||
|
.-tooSmall { font-size: 1rem; }
|
||||||
|
.-small { font-size: 1.4rem; }
|
||||||
|
.-medium { font-size: 2rem; }
|
||||||
|
.-large { font-size: 4rem; }
|
||||||
|
|
||||||
|
.-fullColumn {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 75vw;
|
||||||
|
max-width: 40em;
|
||||||
|
}
|
||||||
|
.-twoThirdColumn {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 55vw;
|
||||||
|
max-width: 30em;
|
||||||
|
}
|
||||||
|
.-halfColumn {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 40vw;
|
||||||
|
max-width: 22em;
|
||||||
|
}
|
||||||
@ -151,7 +151,7 @@
|
|||||||
</nav>
|
</nav>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
<section id="main" class="section">
|
<main id="main" class="section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<h1 class="title">
|
<h1 class="title">
|
||||||
@ -162,7 +162,7 @@
|
|||||||
</p>
|
</p>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</main>
|
||||||
|
|
||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
<div class="level">
|
<div class="level">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user