Merge remote-tracking branch 'lampepfl/wip-twitter'

Author: sjrd

_layouts/downloadpage.html

@@ -2,22 +2,18 @@
 layout: page
 ---
 
-<div>
-You can download Scala {{ page.release_version }} for <span id="os_name"></span> below.
-</div>
-
-<br/>
+<p class="center">
+  Download the current Scala version for your system (<a href="">All downloads).
+</p>
 
 <div class="download-wrapper">
-
-  <div id="download-space" class="download">
-  </div>
-
+  <a id="download-button">
+    <span class="slider">Download</span>
+    <span class="icon"></span>
+    <span class="version">Scala {{ page.release_version }}</span>
+  </a>
 </div>
 
-<br/>
-<br/>
-
 <h3>Software Requirements</h3>
 
 {{ page.requirements }}
@@ -68,5 +64,15 @@ <h3 hidden>Other resources</h3>
 
 {{ content }}
 
-<br/>
+<div id="getting-started-popup">
+  <div class="popup">
+    <p class="header">Your download will begin shortly</p>
+    <p>You can now jump to the next steps:</p>
+    <ul>
+      <li><a href="#">Read the getting started guide</a></li>
+      <li><a href="#">Read the full documentation</a></li>
+      <li><a href="#">Configure your IDE</a></li>
+    </ul>
+  </div>
+</div>
 

_layouts/maindownloadpage.html

@@ -11,23 +11,13 @@ <h3>Additional information</h3>
 To see a detailed list of changes for each version of Scala please refer to the <a href="{{ site.baseurl }}/download/changelog.html">changelog</a>.
 Note that the different major releases of Scala (e.g. Scala 2.9.3 and Scala 2.10.1) are not binary compatible.
 
-<table>
-
+<ul>
   {% for release in page.other_releases %}
-
-  <tr>
-    <td><a href="/download/{{ release[2] }}.html" class="btn small" style="width: 400px;">{{ release[1] }} - Scala {{ release[2] }}</a></td>
-  </tr>
-
+  <li><a href="/download/{{ release[2] }}.html">{{ release[1] }} - Scala {{ release[2] }}</a></li>
   {% endfor %}
-
-</table>
-<table><tbody>
-  <tr>
-    <td><a href="changelog.html" class="btn small" style="width: 100px;">Changelog</a></td>
-    <td><a href="all.html" class="btn small" style="width: 256px;">All previous Scala Releases</a></td>
-  </tr>
-</tbody></table>
+  <li><a href="changelog.html">Changelog</a></li>
+  <li><a href="all.html">All previous Scala Releases</a></li>
+</ul>
 
 <br/>
 

resources/css/main.css

@@ -1,5 +1,3 @@
----
----
 /* ==========================================================================
    Custom styles, overrides bootstrap
    ========================================================================== */
@@ -213,6 +211,127 @@ a.brand {
   margin-top: -36px;
 }
 
