Released spleash for teaser.

assets/css/main.css

@@ -1,61 +1,83 @@
-/* @file main.scss
+/* =============================================================================
+   HTML5 CSS Reset Minified - Eric Meyer
+   ========================================================================== */
+
+html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
+body{line-height:1}
+article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
+nav ul{list-style:none}
+blockquote,q{quotes:none}
+blockquote:before,blockquote:after,q:before,q:after{content:none}
+a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none}
+mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
+del{text-decoration:line-through}
+abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
+table{border-collapse:collapse;border-spacing:0}
+hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
+input,select{vertical-align:middle}
+li{list-style:none}
+
+/* @file main.css
  * @brief Main styles for the TartanHacks 2014 website.
  * @author Oscar Bezi, [email protected]
  * @since 23 November 2014
  */
-body {
-  margin: 0 10%;
-  padding: 0;
-  font-family: Montserrat, Helvetica Neue, Helvetica, Arial, sans-serif;
-  text-align: center; }
-
-@media (min-width: 720px) {
-  body {
-    margin: 0 20%; } }
+html,body {
+    font-family: Montserrat, Arial, sans-serif;
+    text-align: center;
+    background: #bd2c39;
+    width: 100%;
+    height: 100%;
+    color: white;
+}
 
 h1 {
-  text-transform: uppercase; }
+    text-transform: uppercase;
+    font-family: Roboto Slab, serif;
+    font-size: 3em;
+}
 
 hr {
-  margin: 3em auto;
-  width: 50%; }
+    margin: 3em auto;
+    width: 50%;
+}
 
-#splash {
-  width: 100%;
-  height: 100%; }
-  #splash h1 {
-    font-family: Roboto Slab, serif;
-    font-size: 3em; }
-  #splash #navbar {
-    /* override semantic-ui's padding */
-    margin: 0;
-    padding: 1rem 0; }
-
-#faq ul {
-  padding: 0;
-  margin: 0;
-  width: 100%; }
-#faq li {
-  list-style: none; }
-
-#schedule .grid {
-  /* override semantic-ui */
-  margin: 0; }
-#schedule ul {
-  padding: 0;
-  margin: 0;
-  width: 100%; }
-#schedule .schedule-item {
-  list-style: none; }
-#schedule .time {
-  color: green;
-  padding: 0 1em 0 0; }
-
-.scottylabs-logo span {
-  font-size: 3em; }
-
-footer {
-  width: 100%;
-  text-align: right; }
-  footer span {
-    padding: 0 1em; }
+/* splash page */
+#splash, #splash-bg {
+    width: 100%;
+    height: 100%;
+}
+
+#splash-info {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    margin: auto 0;
+}
+
+#splash-info > * {
+    background: #bd2c39;
+}
+
+#splash-bg {
+    width: 100%;
+    height: 100%;
+}
+
+/* remove canvas default margin */
+canvas{
+	display:block;
+	vertical-align:bottom;
+}
+
+.logo {
+    padding: 2em 0;
+    width: 100%;
+}
+
+@media (min-width: 500px) {
+    .logo {
+        width: 500px;
+    }
+}

assets/js/app.js

@@ -0,0 +1,31 @@
+particlesJS('splash-bg', {
+  particles: {
+    color: '#fff',
+    shape: 'triangle', // "circle", "edge" or "triangle"
+    opacity: 1,
+    size: 2,
+    size_random: false,
+    nb: 350,
+    line_linked: {
+      enable_auto: true,
+      distance: 100,
+      color: '#fff',
+      opacity: 0.9,
+      width: 1,
+      condensed_mode: {
+        enable: false,
+        rotateX: 600,
+        rotateY: 600
+      }
+    },
+    anim: {
+      enable: true,
+      speed: 1
+    }
+  },
+  interactivity: {
+    enable: false
+  },
+  /* Retina Display Support */
+  retina_detect: true
+});