diff --git a/brutaldon/migrations/0007_auto_20180618_2115.py b/brutaldon/migrations/0007_auto_20180618_2115.py index d31dd1b..f333340 100644 --- a/brutaldon/migrations/0007_auto_20180618_2115.py +++ b/brutaldon/migrations/0007_auto_20180618_2115.py @@ -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() diff --git a/brutaldon/static/css/brutstrap-tweaks.css b/brutaldon/static/css/brutstrap-tweaks.css new file mode 100644 index 0000000..8ee131d --- /dev/null +++ b/brutaldon/static/css/brutstrap-tweaks.css @@ -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; +} diff --git a/brutaldon/static/css/brutstrap.css b/brutaldon/static/css/brutstrap.css new file mode 100644 index 0000000..ed2cc1f --- /dev/null +++ b/brutaldon/static/css/brutstrap.css @@ -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; +} diff --git a/brutaldon/templates/base.html b/brutaldon/templates/base.html index 62a7438..324e5be 100644 --- a/brutaldon/templates/base.html +++ b/brutaldon/templates/base.html @@ -151,7 +151,7 @@ {% endblock %} -
+
{% block content %}

@@ -162,7 +162,7 @@

{% endblock %}

-
+