💄 Site > File > Header > Add style

site/src/components/application/style.styl

@@ -7,6 +7,8 @@
     height 100%
     overflow hidden
     font-family Helvetica, Arial
+    -webkit-font-smoothing antialiased
+    -moz-osx-font-smoothing grayscale
 
 a
     text-decoration none

site/src/components/file/style.styl

@@ -10,4 +10,104 @@
 header
     position absolute
     top 0
-    left 0
+    left 0
+    right 0
+    height 50px
+    background #1E202F
+
+    a
+        &.active
+            background #26283B
+
+        .icon
+            &.default
+                display inline-block
+
+            &.hover
+                display none
+
+        &:hover
+            .icon
+                &.default
+                    display none
+
+                &.hover
+                    display inline-block
+
+    .versions-toggle
+        display block
+        position absolute
+        top 0
+        left 0
+        width 50px
+        height 50px
+        padding-top 13px
+        padding-left 18px
+
+        .icon
+            &.default
+                opacity 0.5
+
+        &.active
+            background #26283B
+
+    .differences-toggle
+        display block
+        position absolute
+        top 0
+        left 50px
+        width 58px
+        height 50px
+        padding-top 13px
+        padding-left 19px
+
+        .icon
+            &.default
+                opacity 0.7
+
+        &.active
+            background #26283B
+
+    .copy
+        display block
+        position absolute
+        top 0
+        right 58px
+        width 58px
+        height 50px
+        padding-top 14px
+        padding-left 22px
+
+        .icon
+            &.default
+                opacity 0.8
+
+        &.active
+            background #26283B
+
+    .download
+        display block
+        position absolute
+        top 0
+        right 0
+        width 58px
+        height 50px
+        padding-top 14px
+        padding-left 22px
+
+        .icon
+            &.default
+                opacity 0.5
+
+    .path
+        position absolute
+        top 20px
+        left 0
+        right 0
+        text-align center
+        font-size 14px
+        color #fff
+        letter-spacing 0.25px
+
+        .directory
+            opacity 0.3

site/src/components/file/template.html

@@ -1,18 +1,46 @@
 <div class="file" :class="[versionsActive && isCode ? 'version-active' : '']">
+
+    <!-- Header -->
     <header>
-        <a href="#" @click.prevent="onDifferencesClick" v-if="isCode">Differences <span v-if="differencesActive">(on)</span></a>
+
-        <a href="#" @click.prevent="onVersionsClick" v-if="isCode">Versions <span v-if="versionsActive">(on)</span></a>
+        <div class="path"><span class="directory">{{ content.path.directory }}/</span><span class="name">{{ content.name }}</span></div>
-        <a :href="downloadUrl" download>Download</a>
+
-        <a href="#" @click.prevent="onCopyClick" @mouseleave="onCopyMouseleave" v-if="isCode">{{ this.copied ? 'Copied' : 'Copy' }}</a>
+        <a class="versions-toggle" :class="[versionsActive ? 'active' : '']" href="#" @click.prevent="onVersionsClick" v-if="isCode">
-        {{ content.path.directory }}/{{ content.name }}
+            <img class="icon default" src="../../../static/svg/versions.svg" alt="">
+            <img class="icon hover" src="../../../static/svg/versions-hover.svg" alt="">
+        </a>
+
+        <a class="differences-toggle" :class="[differencesActive ? 'active' : '']" href="#" @click.prevent="onDifferencesClick" v-if="isCode">
+            <img class="icon default" src="../../../static/svg/differences.svg" alt="">
+            <img class="icon hover" src="../../../static/svg/differences-hover.svg" alt="">
+        </a>
+
+        <a class="copy" :class="[copied ? 'active' : '']" href="#" @click.prevent="onCopyClick" @mouseleave="onCopyMouseleave" v-if="isCode">
+            <img class="icon default" src="../../../static/svg/copy.svg" alt="">
+            <img class="icon hover" src="../../../static/svg/copy-hover.svg" alt="">
+        </a>
+
+        <a class="download" :href="downloadUrl" download>
+            <img class="icon default" src="../../../static/svg/download.svg" alt="">
+            <img class="icon hover" src="../../../static/svg/download-hover.svg" alt="">
+        </a>
+
     </header>
+
+    <!-- Versions -->
     <versions :file="content" :content="content.versions" v-if="versionsActive && isCode"></versions>
