fix tables in mobile

This commit is contained in:
Leo Horie 2017-01-17 22:36:34 -05:00
parent b8e8afffa8
commit 810228c442
7 changed files with 77 additions and 49 deletions

View file

@ -6,18 +6,20 @@ nav a:first-child {border:0;padding-left:0;}
main {margin-bottom:100px;}
main section {margin-left:270px;}
h1 {font-size:24px;margin:0 0 15px;}
h2 {font-size:22px;margin:30px 0 15px;}
h3 {font-size:20px;margin:30px 0 15px;}
h4 {font-size:18px;margin:15px 0 15px;}
h2 {font-size:22px;margin:45px 0 15px;}
h3 {font-size:20px;margin:45px 0 15px;}
h4 {font-size:18px;margin:30px 0 15px;}
h5 {font-weight:bold;margin:15px 0 15px;}
h1 small {font-size:16px;}
p {margin:0 0 15px;}
pre,code {background:#eee;font-family:monospace;}
pre {border-left:3px solid #1e5799;overflow:auto;padding:10px 20px;}
code {border:1px solid #ddd;display:inline-block;margin:0 0 1px;padding:3px;white-space:pre;}
pre code {border:0;margin:0;padding:0;}
table {border-collapse:collapse;width:100%;}
table {border-collapse:collapse;margin:0 0 30px;width:100%;}
tbody tr:nth-child(odd) {background:#fafafa;}
thead tr,tbody tr:nth-child(even) {background:#f3f3f3;}
tr {border-bottom:1px solid #eee;}
th {text-align:left;}
th,td {padding:3px 10px;vertical-align:top;}
a {color:#1e5799;display:inline-block;text-decoration:none;}
@ -39,12 +41,24 @@ h1 + ul strong + ul {border-left:3px solid #1e5799;}
header section,h1 + ul {margin:0 0 20px;position:static;width:auto;}
}
@media (max-width: 1024px) {
#signature + p + table,#signature + p + table tbody,#signature + p + table tr,#signature + p + table th,#signature + p + table td {display:block;}
#signature + p + table thead {display:none;}
#signature + p + table td:before {display:inline-block;font-style:italic;padding:0 10px 0 0;width:100px;}
#signature + p + table tr:not(:last-child) td:nth-child(1):before {content:"Argument:";}
#signature + p + table td:nth-child(2):before {content:"Type:";}
#signature + p + table td:nth-child(3):before {content:"Required:";}
#signature + p + table td:nth-child(4):before {content:"Description:";}
#signature + p + table tr:last-child td:nth-child(3) {display:none;}
table,table tbody,table tr,table th,table td {display:block;}
table thead {display:none;}
table td:before {display:inline-block;font-style:italic;font-weight:bold;padding:0 10px 0 0;width:100px;}
table tr:not(:last-child) td:nth-child(1):before {content:"Argument:";}
table tr:last-child td:nth-child(3) {display:none;}
table td:nth-child(2):before {content:"Type:";}
table td:nth-child(3):before {content:"Required:";}
table td:nth-child(4):before {content:"Description:";}
#structure ~ table td:nth-child(1):before {content:"Property:";}
#structure ~ table td:nth-child(2):before {content:"Type:";}
#structure ~ table td:nth-child(3):before {content:"Description:";}
#vnode-types ~ table td:nth-child(1):before {content:"Vnode type:";}
#vnode-types ~ table td:nth-child(2):before {content:"Example:";}
#vnode-types ~ table td:nth-child(3):before {content:"Description:";}
#lifecycle-methods ~ table td:nth-child(1):before {content:"Hook:";}
#lifecycle-methods ~ table td:nth-child(2):before {content:"Description:";}
#react ~ table td:nth-child(1):before {content:"React:";}
#angular ~ table td:nth-child(1):before {content:"Angular:";}
#vue ~ table td:nth-child(1):before {content:"Vue:";}
#comparisons ~ table td:nth-child(2):before {content:"Mithril:";}
}