cv style changes

cv.md

@@ -4,20 +4,50 @@ pagestyle: cv
 permalink: /cv/
 ---
 
-# Work
+# 2016 --
+{:.year}
 
-| Organization               | Position  | Years             |
-| -------------------------- | --------- | ----------------- |
-| Yahoo! Japan               | Developer | 2016 –      |
-| iNautix Technologies India | Developer | 2012 – 2013 |
-{:.work}
+## Yahoo! Japan
+{:.org}
+
+<details markdown="1">
+- TBC
+</details>
+
+<!-- section -->
+
+# 2013 -- 2016
+{:.year}
+
+## IIT Bombay
+{:.org}
+
+<details markdown="1">
+### Master of Technology
+Computer Science and Engineering
+</details>
 
 <!-- section -->
 
-# Education
+# 2012 -- 2013
+{:.year}
+
+## iNautix Technologies India Pvt. Ltd.
+{:.org}
+
+<details markdown="1">
+### Senior Application Developer
+</details>
+
+<!-- section -->
+
+# 2008 -- 2012
+{:.year}
+
+## IIT Guwahati
+{:.org}
 
-| Institution  | Degree                 | Field                            | Year | Grade |
-| ------------ | ---------------------- | -------------------------------- | ---- | ----- |
-| IIT Bombay   | Master of Technology   | Computer Science and Engineering | 2016 | 8.15  |
-| IIT Guwahati | Bachelor of Technology | Mechanical Engineering           | 2012 | 6.69  |
-{:.grades}
+<details markdown="1">
+### Bachelor of Technology
+Mechanical Engineering
+</details>

styles/cv.css

@@ -15,3 +15,60 @@ th {
 td {
 	background-color: #444;
 }
+
+.org, h3 {
+	font-size: 1em;
+}
+
+.org {
+	background-color: #37474F;
+	background-color: #565656;
+}
+
+.year {
+	background-color: #404A52;
+	background-color: #464646;
+}
+
+details {
+	background-color: #434D55;
+	background-color: #666666;
+	flex-grow: 1;
+}
+
+.org, .year, details {
+	margin: 0;
+	padding: 1em;
+}
+
+#main section {
+	padding: 0;
+}
+
+@media screen and (min-device-aspect-ratio: 1/1) and (orientation: landscape) {
+	section {
+		display: flex;
+		flex: column;
+	}
+	.org {
+		width: 10em;
+	}
+	.year {
+		width: 6em;
+		border-radius: 0.5em 0 0 0.5em;
+	}
+
+	details {
+		border-radius: 0 0.5em 0.5em 0;
+	}
+}
+@media screen and (max-device-aspect-ratio: 1/1) and (orientation: portrait) {
+	.year {
+		font-size: 0.8em;
+		border-radius: 0.5em 0.5em 0 0;
+	}
+
+	details {
+		border-radius: 0 0 0.5em 0.5em;
+	}
+}