+
+    <!-- Viewer / Code -->
     <viewer :differences-active="differencesActive" v-if="isCode"></viewer>
+
+    <!-- Preview -->
     <div class="preview" v-if="isImage">
-    	<img :src="downloadUrl">
+        <img :src="downloadUrl">
     </div>
+
+    <!-- Can't read -->
     <div class="cant-read" v-if="!isCode && !isImage">
-    	<br>Sorry, I can't read this file.
+        <br>Sorry, I can't read this file.
-    	<br>But you can <a :href="downloadUrl" download>download it</a>
+        <br>But you can <a :href="downloadUrl" download>download it</a>
     </div>
 </div>

site/src/components/versions/style.styl

@@ -1,6 +1,6 @@
 .versions
     position absolute
-    top 30px
+    top 50px
     left 0
     width 202px
     bottom 0

site/src/components/viewer/style.styl

@@ -14,7 +14,7 @@
 // Viewer
 .viewer
     position absolute
-    top 30px
+    top 50px
     right 0
     width 100%
     bottom 0
@@ -105,6 +105,8 @@
     height 100%
     outline none
     font-family Inconsolata, Monaco, Consolas, 'Courier New', Courier
+    -webkit-font-smoothing initial
+    -moz-osx-font-smoothing initial
 
     ::-moz-selection
         background #bdb9bf

site/static/svg/alert-hover.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="20px" viewBox="0 0 24 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>Fill 1</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Ralentir-hover" fill="#FD4141">
+            <g id="Page-1">
+                <path d="M11.5006715,11.8065036 L11.5006715,7.12650361 C11.5006715,6.48066362 11.4600982,5.98650981 12.0097,5.98650981 C12.5593017,5.98650981 12.5043921,6.48066362 12.5043921,7.12650361 L12.4963269,11.8065036 C12.4963269,12.4523436 12.5593017,12.9765036 12.0097,12.9765036 C11.4600982,12.9765036 11.5006715,12.4523436 11.5006715,11.8065036 Z M11,15.9800324 C11,15.4280324 11.448,14.9800324 12,14.9800324 C12.552,14.9800324 13,15.4280324 13,15.9800324 C13,16.5320324 12.552,16.9800324 12,16.9800324 C11.448,16.9800324 11,16.5320324 11,15.9800324 Z M12.9552295,1.56517175 C12.7606253,1.22505876 12.4045882,1.0002 11.9976886,1.0002 C11.590789,1.0002 11.2347518,1.22505876 11.0434648,1.55952203 L2.14806453,17.3052847 C2.05518527,17.4668667 1.9999,17.6623469 1.9999,17.8702565 C1.9999,18.4939853 2.49525604,19.0002 3.10560544,19.0002 L20.8986174,19.0002 C21.5078611,18.9979401 21.9999,18.4928554 21.9999,17.8702565 C21.9999,17.6623469 21.9446147,17.4668667 21.8484184,17.299635 L12.9552295,1.56517175 Z M3.98885728,20.0002 C2.3370651,20.0002 1.63796847,19.9981238 0.960560102,18.4936794 C0.663604125,17.5840169 1.74003396,15.9165197 1.9999,15.4710273 L9.96963906,1.50825197 C10.4953451,0.600210034 10.8987052,0.0002 11.9999,0.0002 C13.1010948,0.0002 13.5248452,0.614257091 14.0415903,1.50825197 L22.1733556,15.4710273 C22.4252564,15.9024726 23.4787511,17.61625 23.1847208,18.4936794 C22.6715077,20.0251826 21.6627349,20.0002 20.012934,20.0002 L3.98885728,20.0002 Z" id="Fill-1"></path>
+            </g>
+        </g>
+    </g>
+</svg>

site/static/svg/alert.svg

