@@ -0,0 +1,257 @@ | |||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?> | |||||
<!-- Created with Inkscape (http://www.inkscape.org/) --> | |||||
<svg | |||||
xmlns:dc="http://purl.org/dc/elements/1.1/" | |||||
xmlns:cc="http://creativecommons.org/ns#" | |||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" | |||||
xmlns:svg="http://www.w3.org/2000/svg" | |||||
xmlns="http://www.w3.org/2000/svg" | |||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" | |||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" | |||||
width="750" | |||||
height="30" | |||||
id="svg4149" | |||||
version="1.1" | |||||
inkscape:version="0.48.3.1 r9886" | |||||
sodipodi:docname="terminal-top.svg"> | |||||
<defs | |||||
id="defs4151"> | |||||
<clipPath | |||||
clipPathUnits="userSpaceOnUse" | |||||
id="clipPath60"> | |||||
<path | |||||
inkscape:connector-curvature="0" | |||||
d="m 186.202,744.209 9.419,0 0,-9.418 -9.419,0 0,9.418 z" | |||||
id="path62" /> | |||||
</clipPath> | |||||
<clipPath | |||||
clipPathUnits="userSpaceOnUse" | |||||
id="clipPath44"> | |||||
<path | |||||
inkscape:connector-curvature="0" | |||||
d="m 170.791,744.209 9.418,0 0,-9.418 -9.418,0 0,9.418 z" | |||||
id="path46" /> | |||||
</clipPath> | |||||
<clipPath | |||||
clipPathUnits="userSpaceOnUse" | |||||
id="clipPath28"> | |||||
<path | |||||
inkscape:connector-curvature="0" | |||||
d="m 155.379,744.209 9.419,0 0,-9.418 -9.419,0 0,9.418 z" | |||||
id="path30" /> | |||||
</clipPath> | |||||
</defs> | |||||
<sodipodi:namedview | |||||
id="base" | |||||
pagecolor="#ffffff" | |||||
bordercolor="#666666" | |||||
borderopacity="1.0" | |||||
inkscape:pageopacity="0.0" | |||||
inkscape:pageshadow="2" | |||||
inkscape:zoom="1.4" | |||||
inkscape:cx="596.66813" | |||||
inkscape:cy="145.67588" | |||||
inkscape:document-units="px" | |||||
inkscape:current-layer="layer1" | |||||
showgrid="false" | |||||
fit-margin-top="0" | |||||
fit-margin-left="0" | |||||
fit-margin-right="0" | |||||
fit-margin-bottom="0" | |||||
borderlayer="true" | |||||
inkscape:showpageshadow="false" | |||||
showborder="true" | |||||
showguides="false" | |||||
inkscape:window-width="1680" | |||||
inkscape:window-height="1023" | |||||
inkscape:window-x="0" | |||||
inkscape:window-y="0" | |||||
inkscape:window-maximized="1"> | |||||
<sodipodi:guide | |||||
position="0,0" | |||||
orientation="0,482.82629" | |||||
id="guide4830" /> | |||||
<sodipodi:guide | |||||
position="482.82629,0" | |||||
orientation="-25.270071,0" | |||||
id="guide4832" /> | |||||
<sodipodi:guide | |||||
position="482.82629,25.270071" | |||||
orientation="0,-482.82629" | |||||
id="guide4834" /> | |||||
<sodipodi:guide | |||||
position="0,25.270071" | |||||
orientation="25.270071,0" | |||||
id="guide4836" /> | |||||
<inkscape:grid | |||||
type="xygrid" | |||||
id="grid4844" | |||||
empspacing="5" | |||||
visible="true" | |||||
enabled="true" | |||||
snapvisiblegridlinesonly="true" /> | |||||
<sodipodi:guide | |||||
position="0,0" | |||||
orientation="0,1000" | |||||
id="guide4884" /> | |||||
<sodipodi:guide | |||||
position="1000,0" | |||||
orientation="-25,0" | |||||
id="guide4886" /> | |||||
<sodipodi:guide | |||||
position="1000,25" | |||||
orientation="0,-1000" | |||||
id="guide4888" /> | |||||
<sodipodi:guide | |||||
position="0,25" | |||||
orientation="25,0" | |||||
id="guide4890" /> | |||||
<sodipodi:guide | |||||
position="0,0" | |||||
orientation="0,750" | |||||
id="guide4892" /> | |||||
<sodipodi:guide | |||||
position="750,0" | |||||
orientation="-25,0" | |||||
id="guide4894" /> | |||||
<sodipodi:guide | |||||
position="750,25" | |||||
orientation="0,-750" | |||||
id="guide4896" /> | |||||
<sodipodi:guide | |||||
position="0,25" | |||||
orientation="25,0" | |||||
id="guide4898" /> | |||||
<sodipodi:guide | |||||
position="0,0" | |||||
orientation="0,750" | |||||
id="guide4999" /> | |||||
<sodipodi:guide | |||||
position="750,0" | |||||
orientation="-30,0" | |||||
id="guide5001" /> | |||||
<sodipodi:guide | |||||
position="750,30" | |||||
orientation="0,-750" | |||||
id="guide5003" /> | |||||
<sodipodi:guide | |||||
position="0,30" | |||||
orientation="30,0" | |||||
id="guide5005" /> | |||||
</sodipodi:namedview> | |||||
<metadata | |||||
id="metadata4154"> | |||||
<rdf:RDF> | |||||
<cc:Work | |||||
rdf:about=""> | |||||
<dc:format>image/svg+xml</dc:format> | |||||
<dc:type | |||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> | |||||
<dc:title></dc:title> | |||||
</cc:Work> | |||||
</rdf:RDF> | |||||
</metadata> | |||||
<g | |||||
inkscape:label="Layer 1" | |||||
inkscape:groupmode="layer" | |||||
id="layer1" | |||||
transform="translate(-93.957497,-365.26607)"> | |||||
<rect | |||||
style="fill:#85b5bb;fill-opacity:1;stroke:none" | |||||
id="rect4487" | |||||
width="750" | |||||
height="29.555786" | |||||
x="93.957497" | |||||
y="365.26608" | |||||
rx="10" /> | |||||
<g | |||||
transform="matrix(1.1097131,0,0,-1.1097131,-61.488805,1196.9771)" | |||||
id="g24" | |||||
style="fill:#ff7050"> | |||||
<g | |||||
id="g26" | |||||
style="fill:#ff7050" /> | |||||
<g | |||||
id="g32" | |||||
style="fill:#ff7050"> | |||||
<g | |||||
clip-path="url(#clipPath28)" | |||||
id="g34" | |||||
style="opacity:0.71000701;fill:#ff7050"> | |||||
<g | |||||
transform="translate(164.7979,739.5)" | |||||
id="g36" | |||||
style="fill:#ff7050"> | |||||
<path | |||||
d="m 0,0 c 0,-2.601 -2.108,-4.709 -4.709,-4.709 -2.601,0 -4.709,2.108 -4.709,4.709 0,2.601 2.108,4.709 4.709,4.709 C -2.108,4.709 0,2.601 0,0" | |||||
style="fill:#ff7050;fill-opacity:1;fill-rule:nonzero;stroke:none" | |||||
id="path38" | |||||
inkscape:connector-curvature="0" /> | |||||
</g> | |||||
</g> | |||||
</g> | |||||
</g> | |||||
<g | |||||
transform="matrix(1.1097131,0,0,-1.1097131,-61.488805,1196.9771)" | |||||
id="g40" | |||||
style="fill:#ffed5d"> | |||||
<g | |||||
id="g42" | |||||
style="fill:#ffed5d" /> | |||||
<g | |||||
id="g48" | |||||
style="fill:#ffed5d"> | |||||
<g | |||||
clip-path="url(#clipPath44)" | |||||
id="g50" | |||||
style="opacity:0.71000701;fill:#ffed5d"> | |||||
<g | |||||
transform="translate(180.209,739.5)" | |||||
id="g52" | |||||
style="fill:#ffed5d"> | |||||
<path | |||||
d="m 0,0 c 0,-2.601 -2.108,-4.709 -4.709,-4.709 -2.601,0 -4.709,2.108 -4.709,4.709 0,2.601 2.108,4.709 4.709,4.709 C -2.108,4.709 0,2.601 0,0" | |||||
style="fill:#ffed5d;fill-opacity:1;fill-rule:nonzero;stroke:none" | |||||
id="path54" | |||||
inkscape:connector-curvature="0" /> | |||||
</g> | |||||
</g> | |||||
</g> | |||||
</g> | |||||
<g | |||||
transform="matrix(1.1097131,0,0,-1.1097131,-61.837185,1196.9771)" | |||||
id="g56" | |||||
style="fill:#93de7f"> | |||||
<g | |||||
id="g58" | |||||
style="fill:#93de7f" /> | |||||
<g | |||||
id="g64" | |||||
style="fill:#93de7f"> | |||||
<g | |||||
clip-path="url(#clipPath60)" | |||||
id="g66" | |||||
style="opacity:0.71000701;fill:#93de7f"> | |||||
<g | |||||
transform="translate(195.6206,739.5)" | |||||
id="g68" | |||||
style="fill:#93de7f"> | |||||
<path | |||||
d="m 0,0 c 0,-2.601 -2.108,-4.709 -4.709,-4.709 -2.601,0 -4.709,2.108 -4.709,4.709 0,2.601 2.108,4.709 4.709,4.709 C -2.108,4.709 0,2.601 0,0" | |||||
style="fill:#93de7f;fill-opacity:1;fill-rule:nonzero;stroke:none" | |||||
id="path70" | |||||
inkscape:connector-curvature="0" /> | |||||
</g> | |||||
</g> | |||||
</g> | |||||
</g> | |||||
<rect | |||||
style="fill:#36535a;fill-opacity:1;stroke:none" | |||||
id="rect4838" | |||||
width="750" | |||||
height="7.8571429" | |||||
x="93.957497" | |||||
y="387.40894" /> | |||||
</g> | |||||
</svg> |
@@ -7,29 +7,60 @@ | |||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" | xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" | ||||
xmlns:svg="http://www.w3.org/2000/svg" | xmlns:svg="http://www.w3.org/2000/svg" | ||||
xmlns="http://www.w3.org/2000/svg" | xmlns="http://www.w3.org/2000/svg" | ||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" | |||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" | |||||
version="1.2" | version="1.2" | ||||
width="350.00003" | |||||
height="201.67628" | |||||
id="svg3340"> | |||||
width="880.62976" | |||||
height="385.37302" | |||||
id="svg3340" | |||||
inkscape:version="0.48.3.1 r9886" | |||||
sodipodi:docname="terminal.svg"> | |||||
<sodipodi:namedview | |||||
pagecolor="#ffffff" | |||||
bordercolor="#666666" | |||||
borderopacity="1" | |||||
objecttolerance="10" | |||||
gridtolerance="10" | |||||
guidetolerance="10" | |||||
inkscape:pageopacity="0" | |||||
inkscape:pageshadow="2" | |||||
inkscape:window-width="1680" | |||||
inkscape:window-height="1023" | |||||
id="namedview5700" | |||||
showgrid="false" | |||||
fit-margin-top="0" | |||||
fit-margin-left="0" | |||||
fit-margin-right="0" | |||||
fit-margin-bottom="0" | |||||
inkscape:zoom="0.82745079" | |||||
inkscape:cx="303.76759" | |||||
inkscape:cy="201.44631" | |||||
inkscape:window-x="0" | |||||
inkscape:window-y="0" | |||||
inkscape:window-maximized="1" | |||||
inkscape:current-layer="layer1" /> | |||||
<defs | <defs | ||||
id="defs3342"> | id="defs3342"> | ||||
<clipPath | <clipPath | ||||
id="clipPath60"> | id="clipPath60"> | ||||
<path | <path | ||||
d="m 186.202,744.209 9.419,0 0,-9.418 -9.419,0 0,9.418 z" | d="m 186.202,744.209 9.419,0 0,-9.418 -9.419,0 0,9.418 z" | ||||
id="path62" /> | |||||
id="path62" | |||||
inkscape:connector-curvature="0" /> | |||||
</clipPath> | </clipPath> | ||||
<clipPath | <clipPath | ||||
id="clipPath44"> | id="clipPath44"> | ||||
<path | <path | ||||
d="m 170.791,744.209 9.418,0 0,-9.418 -9.418,0 0,9.418 z" | d="m 170.791,744.209 9.418,0 0,-9.418 -9.418,0 0,9.418 z" | ||||
id="path46" /> | |||||
id="path46" | |||||
inkscape:connector-curvature="0" /> | |||||
</clipPath> | </clipPath> | ||||
<clipPath | <clipPath | ||||
id="clipPath28"> | id="clipPath28"> | ||||
<path | <path | ||||
d="m 155.379,744.209 9.419,0 0,-9.418 -9.419,0 0,9.418 z" | d="m 155.379,744.209 9.419,0 0,-9.418 -9.419,0 0,9.418 z" | ||||
id="path30" /> | |||||
id="path30" | |||||
inkscape:connector-curvature="0" /> | |||||
</clipPath> | </clipPath> | ||||
</defs> | </defs> | ||||
<metadata | <metadata | ||||
@@ -40,12 +71,12 @@ | |||||
<dc:format>image/svg+xml</dc:format> | <dc:format>image/svg+xml</dc:format> | ||||
<dc:type | <dc:type | ||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> | rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> | ||||
<dc:title></dc:title> | |||||
<dc:title /> | |||||
</cc:Work> | </cc:Work> | ||||
</rdf:RDF> | </rdf:RDF> | ||||
</metadata> | </metadata> | ||||
<g | <g | ||||
transform="translate(-73.571411,-371.52405)" | |||||
transform="matrix(2.5160848,0,0,2.5160848,-185.11191,-934.78601)" | |||||
id="layer1"> | id="layer1"> | ||||
<rect | <rect | ||||
width="350.00003" | width="350.00003" | ||||
@@ -76,7 +107,8 @@ | |||||
<path | <path | ||||
d="m 0,0 c 0,-2.601 -2.108,-4.709 -4.709,-4.709 -2.601,0 -4.709,2.108 -4.709,4.709 0,2.601 2.108,4.709 4.709,4.709 C -2.108,4.709 0,2.601 0,0" | d="m 0,0 c 0,-2.601 -2.108,-4.709 -4.709,-4.709 -2.601,0 -4.709,2.108 -4.709,4.709 0,2.601 2.108,4.709 4.709,4.709 C -2.108,4.709 0,2.601 0,0" | ||||
id="path38" | id="path38" | ||||
style="fill:#ff7050;fill-opacity:1;fill-rule:nonzero;stroke:none" /> | |||||
style="fill:#ff7050;fill-opacity:1;fill-rule:nonzero;stroke:none" | |||||
inkscape:connector-curvature="0" /> | |||||
</g> | </g> | ||||
</g> | </g> | ||||
</g> | </g> | ||||
@@ -102,7 +134,8 @@ | |||||
<path | <path | ||||
d="m 0,0 c 0,-2.601 -2.108,-4.709 -4.709,-4.709 -2.601,0 -4.709,2.108 -4.709,4.709 0,2.601 2.108,4.709 4.709,4.709 C -2.108,4.709 0,2.601 0,0" | d="m 0,0 c 0,-2.601 -2.108,-4.709 -4.709,-4.709 -2.601,0 -4.709,2.108 -4.709,4.709 0,2.601 2.108,4.709 4.709,4.709 C -2.108,4.709 0,2.601 0,0" | ||||
id="path54" | id="path54" | ||||
style="fill:#ffed5d;fill-opacity:1;fill-rule:nonzero;stroke:none" /> | |||||
style="fill:#ffed5d;fill-opacity:1;fill-rule:nonzero;stroke:none" | |||||
inkscape:connector-curvature="0" /> | |||||
</g> | </g> | ||||
</g> | </g> | ||||
</g> | </g> | ||||
@@ -128,19 +161,29 @@ | |||||
<path | <path | ||||
d="m 0,0 c 0,-2.601 -2.108,-4.709 -4.709,-4.709 -2.601,0 -4.709,2.108 -4.709,4.709 0,2.601 2.108,4.709 4.709,4.709 C -2.108,4.709 0,2.601 0,0" | d="m 0,0 c 0,-2.601 -2.108,-4.709 -4.709,-4.709 -2.601,0 -4.709,2.108 -4.709,4.709 0,2.601 2.108,4.709 4.709,4.709 C -2.108,4.709 0,2.601 0,0" | ||||
id="path70" | id="path70" | ||||
style="fill:#93de7f;fill-opacity:1;fill-rule:nonzero;stroke:none" /> | |||||
style="fill:#93de7f;fill-opacity:1;fill-rule:nonzero;stroke:none" | |||||
inkscape:connector-curvature="0" /> | |||||
</g> | </g> | ||||
</g> | </g> | ||||
</g> | </g> | ||||
</g> | </g> | ||||
<g | <g | ||||
transform="matrix(0.70173695,0,0,-0.36734185,635.66274,570.97167)" | |||||
transform="matrix(0.70173695,0,0,-0.2729595,635.66274,523.03176)" | |||||
id="g76" | id="g76" | ||||
style="fill:#36535a;fill-opacity:1"> | style="fill:#36535a;fill-opacity:1"> | ||||
<path | <path | ||||
d="m -302.23764,0 c 0,-3.351 -1.56167,-6.067 -3.48885,-6.067 l -491.78466,0 C -799.43833,-6.067 -801,-3.351 -801,0 l 0,507.933 498.76236,0 0,-507.933 z" | d="m -302.23764,0 c 0,-3.351 -1.56167,-6.067 -3.48885,-6.067 l -491.78466,0 C -799.43833,-6.067 -801,-3.351 -801,0 l 0,507.933 498.76236,0 0,-507.933 z" | ||||
id="path78" | id="path78" | ||||
style="fill:#36535a;fill-opacity:1;fill-rule:nonzero;stroke:none" /> | |||||
style="fill:#36535a;fill-opacity:1;fill-rule:nonzero;stroke:none" | |||||
inkscape:connector-curvature="0" | |||||
clip-path="none" /> | |||||
</g> | </g> | ||||
</g> | </g> | ||||
<rect | |||||
style="fill:#36535a;fill-opacity:1;stroke:none" | |||||
id="rect5720" | |||||
width="43.507118" | |||||
height="147.4408" | |||||
x="343.22284" | |||||
y="223.42982" /> | |||||
</svg> | </svg> |
@@ -16,8 +16,8 @@ | |||||
<link rel="stylesheet" href="styles/main.css"> | <link rel="stylesheet" href="styles/main.css"> | ||||
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:100,200,300' rel='stylesheet' type='text/css'> | <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:100,200,300' rel='stylesheet' type='text/css'> | ||||
<link href='https://fonts.googleapis.com/css?family=Source+Code+Pro:300,400,600' rel='stylesheet' type='text/css'> | |||||
<link href='https://fonts.googleapis.com/css?family=Source+Code+Pro:400' rel='stylesheet' type='text/css'> | |||||
<link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'> | |||||
<!-- build:js scripts/vendor/modernizr.js --> | <!-- build:js scripts/vendor/modernizr.js --> | ||||
<script src="bower_components/modernizr/modernizr.js"></script> | <script src="bower_components/modernizr/modernizr.js"></script> | ||||
<!-- endbuild --> | <!-- endbuild --> | ||||
@@ -61,39 +61,42 @@ | |||||
<!-- <p class="lead">Share your files using this and drag and rop or click here to upload</p> --> | <!-- <p class="lead">Share your files using this and drag and rop or click here to upload</p> --> | ||||
<div class="row animated fadeInDown"> | <div class="row animated fadeInDown"> | ||||
<div id="from-terminal" class=" box col-md-8 col-md-offset-2 col-xs-12"> | <div id="from-terminal" class=" box col-md-8 col-md-offset-2 col-xs-12"> | ||||
<!-- <div class="terminal-top"></div> --> | |||||
<div id="terminal" class="terminal"> | <div id="terminal" class="terminal"> | ||||
<div class="terminal-top"></div> | |||||
<div class="examples"> | |||||
<code class=""> | |||||
<br>$ curl --upload-file ./hello.txt https://transfer.sh/hello.txt https://transfer.sh/66nb8/hello.txt r | |||||
<br> | |||||
<br>$ transfer hello.txt #################################################### 100.0% https://transfer.sh/eibhM/hello.txt | |||||
<code> | |||||
<span class="code-title"># Upload using cURL</span> | |||||
<br>$ curl --upload-file ./hello.txt https://transfer.sh/hello.txt https://transfer.sh/66nb8/hello.txt <br> | |||||
<br> | <br> | ||||
<br># Upload from web. Drag your files here, or <a class="browse" href="#"> click to browse.</a> | |||||
<span class="code-title"># Create an alias</span> | |||||
<br>$ transfer hello.txt <br>#################################################### 100.0% https://transfer.sh/eibhM/hello.txt | |||||
</code> | </code> | ||||
<div id="web"> | |||||
<input type="file" multiple="multiple" style='display: none;' /> | |||||
<ul class='queue' style='; list-style-type: none; margin: 0;'> | |||||
<li> | |||||
</li> | |||||
</ul> | |||||
<div class='all-files'> | |||||
<h4>Download your files:</h4> | |||||
<a class="download-zip btn-cta" href="#">zip</a> <a class="download-tar btn-cta" href="#">tar.gz</a> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<div id="web"> | |||||
<code> | |||||
<br> | |||||
<span class="code-title"># Upload from web</span> | |||||
<br>Drag your files here, or <a class="browse" href="#"> click to browse.</a> | |||||
</code> | |||||
<input type="file" multiple="multiple" style='display: none;' /> | |||||
<ul class='queue' style='; list-style-type: none; margin: 0;'> | |||||
<li> | |||||
</li> | |||||
</ul> | |||||
<div class='all-files'> | |||||
<h4>Download your files:</h4> | |||||
<a class="download-zip btn-cta" href="#">zip</a> <a class="download-tar btn-cta" href="#">tar.gz</a> | |||||
</div> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
<div> | |||||
<br> | |||||
<a href="#features" class="btn-cta">learn more</i> </a> | |||||
<br> | |||||
<div> | |||||
<a href="#features" class="btn-cta btn-home">learn more</i> </a> | |||||
</div> | </div> | ||||
</div> | |||||
</section> | </section> | ||||
@@ -8,15 +8,16 @@ | |||||
@navbar-default-bg: #fff; | @navbar-default-bg: #fff; | ||||
@link-color: @dark-gray; | |||||
@text-color: @dark-gray; | @text-color: @dark-gray; | ||||
@link-color: @dark-gray; | |||||
@progress-bg: @blue; | @progress-bg: @blue; | ||||
// Typography | // Typography | ||||
@font-family-base: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; | @font-family-base: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; | ||||
@font-family-mono: "Source Code Pro", monospace; | |||||
@font-family-mono: "Droid Sans Mono", monospace; | |||||
@headings-font-family: @font-family-base; | @headings-font-family: @font-family-base; | ||||
@headings-font-weight: 100; | @headings-font-weight: 100; | ||||
@@ -29,4 +30,4 @@ | |||||
// Layout | // Layout | ||||
@grid-gutter-width: 76px; | |||||
@grid-gutter-width: 70px; |
@@ -7,35 +7,42 @@ | |||||
} | } | ||||
#navigation { | #navigation { | ||||
margin-top: 40px; | |||||
ul { | ul { | ||||
list-style: none; | list-style: none; | ||||
max-width: 300px; | |||||
margin: 0 auto; | |||||
} | } | ||||
li { | li { | ||||
display: inline-block; | display: inline-block; | ||||
padding: 0 10px; | |||||
padding: 0 15px; | |||||
} | } | ||||
h1 { | h1 { | ||||
text-align: center; | text-align: center; | ||||
font-family: @font-family-mono; | |||||
font-family: monospace; | |||||
margin-bottom: 15px; | margin-bottom: 15px; | ||||
color: #3b3b3b; | |||||
color: @dark-blue; | |||||
font-weight: 600; | font-weight: 600; | ||||
letter-spacing: -1px; | |||||
font-size: 40px; | |||||
} | } | ||||
@media (min-width: @screen-sm-min) { | @media (min-width: @screen-sm-min) { | ||||
ul { | ul { | ||||
float: right; | float: right; | ||||
margin: 30px 0; | |||||
margin: 33px 0; | |||||
} | } | ||||
h1 { | h1 { | ||||
float: left | float: left | ||||
} | } | ||||
} | } | ||||
a { | a { | ||||
text-decoration: none; | |||||
font-size: 15px; | |||||
color: @dark-gray; | |||||
} | } | ||||
} | } | ||||
h2 { | h2 { | ||||
text-align: center; | text-align: center; | ||||
font-size: 35px; | font-size: 35px; | ||||
@@ -78,11 +85,13 @@ img { | |||||
a { | a { | ||||
text-decoration: underline; | text-decoration: underline; | ||||
color: @dark-blue; | color: @dark-blue; | ||||
&:hover { | |||||
text-decoration: none; | |||||
color: inherit; | |||||
} | |||||
} | } | ||||
a:hover { | |||||
text-decoration: none; | |||||
color: inherit ; | |||||
} | |||||
::selection { | ::selection { | ||||
background: @red; | background: @red; | ||||
@@ -11,24 +11,45 @@ | |||||
margin-bottom: 45px; | margin-bottom: 45px; | ||||
} | } | ||||
} | } | ||||
.btn-home { | |||||
margin: 50px 0 25px 0; | |||||
} | |||||
} | } | ||||
#from-terminal, #from-web { | |||||
h3 { | |||||
font-size: 30px; | |||||
#web, #terminal { | |||||
word-wrap: break-word; | |||||
.code-title { | |||||
color: @red; | |||||
} | |||||
padding: 35px 0 0 10px; | |||||
@media (min-width: @screen-sm-min) { | |||||
padding: 50px 0 0 20px; | |||||
} | } | ||||
code { | |||||
font-family: @font-family-mono; | |||||
} | |||||
font-family: @font-family-mono; | |||||
font-size: 15px; | |||||
text-align: left; | |||||
color: #fff; | |||||
} | } | ||||
#web { | #web { | ||||
margin-top: -2px; | |||||
.border-bottom-radius (10px); | |||||
padding-top: 0; | |||||
padding-bottom: 50px; | |||||
width: 100%; | |||||
display: block; | |||||
background: @dark-blue; | |||||
.transition(all @animation-duration ease); | .transition(all @animation-duration ease); | ||||
i { | |||||
font-size: 100px; | |||||
color: @blue; | |||||
display: block; | |||||
margin-top: -20px; | |||||
} | |||||
.btn-cta { | .btn-cta { | ||||
padding: 5px 10px; | padding: 5px 10px; | ||||
font-size: 14px; | font-size: 14px; | ||||
border-color: #fff; | |||||
} | } | ||||
.click { | .click { | ||||
margin-top: -50px; | margin-top: -50px; | ||||
@@ -44,48 +65,36 @@ | |||||
} | } | ||||
} | } | ||||
#terminal { | #terminal { | ||||
min-height: 150px; | |||||
.border-top-radius (10px); | |||||
// min-height: 150px; | |||||
@media (min-width: @screen-sm-min) { | @media (min-width: @screen-sm-min) { | ||||
min-height: 350px; | |||||
} | |||||
.examples { | |||||
padding: 10px 0px; | |||||
} | |||||
code { | |||||
font-family: @font-family-mono; | |||||
//min-height: 350px; | |||||
} | } | ||||
} | } | ||||
#web .uploading { | #web .uploading { | ||||
i { | |||||
.transition(font @animation-duration ease); | |||||
font-size: 40px; | |||||
} | |||||
p.click { | |||||
font-size: 14px; | |||||
} | |||||
} | } | ||||
.dragged { | .dragged { | ||||
background: @light-gray; | background: @light-gray; | ||||
} | } | ||||
#terminal { | #terminal { | ||||
text-align: left; | |||||
color: #fff; | |||||
background: @dark-blue; | |||||
background: url(../images/terminal.svg); | background: url(../images/terminal.svg); | ||||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||||
background-size: 100% auto; | |||||
font-family: @font-family-mono; | |||||
font-size: 15px; | |||||
@media (min-width: @screen-sm-min) { | |||||
padding: 10px 20px; | |||||
} | |||||
background-size: cover; | |||||
} | } | ||||
.progress { | .progress { | ||||
max-width: 80%; | max-width: 80%; | ||||
margin: 0 auto; | margin: 0 auto; | ||||
} | } | ||||
.all-files { | .all-files { | ||||
display: none; | display: none; | ||||
} | } | ||||
@@ -626,8 +626,8 @@ address { | |||||
.container { | .container { | ||||
margin-right: auto; | margin-right: auto; | ||||
margin-left: auto; | margin-left: auto; | ||||
padding-left: 38px; | |||||
padding-right: 38px; | |||||
padding-left: 35px; | |||||
padding-right: 35px; | |||||
} | } | ||||
.container:before, | .container:before, | ||||
.container:after { | .container:after { | ||||
@@ -647,22 +647,22 @@ address { | |||||
} | } | ||||
@media (min-width: 768px) { | @media (min-width: 768px) { | ||||
.container { | .container { | ||||
width: 796px; | |||||
width: 790px; | |||||
} | } | ||||
} | } | ||||
@media (min-width: 992px) { | @media (min-width: 992px) { | ||||
.container { | .container { | ||||
width: 1016px; | |||||
width: 1010px; | |||||
} | } | ||||
} | } | ||||
@media (min-width: 1200px) { | @media (min-width: 1200px) { | ||||
.container { | .container { | ||||
width: 1216px; | |||||
width: 1210px; | |||||
} | } | ||||
} | } | ||||
.row { | .row { | ||||
margin-left: -38px; | |||||
margin-right: -38px; | |||||
margin-left: -35px; | |||||
margin-right: -35px; | |||||
} | } | ||||
.row:before, | .row:before, | ||||
.row:after { | .row:after { | ||||
@@ -683,8 +683,8 @@ address { | |||||
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { | .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { | ||||
position: relative; | position: relative; | ||||
min-height: 1px; | min-height: 1px; | ||||
padding-left: 38px; | |||||
padding-right: 38px; | |||||
padding-left: 35px; | |||||
padding-right: 35px; | |||||
} | } | ||||
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { | .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { | ||||
float: left; | float: left; | ||||
@@ -5364,30 +5364,40 @@ body { | |||||
color: white; | color: white; | ||||
padding: 0.2em 0; | padding: 0.2em 0; | ||||
} | } | ||||
#navigation { | |||||
margin-top: 40px; | |||||
} | |||||
#navigation ul { | #navigation ul { | ||||
list-style: none; | list-style: none; | ||||
max-width: 300px; | |||||
margin: 0 auto; | |||||
} | } | ||||
#navigation li { | #navigation li { | ||||
display: inline-block; | display: inline-block; | ||||
padding: 0 10px; | |||||
padding: 0 15px; | |||||
} | } | ||||
#navigation h1 { | #navigation h1 { | ||||
text-align: center; | text-align: center; | ||||
font-family: "Source Code Pro", monospace; | |||||
font-family: monospace; | |||||
margin-bottom: 15px; | margin-bottom: 15px; | ||||
color: #3b3b3b; | |||||
color: #36535a; | |||||
font-weight: 600; | font-weight: 600; | ||||
letter-spacing: -1px; | |||||
font-size: 40px; | |||||
} | } | ||||
@media (min-width: 768px) { | @media (min-width: 768px) { | ||||
#navigation ul { | #navigation ul { | ||||
float: right; | float: right; | ||||
margin: 30px 0; | |||||
margin: 33px 0; | |||||
} | } | ||||
#navigation h1 { | #navigation h1 { | ||||
float: left; | float: left; | ||||
} | } | ||||
} | } | ||||
#navigation a { | |||||
text-decoration: none; | |||||
font-size: 15px; | |||||
color: #3b3b3b; | |||||
} | |||||
h2 { | h2 { | ||||
text-align: center; | text-align: center; | ||||
font-size: 35px; | font-size: 35px; | ||||
@@ -5418,8 +5428,8 @@ h2 { | |||||
max-width: 1100px; | max-width: 1100px; | ||||
margin-right: auto; | margin-right: auto; | ||||
margin-left: auto; | margin-left: auto; | ||||
padding-left: 38px; | |||||
padding-right: 38px; | |||||
padding-left: 35px; | |||||
padding-right: 35px; | |||||
} | } | ||||
.wrapper:before, | .wrapper:before, | ||||
.wrapper:after { | .wrapper:after { | ||||
@@ -5439,17 +5449,17 @@ h2 { | |||||
} | } | ||||
@media (min-width: 768px) { | @media (min-width: 768px) { | ||||
.wrapper { | .wrapper { | ||||
width: 796px; | |||||
width: 790px; | |||||
} | } | ||||
} | } | ||||
@media (min-width: 992px) { | @media (min-width: 992px) { | ||||
.wrapper { | .wrapper { | ||||
width: 1016px; | |||||
width: 1010px; | |||||
} | } | ||||
} | } | ||||
@media (min-width: 1200px) { | @media (min-width: 1200px) { | ||||
.wrapper { | .wrapper { | ||||
width: 1216px; | |||||
width: 1210px; | |||||
} | } | ||||
} | } | ||||
img { | img { | ||||
@@ -5462,7 +5472,7 @@ a { | |||||
} | } | ||||
a:hover { | a:hover { | ||||
text-decoration: none; | text-decoration: none; | ||||
color: inherit ; | |||||
color: inherit; | |||||
} | } | ||||
::selection { | ::selection { | ||||
background: #e96e57; | background: #e96e57; | ||||
@@ -5486,23 +5496,48 @@ a:hover { | |||||
margin-bottom: 45px; | margin-bottom: 45px; | ||||
} | } | ||||
} | } | ||||
#from-terminal h3, | |||||
#from-web h3 { | |||||
font-size: 30px; | |||||
#home .btn-home { | |||||
margin: 50px 0 25px 0; | |||||
} | |||||
#web, | |||||
#terminal { | |||||
word-wrap: break-word; | |||||
padding: 35px 0 0 10px; | |||||
font-family: "Droid Sans Mono", monospace; | |||||
font-size: 15px; | |||||
text-align: left; | |||||
color: #fff; | |||||
} | |||||
#web .code-title, | |||||
#terminal .code-title { | |||||
color: #e96e57; | |||||
} | |||||
@media (min-width: 768px) { | |||||
#web, | |||||
#terminal { | |||||
padding: 50px 0 0 20px; | |||||
} | |||||
} | |||||
#web code, | |||||
#terminal code { | |||||
font-family: "Droid Sans Mono", monospace; | |||||
} | } | ||||
#web { | #web { | ||||
margin-top: -2px; | |||||
border-bottom-right-radius: 10px; | |||||
border-bottom-left-radius: 10px; | |||||
padding-top: 0; | |||||
padding-bottom: 50px; | |||||
width: 100%; | |||||
display: block; | |||||
background: #36535a; | |||||
-webkit-transition: all 0.3s ease; | -webkit-transition: all 0.3s ease; | ||||
transition: all 0.3s ease; | transition: all 0.3s ease; | ||||
} | } | ||||
#web i { | |||||
font-size: 100px; | |||||
color: #85b5bb; | |||||
display: block; | |||||
margin-top: -20px; | |||||
} | |||||
#web .btn-cta { | #web .btn-cta { | ||||
padding: 5px 10px; | padding: 5px 10px; | ||||
font-size: 14px; | font-size: 14px; | ||||
border-color: #fff; | |||||
} | } | ||||
#web .click { | #web .click { | ||||
margin-top: -50px; | margin-top: -50px; | ||||
@@ -5517,44 +5552,16 @@ a:hover { | |||||
color: #fff; | color: #fff; | ||||
} | } | ||||
#terminal { | #terminal { | ||||
min-height: 150px; | |||||
} | |||||
@media (min-width: 768px) { | |||||
#terminal { | |||||
min-height: 350px; | |||||
} | |||||
} | |||||
#terminal .examples { | |||||
padding: 10px 0px; | |||||
} | |||||
#terminal code { | |||||
font-family: "Source Code Pro", monospace; | |||||
} | |||||
#web .uploading i { | |||||
-webkit-transition: font 0.3s ease; | |||||
transition: font 0.3s ease; | |||||
font-size: 40px; | |||||
} | |||||
#web .uploading p.click { | |||||
font-size: 14px; | |||||
border-top-right-radius: 10px; | |||||
border-top-left-radius: 10px; | |||||
} | } | ||||
.dragged { | .dragged { | ||||
background: #f6f8f8; | background: #f6f8f8; | ||||
} | } | ||||
#terminal { | #terminal { | ||||
text-align: left; | |||||
color: #fff; | |||||
background: #36535a; | |||||
background: url(../images/terminal.svg); | background: url(../images/terminal.svg); | ||||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||||
background-size: 100% auto; | |||||
font-family: "Source Code Pro", monospace; | |||||
font-size: 15px; | |||||
} | |||||
@media (min-width: 768px) { | |||||
#terminal { | |||||
padding: 10px 20px; | |||||
} | |||||
background-size: cover; | |||||
} | } | ||||
.progress { | .progress { | ||||
max-width: 80%; | max-width: 80%; | ||||
@@ -5594,7 +5601,7 @@ a:hover { | |||||
display: block; | display: block; | ||||
padding: 10px 20px; | padding: 10px 20px; | ||||
background: #36535a; | background: #36535a; | ||||
font-family: "Source Code Pro", monospace; | |||||
font-family: "Droid Sans Mono", monospace; | |||||
font-size: 12px; | font-size: 12px; | ||||
border-radius: 5px; | border-radius: 5px; | ||||
color: #fff; | color: #fff; | ||||