updated events theme

Climb-social · Oct 7, 2015 · 1434c24 · 1434c24
1 parent 91d9947
commit 1434c24
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 11 deletions.
diff --git a/demo-event.html b/demo-event.html
@@ -5,10 +5,11 @@
         <meta charset="utf-8">
         <link rel="stylesheet" type="text/css" href="themes/css/climb-event.css">
         <link rel="stylesheet" type="text/css" href="https://rawgit.com/anselmh/object-fit/master/dist/polyfill.object-fit.css">
+        <link href='https://fonts.googleapis.com/css?family=Work+Sans:500' rel='stylesheet' type='text/css'>
         <title>Climb Theme Demos</title>
         <style>
             body {
-                font-family: "futura-pt", sans-serif;
+                font-family: 'Work Sans', sans-serif;
                 font-style: normal;
                 font-weight: 400;
                 margin: 0;
@@ -17,21 +18,33 @@
     </head>
 
     <body>
-        <div class="climb-wall climb-event" data-collection-id="55c1e00845284e26681c4929" data-limit="4">
+        <div class="climb-wall climb-event" data-collection-id="56154f4a45284e226c3b785b" data-limit="4">
         </div>
         <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.min.js"></script>
         <script src="//rawgit.com/Climb-social/react-climb-social/master/dist/react-climb-social.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/packery/1.4.3/packery.pkgd.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
         <script src="https://rawgit.com/anselmh/object-fit/master/dist/polyfill.object-fit.min.js"></script>
         <script type="text/javascript">
         window.Climb = {
 
         };
         objectFit.polyfill({
             selector: 'img', // this can be any CSS selector
-            fittype: 'cover', // either contain, cover, fill or none
+            fittype: 'contain', // either contain, cover, fill or none
             disableCrossDomain: 'true' // either 'true' or 'false' to not parse external CSS files.
         });
+
+        $(function() {
+            $(document).keydown(function(e) {
+                if(e.which == 37) {
+                    $($('.climb__tile')[1]).addClass('on');
+                    $($('.climb__tile')[0]).remove();
+                    return; // exit this handler for other keys
+                }
+                e.preventDefault(); // prevent the default action (scroll / move caret)
+            });
+
+        });
         </script>
     </body>
 

diff --git a/themes/css/climb-event.css b/themes/css/climb-event.css
diff --git a/themes/css/climb-event.css.map b/themes/css/climb-event.css.map
diff --git a/themes/sass/climb-event.scss b/themes/sass/climb-event.scss
@@ -2,6 +2,10 @@
 $animation-length: 0.30s;
 
 .climb-event {
+    a {
+        text-decoration: none;
+        color: #215cff;
+    }
     .climb__tile {
         display : none;
         &:first-child, &:nth-child(2) {
@@ -25,18 +29,39 @@ $animation-length: 0.30s;
             transform: translate3d(0, 0, 0);
         }
     }
-    .climb__tile__content {
 
+    & .climb__tile--has-media {
+        .climb__tile__content {
+            left: 200px;
+            height: 123px;
+            right: 0;
+            border-radius: 0;
+            bottom: 0;
+            text-align: left;
+            flex-direction: row;
+        }
+    }
+    .climb__tile__content {
+        text-align: center;
+        position: absolute;
+        height: auto;
+        width: auto;
+        left: 100px;
+        right: 100px;
+        bottom: 45%;
+        background-color: rgba(255,255,255,0.8);
+        border-radius: 10px;
     }
     .climb__tile__image {
-        object-fit: cover;
+        object-fit: contain;
         width     : 100%;
-        height    : 100%;
+        height    : 85%;
     }
     .climb__tile__message {
-
+        font-size: 150%;
     }
     .climb__tile__author {
+        bottom: 50px;
         img {
 
         }