@@ -1,19 +1,13 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="24px" height="20px" viewBox="0 0 24 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
-    <title>Ralentir</title>
+    <title>Fill 1</title>
     <desc>Created with Sketch.</desc>
     <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.599999964">
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.599999964">
-        <g id="01---File-tree" transform="translate(-1339.000000, -870.000000)" fill="#F6F6F6">
+        <g id="Ralentir" fill="#F6F6F6">
-            <g id="Btn-Ralentir" transform="translate(1320.000000, 860.000000)">
+            <g id="Page-1">
-                <g id="Normal">
+                <path d="M11.5006715,11.8065036 L11.5006715,7.12650361 C11.5006715,6.48066362 11.4600982,5.98650981 12.0097,5.98650981 C12.5593017,5.98650981 12.5043921,6.48066362 12.5043921,7.12650361 L12.4963269,11.8065036 C12.4963269,12.4523436 12.5593017,12.9765036 12.0097,12.9765036 C11.4600982,12.9765036 11.5006715,12.4523436 11.5006715,11.8065036 Z M11,15.9800324 C11,15.4280324 11.448,14.9800324 12,14.9800324 C12.552,14.9800324 13,15.4280324 13,15.9800324 C13,16.5320324 12.552,16.9800324 12,16.9800324 C11.448,16.9800324 11,16.5320324 11,15.9800324 Z M12.9552295,1.56517175 C12.7606253,1.22505876 12.4045882,1.0002 11.9976886,1.0002 C11.590789,1.0002 11.2347518,1.22505876 11.0434648,1.55952203 L2.14806453,17.3052847 C2.05518527,17.4668667 1.9999,17.6623469 1.9999,17.8702565 C1.9999,18.4939853 2.49525604,19.0002 3.10560544,19.0002 L20.8986174,19.0002 C21.5078611,18.9979401 21.9999,18.4928554 21.9999,17.8702565 C21.9999,17.6623469 21.9446147,17.4668667 21.8484184,17.299635 L12.9552295,1.56517175 Z M3.98885728,20.0002 C2.3370651,20.0002 1.63796847,19.9981238 0.960560102,18.4936794 C0.663604125,17.5840169 1.74003396,15.9165197 1.9999,15.4710273 L9.96963906,1.50825197 C10.4953451,0.600210034 10.8987052,0.0002 11.9999,0.0002 C13.1010948,0.0002 13.5248452,0.614257091 14.0415903,1.50825197 L22.1733556,15.4710273 C22.4252564,15.9024726 23.4787511,17.61625 23.1847208,18.4936794 C22.6715077,20.0251826 21.6627349,20.0002 20.012934,20.0002 L3.98885728,20.0002 Z" id="Fill-1"></path>
-                    <g id="Ralentir" transform="translate(19.000000, 10.000000)">
-                        <g id="Page-1">
-                            <path d="M11.5006715,11.8065036 L11.5006715,7.12650361 C11.5006715,6.48066362 11.4600982,5.98650981 12.0097,5.98650981 C12.5593017,5.98650981 12.5043921,6.48066362 12.5043921,7.12650361 L12.4963269,11.8065036 C12.4963269,12.4523436 12.5593017,12.9765036 12.0097,12.9765036 C11.4600982,12.9765036 11.5006715,12.4523436 11.5006715,11.8065036 Z M11,15.9800324 C11,15.4280324 11.448,14.9800324 12,14.9800324 C12.552,14.9800324 13,15.4280324 13,15.9800324 C13,16.5320324 12.552,16.9800324 12,16.9800324 C11.448,16.9800324 11,16.5320324 11,15.9800324 Z M12.9552295,1.56517175 C12.7606253,1.22505876 12.4045882,1.0002 11.9976886,1.0002 C11.590789,1.0002 11.2347518,1.22505876 11.0434648,1.55952203 L2.14806453,17.3052847 C2.05518527,17.4668667 1.9999,17.6623469 1.9999,17.8702565 C1.9999,18.4939853 2.49525604,19.0002 3.10560544,19.0002 L20.8986174,19.0002 C21.5078611,18.9979401 21.9999,18.4928554 21.9999,17.8702565 C21.9999,17.6623469 21.9446147,17.4668667 21.8484184,17.299635 L12.9552295,1.56517175 Z M3.98885728,20.0002 C2.3370651,20.0002 1.63796847,19.9981238 0.960560102,18.4936794 C0.663604125,17.5840169 1.74003396,15.9165197 1.9999,15.4710273 L9.96963906,1.50825197 C10.4953451,0.600210034 10.8987052,0.0002 11.9999,0.0002 C13.1010948,0.0002 13.5248452,0.614257091 14.0415903,1.50825197 L22.1733556,15.4710273 C22.4252564,15.9024726 23.4787511,17.61625 23.1847208,18.4936794 C22.6715077,20.0251826 21.6627349,20.0002 20.012934,20.0002 L3.98885728,20.0002 Z" id="Fill-1"></path>
-                        </g>
-                    </g>
-                </g>
             </g>
         </g>
     </g>

