Improve the design

This commit improves the overall design of the site, switching all the text to a consistent font family and improving the display of the meetups.
bcnfs · Sep 15, 2017 · 09413fb · 09413fb
1 parent 1ecdc5a
commit 09413fb
Show file tree

Hide file tree

Showing 11 changed files with 67 additions and 61 deletions.
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -1,5 +1,5 @@
 <footer class="footer">
     <div class="container footerContainer">
-        <p class="footerText u-alignCenter">Barcelona Free Software</a> &copy; 2014-2017. <a class="footerText--link" href="https://github.com/bcnfs/bcnfs.github.io">Fork us</a>.</p>
+        <p class="footerText u-alignCenter">Barcelona Free Software</a> &copy; 2014-2017. <a class="footerText--link" href="https://github.com/bcnfs/bcnfs.github.io">Source code</a>.</p>
     </div>
 </footer>
diff --git a/_includes/head.html b/_includes/head.html
@@ -23,6 +23,7 @@
     <meta property="og:image" content="http://bcnfs.org/images/bfs.png" />
     <meta property="og:site_name" content="Barcelona Free Software" />
 
+    <link href="https://fonts.googleapis.com/css?family=PT+Mono" rel="stylesheet">
     <link rel="stylesheet" href="{{ "/css/main.css" | prepend: site.baseurl }}">
     <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl |+ prepend: site.url }}">
 

diff --git a/_sass/_footer.scss b/_sass/_footer.scss
@@ -2,7 +2,7 @@
     position: absolute;
     bottom: 0;
     width: 100%;
-    height: 60px;
+    // height: 60px;
     background-color: #C94328;
 }
 .footerContainer {
@@ -16,6 +16,7 @@
 }
 .footerText--link {
     color: rgb(255, 255, 255);
+    border-bottom: 1px solid rgb(255,255,255);
     background-color: transparent;
     text-decoration: none;
 }

