From 2c42e9488771070d8efec5d91835cd8c7885f4b1 Mon Sep 17 00:00:00 2001
From: Georgios Andreadis <g.andreadis@student.tudelft.nl>
Date: Sun, 27 Aug 2017 17:42:50 +0200
Subject: Restyle navbar and use across entire site

---
 src/components/home/ContactSection.js   | 33 +++++++++++++++++++++++++++++++++
 src/components/home/ContentSection.js   | 20 ++++++++++++++++++++
 src/components/home/ContentSection.sass | 27 +++++++++++++++++++++++++++
 3 files changed, 80 insertions(+)
 create mode 100644 src/components/home/ContactSection.js
 create mode 100644 src/components/home/ContentSection.js
 create mode 100644 src/components/home/ContentSection.sass

(limited to 'src/components/home')

diff --git a/src/components/home/ContactSection.js b/src/components/home/ContactSection.js
new file mode 100644
index 00000000..8e6aed1a
--- /dev/null
+++ b/src/components/home/ContactSection.js
@@ -0,0 +1,33 @@
+import React from "react";
+import ContentSection from "./ContentSection";
+import "./ContentSection.css";
+
+const ContactSection = () => (
+    <ContentSection name="contact">
+        <h1>Contact</h1>
+        <div className="row">
+            <img src="img/tudelfticon.png" className="col-lg-2 col-md-2 col-sm-3 col-xs-6
+                    col-lg-offset-4 col-md-offset-4 col-sm-offset-3 col-xs-offset-3 tudelft-icon" alt="TU Delft Logo"/>
+            <div className="col-lg-4 col-md-5 col-sm-6 col-xs-10
+                col-lg-offset-0 col-md-offset-0 col-sm-offset-0 col-xs-offset-1 text-left">
+                <div className="row vcenter">
+                    <img src="img/email-icon.png" className="col-lg-2 col-md-2 col-sm-2 col-xs-2" alt="Email Icon"/>
+                    <div className="info-points col-lg-10 col-md-10 col-sm-10 col-xs-10">
+                        <a href="mailto:opendc@atlarge-research.com">opendc@atlarge-research.com</a>
+                    </div>
+                </div>
+                <div className="row vcenter">
+                    <img src="img/github-icon.png" className="col-lg-2 col-md-2 col-sm-2 col-xs-2" alt="Github Icon"/>
+                    <div className="info-points col-lg-10 col-md-10 col-sm-10 col-xs-10">
+                        <a href="https://github.com/atlarge-research/opendc">atlarge-research/opendc</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div className="atlarge-footer row">
+            A project by the <a href="http://atlarge-research.com"><strong>@Large Research Group</strong></a>.
+        </div>
+    </ContentSection>
+);
+
+export default ContactSection;
diff --git a/src/components/home/ContentSection.js b/src/components/home/ContentSection.js
new file mode 100644
index 00000000..126c5e4b
--- /dev/null
+++ b/src/components/home/ContentSection.js
@@ -0,0 +1,20 @@
+import classNames from "classnames";
+import PropTypes from "prop-types";
+import React from "react";
+import "./ContentSection.css";
+
+const ContentSection = ({name, children}) => (
+    <div id={name} className={classNames(name + "-section", "content-section")}>
+        <div className="container">
+            <div className="row">
+                {children}
+            </div>
+        </div>
+    </div>
+);
+
+ContentSection.propTypes = {
+    name: PropTypes.string.isRequired,
+};
+
+export default ContentSection;
diff --git a/src/components/home/ContentSection.sass b/src/components/home/ContentSection.sass
new file mode 100644
index 00000000..c84f26db
--- /dev/null
+++ b/src/components/home/ContentSection.sass
@@ -0,0 +1,27 @@
+@import ../../style-globals/_variables.sass
+
+.content-section
+  padding-top: 50px
+  padding-bottom: 150px
+  text-align: center
+
+@media screen and (min-width: $screen-sm) and (max-width: $screen-md)
+  .content-section h1
+    font-size: 2em
+    margin-bottom: 40px
+
+  .content-section h3
+    font-size: 1.5em
+
+@media screen and (min-width: $screen-md) and (max-width: $screen-lg)
+  .content-section h1
+    font-size: 3em
+    margin-bottom: 40px
+
+  .content-section h3
+    font-size: 1.8em
+
+@media screen and (min-width: $screen-lg)
+  .content-section h1
+    font-size: 3em
+    margin-bottom: 40px
-- 
cgit v1.2.3