Add first draft of brutstrap[1] theme.

[1]: https://git.sr.ht/~emsenn/brutstrap
This commit is contained in:
Jason McBrayer 2019-02-04 15:06:02 -05:00
parent bc33dbcb9f
commit 46aea0fff9
4 changed files with 483 additions and 2 deletions

View File

@ -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()

View 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;
}

View 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;
}

View File

@ -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">