site/static/svg/chat-star-hover.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="11px" viewBox="0 0 12 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>Star</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Star-couleur" fill="#4BD1C5">
+            <polygon id="Star" points="6 9 2.47328849 10.854102 3.14683045 6.92705098 0.293660902 4.14589803 4.23664424 3.57294902 6 0 7.76335576 3.57294902 11.7063391 4.14589803 8.85316955 6.92705098 9.52671151 10.854102"></polygon>
+        </g>
+    </g>
+</svg>

site/static/svg/copy-hover.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="20px" viewBox="0 0 16 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>Page 1</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <polygon id="path-1" points="11.91296 15.8791579 11.91296 0.225614035 0.141152 0.225614035 0.141152 15.8791579 11.91296 15.8791579"></polygon>
+        <polygon id="path-3" points="0 0.135859649 0 15.789193 11.771808 15.789193 11.771808 0.135859649"></polygon>
+    </defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="copy-hover">
+            <g id="Page-1">
+                <g id="Group-3" transform="translate(3.840000, 0.125263)">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <g id="Clip-2"></g>
+                    <path d="M1.128032,14.7970526 L1.128032,1.30792982 L9.311392,1.30792982 L9.311392,2.49740351 C9.311392,2.79635088 9.532512,3.03845614 9.804832,3.03845614 L10.925792,3.03845614 L10.925792,14.7970526 L1.128032,14.7970526 Z M11.764512,2.11003509 L10.150112,0.379508772 C10.057952,0.280561404 9.934112,0.225473684 9.805152,0.225473684 L0.634592,0.225473684 C0.361952,0.225473684 0.141152,0.467929825 0.141152,0.766526316 L0.141152,15.3381053 C0.141152,15.6374035 0.362272,15.8791579 0.634592,15.8791579 L11.419552,15.8791579 C11.692192,15.8791579 11.912992,15.6370526 11.912992,15.3381053 L11.912992,2.49705263 C11.912992,2.3514386 11.859552,2.21214035 11.764512,2.11003509 L11.764512,2.11003509 Z" id="Fill-1" fill="#4BD1C5" mask="url(#mask-2)"></path>
+                </g>
+                <g id="Group-14" transform="translate(0.000000, 3.984912)">
+                    <mask id="mask-4" fill="white">
+                        <use xlink:href="#path-3"></use>
+                    </mask>
+                    <g id="Clip-13"></g>
+                    <path d="M10.784928,12.9018246 L10.784928,14.7074386 L0.986848,14.7074386 L0.986848,1.21831579 L3.176608,1.21831579 L3.176608,0.135859649 L0.493408,0.135859649 C0.220768,0.135859649 -3.2e-05,0.377964912 -3.2e-05,0.676912281 L-3.2e-05,15.2481404 C-3.2e-05,15.5474386 0.220768,15.789193 0.493408,15.789193 L11.278368,15.789193 C11.551328,15.789193 11.771808,15.5470877 11.771808,15.2481404 L11.771808,12.9014737 L10.784928,12.9014737 L10.784928,12.9018246 Z" id="Fill-12" fill="#4BD1C5" mask="url(#mask-4)"></path>
+                </g>
+                <path d="M13.546464,4.73866667 L6.187424,4.73866667 C6.020704,4.73866667 5.885984,4.59059649 5.885984,4.40814035 C5.885984,4.22533333 6.021024,4.07761404 6.187424,4.07761404 L13.546464,4.07761404 C13.713184,4.07761404 13.847904,4.22568421 13.847904,4.40814035 C13.847904,4.59059649 13.713184,4.73866667 13.546464,4.73866667" id="Fill-4" fill="#4BD1C5"></path>
+                <path d="M13.546464,7.25185965 L6.187424,7.25185965 C6.020704,7.25185965 5.885984,7.10378947 5.885984,6.92133333 C5.885984,6.73852632 6.021024,6.59080702 6.187424,6.59080702 L13.546464,6.59080702 C13.713184,6.59080702 13.847904,6.73887719 13.847904,6.92133333 C13.847904,7.10378947 13.713184,7.25185965 13.546464,7.25185965" id="Fill-6" fill="#4BD1C5"></path>
+                <path d="M13.546464,9.76519298 L6.187424,9.76519298 C6.020704,9.76519298 5.885984,9.61712281 5.885984,9.43466667 C5.885984,9.25185965 6.021024,9.10414035 6.187424,9.10414035 L13.546464,9.10414035 C13.713184,9.10414035 13.847904,9.25221053 13.847904,9.43466667 C13.847904,9.61712281 13.713184,9.76519298 13.546464,9.76519298" id="Fill-8" fill="#4BD1C5"></path>
+                <path d="M13.546464,12.2785614 L6.187424,12.2785614 C6.020704,12.2785614 5.885984,12.1304912 5.885984,11.9480351 C5.885984,11.7655789 6.021024,11.6175088 6.187424,11.6175088 L13.546464,11.6175088 C13.713184,11.6175088 13.847904,11.7655789 13.847904,11.9480351 C13.847904,12.1304912 13.713184,12.2785614 13.546464,12.2785614" id="Fill-10" fill="#4BD1C5"></path>
+                <path d="M3.17664,7.84701754 L2.2064,7.84701754 C2.03968,7.84701754 1.90496,7.99508772 1.90496,8.17754386 C1.90496,8.36 2.04,8.50807018 2.2064,8.50807018 L3.17664,8.50807018 L3.17664,7.84701754 Z" id="Fill-15" fill="#4BD1C5"></path>
+                <path d="M3.17664,10.360386 L2.2064,10.360386 C2.03968,10.360386 1.90496,10.5084561 1.90496,10.6909123 C1.90496,10.8733684 2.04,11.0214386 2.2064,11.0214386 L3.17664,11.0214386 L3.17664,10.360386 Z" id="Fill-17" fill="#4BD1C5"></path>
+                <path d="M3.17664,12.8737544 L2.2064,12.8737544 C2.03968,12.8737544 1.90496,13.0218246 1.90496,13.2042807 C1.90496,13.3867368 2.04,13.5344561 2.2064,13.5344561 L3.17664,13.5344561 L3.17664,12.8737544 Z" id="Fill-19" fill="#4BD1C5"></path>
+                <path d="M3.17664,15.4633684 L3.17664,15.3868772 L2.2064,15.3868772 C2.03968,15.3868772 1.90496,15.5349474 1.90496,15.7177544 C1.90496,15.8998596 2.04,16.0479298 2.2064,16.0479298 L3.29184,16.0479298 C3.21824,15.8696842 3.17664,15.6721404 3.17664,15.4633684" id="Fill-21" fill="#4BD1C5"></path>
+            </g>
+        </g>
+    </g>
+</svg>

