Skip to content

Commit 39fb29a

Browse files
author
mrmrs
committed
Fix layout on mobile views
1 parent 83c4f56 commit 39fb29a

File tree

2 files changed

+85
-81
lines changed

2 files changed

+85
-81
lines changed

‎index.html‎

Lines changed: 44 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
<html lang="en">
33
<head>
44
<title>
5-
TACHYONS - css Toolkit
5+
TACHYONS - Css Toolkit
66
</title>
7-
<meta name="description" content="Simple css">
7+
<meta name="description" content="Build beautiful, responsive, readable interfaces.">
88
<meta charset="utf-8">
99
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
1010
<meta name="author" content="@mrmrs">
@@ -110,7 +110,7 @@ <h1 class="f4 fw6 f1-ns lh-title measure mt0">
110110
<a
111111
class="f6 f5-ns fw6 dib ba b--black-20 bg-blue white ph3 ph4-ns pv2 pv3-ns br2 grow no-underline"
112112
href="https://raw.githubusercontent.com/tachyons-css/tachyons/master/css/tachyons.min.css">
113-
Download <code class="f6 fw4 di">v4.5.3</code>
113+
Download <code class="f6 fw4 di">v4.5.5</code>
114114
</a>
115115
</div>
116116
</div>
@@ -122,9 +122,9 @@ <h1 class="mt0 f5 f3-ns">Getting Started</h1>
122122
<p class="f5 measure lh-copy">
123123
Copy the line of code below and paste it in the head of the html file(s) you want to include tachyons in.
124124
</p>
125-
<pre class="pre black-70" style="overflow: auto"><code class="code f6 dib pa2 bg-black-70 washed-green" style="font-size: 14px;">&lt;link rel="stylesheet" href="https://unpkg.com/tachyons@4.5.3/css/tachyons.min.css"/&gt;</code></pre>
125+
<pre class="pre black-70" style="overflow: auto"><code class="code f6 dib pa2 bg-black-70 washed-green" style="font-size: 14px;">&lt;link rel="stylesheet" href="https://unpkg.com/tachyons@4.5.5/css/tachyons.min.css"/&gt;</code></pre>
126126
<p class="mt4"><b>or</b> install via npm</p>
127-
<pre class="pre black-70" style="overflow: auto"><code class="code f6 dib pa2 bg-black-70 washed-green" style="font-size: 14px;">npm install --save-dev tachyons@4.5.3</code></pre>
127+
<pre class="pre black-70" style="overflow: auto"><code class="code f6 dib pa2 bg-black-70 washed-green" style="font-size: 14px;">npm install --save-dev tachyons@4.5.5</code></pre>
128128
<p class="mt4"><b>or</b> grab all the source files and build+develop locally</p>
129129
<pre class="pre" style="overflow: auto"><code class="code f6 dib pa2 bg-black-70 washed-green" style="font-size: 14px;">git clone git@github.com:tachyons-css/tachyons.git
130130
cd tachyons
@@ -137,6 +137,7 @@ <h3 class="f5 f3-ns mt4 fw6">Prototyping template</h3>
137137
about setting up a dev environment. You can open the file in a web browser and view
138138
your changes.
139139
</p>
140+
<div class="overflow-auto">
140141
<code class="pre f6">
141142
&lt;!DOCTYPE html&gt;
142143
&lt;html lang="en"&gt;
@@ -148,6 +149,7 @@ <h3 class="f5 f3-ns mt4 fw6">Prototyping template</h3>
148149
&lt;/body&gt;
149150
&lt;/html&gt;
150151
</code>
152+
</div>
151153