diff --git a/_sass/_front.scss b/_sass/_front.scss
@@ -5,18 +5,19 @@ html {
     min-height: 100%;
 }
 body {
-    font-family: $font-sans;
+    font-family: $font-mono;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    font-weight: 300;
+    // font-weight: 300;
     margin-bottom: 120px;
 }
 a {
     color: rgb(51, 51, 51);
-    background-color: rgb(255, 255, 165);
+    border-bottom: 2px solid #c94328;
 }
 a:hover {
-    color: rgb(51, 51, 51);
+    transition: 0.3s;
+    color: #c94328;
     text-decoration: none;
 }
 .introText {
@@ -29,6 +30,9 @@ a:hover {
 .logoImg {
     margin-bottom: 30px;
 }
+.patrons {
+    margin-bottom: 40px;
+}
 .patronLogo {
     padding-left: 15px;
     padding-right: 15px;
@@ -38,6 +42,17 @@ a:hover {
 .closingText {
     font-size: 22px;
 }
+.twitter {
+    fill: #1da1f2;
+}
+.lastMeetups {
+    padding-left: 0;
+}
+.lastMeetups li {
+    font-size: 16px;
+    padding-bottom: 14px;
+    line-height: 1.8;
+}
 
 // text selectors <3
 ::selection {

diff --git a/_sass/_pages.scss b/_sass/_pages.scss
@@ -12,8 +12,14 @@ article p {
     font-family: "Georgia", serif;
     margin-bottom: 20px;
 }
+h1 {
+    font-weight: 600;
+    margin-bottom: 20px;
+}
 h2 {
+    font-weight: 600;
     margin-top: 30px;
+    margin-bottom: 20px;
 }
 h3 {
     margin-top: 30px;

diff --git a/_sass/_sponsoring.scss b/_sass/_sponsoring.scss
@@ -2,6 +2,7 @@
 
 .baseText {
     font-size: 22px;
+    margin-bottom: 20px;
 }
 .baseText--list {
     font-size: 18px;

diff --git a/_sass/_utilities.scss b/_sass/_utilities.scss
@@ -30,10 +30,17 @@
 .u-moreMarginBottom {
     margin-bottom: 40px;
 }
+.u-marginRight {
+    margin-right: 10px;
+}
 .u-zeroDecoration {
+    border: none;
     background-color: transparent;
     text-decoration: none;
 }
+.u-vMiddle {
+    vertical-align: middle;
+}
 
 @media screen and (min-width: $screen-lg-min) {
     .u-imgSameWidth {

diff --git a/_sass/_variables.scss b/_sass/_variables.scss
@@ -1,5 +1,5 @@
 // General variables
-$font-mono: "Monaco", "Menlo", Courier, monospace;
+$font-mono: "PT Mono", "Monaco", "Menlo", Courier, monospace;
 $font-sans: "Helvetica Neue", "Helvetica", Arial, sans-serif;
 
 // Magic media queries from Bootstrap: http://getbootstrap.com/css/

diff --git a/index.html b/index.html
@@ -12,49 +12,27 @@
         <div class="col-md-8 col-md-pull-4">
             <p class="introText">
                 <span class="introText--title"><a class="u-fontMono" href="http://www.meetup.com/Barcelona-Free-Software/">Barcelona Free Software</a></span> is a meetup
-                and an open space for coders and users who love free software (with <span class="js-members">—</span> members!)
+                and an open space for coders and users who love free software (w/ <span class="js-members">—</span> members!)
             </p>
             <p class="introText">Come to our next meeting to discover new projects and have a drink.</p>
             <p class="introText">Anything to say? Please, <a href="mailto:[email protected]">contact us</a> directly.</p>
-            <p class="introText">Follow us on twitter! <a href="https://twitter.com/BCNFreeSoftware"><img src="twitter.png"></a></p>
+            <p class="introText">You can also follow us on <a href="https://twitter.com/BCNFreeSoftware">Twitter</a>.</p>
         </div>
     </div>
-    <div class="row u-marginBottom u-alignCenter">
-        <h2 class="u-fontMono">Last meetups</h2>
-        <div class="meetup col-md-4">
-            <img class="u-imgSameWidth">
-            <h3 class="meetupTitle"><a class="meetupLink"></a></h3>
-        </div>
-        <div class="meetup col-md-4">
-            <img class="u-imgSameWidth" >
-            <h3 class="meetupTitle"><a class="meetupLink"></a></h3>
-        </div>
-        <div class="meetup col-md-4">
-            <img class="u-imgSameWidth">
-            <h3 class="meetupTitle"><a class="meetupLink"></a></h3>
+    <div class="row u-marginBottom">
+        <div class="col-md-12">
+          <h2 class="u-fontMono">Last meetups</h2>
+          <ul class="lastMeetups"></ul>
         </div>
     </div>
-
-    <div class="row u-marginBottom u-alignCenter">
-      <div class="meetup col-md-4">
-          <img class="u-imgSameWidth">
-          <h3 class="meetupTitle"><a class="meetupLink"></a></h3>
-      </div>
-      <div class="meetup col-md-4">
-          <img class="u-imgSameWidth" >
-          <h3 class="meetupTitle"><a class="meetupLink"></a></h3>
-      </div>
-      <div class="meetup col-md-4">
-          <img class="u-imgSameWidth">
-          <h3 class="meetupTitle"><a class="meetupLink"></a></h3>
-      </div>
-    </div>
-
+
     <div class="row u-marginBottom u-alignCenter">
         <h2 class="u-fontMono">Patrons</h2>
-        <a class="u-zeroDecoration" href="https://www.kde.org/"><img class="patronLogo" alt="KDE España" src="images/kde.svg"></a>
-        <a class="u-zeroDecoration" href="https://www.fsfe.org/"><img class="patronLogo" alt="Free Software Foundation Europe" src="images/fsfe.svg"></a>
-        <a class="u-zeroDecoration" href="https://www.opensuse.org/"><img class="patronLogo" alt="Suse" src="images/openSUSE_logo.png"></a>
+        <div class="patrons">
+          <a class="u-zeroDecoration" href="https://www.kde.org/"><img class="patronLogo" alt="KDE España" src="images/kde.svg"></a>
+          <a class="u-zeroDecoration" href="https://www.fsfe.org/"><img class="patronLogo" alt="Free Software Foundation Europe" src="images/fsfe.svg"></a>
+          <a class="u-zeroDecoration" href="https://www.opensuse.org/"><img class="patronLogo" alt="Suse" src="images/openSUSE_logo.png"></a>
+        </div>
         <hr />
         <p class="closingText">Want to help us? We have <a href="/sponsoring">sponsorships</a> available.</p>
     </div>

diff --git a/js/main.js b/js/main.js
@@ -3,21 +3,18 @@ $(document).ready(function() {
     // Update membership count
     $(".js-members").text(response.data.members)
   });
-  
+
   $.getJSON("https://api.meetup.com/Barcelona-Free-Software/events?desc=true&photo-host=public&page=20&sig_id=103310792&status=past&fields=photo_album&sig=f3ef85dfc4deeae26cc8b29b6bba906dd05cb3fd&callback=?", function(response) {
-    // We only want the last six meetups that have a picture
-    var meetups = response.data.filter(function(d) { return d.photo_album }).slice(0, 6);
-
-    // Add the info for each one
-    $.each(meetups, function(i, d) {
-      $(".meetupLink")
-        .eq(i)
-        .attr("href", d.link)
-        .text(d.name);
-
-      $(".meetup img")
-        .eq(i)
-        .attr("src", d.photo_album.photo_sample[0].photo_link)
-    });      
+    var meetups = response.data.slice(0, 20);
+
+    meetups.forEach(function(d) {
+      var date = new Date(d.created);
+      var day = date.getUTCDate();
+      var month = date.getUTCMonth() + 1; //months from 1-12
+      var year = date.getUTCFullYear();
+
+      $(".lastMeetups")
+        .append('<li><a class="u-marginRight" href="'+ d.link + '">' + d.name + '</a><small>' + day + '/' + month + '/' + year  + ' @' + d.venue.name + '</small></li>')
+    });
   });
 });
diff --git a/sponsoring/index.html b/sponsoring/index.html
@@ -11,7 +11,7 @@ <h1 class="u-fontMono">Sponsorship opportunities</h1>
     </div>
 
     <div class="u-marginBottom">
-        <h3 class="u-fontMono">Collaborator</h3>
+        <h3 class="u-fontMono"><strong>Collaborator</strong></h3>
         <ul class="baseText--list">
             <li>100 €/year</li>
             <li>Logo and description on our website.</li>
@@ -21,11 +21,11 @@ <h3 class="u-fontMono">Collaborator</h3>
     </div>
 
     <div class="u-marginBottom">
-        <h3 class="u-fontMono">Patron</h3>
+        <h3 class="u-fontMono"><strong>Patron</strong></h3>
         <ul class="baseText--list">
-            <li>Everything in Collaborator</li>
-            <li>500 €/year</li>
-            <li>Mention in Our Sponsors in <a href="http://www.meetup.com/Barcelona-Free-Software">http://www.meetup.com/Barcelona-Free-Software</a></li>
+            <li>Everything in Collaborator.</li>
+            <li>500 €/year.</li>
+            <li>Mention in "Our Sponsors" in <a href="http://www.meetup.com/Barcelona-Free-Software">Meetup</a>.</li>
             <li>We can bring your roll-up banner to the presentations.</li>
             <li>Mention during the introduction before the talks.</li>
             <li>Logo on the posters we provide for offline advertising.</li>