site/static/svg/cross-hover.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="10px" height="10px" viewBox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>croix</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.599999964">
+        <g id="03.2.2---Questions-ouvert-click-ligne-6" transform="translate(-1299.000000, -826.000000)" fill="#4BD1C5">
+            <g id="Question" transform="translate(1018.000000, 450.000000)">
+                <g id="Croix" transform="translate(281.000000, 376.000000)">
+                    <g id="croix" transform="translate(5.071068, 5.071068) rotate(45.000000) translate(-5.071068, -5.071068) translate(0.071068, 0.071068)">
+                        <rect id="Rectangle-16" x="4" y="0" width="2" height="10"></rect>
+                        <rect id="Rectangle-17" x="0" y="4" width="10" height="2"></rect>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

site/static/svg/differences-hover.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>Page 1</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <polygon id="path-1" points="9.99997647 0 0 0 0 20 9.99997647 20 19.9999529 20 19.9999529 0 9.99997647 0"></polygon>
+    </defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Show-diff-click">
+            <g id="Page-1">
+                <path d="M5.5,8.25 L5.5,3.75 C5.5,3.325 5.71666667,3 6,3 C6.28333333,3 6.5,3.325 6.5,3.75 L6.5,8.25 C6.5,8.675 6.28333333,9 6,9 C5.71666667,9 5.5,8.675 5.5,8.25" id="Fill-1" fill="#4BD1C5"></path>
+                <path d="M8.25,6.5 L3.75,6.5 C3.32525,6.5 3,6.28333333 3,6 C3,5.71683333 3.32525,5.5 3.75,5.5 L8.25,5.5 C8.675,5.5 9,5.71683333 9,6 C9,6.28333333 8.675,6.5 8.25,6.5" id="Fill-8" fill="#4BD1C5"></path>
+                <g id="Group-5">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <g id="Clip-4"></g>
+                    <path d="M17.9736958,19 L2.02646723,19 C1.45946723,19 0.999952941,18.5404857 0.999952941,17.9737429 L0.999952941,2.02651429 C0.999952941,1.45951429 1.45946723,1 2.02646723,1 L17.9736958,1 C18.5404387,1 18.9999529,1.45951429 18.9999529,2.02651429 L18.9999529,17.9737429 C18.9999529,18.5404857 18.5404387,19 17.9736958,19 M-4.70588235e-05,0.939294118 L-4.70588235e-05,19.0609412 C-4.70588235e-05,19.5795294 0.420423529,20 0.939247059,20 L19.0608941,20 C19.5794824,20 19.9999529,19.5795294 19.9999529,19.0609412 L19.9999529,0.939294118 C19.9999529,0.420470588 19.5794824,0 19.0608941,0 L0.939247059,0 C0.420423529,0 -4.70588235e-05,0.420470588 -4.70588235e-05,0.939294118" id="Fill-3" fill="#4BD1C5" mask="url(#mask-2)"></path>
+                </g>
+                <path d="M20.1197259,10.3815969 L-0.127308724,10.3815969 C-2.03840382,10.3815969 -3.50181449,10.1704605 -3.50181449,9.89435908 C-3.50181449,9.61842007 -2.03840382,9.40712128 -0.127308724,9.40712128 L20.1197259,9.40712128 C22.0319458,9.40712128 23.4942317,9.61842007 23.4942317,9.89435908 C23.4942317,10.1704605 22.0319458,10.3815969 20.1197259,10.3815969" id="Fill-8-Copy" fill="#4BD1C5" transform="translate(9.996209, 9.907121) rotate(-45.000000) translate(-9.996209, -9.907121) "></path>
+                <path d="M16.25,15 L11.75,15 C11.32525,15 11,14.7833333 11,14.5 C11,14.2168333 11.32525,14 11.75,14 L16.25,14 C16.675,14 17,14.2168333 17,14.5 C17,14.7833333 16.675,15 16.25,15" id="Fill-8" fill="#4BD1C5"></path>
+            </g>
+        </g>
+    </g>
+</svg>

