diff --git a/brutaldon/migrations/0007_auto_20180618_2115.py b/brutaldon/migrations/0007_auto_20180618_2115.py index 9d6f8fc..503cf8c 100644 --- a/brutaldon/migrations/0007_auto_20180618_2115.py +++ b/brutaldon/migrations/0007_auto_20180618_2115.py @@ -24,6 +24,9 @@ def set_up_default_themes(apps, schema_editor): vt240 = Theme(name="vt240", main_css="css/vt240don.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() diff --git a/brutaldon/static/css/vt240don-green.css b/brutaldon/static/css/vt240don-green.css new file mode 100644 index 0000000..7d8d8eb --- /dev/null +++ b/brutaldon/static/css/vt240don-green.css @@ -0,0 +1,188 @@ +html, body, a, div, div.notification, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary, h1.title, h2.subtitle { + font-family: "monospace"; + color: #00ff77; + background-color: #000; + font-size: medium; +} + + +tr, td, ul, ol { + border-color: #00ff77; + outline: 1px solid #00ff77; + padding-top: 5px; + padding-bottom: 5px; + margin-top: 5px; + margin-bottom: 10px; + background-color: #000000; +} + +a, a.button, a.button.is-primary, input.button.is-primary, input, .input, .textarea, .footer, .label, select, textarea { + color: #00ff88; + border-color: #00ff88; + background-color: #000000; + font-weight: bolder; + text-decoration-line: none; + font-size: medium; +} + + +a:hover, a.button:hover, a.button.is-primary:hover, input.button.is-primary:hover { + color: #000000; + background-color: #00ff88; +} + +.control input[type=text], .control textarea +{ + width: 100%; + max-width: 80em; + border: 1px solid #00ff77; + background-color: #000000; + margin-bottom: 1ex; +} + +.control input, .control select +{ + border: 1px solid #00ff77; + background-color: #000000; + margin-bottom: 1ex; +} + +img { + filter: grayscale(100%); + -webkit-filter: grayscale(100%); +} + + +div.card-header-title, div.card-header-icon { + color: #00ff77; + -webkit-text-stroke: 2px black; + -moz-text-stroke: 2px black; + text-stroke: 2px black; +} + +.container { + margin: 0 auto; + max-width: 80em; + color: #00ff88; + background-color: #000000; +} + +.box { + padding: 1em; + border-color: #00ff77; + outline: 1px solid #00ff77; + background-color: #000; + margin-bottom: 1em; +} + +.is-hidden { + display: none; +} + +.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 { + background-color: black; + border-radius: 5px; + /*-webkit-box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1); + box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);*/ + color: #4a4a00; + padding: 1.25rem; + margin-bottom: 0.75rem; + margin-top: 0.75rem; +} + +.is-max-128 { + max-height: 128px; + max-width: 128px; +} + +.is-max-256 { + max-height: 256px; + max-width: 256px; +} + +figure.media-left p.image a img +{ + border-radius: 5px; +} + +.active-context { + background-color: #000000; + border-color: #00ff88; + outline: 1px solid #00ff88; +} + +.account-avatar +{ + display: inline-block; +} +.reblog-icon +{ + margin-top: 32px; + display: inline-block; +} + +img.fav-avatar { + display: inline; + +} + +.level { + display: block; + margin-bottom: 1ex; + margin-top: 1ex; +} + +@media screen and (max-width: 768px) { + .media { + display: block; + } +} + +@media screen and (min-width: 1024px) { + .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; + } +} diff --git a/brutaldon/static/css/vt240don.css b/brutaldon/static/css/vt240don.css index 8252b16..91303fa 100644 --- a/brutaldon/static/css/vt240don.css +++ b/brutaldon/static/css/vt240don.css @@ -2,6 +2,7 @@ html, a, div, div.notification, body, body div, span, object, iframe, h1, h2, h3 font-family: "monospace"; color: #ff7700; background-color: #000000; + font-size: medium; } @@ -13,17 +14,35 @@ tr, td, ul, ol { margin-top: 5px; margin-bottom: 10px; } -a.button, a.button.is-primary, input.button.is-primary, input, .input, .textarea, .footer, .label, a { - color: #ff7700; - border-color: #ff7700; + +a, a.button, a.button.is-primary, input.button.is-primary, input, .input, .textarea, .footer, .label, select, textarea { + color: #ff8800; + border-color: #ff8800; background-color: #000000; - font-weight: 900; + font-weight: bolder; text-decoration-line: none; + font-size: medium; } + a:hover, a.button:hover, a.button.is-primary:hover, input.button.is-primary:hover { color: #000000; - background-color: #ff7700; + background-color: #ff8800; +} + +.control input[type=text], .control textarea +{ + width: 100%; + max-width: 80em; + border: 1px solid #ff7700; + margin-bottom: 1ex; +} + +.control input, .control select +{ + border: 1px solid #ff7700; + background-color: #000000; + margin-bottom: 1ex; } img { @@ -39,6 +58,22 @@ div.card-header-title, div.card-header-icon { text-stroke: 2px black; } +.container { + margin: 0 auto; + max-width: 80em; +} + +.box { + padding: 1em; + border-color: #ff7700; + outline: 1px solid #ff7700; + background-color: #000; + margin-bottom: 1em; +} + +.is-hidden { + display: none; +} .image.is-32x32, .is-32x32 img, img.is-32x32 { width: 32px; @@ -118,9 +153,32 @@ img.fav-avatar { } +.level { + display: block; + margin-bottom: 1ex; + margin-top: 1ex; +} + @media screen and (max-width: 768px) { .media { display: block; } } +@media screen and (min-width: 1024px) { + .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; + } +}