Lots of design changes in calendar, layout, add Tweet and Like Buttons

OpenTechSchool · Jul 18, 2012 · 3165ac4 · 3165ac4
1 parent 76d9989
commit 3165ac4
Show file tree

Hide file tree

Showing 7 changed files with 149 additions and 479 deletions.
diff --git a/_layouts/main.html b/_layouts/main.html
@@ -32,84 +32,75 @@
 
 <body>
 
+  <nav class="meta_nav">
+    <div class="container">
+      <a href="https://twitter.com/opentechschool" class="twitter-follow-button" data-show-count="false">Follow @opentechschool</a>
+      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
+
+      <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FOpenTechSchool&amp;send=false&amp;layout=button_count&amp;width=200&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font=lucida+grande&amp;height=21" scrolling="no" frameborder="0"
+        style="border:none; overflow:hidden; width:80px; height:24px;"
+        allowTransparency="true">
+
+      </iframe>
+    </div>
+  </nav>
+
   <header class="site_header">
     <div class="container">
-      <div class="row">
-        <div class="eightcol">
-          <h1>
-            OpenTechSchool
-            <i>Berlin</i>
-          </h1>
-          <h2>Bringing free tech workshops to women and their friends</h2>
-
-        </div>
-        <div class="fourcol last">
-          <div id="socialshare">
-            <div id="socialshareprivacy"></div>
-          </div>
-        </div>
-      </div>
+      <h1>
+        OpenTechSchool
+        <i>Berlin</i>
+      </h1>
+
+
+      <nav>
+        <ul class="nav_list">
+          <li>
+            <a href="#about">About</a>
+          </li>
+          <li>
+            <a href="/#events">events</a>
+          </li>
+          <li>
+            <a href="#coaches">Coaches</a>
+          </li>
+          <li>
+            <a href="#contact">Contact</a>
+          </li>
+        </ul>
+      </nav>
+
+
     </div>
   </header>
 
-
-  <div class="site_header full_bg">
+<!--   <div class="full_bg main_img">
     <div class="container">
-      <div class="row">
 
-        <h1>full width img goes here</h1>
+      <img src="http://farm8.staticflickr.com/7226/7228879392_e6fb6877f1_b.jpg" alt="">
 
-      </div>
     </div>
   </div>
-
-
+ -->
 
   <div class="container">
     {{ content }}
   </div>
 
   <footer class="full_bg">
     <div class="container">
-      <div class="row">
-        <p>
-          © 2011-2012 by <a href="http://www.opentechschool.org">OpenTechSchool</a>&nbsp;&nbsp;||&nbsp;&nbsp;Picture by <a href="http://www.flickr.com/photos/lapetiteclaudine/48410895/">La Petit Claudine</a> on Flickr
-        </p>
-      </div>
+
+      <p>
+        © 2011-2012 by <a href="http://www.opentechschool.org">OpenTechSchool</a>&nbsp;&nbsp;||&nbsp;&nbsp;<a href="/imprint.html">Imprint</a>
+      </p>
+
     </div>
   </footer>
 
 
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
   <script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>
 
-  <script src="js/supersized.3.1.3.min.js"></script>
-  <script src="js/jquery.socialshareprivacy.min.js"></script>
-  <script type="text/javascript">
-    $(function() {
-      slideshow_interval = 0;
-      $.supersized({
-          slides: [{'image': 'images/it_uni_copen_2.jpg'}]
-      });
-      $('#socialshareprivacy').socialSharePrivacy({
-          services: {
-              facebook: {
-                  dummy_img : 'images/socialshareprivacy/dummy_facebook_en.png',
-                  txt_info: '2-Click-Privacy-Protection-System: Only when you click here, will the sharing be activated and data send to Facebook. Click a second time to share this Page on Facebook.',
-                  language: 'en_US'
-              },
-              twitter : {
-                txt_info: 'Tweet this link',
-                  txt_info: '2-Click-Privacy-Protection-System: Only when you click here, will the sharing be activated and data send to Twitter. Click a second time to share this Page on Twitter.',
-              },
-              gplus: {
-                txt_info: '2-Click-Privacy-Protection-System: Only when you click here, will the sharing be activated and data send to Google. Click a second time to share this Page on Google+',
-                language: 'en'
-              }
-            }
-        });
-      });
-  </script>
   <!--[if lt IE 7 ]>
     <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
     <script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>

diff --git a/imprint.html b/imprint.html
@@ -0,0 +1,7 @@
+---
+layout: main
+title: Home
+---
+
+<h2>Imprint</h2>
+<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
diff --git a/index.html b/index.html
@@ -3,30 +3,29 @@
 title: Home
 ---
 