site/static/svg/download-hover.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="20px" viewBox="0 0 12 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>dl</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <polygon id="path-1" points="11.9546475 0 11.9546475 20 0.0452428125 20 0.0452428125 2.22044692e-15 11.9546475 2.22044692e-15"></polygon>
+    </defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="dl-hover">
+            <g id="dl">
+                <mask id="mask-2" fill="white">
+                    <use xlink:href="#path-1"></use>
+                </mask>
+                <g id="Clip-2"></g>
+                <path d="M1.14756,17.668 L10.8523162,17.668 C11.3197537,17.668 11.6960662,18.0599922 11.6960662,18.5469062 C11.6960662,19.0338203 11.3197537,19.4258125 10.8523162,19.4258125 L1.14756,19.4258125 C0.6801225,19.4258125 0.30381,19.0338203 0.30381,18.5469062 C0.30381,18.0599922 0.6801225,17.668 1.14756,17.668 M5.99991,0.574210938 C6.46729125,0.574210938 6.84366,0.966203125 6.84366,1.45311719 L6.84366,11.7284102 L10.5135225,7.90563672 C10.8440475,7.56133984 11.3762287,7.56133984 11.7067537,7.90563672 C12.0372787,8.24993359 12.0372787,8.80428906 11.7067537,9.14858594 L6.599985,14.4681367 C6.477585,14.5955781 6.32756625,14.6755 6.17040375,14.7085469 C6.11527875,14.7201484 6.05936625,14.7263008 6.0033975,14.7263008 C6.0027225,14.7263008 6.00199125,14.7262422 6.00131625,14.7261836 C6.00081,14.7261836 6.00036,14.7263008 5.99991,14.7263008 C5.99366625,14.7263008 5.98770375,14.7254805 5.9815725,14.7253633 C5.959185,14.7249531 5.9367975,14.72425 5.9145225,14.7219648 C5.9106975,14.7215547 5.906985,14.7206758 5.90321625,14.720207 C5.8789725,14.7174531 5.854785,14.7137617 5.8308225,14.7087812 C5.82761625,14.7080781 5.8245225,14.707082 5.8213725,14.7063789 C5.79690375,14.7009883 5.7725475,14.6946602 5.74852875,14.6869258 L5.74841625,14.6869258 C5.72220375,14.6784883 5.69632875,14.6687031 5.6708475,14.6575117 C5.57257875,14.6145625 5.48016,14.55175 5.3999475,14.4681367 L0.29317875,9.14858594 C-0.0374025,8.80428906 -0.0374025,8.24993359 0.29317875,7.90563672 C0.62370375,7.56133984 1.15594125,7.56133984 1.48646625,7.90563672 L5.15616,11.7281758 L5.15616,1.45311719 C5.15616,0.966203125 5.5324725,0.574210938 5.99991,0.574210938" id="Fill-1" fill="#4BD1C5" mask="url(#mask-2)"></path>
+            </g>
+        </g>
+    </g>
+</svg>