+#download-button {
+  display: block;
+  position: relative;
+  width: 175px;
+  height: 40px;
+  line-height: 40px;
+  overflow: hidden;
+  background-color: #dc322f;
+  color: white;
+  border-radius: 25px;
+  white-space: nowrap;
+  font-size: 20px;
+  font-weight: 700;
+  margin: 30px auto 50px;
+}
+#download-button span {
+  display: inline-block;
+  position: relative;
+  width: 111px;
+  height: inherit;
+  vertical-align: 6px;
+  text-align: left;
+  -webkit-transition: all 300ms cubic-bezier(.6, 0, .6, 1); 
+     -moz-transition: all 300ms cubic-bezier(.6, 0, .6, 1); 
+      -ms-transition: all 300ms cubic-bezier(.6, 0, .6, 1); 
+       -o-transition: all 300ms cubic-bezier(.6, 0, .6, 1); 
+          transition: all 300ms cubic-bezier(.6, 0, .6, 1);
+  -webkit-transform: translateX(-115px); 
+     -moz-transform: translateX(-115px); 
+      -ms-transform: translateX(-115px); 
+       -o-transform: translateX(-115px); 
+          transform: translateX(-115px);
+}
+#download-button:hover .slider {
+  padding-left: 20px;
+}
+#download-button .icon {
+  width: 26px;
+  height: 26px;
+  margin: 7px;
+  border-radius: 20px;
+  padding: 0;
+  background: url(/resources/img/download.png) 0 0 no-repeat;
+  box-shadow: 1px 1px 0 rgba(0,0,0,.3);
+  vertical-align: -7px;
+}
+#download-button:hover span {
+  -webkit-transform: translateX(0); 
+     -moz-transform: translateX(0); 
+      -ms-transform: translateX(0); 
+       -o-transform: translateX(0); 
+          transform: translateX(0);
+}
+#download-button:hover .icon {
+  background-position-y: -26px;
+}
+#download-button:hover .slider {
+  margin-right: 0;
+}
+#download-button.windows .icon {
+  background-position-x: -26px;
+}
+#download-button.unix .icon {
+  background-position-x: -52px;
+}
+
+#getting-started-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: rgba(0,0,0,.2);
+  opacity: 0;
+  overflow: hidden;
+  z-index: 9999;
+  -webkit-transition: height 1ms linear 500ms, opacity 500ms cubic-bezier(0, 0.5, 0.5, 1);
+  -moz-transition: height 1ms linear 500ms, opacity 500ms cubic-bezier(0, 0.5, 0.5, 1);
+  transition: height 1ms linear 500ms, opacity 500ms cubic-bezier(0, 0.5, 0.5, 1);
+}
+#getting-started-popup.open {
+  height: 100%;
+  opacity: 1;
+  -webkit-transition: height 1ms linear, opacity 500ms cubic-bezier(0, 0.5, 0.5, 1);
+  -moz-transition: height 1ms linear 500ms, opacity 500ms cubic-bezier(0, 0.5, 0.5, 1);
+  transition: height 1ms linear, opacity 500ms cubic-bezier(0, 0.5, 0.5, 1);
+}
+
+#getting-started-popup .popup {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 400px;
+  max-width: 100%;
+  background: white;
+  padding: 40px;
+  box-shadow: 0 2px 5px rgba(0,0,0,.2);
+  opacity: 0;
+  transform: translate(-49%, -99%);
+  transform: translate(calc(-49%), calc(-99%));
+  -moz-transform: translate(-50%, -50%);
+  -webkit-transform: translate(-webkit-calc(-49%), -webkit-calc(-99%));
+  -webkit-transition: -webkit-transform 400ms cubic-bezier(1, 0, 0.5, 1), top 1ms linear 1000ms, opacity 400ms cubic-bezier(1, 0, 0.5, 1);
+  -moz-transition: -moz-transform 400ms cubic-bezier(1, 0, 0.5, 1), top 1ms linear 1000ms, opacity 400ms cubic-bezier(1, 0, 0.5, 1);
+  transition: transform 400ms cubic-bezier(1, 0, 0.5, 1), top 1ms linear 1000ms, opacity 400ms cubic-bezier(1, 0, 0.5, 1);
+}
+#getting-started-popup.open .popup {
+  opacity: 1;
+  transform: translate(calc(-49%), calc(-49%));
+  -moz-transform: translate(-50%, -50%);
+  -webkit-transform: translate(-webkit-calc(-49%), -webkit-calc(-49%));
+  -webkit-transition: -webkit-transform 400ms cubic-bezier(0, 0.5, 0.5, 1) 400ms, top 1ms linear, opacity 400ms cubic-bezier(0, 0.5, 0.5, 1) 400ms;
+  -moz-transition: -moz-transform 400ms cubic-bezier(0, 0.5, 0.5, 1) 400ms, top 1ms linear, opacity 400ms cubic-bezier(0, 0.5, 0.5, 1) 400ms;
+  transition: transform 400ms cubic-bezier(0, 0.5, 0.5, 1) 400ms, top 1ms linear, opacity 400ms cubic-bezier(0, 0.5, 0.5, 1) 400ms;
+}
+
+#getting-started-popup .header {
+	font-size: 24px;
+	color: #DC322F;
+}
+
 #download-btn {
   padding: 0 31px;
   background: #DC322F;
