add margin and update less

redbrick · Oct 1, 2016 · 0dbad50 · 0dbad50
1 parent a61e9c3
commit 0dbad50
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 40 deletions.
diff --git a/2015/index.html b/2015/index.html
@@ -38,17 +38,23 @@
   <body>
     <div class="wrapper">
       <header>
-        <h1><span>Tech</span>Week</h1>
+        <h1 class="title"><a href="/"><span class="title__colour">Tech</span>Week</a></h1>
         <p>Dublin City University 9<sup>th</sup> - 13<sup>th</sup> March 2015</p>
-        <ul><li><a href="../2016">Feb 2016</a></li><li><a href="..">Oct 2016</a></li></ul>
+        <ul class="menu">
+          <li class="menu__item">
+            <a href="../2016">Feb 2016</a>
+          </li>
+          <li>
+            <a href="..">Oct 2016</a>
+          </li>
+        </ul>
       </header>
-      <!-- 10 minutes before start of the event the livestream will come on -->
-      <div class="container" id="playlist">
+      <div class="container playlist">
         <iframe id="live" src="https://www.youtube.com/embed/videoseries?list=PLPaLJSHTDMFgYNnnEOjuvdm6WqOFTSQ9z" width="100%" height="400" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" webkitallowfullscreen="" allowfullscreen=""></iframe>
       </div>
       <!-- All events are loaded into this element -->
       <div class="card-container">
-        <ul class="collapsible popout events" data-collapsible="accordion"></ul>
+        <ul class="collapsible popout card-container__events" data-collapsible="accordion"></ul>
       </div>
     </div>
     <!-- The script is loaded and ran -->

diff --git a/2016/index.html b/2016/index.html
@@ -38,17 +38,23 @@
   <body>
     <div class="wrapper">
       <header>
-        <h1><span>Tech</span>Week</h1>
+        <h1 class="title"><a href="/"><span class="title__colour">Tech</span>Week</a></h1>
         <p>Dublin City University 15<sup>th</sup> - 19<sup>th</sup> Febuary 2015</p>
-        <ul><li><a href="../2015">2015</a></li><li><a href="..">Oct 2016</a></li></ul>
+        <ul class="menu">
+          <li class="menu__item">
+            <a href="../2015">2015</a>
+          </li>
+          <li class="menu__item">
+            <a href="..">Oct 2016</a>
+          </li>
+        </ul>
       </header>
-      <!-- 10 minutes before start of the event the livestream will come on -->
-      <div class="container" id="playlist">
+      <div class="container playlist">
         <iframe id="live" src="https://www.youtube.com/embed/videoseries?list=PLPaLJSHTDMFhbDmyUeik6IHXmzVtWQQxu" width="100%" height="400" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" webkitallowfullscreen="" allowfullscreen=""></iframe>
       </div>
       <!-- All events are loaded into this element -->
       <div class="card-container">
-        <ul class="collapsible popout events" data-collapsible="accordion"></ul>
+        <ul class="collapsible popout card-container__events" data-collapsible="accordion"></ul>
       </div>
     </div>
     <!-- The script is loaded and ran -->

