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",
|
||||
is_brutalist=True)
|
||||
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",
|
||||
is_brutalist=True)
|
||||
large.save()
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>
|
||||
{% endblock %}
|
||||
|
||||
<section id="main" class="section">
|
||||
<main id="main" class="section">
|
||||
<div class="container">
|
||||
{% block content %}
|
||||
<h1 class="title">
|
||||
|
|
@ -162,7 +162,7 @@
|
|||
</p>
|
||||
{% endblock %}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="level">
|
||||
|
|
|
|||
Loading…
Reference in New Issue