152154
<section class="bt b--black-10 pv5 mt5 cf">
153155
<div class="fl-l w-100 w-50-l pr4-ns">
@@ -550,115 +552,115 @@ <h3 class="f6 ttu fw6 mt0 bb pb2">Grids</h3>
550552
<div class="mw9 center ph3-ns">
551553
<div class="ph2-ns">
552554
<div class="fl w-100 pa2">
553-
<div class="outline bg-white tc pv4"><code>fl w-100 pa2</code></div>
555+
<div class="outline bg-white tc pv4"><code>fl w-100</code></div>
554556
</div>
555557
<div class="fl w-90 pa2">
556-
<div class="outline bg-white tc pv4"><code>fl w-90 pa2</code></div>
558+
<div class="outline bg-white tc pv4"><code>fl w-90</code></div>
557559
</div>
558560
<div class="fl w-10 pa2">
559-
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
561+
<div class="outline bg-white tc pv4 truncate no-wrap"><code>fl w-10</code></div>
560562
</div>
561563
<div class="fl w-80 pa2">
562-
<div class="outline bg-white tc pv4"><code>fl w-80 pa2</code></div>
564+
<div class="outline bg-white tc pv4"><code>fl w-80</code></div>
563565
</div>
564566
<div class="fl w-20 pa2">
565-
<div class="outline bg-white tc pv4"><code>fl w-20 pa2</code></div>
567+
<div class="outline bg-white tc pv4 truncate no-wrap"><code>fl w-20</code></div>
566568
</div>
567569
<div class="fl w-75 pa2">
568-
<div class="outline bg-white tc pv4"><code>fl w-75 pa2</code></div>
570+
<div class="outline bg-white tc pv4"><code>fl w-75</code></div>
569571
</div>
570572
<div class="fl w-25 pa2">
571-
<div class="outline bg-white tc pv4"><code>fl w-25 pa2</code></div>
573+
<div class="outline bg-white tc pv4 truncate no-wrap"><code>fl w-25</code></div>
572574
</div>
573575
<div class="fl w-70 pa2">
574-
<div class="outline bg-white tc pv4"><code>fl w-70 pa2</code></div>
576+
<div class="outline bg-white tc pv4"><code>fl w-70</code></div>
575577
</div>
576578
<div class="fl w-30 pa2">
577-
<div class="outline bg-white tc pv4"><code>fl w-30 pa2</code></div>
579+
<div class="outline bg-white tc pv4 truncate no-wrap"><code>fl w-30</code></div>
578580
</div>
579581
<div class="fl w-60 pa2">
580-
<div class="outline bg-white tc pv4"><code>fl w-60 pa2</code></div>
582+
<div class="outline bg-white tc pv4"><code>fl w-60</code></div>
581583
</div>
582584
<div class="fl w-40 pa2">
583-
<div class="outline bg-white tc pv4"><code>fl w-40 pa2</code></div>
585+
<div class="outline bg-white tc pv4 truncate no-wrap"><code>fl w-40</code></div>
584586
</div>
585587
<div class="fl w-50 pa2">
586-
<div class="outline bg-white tc pv4"><code>fl w-50 pa2</code></div>
588+
<div class="outline bg-white tc pv4"><code>fl w-50</code></div>
587589
</div>
588590
<div class="fl w-50 pa2">
589-
<div class="outline bg-white tc pv4"><code>fl w-50 pa2</code></div>
591+
<div class="outline bg-white tc pv4"><code>fl w-50</code></div>
590592
</div>
591593
<div class="fl w-third pa2">
592-
<div class="outline bg-white tc pv4"><code>fl w-third pa2</code></div>
594+
<div class="outline bg-white tc pv4"><code>fl w-third</code></div>
593595
</div>
594596
<div class="fl w-third pa2">
595-
<div class="outline bg-white tc pv4"><code>fl w-third pa2</code></div>
597+
<div class="outline bg-white tc pv4"><code>fl w-third</code></div>
596598
</div>
597599
<div class="fl w-third pa2">
598-
<div class="outline bg-white tc pv4"><code>fl w-third pa2</code></div>
600+
<div class="outline bg-white tc pv4"><code>fl w-third</code></div>
599601
</div>
600602
<div class="fl w-third pa2">
601-
<div class="outline bg-white tc pv4"><code>fl w-third pa2</code></div>
603+
<div class="outline bg-white tc pv4 truncate w-100 no-wrap"><code>fl w-third</code></div>
602604
</div>
603605
<div class="fl w-two-thirds pa2">
604-
<div class="outline bg-white tc pv4"><code>fl w-two-third-s pa2</code></div>
606+
<div class="outline bg-white tc pv4 truncate w-100 no-wrap"><code>fl w-two-third-s</code></div>
605607
</div>
606608
<div class="fl w-25 pa2">
607-
<div class="outline bg-white tc pv4"><code>fl w-25 pa2</code></div>
609+
<div class="outline bg-white tc pv4"><code>fl w-25</code></div>
608610
</div>
609611
<div class="fl w-25 pa2">
610-
<div class="outline bg-white tc pv4"><code>fl w-25 pa2</code></div>
612+
<div class="outline bg-white tc pv4"><code>fl w-25 </code></div>
611613
</div>
612614
<div class="fl w-25 pa2">
613-
<div class="outline bg-white tc pv4"><code>fl w-25 pa2</code></div>
615+
<div class="outline bg-white tc pv4"><code>fl w-25 </code></div>
614616
</div>
615617
<div class="fl w-25 pa2">
616-
<div class="outline bg-white tc pv4"><code>fl w-25 pa2</code></div>
618+
<div class="outline bg-white tc pv4"><code>fl w-25 </code></div>
617619
</div>
618620
<div class="fl w-20 pa2">
619-
<div class="outline bg-white tc pv4"><code>fl w-20 pa2</code></div>
621+
<div class="outline bg-white tc pv4"><code>fl w-20 </code></div>
620622
</div>
621623
<div class="fl w-20 pa2">
622-
<div class="outline bg-white tc pv4"><code>fl w-20 pa2</code></div>
624+
<div class="outline bg-white tc pv4"><code>fl w-20 </code></div>
623625
</div>
624626
<div class="fl w-20 pa2">
625-
<div class="outline bg-white tc pv4"><code>fl w-20 pa2</code></div>
627+
<div class="outline bg-white tc pv4"><code>fl w-20 </code></div>
626628
</div>
627629
<div class="fl w-20 pa2">
628-
<div class="outline bg-white tc pv4"><code>fl w-20 pa2</code></div>
630+
<div class="outline bg-white tc pv4"><code>fl w-20 </code></div>
629631
</div>
630632
<div class="fl w-20 pa2">
631-
<div class="outline bg-white tc pv4"><code>fl w-20 pa2</code></div>
633+
<div class="outline bg-white tc pv4"><code>fl w-20 </code></div>
632634
</div>
633635
<div class="fl w-10 pa2">
634-
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
636+
<div class="outline bg-white tc pv4"><code>fl w-10 </code></div>
635637
</div>
636638
<div class="fl w-10 pa2">
637-
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
639+
<div class="outline bg-white tc pv4"><code>fl w-10 </code></div>
638640
</div>
639641
<div class="fl w-10 pa2">
640-
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
642+
<div class="outline bg-white tc pv4"><code>fl w-10 </code></div>
641643
</div>
642644
<div class="fl w-10 pa2">
643-
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
645+
<div class="outline bg-white tc pv4"><code>fl w-10 </code></div>
644646
</div>
645647
<div class="fl w-10 pa2">
646-
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
648+
<div class="outline bg-white tc pv4"><code>fl w-10 </code></div>
647649
</div>
648650
<div class="fl w-10 pa2">
649-
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
651+
<div class="outline bg-white tc pv4"><code>fl w-10 </code></div>
650652
</div>
651653
<div class="fl w-10 pa2">
652-
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
654+
<div class="outline bg-white tc pv4"><code>fl w-10 </code></div>
653655
</div>
654656
<div class="fl w-10 pa2">
655-
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
657+
<div class="outline bg-white tc pv4"><code>fl w-10 </code></div>
656658
</div>
657659
<div class="fl w-10 pa2">
658-
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
660+
<div class="outline bg-white tc pv4"><code>fl w-10 </code></div>
659661
</div>
660662
<div class="fl w-10 pa2">
661-
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
663+
<div class="outline bg-white tc pv4"><code>fl w-10 </code></div>
662664
</div>
663665
</div>
664666
</div>

