Merge pull request #17 from mortenvn/new_icons

Added four new links, added tagline promoting the apps, removed production files from the repository and fixed a small schedule bug.
mortnod · Sep 6, 2014 · 3dba872 · 3dba872
2 parents 6d3222c + 10a3cd8
commit 3dba872
Show file tree

Hide file tree

Showing 37 changed files with 1,366 additions and 5,366 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,8 @@
+# Production files
+/index.html
+css/build/
+js/build/
+
 # Node
 node_modules/
 

diff --git a/Gruntfile.js b/Gruntfile.js
@@ -30,7 +30,7 @@ module.exports = function(grunt) {
           'js/build/processed/analytics.js' : 'js/analytics.js',
           'js/build/processed/global.js' : 'js/global.js',
           'js/build/processed/schedule.js' : 'js/schedule.js',
-
+          'js/build/processed/content.js' : 'js/content.js',
         }
       },
       web : {
@@ -42,6 +42,7 @@ module.exports = function(grunt) {
           'js/build/processed/analytics.js' : 'js/analytics.js',
           'js/build/processed/global.js' : 'js/global.js',
           'js/build/processed/schedule.js' : 'js/schedule.js',
+          'js/build/processed/content.js' : 'js/content.js',
         }
       }
     },
@@ -56,10 +57,11 @@ module.exports = function(grunt) {
           'js/templates.js',
           'js/card.js',
           'js/modal.js',
-          'js/content.js',
+          'js/build/processed/content.js',
           'js/build/processed/schedule.js',
           'js/build/processed/analytics.js',
           'js/header.js',
+          'js/alerts.js',
           'js/build/processed/global.js'
         ],
         dest: 'js/build/production.js',
@@ -141,6 +143,14 @@ module.exports = function(grunt) {
         }
       },
 
+      html: {
+        files: ['html/*.html'],
+        tasks: ['preprocess:web'],
+        options: {
+          spawn: false,
+        }
+      },
+
       handlebars: {
         files: ['templates/*.handlebars'],
         tasks: ['handlebars', 'concat', 'uglify'],

diff --git a/css/_alert.scss b/css/_alert.scss
@@ -0,0 +1,59 @@
+.alert {
+  margin: 0 10px 20px 0;
+  padding: 10px 30px 10px 65px;
+  box-shadow: 0 1px 3px rgba(49,112,143,0.7);
+  background-color: #d9edf7;
+  color: #31708f;
+  position: relative; // Needed for absolute positioning of its content
+  display: none; // Hidden by default
+
+  .alert-icon {
+    position: absolute;
+    top: 0; // "top: 0; bottom: 0; margin: auto" trick to center vertically
+    bottom: 0;
+    left: 10px;
+    margin: auto;
+    width: 45px;
+    height: 45px;
+  }
+
+  .close {
+    position: absolute;
+    top: 7px;
+    right: 5px;
+    text-shadow: none;
+    cursor: pointer;
+    font-size: 1.5em;
+    color: #31708f;
+
+    &:hover {
+      color: #354f5d;
+    }
+  }
+
+  .alert-inline-icon {
+    display: inline;
+    color: #31708f;
+    text-shadow: none;
+    position: relative;
+    top: 2px;
+  }
+}
+
+#grid.alert-padding {
+  padding-top: 20px;
+}
+
+@include breakpoint (tiny_m) {
+  #grid.alert-padding {
+    padding-top: 10px;
+  }
+
+  .alert {
+    margin-bottom: 12px;
+    padding-left: 12px;
+  }
+  .alert .alert-icon {
+    display: none;
+  }
+}
diff --git a/css/_bits.scss b/css/_bits.scss
@@ -124,5 +124,7 @@ $backgrey: #666;
 
   .pictogram {
     font-size: 4em;
+    position: relative;
+    top: -3px;
   }
 }
diff --git a/css/_card.scss b/css/_card.scss
@@ -18,8 +18,6 @@
     height: 100%;
     position: relative;
   }
