Update to v1.1.1

This patch makes it possible to view the theme on mobile. It's not necessarily the prettiest on mobile (yet) but possible to read and navigate.

assets/css/screen.css → assets/css/default.css

@@ -1,6 +1,3 @@
-
-/* @import "source-sans-pro.css";
-@import "interface.css"; */
 @import "open-color.css";
 @import "author-layout.css";
 @import "post-layout.css";
@@ -28,7 +25,6 @@ body, html {
 
 body {
 	background-color: var(--oc-gray-0);
-	padding: 0 64px;
 }
 
 h1 {
@@ -53,36 +49,12 @@ a {
 	text-decoration: none;
 }
 
-.site-wrapper {
-	width: inherit;
-	position: relative;
-	height: 100%;
-}
 
 
-#site-footer {
-	position: absolute;
-	bottom: 0;
-	line-height: 16px;
-	font-size: 12px;
-}
 
-/* THE LOOP OR PAGE VIEW */
-.content {
-	width: calc(100% - 288px);
-	min-height: 100%;
-	position: absolute;
-	right: 0;
-	padding: 0;
-}
 
-.sidebar {
-	width: 256px;
-	position: fixed;
-	height: 100%;
-	padding: 64px 0;
-	color: var(--oc-gray-6);
-}
+
+/* THE LOOP OR PAGE VIEW */
 .blog-title {
 	color: #000000;
 }
@@ -100,13 +72,10 @@ a {
 	padding: 32px 0 16px;
 	border-bottom: none;
 }
-.text-header {
-	padding-top: 64px;
-}
+
 .navigation ul {
 	list-style: none;
 }
-
 .pagination {
 	color: var(--oc-gray-5);
 	margin-bottom: 64px;
@@ -123,3 +92,103 @@ a {
 a:hover {
 	color: var(--oc-gray-9);
 }
+
+#site-footer {
+	line-height: 16px;
+	font-size: 12px;
+}
+
+
+/* Large */
+@media screen and (min-width: 960px) {
+	body {
+		padding: 0 64px;
+	}
+	.site-wrapper {
+		width: inherit;
+		position: relative;
+		height: 100%;
+	}
+	.content {
+		width: calc(100% - 288px);
+		min-height: 100%;
+		position: absolute;
+		right: 0;
+		padding: 0;
+	}
+	.sidebar {
+		width: 256px;
+		position: fixed;
+		height: 100%;
+		padding: 64px 0;
+		color: var(--oc-gray-6);
+	}
+	#site-footer {
+		position: absolute;
+		bottom: 0;
+	}
+	.text-header {
+		padding-top: 64px;
+	}
+}
+
+/* Print */
+@media print {
+
+}
+
+/* Medium */
+@media screen and (min-width: 800px) and (max-width: 959px) {
+	body {
+		padding: 0 32px;
+	}
+	.site-wrapper {
+		width: inherit;
+		position: relative;
+		height: 100%;
+	}
+	.content {
+		width: calc(100% - 224px);
+		min-height: 100%;
+		position: absolute;
+		right: 0;
+		padding: 0;
+	}
+	.sidebar {
+		width: 192px;
+		position: fixed;
+		height: 100%;
+		padding: 32px 0;
+		color: var(--oc-gray-6);
+	}
+	#site-footer {
+		position: absolute;
+		bottom: 0;
+	}
+	.text-header {
+		padding-top: 32px;
+	}
+}
+
+/* Small */
+@media screen and (max-width: 799px) {
+	.site-wrapper {
+		width: inherit;
+		position: relative;
+		height: 100%;
+	}
+	.content {
+		width: 100%;
+		min-height: 100%;
+		padding: 0;
+	}
+	.sidebar {
+		width: inherit;
+		height: auto;
+		padding: 16px 64px 32px;
+		color: var(--oc-gray-6);
+	}
+	.text-header {
+		padding-top: 64px;
+	}
+}