@@ -350,7 +469,7 @@ a.brand {
   /*text-transform: uppercase;*/
   margin-bottom: 12px;
   margin-top: 0px;
-  background: url({{ site.baseurl }}/resources/img/gray-line.png) center repeat-x;
+  background: url(/resources/img/gray-line.png) center repeat-x;
 }
 
 .upcoming-events > h2 > span {
@@ -502,7 +621,7 @@ a.brand {
   /*text-transform: uppercase;*/
   /*margin-bottom: 12px;*/
   margin-top: 0px;
-  background: url({{ site.baseurl }}/resources/img/white-line.png) center repeat-x;
+  background: url(/resources/img/white-line.png) center repeat-x;
 }
 
 .upcoming-training > h2 > span {
@@ -749,7 +868,7 @@ h2.twitterhdr {
   font-style: italic;
   text-align: center;
   margin-bottom: 10px;
-  background: url({{ site.baseurl }}/resources/img/white-line.png) center repeat-x;
+  background: url(/resources/img/white-line.png) center repeat-x;
 }
 
 h2.twitterhdr > span {
@@ -835,7 +954,7 @@ h2.twitterhdr > span {
 }
 
 .epfl-picture-box {
-  background: url({{ site.baseurl }}/resources/img/epfl-bc.jpg) no-repeat center;
+  background: url(/resources/img/epfl-bc.jpg) no-repeat center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
@@ -894,7 +1013,7 @@ h2.twitterhdr > span {
   font-weight: normal;
   font-style: italic;
   margin-bottom: 0px;
-  background: url({{ site.baseurl }}/resources/img/gray-line.png) center repeat-x;
+  background: url(/resources/img/gray-line.png) center repeat-x;
 }
 
 .bullet-point > h2 > span {
@@ -1300,14 +1419,19 @@ h2.twitterhdr > span {
   float: right;
 }
 
-.tweets { position: relative; }
+.tweets { position: relative; zoom: 1; }
+.tweets:after {
+  content: " ";
+  display: block;
+  clear: both;
+}
 
 .tweet-container {
   position: relative;
   float: left;
-  width: 220px;
+  width: 215px;
   height: 230px;
-  margin-right: 20px;
+  margin: 0 10px;
   vertical-align: bottom;
 }
 
@@ -1340,12 +1464,12 @@ h2.twitterhdr > span {
 .original-tweet { font-family: "museo-slab", serif; font-size: 13px; padding-top: 8px; color: #fff;}
 .original-tweet > a { color: #fff; /*color: #839496;*/ font-weight: normal; text-decoration: none; border: none; }
 .original-tweet > a:hover { color: #DC322F; }
-.tweet-username { position: relative; top: 10px; left: -10px; color: #839496; white-space: nowrap; line-height: 1em;}
+.tweet-username { color: rgb(131, 148, 150); white-space: nowrap; line-height: 1em; display: inline-block; padding-left: .5em; }
 .tweet-username > a { color: #fff; /*color: #657B83;*/ font-weight: bold; text-decoration: none; border: none; }
 .tweet-username > a:hover { color: #DC322F; border: none; }
 .triangle { position: relative; bottom: 9px; left: 40px; height: 0px; width: 1px; margin-left: auto; margin-right: auto; border-top: 16px solid rgba(0, 30, 30, 0.7); border-left: none; border-right: 16px solid transparent; border-bottom: none; }
 .bottom-anchored { position: absolute; bottom: 0px; }
-.lh1em { line-height: 1em; }
+.avatar-wrapper { border-radius: 40px; overflow: hidden; width: 50px; height: 50px; display: inline-block; margin-left: 12px; }
 
 .caret-container{ position: absolute; bottom: 60px; }
 .caret-divider{ position:absolute;top:0;left:28px;width:16px;height:8px}
@@ -1507,11 +1631,11 @@ h2.twitterhdr > span {
   height: 32px;
   display: inline-block;
   line-height: 35px;
-  -moz-border-image: url({{ site.baseurl }}/resources/img/diamond.png) 0 34 repeat;
-  -webkit-border-image: url({{ site.baseurl }}/resources/img/diamond.png) 0 34 repeat;
-  -webkit-border-image: url({{ site.baseurl }}/resources/img/diamond.png) 0 34 repeat;
-  -o-border-image: url({{ site.baseurl }}/resources/img/diamond.png) 0 34 repeat;
-  border-image: url({{ site.baseurl }}/resources/img/diamond.png) 0 34 repeat;
+  -moz-border-image: url(/resources/img/diamond.png) 0 34 repeat;
+  -webkit-border-image: url(/resources/img/diamond.png) 0 34 repeat;
+  -webkit-border-image: url(/resources/img/diamond.png) 0 34 repeat;
+  -o-border-image: url(/resources/img/diamond.png) 0 34 repeat;
+  border-image: url(/resources/img/diamond.png) 0 34 repeat;
   background-color: #191a1a;
   padding: 0 10px;
 }
@@ -1537,10 +1661,10 @@ h2.twitterhdr > span {
   /*color: #96938C;*/
 }
 
-div.download-wrapper {
+/*div.download-wrapper {
   width: 400px;
   text-align: center;
-}
+}*/
 
 div.download {
   margin-top: 10px;

resources/css/prettify.css

@@ -1,6 +1,6 @@
 
 .prettyprint { background-color: #073642; }
-.prettyprint code { color: #839496; white-space: nowrap;  overflow: auto; }
+.prettyprint code { color: #839496;  overflow: auto; }
 .prettyprint .pln { color: inherit; }
 .prettyprint .str, .prettyprint .atv { color: #2aa198; }
 .prettyprint .lit { color: #D33682;}