diff --git a/static/css/style.css b/static/css/kozmo-dark.css
similarity index 66%
rename from static/css/style.css
rename to static/css/kozmo-dark.css
index 49f86b6..6d38ab9 100644
--- a/static/css/style.css
+++ b/static/css/kozmo-dark.css
@@ -1,5 +1,7 @@
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,500,500i,600,600i,700,700i');
+/* Basic theme elements */
+
html {
background: #222222;
}
@@ -16,126 +18,6 @@ h6 {
font-family: 'Open Sans', sans-serif;
}
-#container {
- background: #292929;
- margin: auto;
- border-style: solid;
- border-radius: 10px;
- border-color: #252525;
-}
-
-#header-left {
- padding-top: 15px;
- float: left;
- width: 60%;
-}
-
-#header-right {
- padding-top: 15px;
- float: right;
- width: 40%;
-}
-
-#site-logo {
- float: left;
- height: 100px;
- width: 100px;
- padding: 0 20px 0 20px;
-}
-
-#site-title,
-a:link,
-a:active,
-a:visited {
- color: #BBBBBB;
-}
-
-a:hover {
- color: #208DCC;
-}
-
-#site-title {
- padding: 10px 20px 0 0;
- font-weight: 600;
- font-size: 36px;
-}
-
-a:link,
-a:active,
-a:visited,
-a:hover {
- text-decoration: none;
-}
-
-p a:link,
-p a:active,
-p a:visited,
-p a:hover {
- color: #208DCC;
-}
-
-#footer {
- background: #3E3E3E;
- color: #BBBBBB;
- padding: 10px 20px 10px 20px;
- clear: both;
- font-size: 12px;
-}
-
-nav {
- clear: both;
- text-align: right;
-}
-
-nav ul {
- list-style-type: none;
- padding: 0;
-}
-
-nav ul.first > li {
- display: block;
- text-align: left;
-}
-
-nav ul li a {
- display: block;
- font-size: 90%;
-}
-
-nav a:link,
-nav a:active,
-nav a:visited,
-nav a:hover {
- text-decoration: none;
-}
-
-nav a:link,
-nav a:active,
-nav a:visited {
- color: #BBBBBB;
-}
-
-nav a:hover {
- color: #208DCC;
-}
-
-nav a.selected {
- color: #208DCC;
-}
-
-#content,
-#page-title {
- padding: 10px 20px 10px 20px;
-}
-
-#content {
- margin-bottom: 20px;
-}
-
-#page-title h1 {
- margin: 0;
-}
-
h1 {
font-size: 150%;
font-weight: 600;
@@ -162,47 +44,39 @@ h6 {
font-size: 100%;
}
-#article p, #article ol li, #article ul li {
- text-align: justify;
+
+/* Hyperlinks */
+
+a {
+ text-decoration: none;
}
-#article blockquote {
- font-family: 'Lora', serif;
- font-style: italic;
- font-size: 1.05em;
- line-height: 1.5em;
+a:link,
+a:active,
+a:visited {
+ color: #BBBBBB;
}
-#article dl dt {
- font-weight: bold;
+a:hover,
+a.selected {
+ color: #208DCC;
}
-#article dl dt em {
- font-weight: normal;
+p a:link,
+p a:active,
+p a:visited,
+p a:hover {
+ color: #208DCC;
}
-#article .timestamp,
-#article .tags,
-#article .tags a:link,
-#article .tags a:active,
-#article .tags a:visited,
-#article .tags a:hover {
- color: #777;
-}
-#article .timestamp {
- padding-bottom: 1em;
-}
+/* Images */
-hr {
- border-bottom: 0;
- border-left: 0;
- border-right: 0;
- margin: 2.5em 0;
-}
-
-span.upper {
- text-transform: uppercase;
+img {
+ margin: auto;
+ max-width:100%;
+ max-height:100%;
+ display: block;
}
img.right {
@@ -215,45 +89,18 @@ img.left {
margin: 0 1em 1em 0;
}
-img {
- margin: auto;
- max-width:100%;
- max-height:100%;
- display: block;
-}
-#featured-image img {
- max-width:100%;
- max-height:100%;
- display: block;
+/* Thematic breaks */
+
+hr {
+ border-bottom: 0;
+ border-left: 0;
+ border-right: 0;
+ margin: 2.5em 0;
}
-
-ul.pagination {
- padding: 0;
- list-style-type: none;
- text-align: center;
-}
-
-.pagination li {
- display: inline;
- margin: 10px;
-}
-
-.pagination .active a:link,
-.pagination .active a:active,
-.pagination .active a:visited,
-.pagination .active a:hover,
-.pagination .disabled a:link,
-.pagination .disabled a:active,
-.pagination .disabled a:visited,
-.pagination .disabled a:hover,
-.pagination .previous-disabled,
-.pagination .next-disabled {
- color: #555;
- text-decoration: none;
-}
+/* Tables */
table,
th,
@@ -275,21 +122,159 @@ table img {
box-sizing: border-box;
}
-#page-title-container {
- background: #3E3E3E;
- border-top: 1px solid #444444;
- border-bottom: 1px solid #444444;
+
+/* Forms */
+
+form label {
display: block;
}
+form textarea,
+form input {
+ margin-top: 10px;
+ margin-bottom: 20px;
+ width: 100%;
+ display: block;
+ box-sizing: border-box;
+}
+
+form textarea {
+ min-height: 160px;
+ width: 100%;
+ resize: vertical;
+}
+
+
+/* Main menu */
+
+nav {
+ clear: both;
+ text-align: right;
+}
+
+nav ul {
+ list-style-type: none;
+ padding: 0;
+}
+
+nav ul.first > li {
+ display: block;
+ text-align: left;
+}
+
+nav ul li a {
+ display: block;
+ font-size: 90%;
+}
+
+nav a:link,
+nav a:active,
+nav a:visited {
+ color: #BBBBBB;
+}
+
+nav a:hover,
+nav a.selected {
+ color: #208DCC;
+}
+
+
+/* Language selector */
+
+.language-selector {
+ list-style-type: none;
+ font-size: 90%;
+}
+
+.language-selector li {
+ display: inline;
+ margin: .5em;
+ text-align: center;
+}
+
+
+/* Main container */
+
+#container {
+ background: #292929;
+ margin: auto;
+ border-style: solid;
+ border-radius: 10px;
+ border-color: #252525;
+}
+
+
+/* Header */
+
+#header-left,
+#header-right {
+ padding-top: 15px;
+}
+
+#site-logo {
+ height: 100px;
+ width: 100px;
+ padding: 0 20px 0 20px;
+}
+
+#site-title {
+ padding: 10px 20px 0 0;
+ font-weight: 600;
+ font-size: 220%;
+}
+
+
+/* Footer */
+
+#footer {
+ background: #3E3E3E;
+ color: #BBBBBB;
+ padding: 10px 20px 10px 20px;
+ clear: both;
+ font-size: 12px;
+}
+
+
+/* Page title */
+
+#page-title {
+ padding: 10px 20px 10px 20px;
+ background: #3E3E3E;
+ border-top: 1px solid #444444;
+ border-bottom: 1px solid #444444;
+}
+
+#page-title h1 {
+ margin: 0;
+}
+
+
+/* Page content */
+
+#content {
+ padding: 10px 20px 10px 20px;
+ margin-bottom: 20px;
+ text-align: justify;
+}
+
+#content .timestamp,
+#content .tags {
+ color: #777;
+}
+
+#content .timestamp {
+ padding-bottom: 1em;
+}
+
+
+/* Paginator page: entries */
+
#paginator-page {
margin-bottom: 30px;
- text-align: justify;
}
#paginator-page-footer {
margin-top: 10px;
- display: block;
height: 45px;
/*border-bottom: 1px solid #444444;*/
}
@@ -312,9 +297,7 @@ table img {
margin: 0px 0px 0px 0px;
}
-#paginator-page-button a:link,
-#paginator-page-button a:active,
-#paginator-page-button a:visited {
+#paginator-page-button a {
color: #FFF;
}
@@ -322,52 +305,185 @@ table img {
color: #DDD;
}
-.language-selector {
- display: inline;
+
+/* Paginator page: bottom buttons */
+
+.pagination {
+ padding: 0;
list-style-type: none;
- float: right;
- margin-right: 30px;
- font-size: 90%;
-}
-
-.language-selector li {
- display: inline;
- margin: .5em;
-}
-
-.language-selector .selected,
-.first .selected {
- color: #208DCC;
-}
-
-form label {
- display: block;
-}
-
-form textarea,
-form input {
- margin-top: 10px;
- margin-bottom: 20px;
- width: 100%;
- display: block;
- box-sizing: border-box;
-}
-
-form textarea {
- height: 160px;
- width: 100%;
- resize: none;
-}
-
-@media screen and (max-width: 779px) {
-
-#header-left {
- display: block;
- float: none;
- width: 100%;
text-align: center;
}
+.pagination li {
+ display: inline;
+ margin: 10px;
+}
+
+.pagination .previous-disabled,
+.pagination .next-disabled {
+ color: #555;
+ text-decoration: none;
+}
+
+
+
+@media (min-width: 780px) {
+
+/* Main menu */
+
+.burger-button {
+ display: none;
+}
+
+nav ul.first > li {
+ display: inline-block;
+ position: relative;
+ padding-right: 1.25em;
+}
+
+nav ul.second,
+nav ul.third {
+ display: none;
+ position: absolute;
+ background: #000000;
+ width: 160px;
+ box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.25);
+}
+
+nav ul.first li:hover ul.second,
+nav ul.second li:hover ul.third {
+ display: block;
+}
+
+nav ul.second li a,
+nav ul.third li a {
+ padding: 0.75em 1em;
+}
+
+nav ul.second {
+ z-index: 2;
+}
+
+nav ul.third {
+ z-index: 3;
+}
+
+nav ul.second li {
+ position: relative;
+}
+
+nav ul.third {
+ left: 212px;
+ top: -1px;
+}
+
+
+/* Language selector */
+
+.language-selector {
+ float: right;
+ margin-right: 30px;
+}
+
+
+/* Main container */
+
+#container {
+ max-width: 1200px;
+}
+
+
+/* Header */
+
+#header-left {
+ float: left;
+ width: 60%;
+}
+
+#header-right {
+ float: right;
+ width: 40%;
+}
+
+#site-logo {
+ float: left;
+}
+
+}
+
+
+
+@media screen and (max-width: 779px) {
+
+/* Main menu */
+
+.burger-button {
+ display: block;
+ background: #3E3E3E;
+ font-size: 100%;
+ padding: 5px 20px 5px 20px;
+ margin-top: 20px;
+ cursor: pointer;
+}
+
+.burger-button:hover {
+ color: #DDDDDD;
+ background: #208DCC;
+}
+
+#menu-entries {
+ display: none;
+}
+
+.burger-toggle:checked ~ #menu-entries {
+ display: block;
+}
+
+.burger-toggle:checked ~ .burger-button {
+ color: #DDDDDD;
+ background: #208DCC;
+}
+
+nav {
+ text-align: center;
+ margin-bottom: 20px;
+}
+
+nav ul.first > li a,
+nav ul.second > li a {
+ display: block;
+ padding: 5px 20px 5px 20px;
+ background: #3E3E3E;
+}
+
+nav ul.first > li a:hover,
+nav ul.second > li a:hover {
+ color: #DDDDDD;
+ background: #208DCC;
+}
+
+nav ul.first {
+ margin-top: 0px;
+}
+
+nav ul.second > li a {
+ padding-left: 40px;
+}
+
+
+/* Language selector */
+
+.language-selector {
+ text-align: center;
+ float: none;
+ margin: auto;
+ padding: 0;
+}
+
+
+/* Header */
+
+#header-left,
#header-right {
display: block;
float: none;
@@ -387,126 +503,4 @@ form textarea {
padding: 0px 5px;
}
-.language-selector {
- text-align: center;
- float: none;
-}
-
-nav {
- text-align: center;
- margin-bottom: 20px;
-}
-
-.burger-button {
- display: block;
- background: #3E3E3E;
- font-size: 100%;
- padding: 5px 20px 5px 20px;
- margin-top: 20px;
- cursor: pointer;
-}
-
-#menu-entries {
- display: none;
-}
-
-.burger-toggle:checked ~ #menu-entries {
- display: block;
-}
-
-.burger-toggle:checked ~ .burger-button {
- color: #DDDDDD;
- background: #208DCC;
-}
-
-nav ul.first > li a,
-nav ul.second > li a {
- display: block;
- padding: 5px 20px 5px 20px;
- background: #3E3E3E;
-}
-
-nav ul.first > li a:hover,
-nav ul.second > li a:hover,
-.burger-button:hover {
- color: #DDDDDD;
- background: #208DCC;
-}
-
-nav ul.first {
- margin-top: 0px;
-}
-
-nav ul.second > li a {
- padding-left: 40px;
-}
-
-}
-
-@media (min-width: 780px) {
- #container {
- max-width: 1200px;
- }
-
- .burger-button {
- display: none;
- }
-
- nav ul.second,
- nav ul.third {
- display: none;
- }
-
- nav ul.first > li {
- display: inline-block;
- position: relative;
- padding-right: 1.25em;
- }
-
- nav ul.second,
- nav ul.third {
- position: absolute;
- background: #000000;
- width: 160px;
- box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.25);
- }
-
- nav ul.second {
- z-index: 2;
- }
-
- nav ul.third {
- z-index: 3;
- }
-
- nav ul.second li {
- position: relative;
- }
-
- nav ul.third {
- left: 212px;
- top: -1px;
- }
-
- nav ul.first li:hover ul.second,
- nav ul.second li:hover ul.third {
- display: block;
- }
-
- nav ul.second li a,
- nav ul.third li a {
- padding: 0.75em 1em;
- }
-
- #article {
- position: relative;
- }
-
- #summary {
- display: block;
- position: absolute;
- top: 0px;
- left: 608px;
- width: 342px;
- }
}
- 
+ 
@@ -53,11 +53,8 @@