-
-
 }
 
 .cardface {

diff --git a/css/_header.scss b/css/_header.scss
@@ -49,4 +49,8 @@ header {
     @include breakpoint(bat) { font-size: 1em; }
     @include breakpoint(ant) { display: none; }
   }
+}
+
+#about-button {
+  @include breakpoint(ant) { margin-top: 3px; }
 }
diff --git a/css/_modal.scss b/css/_modal.scss
@@ -61,11 +61,6 @@
       margin-left: 20px;
     }
 
-    a {
-      text-decoration: none;
-      color: rgb(170, 16, 16);
-    }
-
     p {
       margin-bottom: 10px;
 
@@ -147,13 +142,26 @@
     }
   }
 
+  i {
+    width: 50px;
+    height: 50px;
+    margin: 4px 10px 0 0;
+    opacity: 0.6;
+    font-size: 3em;
+    float: left;
+  }
+
   &:hover {
     background-color: #eee;
 
     // Add a hover effect to the wells (color version of the images)
     .img:after {
       opacity: 1;
     }
+
+    i {
+      opacity: .9;
+    }
   }
 }
 
@@ -184,8 +192,8 @@
 }
 
 // Other sites (modal section)
-.bartebuss       { background: url(../../../img/bartebuss-sprite-1x.png); }
-.bartebuss:after { background: url(../../../img/bartebuss-sprite-1x.png) 0 50px; }
+// .bartebuss       { background: url(../../../img/bartebuss-sprite-1x.png); }
+// .bartebuss:after { background: url(../../../img/bartebuss-sprite-1x.png) 0 50px; }
 
 .notifier       { background: url(../../../img/notifier-sprite-1x.png); }
 .notifier:after { background: url(../../../img/notifier-sprite-1x.png) 0 50px; }
