Adding SourceHut inspired CSS

Currently just color tweaks on what SourceHut has

1 files changed, 184 insertions, 0 deletions

diff --git a/static/css/simplesource.css b/static/css/simplesource.css
new file mode 100644
index 0000000..6d5533e
--- /dev/null
+++ b/static/css/simplesource.css
@@ -0,0 +1,184 @@
+html, body {
+ min-height: 100%;
+ height: 100%;
+ margin: 0
+}
+
+body {
+ color: #212529;
+ background-color: #fff;
+ font-family: sans-serif;
+ display: flex;
+ flex-direction: column;
+ align-items: stretch
+}
+
+.content {
+ max-width: 960px;
+ margin: 0 auto;
+ padding: 0 1rem
+}
+
+@media(min-width:960px) {
+ .content {
+  width: 960px
+ }
+}
+
+.content li {
+ margin-bottom: .3rem
+}
+
+.content li:last-child {
+ margin-bottom: 0
+}
+
+main {
+ flex-grow: 1
+}
+
+img, video {
+ display: block;
+ max-width: 100%;
+ box-shadow: 1px 1px 5px 0 rgba(0,0,0,.4);
+ margin: 0 auto
+}
+
+pre {
+ background: #eee;
+ padding: .5rem;
+ margin: 0 -.5rem;
+ overflow-x: auto
+}
+
+pre code {
+ font-size: .9rem
+}
+
+code {
+ background: #eee;
+ font-size: 1rem
+}
+
+nav {
+ padding: .5rem 1rem 0;
+ max-width: 960px;
+ margin: 0 auto;
+ clear: both
+}
+
+nav a:not(:first-child) {
+ margin-left: 1rem;
+ color: #666
+}
+
+nav .brand {
+ text-decoration: none;
+ font-size: 1.25rem;
+ position: relative;
+ top: 1px
+}
+
+.brand {
+ color: #212121
+}
+
+a {
+ text-decoration: none
+}
+
+a:hover {
+ text-decoration: underline
+}
+
+label {
+ display: inline-block;
+ margin-bottom: .25rem
+}
+
+h3 {
+ font-size: 1.3rem;
+ border-bottom: 1px solid #e9ecef;
+ padding-bottom: .25rem;
+ margin-bottom: .5rem;
+ font-weight: 500;
+ margin-top: 0
+}
+
+h4 {
+ font-size: 1.1rem;
+ border-bottom: 1px solid #e9ecef;
+ padding-bottom: .25rem;
+ margin-bottom: .5rem
+}
+
+header {
+ margin-top: .5rem;
+ min-height: 6rem;
+ display: flex;
+ padding-top: 1rem;
+ flex-direction: row;
+ align-items: flex-end;
+ background: #cc6900;
+ border-width: 1px 0;
+ border-color: #001933;
+ border-style: solid
+}
+
+header .heading {
+ width: 100%
+}
+
+header h1 {
+ padding: .25rem 1rem;
+ margin: 0 -2rem .5rem -1rem;
+ background: #fff;
+ border: 1px solid rgba(0,0,0,.2)
+}
+
+@media(max-width:960px) {
+ header h1 {
+  margin: 0 -1rem .5rem
+ }
+}
+
+header h1 a {
+ color: #000;
+ cursor: pointer
+}
+
+header h1 a:hover {
+ color: #000
+}
+
+header h1 a small {
+ color: #0056b3
+}
+
+.info {
+ padding-bottom: .25rem;
+ color: #fff;
+ font-size: .9rem
+}
+
+footer {
+ margin: 0 0 1rem
+}
+
+footer p:first-child {
+ margin-top: 0
+}
+
+footer .box {
+ background: #f4f4f4;
+ padding-top: 1rem;
+ height: 100%
+}
+
+footer .content {
+ margin-bottom: 1rem
+}
+
+footer strong, footer h4 {
+ color: #333
+}