-    <div id="main" role="main">
-      <div id="inner-container">
-
-        <div id="introduction">
-          <p>OpenTechSchool is a community initiative to provide programming and other tech-related workshops to women and their friends. We take care of the organizational side of things (venues, press, finding participants) and let our volunteer coaches to create the curriculum according to their vision. Our main goal is to create a friendly and safe learning environment where no one feels shy about asking any question. Everyone, no matter what their gender, skill level or experience, is invited to participate, whether as a coach or a learner. OTS is an idea we would be very happy to see spread across the globe!
-          </p>
-
-          <h2>Upcoming events</h2>
-          <!-- Move this div where you want to insert the calendar -->
-
-
-          <h2>Looking for Coaches</h2>
-          <p>We are currently trying to set up our first two workshops about Javascript and Python. If you feel like coaching on those topics, let us know ( <a href="https://gist.github.com/2850541" target="_blank">here for python</a>, <a href="https://gist.github.com/2835808" target="_blank">here for javascript</a>).
-          </p>
-          <h2>Join the movement</h2>
-          <p>
-          We are currently working on our official web presence. Until then please feel free to join our Google Group to stay up to date:</p>
-        </div>
-        <div id="mail-wrapper" >
-          <a href="https://groups.google.com/forum/#!forum/opentechschool">Join OpenTechSchool Mailinglist</a>
-        </div>
-
-      </div>
-    </div>
+
+<div class="row">
+
+  <div class="sixcol">
+
+    <h2 id="about">About</h2>
+    <p>OpenTechSchool is a community initiative to provide programming and other tech-related workshops to women and their friends. We take care of the organizational side of things (venues, press, finding participants) and let our volunteer coaches to create the curriculum according to their vision. Our main goal is to create a friendly and safe learning environment where no one feels shy about asking any question. Everyone, no matter what their gender, skill level or experience, is invited to participate, whether as a coach or a learner. OTS is an idea we would be very happy to see spread across the globe!
+    </p>
+
+
+    <h2>Upcoming events</h2>
+    <!-- Move this div where you want to insert the calendar -->
+    <div id="icjs"></div>
+
+
+    <h2 id="contact">Contact</h2>
+    <p>
+    Join our Google Group to stay up to date: <a href="https://groups.google.com/forum/#!forum/opentechschool">Join OpenTechSchool Mailinglist</a>
+    </p>
+
+  </div>
+</div>
+
 
 <script>(function() {
 

diff --git a/stylesheets/calendar.css b/stylesheets/calendar.css
@@ -9,20 +9,16 @@ text-decoration:none;
 }
 
 .ij_table {
-font-family:sans-serif;
-font-size:12px;
 border-collapse:collapse;
 width:100%;
 }
 
 .ij_date {
-background:#fff;
 }
 
 .ij_date th {
 text-align:left;
 padding:14px 4px 4px 4px;
-font-size:13px;
 }
 
 .ij_row_a, .ij_row_b {
@@ -43,7 +39,6 @@ background:#f4f4ff;
 content:"";
 padding-right:0;
 color:#449;
-font-size:10px;
 }
 
 .ij_cal02 {
@@ -53,7 +48,6 @@ background:#f4fff4;
 content:"";
 padding-right:0;
 color:#494;
-font-size:10px;
 }
 
 .ij_cal03 {
@@ -63,7 +57,6 @@ background:#fff4f4;
 content:"";
 padding-right:0;
 color:#944;
-font-size:10px;
 }
 
 .ij_cal04 {
@@ -117,15 +110,14 @@ display:block;
 
 .ij_loc {
 margin-top:6px;
-font-size:11px;
 color:#060;
 }
 
 .ij_credit {
 text-align:center;
 padding:12px 0 4px 0;
 background:#fff;
-font-size:9px;
+font-size:.75em;
 color:#777;
 }
 

diff --git a/stylesheets/grid.css b/stylesheets/grid.css
@@ -1,84 +1,11 @@
-/* CSS Resets */
-
-html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,cite,code,del,dfn,em,img,ins,q,small,strong,sub,sup,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;margin:0;padding:0}article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}a img{border:0}figure{position:relative}figure img{width:100%}
-
-
-/* ==================================================================================================================== */
-/* ! The 1140px Grid V2 by Andy Taylor \ http://cssgrid.net \ http://www.twitter.com/andytlr \ http://www.andytlr.com   */
-/* ==================================================================================================================== */
-
 .container {
-padding-left: 20px;
-padding-right: 20px;
-}
-
-.row {
 width: 100%;
-max-width: 1140px;
+max-width: 755px;
 min-width: 755px;
 margin: 0 auto;
 overflow: hidden;
 }
 
-.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol {
-margin-right: 3.8%;
-float: left;
-min-height: 1px;
-}
-
-.row .onecol {
-width: 4.85%;
-}
-
-.row .twocol {
-width: 13.45%;
-}
-
-.row .threecol {
-width: 22.05%;
-}
-
-.row .fourcol {
-width: 30.75%;
-}
-
-.row .fivecol {
-width: 39.45%;
-}
-
-.row .sixcol {
-width: 48%;
-}
-
-.row .sevencol {
-width: 56.75%;
-}
-
-.row .eightcol {
-width: 65.4%;
-}
-
-.row .ninecol {
-width: 74.05%;
-}
-
-.row .tencol {
-width: 82.7%;
-}
-
-.row .elevencol {
-width: 91.35%;
-}
-
-.row .twelvecol {
-width: 100%;
-float: left;
-}
-
-.last {
-margin-right: 0px;
-}
-
 img, object, embed {
 max-width: 100%;
 }
@@ -109,7 +36,7 @@ img {
   -webkit-text-size-adjust: none;
   }
 
-  .row, body, .container {
+  body, .container {
   width: 100%;
   min-width: 0;
   margin-left: 0px;
@@ -118,13 +45,4 @@ img {
   padding-right: 0px;
   }
 
-  .row .onecol, .row .twocol, .row .threecol, .row .fourcol, .row .fivecol, .row .sixcol, .row .sevencol, .row .eightcol, .row .ninecol, .row .tencol, .row .elevencol, .row .twelvecol {
-  width: auto;
-  float: none;
-  margin-left: 0px;
-  margin-right: 0px;
-  padding-left: 20px;
-  padding-right: 20px;
-  }
-
 }