‎src/templates/index.html‎

Lines changed: 41 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
<html lang="en">
33
<head>
44
<title>
5-
TACHYONS - css Toolkit
5+
TACHYONS - Css Toolkit
66
</title>
7-
<meta name="description" content="Simple css">
7+
<meta name="description" content="Build beautiful, responsive, readable interfaces.">
88
<%= head %>
99
</head>
1010
<body class="w-100 sans-serif">
@@ -94,6 +94,7 @@ <h3 class="f5 f3-ns mt4 fw6">Prototyping template</h3>
9494
about setting up a dev environment. You can open the file in a web browser and view
9595
your changes.
9696
</p>
97+
<div class="overflow-auto">
9798
<code class="pre f6">
9899
&lt;!DOCTYPE html&gt;
99100
&lt;html lang="en"&gt;
@@ -105,6 +106,7 @@ <h3 class="f5 f3-ns mt4 fw6">Prototyping template</h3>
105106
&lt;/body&gt;
106107
&lt;/html&gt;
107108
</code>
109+
</div>
108110

109111
<section class="bt b--black-10 pv5 mt5 cf">
110112
<div class="fl-l w-100 w-50-l pr4-ns">
@@ -507,115 +509,115 @@ <h3 class="f6 ttu fw6 mt0 bb pb2">Grids</h3>
507509
<div class="mw9 center ph3-ns">
508510
<div class="ph2-ns">
509511
<div class="fl w-100 pa2">
510-
<div class="outline bg-white tc pv4"><code>fl w-100 pa2</code></div>
512+
<div class="outline bg-white tc pv4"><code>fl w-100</code></div>
511513
</div>
512514
<div class="fl w-90 pa2">
513-
<div class="outline bg-white tc pv4"><code>fl w-90 pa2</code></div>
515+
<div class="outline bg-white tc pv4"><code>fl w-90</code></div>
514516
</div>
515517
<div class="fl w-10 pa2">
516-
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
518+
<div class="outline bg-white tc pv4 truncate no-wrap"><code>fl w-10</code></div>
517519
</div>
518520
<div class="fl w-80 pa2">
519-
<div class="outline bg-white tc pv4"><code>fl w-80 pa2</code></div>
521+
<div class="outline bg-white tc pv4"><code>fl w-80</code></div>
520522
</div>
521523
<div class="fl w-20 pa2">
522-
<div class="outline bg-white tc pv4"><code>fl w-20 pa2</code></div>
524+
<div class="outline bg-white tc pv4 truncate no-wrap"><code>fl w-20</code></div>
523525
</div>
524526
<div class="fl w-75 pa2">
525-
<div class="outline bg-white tc pv4"><code>fl w-75 pa2</code></div>
527+
<div class="outline bg-white tc pv4"><code>fl w-75</code></div>
526528
</div>
527529
<div class="fl w-25 pa2">
528-
<div class="outline bg-white tc pv4"><code>fl w-25 pa2</code></div>
530+
<div class="outline bg-white tc pv4 truncate no-wrap"><code>fl w-25</code></div>
529531
</div>
530532
<div class="fl w-70 pa2">
531-
<div class="outline bg-white tc pv4"><code>fl w-70 pa2</code></div>
533+
<div class="outline bg-white tc pv4"><code>fl w-70</code></div>
532534
</div>
533535
<div class="fl w-30 pa2">
534-
<div class="outline bg-white tc pv4"><code>fl w-30 pa2</code></div>
536+
<div class="outline bg-white tc pv4 truncate no-wrap"><code>fl w-30</code></div>
535537
</div>
536538
<div class="fl w-60 pa2">
537-
<div class="outline bg-white tc pv4"><code>fl w-60 pa2</code></div>
539+
<div class="outline bg-white tc pv4"><code>fl w-60</code></div>
538540
</div>
539541
<div class="fl w-40 pa2">
540-
<div class="outline bg-white tc pv4"><code>fl w-40 pa2</code></div>
542+
<div class="outline bg-white tc pv4 truncate no-wrap"><code>fl w-40</code></div>
541543
</div>
542544
<div class="fl w-50 pa2">
543-
<div class="outline bg-white tc pv4"><code>fl w-50 pa2</code></div>
545+
<div class="outline bg-white tc pv4"><code>fl w-50</code></div>
544546
</div>
545547
<div class="fl w-50 pa2">
546-
<div class="outline bg-white tc pv4"><code>fl w-50 pa2</code></div>
548+
<div class="outline bg-white tc pv4"><code>fl w-50</code></div>
547549
</div>
548550
<div class="fl w-third pa2">
549-
<div class="outline bg-white tc pv4"><code>fl w-third pa2</code></div>
551+
<div class="outline bg-white tc pv4"><code>fl w-third</code></div>
550552
</div>
551553
<div class="fl w-third pa2">
552-
<div class="outline bg-white tc pv4"><code>fl w-third pa2</code></div>
554+
<div class="outline bg-white tc pv4"><code>fl w-third</code></div>
553555
</div>
554556
<div class="fl w-third pa2">
555-
<div class="outline bg-white tc pv4"><code>fl w-third pa2</code></div>
557+
<div class="outline bg-white tc pv4"><code>fl w-third</code></div>
556558
</div>
557559
<div class="fl w-third pa2">
558-
<div class="outline bg-white tc pv4"><code>fl w-third pa2</code></div>
560+
<div class="outline bg-white tc pv4 truncate w-100 no-wrap"><code>fl w-third</code></div>
559561
</div>
560562
<div class="fl w-two-thirds pa2">
561-
<div class="outline bg-white tc pv4"><code>fl w-two-third-s pa2</code></div>
563+
<div class="outline bg-white tc pv4 truncate w-100 no-wrap"><code>fl w-two-third-s</code></div>
562564
</div>
563565
<div class="fl w-25 pa2">
564-
<div class="outline bg-white tc pv4"><code>fl w-25 pa2</code></div>
566+
<div class="outline bg-white tc pv4"><code>fl w-25</code></div>
565567
</div>
566568
<div class="fl w-25 pa2">
567-
<div class="outline bg-white tc pv4"><code>fl w-25 pa2</code></div>
569+
<div class="outline bg-white tc pv4"><code>fl w-25 </code></div>
568570
</div>
569571
<div class="fl w-25 pa2">
570-
<div class="outline bg-white tc pv4"><code>fl w-25 pa2</code></div>
572+
<div class="outline bg-white tc pv4"><code>fl w-25 </code></div>
571573
</div>
572574
<div class="fl w-25 pa2">
573-
<div class="outline bg-white tc pv4"><code>fl w-25 pa2</code></div>
575+
<div class="outline bg-white tc pv4"><code>fl w-25 </code></div>
574576
</div>
575577
<div class="fl w-20 pa2">
576-
<div class="outline bg-white tc pv4"><code>fl w-20 pa2</code></div>
578+
<div class="outline bg-white tc pv4"><code>fl w-20 </code></div>
577579
</div>
578580
<div class="fl w-20 pa2">
579-
<div class="outline bg-white tc pv4"><code>fl w-20 pa2</code></div>
581+
<div class="outline bg-white tc pv4"><code>fl w-20 </code></div>
580582
</div>
581583
<div class="fl w-20 pa2">
582-
<div class="outline bg-white tc pv4"><code>fl w-20 pa2</code></div>
584+
<div class="outline bg-white tc pv4"><code>fl w-20 </code></div>
583585
</div>
584586
<div class="fl w-20 pa2">
585-
<div class="outline bg-white tc pv4"><code>fl w-20 pa2</code></div>
587+
<div class="outline bg-white tc pv4"><code>fl w-20 </code></div>
586588
</div>
587589
<div class="fl w-20 pa2">
588-
<div class="outline bg-white tc pv4"><code>fl w-20 pa2</code></div>
590+
<div class="outline bg-white tc pv4"><code>fl w-20 </code></div>
589591
</div>
590592
<div class="fl w-10 pa2">
591-
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
593+
<div class="outline bg-white tc pv4"><code>fl w-10 </code></div>
592594
</div>
593595
<div class="fl w-10 pa2">
594-
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
596+
<div class="outline bg-white tc pv4"><code>fl w-10 </code></div>
595597
</div>
596598
<div class="fl w-10 pa2">
597-
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
599+
<div class="outline bg-white tc pv4"><code>fl w-10 </code></div>
598600
</div>
599601
<div class="fl w-10 pa2">
600-
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
602+
<div class="outline bg-white tc pv4"><code>fl w-10 </code></div>
601603
</div>
602604
<div class="fl w-10 pa2">
603-
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
605+
<div class="outline bg-white tc pv4"><code>fl w-10 </code></div>
604606
</div>
605607
<div class="fl w-10 pa2">
606-
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
608+
<div class="outline bg-white tc pv4"><code>fl w-10 </code></div>
607609
</div>
608610
<div class="fl w-10 pa2">
609-
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
611+
<div class="outline bg-white tc pv4"><code>fl w-10 </code></div>
610612
</div>
611613
<div class="fl w-10 pa2">
612-
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
614+
<div class="outline bg-white tc pv4"><code>fl w-10 </code></div>
613615
</div>
614616
<div class="fl w-10 pa2">
615-
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
617+
<div class="outline bg-white tc pv4"><code>fl w-10 </code></div>
616618
</div>
617619
<div class="fl w-10 pa2">
618-
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
620+
<div class="outline bg-white tc pv4"><code>fl w-10 </code></div>
619621
</div>
620622
</div>
621623
</div>

0 commit comments

Comments
 (0)