diff --git a/css/main.less b/css/main.less
@@ -1,33 +1,37 @@
-@import url(http://fonts.googleapis.com/css?family=Roboto:100,300,400);
+@import url(//fonts.googleapis.com/css?family=Roboto:100,300,400);
 
 @card-width: 624px;
 @large-phone: 560px;
 
 header {
   text-align: center;
 
-  h1 {
+  .title {
     margin: 0.5em 0;
     margin-bottom: 0.3em;
     font-size: 15vmin;
     font-weight: 100;
 
-    span {
+    &__colour {
       color: red;
       font-weight: 300;
     }
+
+    a {
+      color: black;
+    }
   }
 
-  ul {
+  .menu {
     list-style-type: none;
-    margin: 0;
+    margin: 8px 0;
     padding: 0;
     overflow: hidden;
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
 
-    li {
+    &__item {
       float: left;
       padding: 0 8px;
     }
@@ -53,7 +57,7 @@ video {
 
 .event-card {
   display: flex;
-  .time {
+  &__time {
     float: left;
     display: inline-block;
     font-size: 1.5vh;
@@ -62,12 +66,12 @@ video {
     max-width: 5em;
   }
 
-  .event {
+  &__event {
     display: inline-block;
     width: 80%;
   }
 
-  .place {
+  &__place {
     display: inline-block;
     color: #000000;
     float: right;
@@ -90,11 +94,11 @@ ul {
   padding: 1em,
 }
 
-#countdown {
+.countdown {
   display: none;
   text-align: center;
 
-  .counter {
+  &__counter {
     display: flex;
     flex-wrap: wrap;
     flex-direction: column;
@@ -107,11 +111,11 @@ ul {
   }
 }
 
-#livestream {
+.livestream {
   display: none;
 }
 
-#playlist {
+.playlist {
   display: block;
 }
 
@@ -142,7 +146,7 @@ ul {
   align-items: center;
   justify-content: center;
 
-  .events {
+  &__events {
     width: 80%;
     @media screen and (max-width: @large-phone) {
       width: 100%;

diff --git a/gulpfile.js b/gulpfile.js
@@ -24,14 +24,14 @@ gulp.task('compress', function() {
 
 gulp.task('minify-css', function() {
   return gulp.src('css/*.css')
-    .pipe(cleanCSS({compatibility: 'ie8'}))
+    .pipe(cleanCSS({compatibility: 'ie8', processImport: false}))
     .pipe(gulp.dest('dist/css'));
 });
 
 gulp.task('less', function() {
   return gulp.src('css/*.less')
     .pipe(less())
-    .pipe(cleanCSS({compatibility: 'ie8'}))
+    .pipe(cleanCSS({compatibility: 'ie8', processImport: false}))
     .pipe(rename({suffix: '.min'}))
     .pipe(gulp.dest('dist/css'));
 });

diff --git a/index.html b/index.html
@@ -38,29 +38,36 @@
   <body>
     <div class="wrapper">
       <header>
-        <h1><span>Tech</span>Week</h1>
+        <h1 class="title"><a href="/"><span class="title__colour">Tech</span>Week</a></h1>
         <p>Dublin City University 24<sup>th</sup> - 28<sup>th</sup> October 2016</p>
-        <ul><li><a href="./2016">Feb 2016</a></li><li><a href="./2015">2015</a></li></ul>
+        <ul class="menu">
+          <li class="menu__item">
+            <a href="./2016">Feb 2016</a>
+          </li>
+          <li>
+            <a href="./2015">2015</a>
+          </li>
+        </ul>
       </header>
       <!-- Countdown is show up to 10 minutes before the event -->
-      <div id="countdown">
+      <div class="countdown">
         TechWeek Starts in:
-        <div class="counter">
+        <div class="countdown__counter">
           <span>&nbsp;</span>
           <span>&nbsp;</span>
           <span>&nbsp;</span>
           <span>&nbsp;</span>
         </div>
       </div>
       <!-- 10 minutes before start of the event the livestream will come on -->
-      <div class="container" id="livestream">
+      <div class="container livestream">
         <video id="live" controls poster="https://www.redbrick.dcu.ie/includes/images/logo.png">
           <source src="">
         </video>
       </div>
       <!-- All events are loaded into this element -->
       <div class="card-container">
-        <ul class="collapsible popout events" data-collapsible="accordion"></ul>
+        <ul class="collapsible popout card-container__events" data-collapsible="accordion"></ul>
       </div>
     </div>
     <!-- The script is loaded and ran -->

diff --git a/js/main.js b/js/main.js
@@ -47,7 +47,7 @@ setInterval(function(){
   // Check is current time + 10 minutes smaller than the starting time
   if(now+1000*60*10 < start){
     // If it is, show the box and start counting down
-    $('#countdown').show(400);
+    $('.countdown').show(400);
   } else {
     liveActive = true;
     // Otherwise, show the livestream and abjust the height of it to be in
@@ -70,14 +70,14 @@ setInterval(function(){
   str +=		(mins > 0) 		? '<span>' + mins + ' Minutes</span>'	: '';
   str +=		'<span>' + secs + ' Seconds</span>';
 
-  $('#countdown .counter').html(str);
+  $('.countdown .countdown__counter').html(str);
 }, 1000); // Set the time of the interval, in ms, so 1000 (1s)
 
 // Show the livefeed
 function showLive(){
   if(!liveShown){
-    $('#countdown').hide(400, function(){
-      $('#livestream').show(0, function(){
+    $('.countdown').hide(400, function(){
+      $('.livestream').show(0, function(){
         $('video').height(0);
         $('video').animate({height: $('video').width() * (9 / 16), display: 'block'}, 1000);
       });
@@ -88,7 +88,7 @@ function showLive(){
 
 // Load the events from the file and add them to the page
 function loadEvents(days){
-  var ce = $('.events');
+  var ce = $('.card-container__events');
   for(var i = 0; i < days.length; i++){
     var day = days[i];
     var ds = day.day+'-event';
@@ -101,9 +101,9 @@ function loadEvents(days){
       $('#'+ul).append(
         '<li>'+
           '<div class=\'collapsible-header event-card\'>' +
-            '<div class=\'time\'>'+ event.time + '</div>' +
-            '<div class=\'event\'>' + event.name + '</div>' +
-            '<div class=\'place\'>' + event.place.id + '</div>' +
+            '<div class=\'event-card__time\'>'+ event.time + '</div>' +
+            '<div class=\'event-card__event\'>' + event.name + '</div>' +
+            '<div class=\'event-card__place\'>' + event.place.id + '</div>' +
           '</div>' +
           '<div class=\'collapsible-body\'>' +
             '<p>' + by +'</by>'+