site/static/svg/versions-hover.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="20px" viewBox="0 0 14 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>Page 1</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Histo-click" fill="#4BD1C5">
+            <g id="Page-1" transform="translate(0.000000, -0.000000)">
+                <path d="M2.96835,11.6421667 L10.6135167,11.6421667 C10.84685,11.6421667 11.0801833,11.5032778 11.0801833,11.3643889 C11.0801833,11.2255 10.84685,11.0866111 10.6135167,11.0866111 L2.96835,11.0866111 C2.73501667,11.0866111 2.50168333,11.2255 2.50168333,11.3643889 C2.50168333,11.5032778 2.67668333,11.6421667 2.96835,11.6421667" id="Fill-3"></path>
+                <path d="M10.610075,13.4753333 L2.96840833,13.4753333 C2.735075,13.4753333 2.50174167,13.6142222 2.50174167,13.7531111 C2.50174167,13.892 2.735075,14.0308889 2.96840833,14.0308889 L10.610075,14.0308889 C10.842825,14.0308889 11.0767417,13.892 11.0767417,13.7531111 C11.0767417,13.5795 10.842825,13.4753333 10.610075,13.4753333" id="Fill-5"></path>
+                <path d="M10.610075,15.8087778 L2.96840833,15.8087778 C2.735075,15.8087778 2.50174167,15.9476667 2.50174167,16.0865556 C2.50174167,16.2254444 2.735075,16.3643333 2.96840833,16.3643333 L10.610075,16.3643333 C10.842825,16.3643333 11.0767417,16.2254444 11.0767417,16.0865556 C11.0767417,15.9476667 10.842825,15.8087778 10.610075,15.8087778" id="Fill-7"></path>
+                <g id="Group-11" transform="translate(0.000000, 0.465500)">
+                    <polygon id="Fill-9" points="12.768525 18.3022778 12.768525 18.3022778 1.22144167 18.3022778 1.22435833 1.25672222 5.63669167 1.25672222 5.63669167 0.0900555556 0.00635833333 0.0900555556 -5.83333333e-05 19.4445 13.993525 19.4445 13.993525 9.34338889 12.768525 9.34338889"></polygon>
+                </g>
+                <path d="M8.84695,1.99805556 C8.84695,1.78138889 9.04761667,1.6375 9.27453333,1.6375 C9.50203333,1.6375 9.67995,1.78138889 9.67995,1.99805556 L9.67995,4.81027778 L11.7245333,3.94527778 C11.95145,3.87305556 12.17895,3.94527778 12.2547833,4.16138889 C12.3306167,4.37805556 12.2547833,4.59416667 12.0272833,4.66638889 L9.3772,5.74805556 L9.22553333,5.74805556 C9.15028333,5.74805556 9.07445,5.74805556 8.99861667,5.67583333 C8.92278333,5.60416667 8.84695,5.45972222 8.84695,5.3875 L8.84695,1.99805556 Z M9.45303333,9.20972222 C11.95145,9.20972222 13.9960333,7.2625 13.9960333,4.8825 C13.9960333,2.50305556 11.95145,0.555833333 9.45303333,0.555833333 C6.95403333,0.555833333 4.90945,2.50305556 4.90945,4.8825 C4.90945,7.2625 6.95403333,9.20972222 9.45303333,9.20972222 L9.45303333,9.20972222 Z" id="Fill-12"></path>
+            </g>
+        </g>
+    </g>
+</svg>