@@ -194,13 +202,13 @@
 @media
 (-webkit-min-device-pixel-ratio: 1.5),
 (min-resolution: 144dpi) {
-  .bartebuss       { background: url(../../../img/bartebuss-sprite-2x.png); }
-  .bartebuss:after { background: url(../../../img/bartebuss-sprite-2x.png) 0 50px; }
+  // .bartebuss       { background: url(../../../img/bartebuss-sprite-2x.png); }
+  // .bartebuss:after { background: url(../../../img/bartebuss-sprite-2x.png) 0 50px; }
 
   .notifier       { background: url(../../../img/notifier-sprite-2x.png); }
   .notifier:after { background: url(../../../img/notifier-sprite-2x.png) 0 50px; }
 
-  .bartebuss, .bartebuss:after,
+  // .bartebuss, .bartebuss:after,
   .notifier, .notifier:after {
     background-size: 50px 100px;
   }

diff --git a/css/_pictograms.scss b/css/_pictograms.scss
@@ -15,7 +15,7 @@ i {
 .pictogram {
   text-align: center;
   margin: 0 auto;
-  padding-top: 10px;
+  padding-top: 14px;
   font-size: 6em;
   opacity: 0.5;
 
@@ -28,14 +28,14 @@ i {
 .email:after         { content:"\e00a"; font-size: 0.7em; }
 .schedule:after      { content:"\e008"; font-size: 1em; }
 .studweb:after       { content:"\e006"; font-size: 1.1em; }
-.dinner:after        { content:"\e009"; }
+.dinner:after        { content:"\e00f"; }
 .map:after           { content:"\e000"; font-size: 1.1em; }
 .filesender:after    { content:"\e002"; font-size: 1.2em; }
 .grades:after        { content:"\e00b"; }
 .romres:after        { content:"\e005"; font-size: 1.1em; }
-.it-help:after       { content:"\e007"; font-size: 1.1em; }
-.farm:after          { content:"\e00f"; font-size: 0.9em; }
-.kundesenteret:after { content:"\e010"; font-size: 0.9em; }
+.software:after      { content:"\e600"; font-size: 0.9em; }
+.farm:after          { content:"\e010"; font-size: 0.9em; }
+.kundesenteret:after { content:"\e011"; font-size: 0.9em; }
 .info:after          { content:"\e003"; }
 .question:after      { content:"\e004"; }
 .warning:after       { content:"\e00c"; }
@@ -48,15 +48,23 @@ i {
 .lego:after          { content:"\e01d"; }
 .emailcircle:after   { content:"\e01e"; }
 .chat:after          { content:"\e01f"; }
-
-
-.email         { padding-top: 0; }
-.studweb       { padding-top: 5px; }
+.film:after          { content:"\e603"; }
+.training:after      { content:"\e601"; font-size: 0.85em; }
+.bartebuss:after     { content:"\e602"; }
+.ibok:after          { content:"\e604"; }
+.floppy:after        { content:"\e007"; }
+
+.email         { padding-top: 4px; }
+.studweb       { padding-top: 9px; }
 .dinner        { padding-left: 10px; }
-.map           { padding-top: 5px; }
-.filesender    { padding-top: 0; }
-.romres        { padding-top: 5px; }
-.it-help       { padding-top: 5px; }
+.map           { padding-top: 9px; }
+.romres        { padding-top: 9px; }
+
+.well {
+  .filesender { font-size: 2.5em; }
+  .grades     { font-size: 2.7em; }
+  .floppy     { font-size: 3.2em; }
+}
 
 .flip-button {
   position: absolute;
@@ -105,7 +113,7 @@ i {
 
 #about-button {
   position: absolute;
-  top: 15px;
+  top: 18px;
   @include breakpoint (ant) { top: -7px; }
   right: 10px;
   font-size: 3em;

diff --git a/css/_structure.scss b/css/_structure.scss
@@ -1,11 +1,11 @@
 html, body {
-  height: 100%; /* This is needed for the sticky footer to work properly */ 
+  height: 100%; /* This is needed for the sticky footer to work properly */
 }
 
 #pagewrap {
   min-height: 100%;
   margin: 0 auto -2em; /* NB! Has to be the same (only negative) as the footers height */
-} 
+}
 
 #headerwrap {
   @include breakpoint(cat) { max-width: 6 * $cubesize + $margin;}
@@ -22,7 +22,7 @@ footer, .push {
 
 // Grid
 #grid {
-  @include breakpoint(cat) { width: 6 * $cubesize + $margin; padding: 60px 0em 0 10px;}
+  @include breakpoint(cat) { width: 6 * $cubesize + $margin; padding: 60px 0 0 10px;}
   @include breakpoint(rat) { width: 4 * $cubesize + $margin; padding: 20px 0 0 10px;}
   @include breakpoint(bat) { width: 3 * $cubesize + $margin; padding: 10px 0 0 10px;}
   @include breakpoint(ant) { width: 100%; padding: 10px 0 0 10px; }

diff --git a/css/_typography.scss b/css/_typography.scss
@@ -11,11 +11,16 @@ h2 {
   font-size: 1.9em;
 }
 
+a {
+  color: rgb(170, 16, 16);
+  text-decoration: none;
+}
+
 .front {
   h2 {
-  color: rgba(black, 0.8);
-  text-shadow: 1px 4px 6px $lightgrey, 0 0 0 black, 1px 4px 6px $lightgrey;
-  opacity: 0.5;
+    color: rgba(black, 0.8);
+    text-shadow: 1px 4px 6px $lightgrey, 0 0 0 black, 1px 4px 6px $lightgrey;
+    opacity: 0.5;
   }
 
   &:hover h2 {
@@ -43,6 +48,11 @@ h2 {
   }
 }
 
+#film h2,
+#software h2 {
+  letter-spacing: -1px;
+}
+
 // Footer
 footer {
   font-size: 0.8em;
-Original file line number
+Diff line change
@@ Expand Up / @@ -18,8 +18,6 @@ @@
         height: 100%;
         position: relative;
       }
     }
     .cardface {
@@ Expand Down @@