From b9ae83ff4f57102ea4d49507a5a0160a4df3fc40 Mon Sep 17 00:00:00 2001
From: Veikka Kähkönen <veikka.kahkonen@aalto.fi>
Date: Tue, 7 Nov 2017 19:49:27 +0200
Subject: Add responsive grid CSS

---
 _sass/_grid.scss | 42 ++++++++++++++++++++++++++++++++++++++++++
 css/main.scss    |  3 ++-
 2 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 _sass/_grid.scss

diff --git a/_sass/_grid.scss b/_sass/_grid.scss
new file mode 100644
index 0000000..da3e2d9
--- /dev/null
+++ b/_sass/_grid.scss
@@ -0,0 +1,42 @@
+// From http://www.responsivegridsystem.com/calculator/
+
+/*  SECTIONS  */
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  COLUMN SETUP  */
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+.col:first-child { margin-left: 0; }
+
+/*  GROUPING  */
+.group:before,
+.group:after { content:""; display:table; }
+.group:after { clear:both;}
+.group { zoom:1; /* For IE 6/7 */ }
+
+/*  GRID OF TWO  */
+.span_2_of_2 {
+	width: 100%;
+}
+.span_1_of_2 {
+	width: 49.2%;
+}
+
+/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
+
+@media only screen and (max-width: 480px) {
+	.col { 
+		margin: 1% 0 1% 0%;
+	}
+}
+
+@media only screen and (max-width: 480px) {
+	.span_2_of_2, .span_1_of_2 { width: 100%; }
+}
diff --git a/css/main.scss b/css/main.scss
index 737a708..1a624c7 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -146,5 +146,6 @@ $font-serif: 'Sintony', sans-serif;
         "as-theme",
         "special",
         "syntax-highlighting",
-        "contacts"
+        "contacts",
+        "grid"
 ;
-- 
cgit v1.3