diff --git a/content/pages/deep-dive.md b/content/pages/deep-dive.md
index 38d9f37..0ad9721 100644
--- a/content/pages/deep-dive.md
+++ b/content/pages/deep-dive.md
@@ -75,7 +75,15 @@ __offen__ is created by [Frederik Ring][frederik-ring]{: target="_blank"} and [H
We are happy about any kind of feedback. From *criticism and praise to contributions or support*, everything is welcome.
-Summary
+
+
+
---
diff --git a/content/pages/index.md b/content/pages/index.md
index eacd5e3..128c56d 100644
--- a/content/pages/index.md
+++ b/content/pages/index.md
@@ -11,4 +11,13 @@ __offen__ treats both users and operators as parties of equal importance. Users
__offen__ is currently being conceptually designed and is applying for funds to sustain its development.
-Deep dive
+
+
+
+
diff --git a/theme/static/css/style.css b/theme/static/css/style.css
index a60678c..33455b8 100644
--- a/theme/static/css/style.css
+++ b/theme/static/css/style.css
@@ -313,7 +313,7 @@
body {
background-color: #fff;
padding: 50px;
- font: 14px/1.5 "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font: 14px/1.4 "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #727272;
font-weight: 400
}
@@ -502,7 +502,7 @@ header ul a strong {
section {
width: 500px;
float: right;
- padding-bottom: 50px
+ padding-bottom: 40px
}
small {
@@ -633,7 +633,7 @@ screen and (max-width: 480px) {
body {
color: #898989;
font-size: 18px;
-line-height: 1.6;
+line-height: 1.5;
font-weight: 400;
}
@@ -644,7 +644,7 @@ color: #404040;
font-size: 28px;
line-height: 1.4;
font-weight: 400;
-margin: 0 0 60px 0;
+margin: 0 0 40px 0;
}
h3 {
@@ -683,14 +683,6 @@ text-decoration: none;
font-weight: 700;
}
-.btn_grey,
-.btn_grey:hover,
-.btn_grey:focus {
-color: #fff;
-font-weight: 700;
-outline: 0;
-}
-
sup {
line-height: 1;
}
@@ -721,7 +713,7 @@ margin: -20px 0 0 0;
section {
width: 600px;
padding: 0;
-margin: 0 0 80px 0;
+margin: 0 0 40px 0;
}
section > p {
@@ -760,29 +752,96 @@ h2 strong {
color: #898989;
}
-.btn,
-.btn:hover,
-.btn:active,
-.btn_grey {
-display: block;
-width: 100%;
+/* Buttons
+------------------------------------------------------------- */
+
+.btn {
+-webkit-border-radius: 0;
+-moz-border-radius: 0;
+border-radius: 0px;
+padding: 6px;
text-align: center;
text-decoration: none;
-white-space: nowrap;
-cursor: pointer;
-box-sizing: border-box;
-border-radius: 3px;
-border: none;
-background-color: #f9d152;
-color: white;
-padding: 7px 0 7px 0;
-margin: 60px 0 120px 0;
}
-.btn_grey {
-background-color: #e1e1e1;
+.btn-color-grey,
+.btn-color-grey:visited,
+.btn-color-grey:link {
+background: #fff;
+color: #898989;
+border: solid #898989 5px;
}
+.btn-color-orange,
+.btn-color-orange:visited,
+.btn-color-orange:link {
+background: #fff;
+color: #F7BF08;
+border: solid #F7BF08 5px;
+}
+
+.btn-color-grey:hover,
+.btn-color-grey:active {
+background: #898989;
+color: #fff;
+text-decoration: none;
+}
+
+.btn-color-orange:hover,
+.btn-color-orange:active {
+background: #F7BF08;
+color: #fff;
+text-decoration: none;
+}
+
+.btn:first-of-type,
+.btn:last-of-type {
+margin: 0 0 15px 0;
+}
+
+.button-wrapper {
+display: flex;
+flex-flow: column wrap;
+justify-content: space-around;
+}
+
+.button-wrapper:first-of-type {
+padding-top: 40px;
+}
+
+.button-wrapper:last-of-type {
+padding: 0;
+}
+
+@media (min-width: 480px) {
+.button-wrapper {
+align-items: center;
+flex-flow: row wrap;
+-ms-flex-flow: row wrap;
+-webkit-flex-flow: row wrap;
+}
+
+.btn {
+flex-grow: 1;
+}
+
+.btn:first-of-type {
+margin-left: 0;
+margin-right: 15px;
+}
+
+.btn:last-of-type {
+margin-left: 15px;
+margin-right: 0;
+}
+
+}
+
+
+
+/* Footer
+------------------------------------------------------------- */
+
.footnote {
color: #d5d5d5;
font-size: 14px;
@@ -814,7 +873,7 @@ margin-right: 0.14em;
------------------------------------------------------------- */
em {
color: #898989;
-background: linear-gradient(transparent 60%, #fde28c 60%);
+background: linear-gradient(transparent 66%, #fde28c 66%);
font-style: normal;
}
@@ -832,7 +891,7 @@ section {
border: none;
width: auto;
padding: 0 0 0 0;
-margin: 40px 0 80px 0;
+margin: 40px 0 40px 0;
}
@media print,
@@ -845,3 +904,16 @@ margin: 0;
}
}
+
+
+
+
+
+
+
+
+
+
+
+/* ADDED
+------------------------------------------------------------- */
diff --git a/theme/static/css/style_werk.css b/theme/static/css/style_werk.css
new file mode 100644
index 0000000..92002e8
--- /dev/null
+++ b/theme/static/css/style_werk.css
@@ -0,0 +1,198 @@
+body {
+ background: rgb(46, 49, 51);
+ letter-spacing: 1px;
+ color: #fff;
+}
+.short-code-row {
+ padding: 20px;
+}
+.page-header h3 em {
+ font-weight: normal;
+}
+.github-link {
+ margin-top: 40px;
+}
+.short-code-header,
+.form-group h4 {
+ text-align: center;
+}
+.small-block {
+ display: block;
+}
+.short-code-form {
+ padding: 40px;
+}
+hr {
+ border-top: 1px solid #444;
+}
+h1,
+.form-group h4 {
+ line-height: 1.4;
+}
+.form-group .btn {
+ margin-bottom: 20px;
+ border-width: 4px;
+ border-right: none;
+ border-left: none;
+ border-top: none;
+}
+.content {
+ padding-top: 40px;
+ padding-bottom: 40px;
+}
+.page-header,
+.page-sub-header {
+ text-align: center;
+}
+.page-header {
+ padding: 40px;
+ margin: 0;
+ border-bottom: none;
+}
+.page-sub-header {
+ color: #999;
+ margin-bottom: 40px;
+}
+.page-sub-header>h3>small {
+ margin-left: 12px;
+}
+.box-shadow {
+ box-shadow: 6px 6px 20px #000;
+}
+div.glyphicons ul {
+ max-height: 300px;
+ overflow: scroll;
+ padding: 12px;
+ margin: 0;
+}
+div.glyphicons ul li {
+ display: inline-block;
+ color: rgb(46, 49, 51);
+ padding: 8px;
+ margin: 4px;
+ border: 1px solid rgb(46, 49, 51);
+ border-radius: 4px;
+ cursor: pointer;
+}
+div.glyphicons ul li:hover {
+ background: rgb(46, 49, 51);
+ color: #fff;
+}
+.features-list {
+ margin-top: 40px;
+ padding-left: 0;
+ text-align: left;
+ font-style: italic;
+ font-size: 18px;
+ list-style: none;
+}
+.features-list li:not(:first-of-type) {
+ margin-top: 12px;
+}
+.glyphicon-pushpin {
+ margin-left: 0;
+ margin-right: 12px;
+}
+/* What You Need To Copy
+==========================================================================*/
+.button-wrapper .btn {
+ margin: 20px 0px;
+}
+.button-wrapper {
+ display: flex;
+ flex-flow: column wrap;
+ justify-content: space-around;
+}
+a.btn>span.glyphicon {
+ margin-left: 12px;
+}
+@media (min-width: 520px) {
+ .button-wrapper {
+ align-items: center;
+ flex-flow: row wrap;
+ -ms-flex-flow: row wrap;
+ -webkit-flex-flow: row wrap;
+ }
+ .btn-container-center>a.btn {
+ margin-left: 12px;
+ margin-right: 12px;
+ }
+ .btn-container-center {
+ justify-content: center;
+ }
+ .btn-container-center>a.btn:first-of-type {
+ margin-left: 0;
+ }
+ .btn-container-center>a.btn:last-of-type {
+ margin-right: 0;
+ }
+ .btn-container-left>a.btn {
+ margin-left: 12px;
+ margin-right: 12px;
+ }
+ .btn-container-left {
+ justify-content: flex-start;
+ }
+ .btn-container-left>a.btn:first-of-type {
+ margin-left: 0;
+ }
+ .btn-container-left>a.btn:last-of-type {
+ margin-right: 0;
+ }
+ .btn-container-right>a.btn {
+ margin-left: 12px;
+ margin-right: 12px;
+ }
+ .btn-container-right {
+ justify-content: flex-end;
+ }
+ .btn-container-right>a.btn:first-of-type {
+ margin-left: 0;
+ }
+ .btn-container-right>a.btn:last-of-type {
+ margin-right: 0;
+ }
+ .btn-container-stretch>a.btn {
+ margin-left: 12px;
+ margin-right: 12px;
+ }
+ .btn-container-stretch {
+ justify-content: space-between;
+ }
+ .btn-container-stretch>a.btn:first-of-type {
+ margin-left: 0;
+ }
+ .btn-container-stretch>a.btn:last-of-type {
+ margin-right: 0;
+ }
+ .btn-container-col-center {
+ flex-direction: column;
+ align-items: center;
+ }
+ .btn-container-col-left {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+ .btn-container-col-right {
+ flex-direction: column;
+ align-items: flex-end;
+ }
+
+ /* TESTING */
+ .btn-fill-space .btn {
+ margin: 20px;
+ flex-grow: 1;
+ transition-duration: 0.2s;
+ }
+ .btn-fill-space .btn:hover {
+ flex-grow: 1.6;
+ }
+
+ .btn-always-col {
+ flex-flow: column wrap;
+ justify-content: space-around;
+ }
+ .btn-always-col>.btn {
+ width: 100%;
+ }
+}
diff --git a/theme/templates/base.html b/theme/templates/base.html
index 01f5d6a..048ba94 100644
--- a/theme/templates/base.html
+++ b/theme/templates/base.html
@@ -34,19 +34,15 @@
{% block content %}{% endblock %}
+