diff --git a/themes/waterspill-en/static/css/style.css b/themes/waterspill-en/static/css/style.css
index 5bd7794..499f1a9 100644
--- a/themes/waterspill-en/static/css/style.css
+++ b/themes/waterspill-en/static/css/style.css
@@ -1,13 +1,10 @@
-* { margin: 0; padding: 0; }
dd { margin-left: 23px }
/* *** General Styles *** */
-
body {
- background: url(../images/background.jpg);
+ background: url(../images/concrete.webp);
color: #293331;
font: 16px Georgia, "Times New Roman", Times, serif;
- text-align: center;
}
pre { font-size:12px }
@@ -51,175 +48,229 @@ ol {
line-height: 1.6em;
}
-/* *** Layout *** */
-
-#container {
- background: url(../images/spill.gif) no-repeat top right;
- margin: 0 auto;
- text-align: left;
- width: 780px;
-}
-
-#header {
- background: url(../images/header.gif) no-repeat;
- height: 109px;
- padding: 0 10px 0 20px;
-}
-
-#topMenu {
- background: url(../images/menubar.gif) no-repeat;
- height: 48px;
-}
-
-#sidebar {
- float: right;
- padding: 20px 30px 10px 0;
- text-align: right;
- width: 150px;
-}
-
-#mainContent {
- background: url(../images/body.gif) repeat-y;
- padding: 20px 250px 10px 40px;
-}
-
-#footer {
- background: url(../images/bottom.gif) no-repeat;
- font-size: 14px;
- height: 70px;
- padding: 0 10px 0 20px;
-}
-
-/* *** Header Styles *** */
-
-#header h1 {
- font-size: 48px;
- font-weight: normal;
- padding: 20px 0 0 170px;
-}
-
-#header h2 {
- font-size: 20px;
- font-weight: normal;
- text-align: right;
-}
-
-#header a:hover {
- background: none;
-}
-
-/* *** Top Menu Styles *** */
-
-#topMenu ul {
- font-size: 26px;
- line-height: 1em;
- list-style: none;
- padding: 14px 30px 0 0;
- text-align: right;
-}
-
-#topMenu li {
- display: inline;
-}
-
-#topMenu a:hover {
- background: url(../images/hr.gif) center center no-repeat;
-}
-
-/* *** Blog Styles *** */
-
-.blogItem {
- padding-bottom: 20px;
-}
-
-.blogItem h2,
-.blogItem h3 {
- font-weight: normal;
-}
-
-.blogItem h2 a:hover,
-.blogItem h3 a:hover {
- background: none;
- text-decoration: underline;
-}
-
-.blogItem h2 {
- font-size: 24px;
-}
-
-.blogItem h3 {
- background: url(../images/hr.gif) bottom left no-repeat;
- font-size: 18px;
- padding-bottom: 6px;
-}
-
-.blogItem h3.blogMeta {
- background-position: top left;
- padding: 6px 0 0 0;
- text-align: right;
-}
-
-/* *** Sidebar Styles *** */
-
-#sidebar h3 {
- font-size: 24px;
- font-weight: normal;
-}
-
#sidebar ul {
- line-height: 1.8em;
- list-style: none;
- padding-bottom: 20px;
+ line-height: 1.8em;
+ list-style: none;
}
-#sidebar ul a {
- text-decoration: none;
-}
-
-/* *** Comments Styles *** */
-
-#comments {
- margin: 20px 0 0 20px;
-}
-
-#comments li {
- margin-bottom: 10px;
-}
-
-.commentSep {
- background: url(../images/hr.gif) bottom left no-repeat;
-}
-
-/* *** Footer Styles *** */
-
-#footer p {
- padding: 30px 0 0 0;
- text-align: center;
-}
-
-.floatR, .align-right {
- float: right;
- margin-left: 8px;
-}
-
-.floatL, .align-left {
- float: left;
- margin-right: 8px;
-}
-
-.clearfloat {
- clear:both;
- height:0;
- font-size: 1px;
- line-height: 0px;
+#topmenu ul li {
+ list-style: none;
}
div.figure img {
- max-width: 100%;
+ max-width: 90%;
+}
+
+
+@media screen and (min-width: 900px) {
+ * { margin: 0; padding: 0; }
+ body {
+ text-align: center;
+ }
+ /* *** Layout *** */
+ #container {
+ margin: 0 auto;
+ text-align: left;
+ width: 780px;
+ }
+
+ #header {
+ background: url(../images/header.gif) no-repeat;
+ height: 109px;
+ padding: 0 10px 0 20px;
+ }
+
+ #topMenu {
+ background: url(../images/menubar.gif) no-repeat;
+ height: 48px;
+ }
+
+ #sidebar {
+ float: right;
+ padding: 20px 30px 10px 0;
+ text-align: right;
+ width: 150px;
+ }
+
+ #mainContent {
+ background: url(../images/body.gif) repeat-y;
+ padding: 20px 250px 10px 40px;
+ }
+
+ #footer {
+ background: url(../images/bottom.gif) no-repeat;
+ font-size: 14px;
+ height: 70px;
+ padding: 0 10px 0 20px;
+ }
+
+ /* *** Header Styles *** */
+
+ #header h1 {
+ font-size: 48px;
+ font-weight: normal;
+ padding: 20px 0 0 170px;
+ }
+
+ #header h2 {
+ font-size: 20px;
+ font-weight: normal;
+ text-align: right;
+ }
+
+ #header a:hover {
+ background: none;
+ }
+
+ /* *** Top Menu Styles *** */
+
+ #topMenu ul {
+ font-size: 26px;
+ line-height: 1em;
+ padding: 14px 30px 0 0;
+ text-align: right;
+ }
+
+ #topMenu li {
+ display: inline;
+ }
+
+ #topMenu a:hover {
+ background: url(../images/hr.gif) center center no-repeat;
+ }
+
+ /* *** Blog Styles *** */
+
+ .blogItem {
+ padding-bottom: 20px;
+ }
+
+ .blogItem h2,
+ .blogItem h3 {
+ font-weight: normal;
+ }
+
+ .blogItem h2 a:hover,
+ .blogItem h3 a:hover {
+ background: none;
+ text-decoration: underline;
+ }
+
+ .blogItem h2 {
+ font-size: 24px;
+ }
+
+ .blogItem h3 {
+ background: url(../images/hr.gif) bottom left no-repeat;
+ font-size: 18px;
+ padding-bottom: 6px;
+ }
+
+ .blogItem h3.blogMeta {
+ background-position: top left;
+ padding: 6px 0 0 0;
+ text-align: right;
+ }
+
+ /* *** Sidebar Styles *** */
+
+ #sidebar h3 {
+ font-size: 24px;
+ font-weight: normal;
+ }
+
+ #sidebar ul {
+ line-height: 1.8em;
+ list-style: none;
+ padding-bottom: 20px;
+ }
+
+ #sidebar ul a {
+ text-decoration: none;
+ }
+
+ /* *** Comments Styles *** */
+
+ #comments {
+ margin: 20px 0 0 20px;
+ }
+
+ #comments li {
+ margin-bottom: 10px;
+ }
+
+ .commentSep {
+ background: url(../images/hr.gif) bottom left no-repeat;
+ }
+
+ /* *** Footer Styles *** */
+
+ #footer p {
+ padding: 30px 0 0 0;
+ text-align: center;
+ }
+
+ .floatR, .align-right {
+ float: right;
+ margin-left: 8px;
+ }
+
+ .floatL, .align-left {
+ float: left;
+ margin-right: 8px;
+ }
+
+ .clearfloat {
+ clear:both;
+ height:0;
+ font-size: 1px;
+ line-height: 0px;
+ }
+
+
+ #site-notes {
+ margin-top: 3rem;
+
+ }
+ #sidebar-mobile {
+ display:none;
+ }
}
-#site-notes {
- margin-top: 3rem;
+@media screen and (max-width: 900px) {
+ body {
+ padding:1rem;
+ }
+ h2 {
+ background: url(../images/hr.gif) top center no-repeat;
+ padding-top: 1rem;
+ }
+
+ #sidebar {
+ display:none;
+ }
+
+ #mainContent dl {
+ }
+
+ #mainContent dt {
+ font-size: 75%;
+ }
+
+ #sidebar-mobile {
+ background: url(../images/hr.gif) top center no-repeat;
+ padding-top: 1rem;
+ }
+
+ #sidebar-mobile ul {
+ line-height: 1.8em;
+ list-style: none;
+ }
+
+ #sidebar-mobile ul li {
+ display:inline;
+ }
}
+
diff --git a/themes/waterspill-en/static/images/concrete.webp b/themes/waterspill-en/static/images/concrete.webp
new file mode 100644
index 0000000..2200ab5
Binary files /dev/null and b/themes/waterspill-en/static/images/concrete.webp differ
diff --git a/themes/waterspill-en/templates/base.html b/themes/waterspill-en/templates/base.html
index 23e44c4..914ad59 100644
--- a/themes/waterspill-en/templates/base.html
+++ b/themes/waterspill-en/templates/base.html
@@ -31,17 +31,13 @@
+
+
+
+
{% include 'analytics.html' %}