X-Git-Url: https://jfr.im/git/irc/freenode/web-7.0.git/blobdiff_plain/cc11c90a4b60e133b2be4c9135048084c1fa237f..4f56ae6cf0dbc9977c9c60e1358c3fbeeb88a553:/static/css/style.css

diff --git a/static/css/style.css b/static/css/style.css
new file mode 100644
index 000000000..9a8dd2e23
--- /dev/null
+++ b/static/css/style.css
@@ -0,0 +1,397 @@
+/* vars */
+
+/* reset css for browser compat */
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* global */
+
+body {
+  font-family: 'Open Sans';
+  color: #333;
+  font-size: 14px;
+  min-height: 100vh;
+  height: auto;
+}
+
+a {
+  color: rgb(66,139,202);
+  text-decoration: none;
+}
+
+/* navbar */
+
+.navbar {
+  width: 100%;
+  height: 50px;
+  background-color: #fff;
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  border-bottom: 1px solid rgba(0,0,0,.3);
+  z-index: 100;
+}
+
+.nlogo {
+  height: 40px;
+}
+
+.navlinks {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-justify-content: space-around;
+  -ms-flex-pack: distribute;
+  justify-content: space-around;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+}
+
+.nlink {
+  text-decoration: none;
+  color: #000;
+}
+
+/* main */
+
+.container {
+  padding: 50px 0 0;
+  width: 100%;
+  min-height: 68vh;
+}
+
+.main {
+  margin-left: .5em;
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+
+/* jumbotron */
+
+.jumbotron {
+  position: relative;
+  width: 100%;
+  margin-top: -16px;
+  background: #000;
+  background: #eee;
+  box-shadow: 0 3px 5px rgba(150,150,150,.36);
+  color: #333;
+}
+
+.child {
+  text-align: center;
+  margin: .5em;
+  font-size: 32px;
+  line-height: 48px;
+}
+
+.box-container {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-justify-content: space-around;
+  -ms-flex-pack: distribute;
+  justify-content: space-around;
+  -webkit-box-align: stretch;
+  -webkit-align-items: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+.box {
+  text-align: center;
+  text-decoration: none;
+  color: #333;
+  margin-bottom: 5px;
+  -webkit-flex-basis: 30%;
+  -ms-flex-preferred-size: 30%;
+  flex-basis: 30%;
+  background-color: #fff;
+  border-radius: 10px;
+  -webkit-border-radius: 10px;
+  -moz-border-radius: 10px;
+}
+
+.box:hover,
+.box:active {
+  background-color: #eee;
+}
+
+.fa-users {
+  margin-top: 5px;
+}
+
+.fa-comment,
+.fa-question {
+  margin-bottom: 5px;
+}
+
+.title {
+  text-align: center;
+}
+
+/* articles feed */
+
+h1 {
+  margin: 0;
+}
+
+div.art {
+  border-bottom: 1px solid rgba(0,0,0,.3);
+}
+
+div.art:last-child {
+  border-bottom: none;
+}
+
+b.art {
+  margin-bottom: 0;
+  font-size: 18px;
+}
+
+p.art {
+  margin: 0;
+}
+
+p.art-ingress {
+  font-style: italic;
+  margin: 0;
+}
+
+.art-date {
+  color: #ccc;
+  margin: 0;
+}
+
+p.heading {
+  white-space: nowrap;
+}
+
+p.art-link {
+  margin-top: 0;
+}
+
+/* Article */
+
+.art-full h1,
+.art-full h2,
+.art-full h3,
+.art-full h4 {
+  line-height: 1.5em;
+}
+
+/* help */
+
+.hmain {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-justify-content: space-around;
+  -ms-flex-pack: distribute;
+  justify-content: space-around;
+  -webkit-box-align: stretch;
+  -webkit-align-items: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
+}
+
+a.hchild {
+  color: #333;
+  /*height: 40px;*/
+  width: 95%;
+  text-align: center;
+  border-top: 1px solid rgba(0,0,0,.6);
+  border-left: 1px solid rgba(0,0,0,.6);
+  border-right: 1px solid rgba(0,0,0,.6);
+}
+
+a.hchild:hover,
+a.hchild:active {
+  background-color: #eee;
+}
+
+.hchild:first-child {
+  margin-top: 10px;
+  -webkit-border-top-left-radius: 10px;
+  -webkit-border-top-right-radius: 10px;
+  -moz-border-radius-topleft: 10px;
+  -moz-border-radius-topright: 10px;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+}
+
+.hchild:last-child {
+  margin-bottom: 10px;
+  border-bottom: 1px solid rgba(0,0,0,.6);
+  -webkit-border-bottom-right-radius: 10px;
+  -webkit-border-bottom-left-radius: 10px;
+  -moz-border-radius-bottomright: 10px;
+  -moz-border-radius-bottomleft: 10px;
+  border-bottom-right-radius: 10px;
+  border-bottom-left-radius: 10px;
+}
+
+/* footer */
+
+.footers {
+  min-height: 30vh;
+}
+
+.footer {
+  background: #eee;
+  color: rgba(51,51,51,.9);
+  margin-top: 2vh;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  min-height: 27vh;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-box-align: start;
+  -webkit-align-items: flex-start;
+  -ms-flex-align: start;
+  align-items: flex-start;
+  box-shadow: 0 -3px 5px rgba(150,150,150,.36);
+}
+
+.footerchild {
+  margin-top: .5em;
+}
+
+.footer a {
+  color: #000;
+}
+
+.footer h2 {
+  margin-bottom: 9px;
+  display: inline-block;
+}
+
+.footerchild ul,
+.footerchild ul ul {
+  margin-left: 10px;
+  margin-right: 10px;
+  list-style-type: none;
+}
+
+.footerchild ul ul {
+  padding-left: 30px;
+}
+
+@media all and (max-width: 500px) {
+  .footer {
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+
+  .footerchild {
+    width: 100%;
+  }
+
+  .footerchild ul li:last-child {
+    margin-bottom: .5em;
+  }
+
+  .hdn {
+    display: none;
+  }
+}
+
+.footer h2,
+.footer h3 {
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+.copyright {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: nowrap;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background: rgba(170,178,171,.5);
+  height: 3vh;
+  color: rgba(0,0,0,.8);
+}
+
+a.copyright {
+  background: rgba(170,178,171,.5);
+  margin-bottom: 0;
+  margin-top: 0;
+  margin-left: .5em;
+  margin-right: .5em;
+  width: auto;
+  height: auto;
+}
+
+.copyright a img {
+  height: 3vh;
+  width: auto;
+}
+
+.copyright p {
+  margin-bottom: 0;
+  margin-top: 0;
+  margin-left: .5em;
+  margin-right: .5em;
+  text-align: right;
+}
+
+@media all and (max-width: 500px) {
+  .copyright {
+    height: 5vh;
+  }
+
+  .copyright a img {
+    height: 5vh;
+  }
+}
\ No newline at end of file