github/coffeescript
1
1
Fork 0
mirror of https://github.com/jashkenas/coffeescript.git synced 2026-05-03 03:00:14 -04:00
Code Issues Packages Projects Releases Wiki Activity

Improve the documentation site on smaller screens

Browse Source 
"Smaller screens" means screens smaller than 820px wide. That's the smallest
width that the current design looks good at.

I tried to not change the current design in any way and to make as few changes
as possible.

This is what happens on smaller screens:

- The navigation bar is no longer fixed to the viewport, but always at the top
  of the page.
- The navigation bar is vertical rather than horizontal.
- CoffeeScript code is above the compiled JavaScript rather than having them
  side by side.

This allows for a larger text size, which is more compfortable to read, and no
horizontal scrolling, which many find difficult to use.
This commit is contained in:
Simon Lydell
2015-08-30 12:09:02 +02:00
parent ff9d5117f9
commit 874628b1d0
2 changed files with 45 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
documentation/css/docs.css
View File

@@ -9,6 +9,7 @@ body {
width: 950px;
margin: 0;
padding: 80px 0px 50px 50px;
clear: both;
}
p, li {
width: 625px;
@@ -111,9 +112,12 @@ div.code {
float: left;
width: 450px;
background: #fff;
border-left: 1px dotted #d0d0d0;
margin: 10px 0 15px 3px;
padding: 0 0 0 12px;
border: 1px dotted #d0d0d0;
border-top-width: 0;
border-bottom-width: 0;
border-right-width: 0;
margin: 0 3px 15px 3px;
padding: 10px 0 0 12px;
}
div.code pre:first-child {
border-left: 0;
@@ -134,7 +138,6 @@ div.code {
height: 50px;
min-width: 490px;
left: 40px; right: 40px; top: 25px;
padding-left: 252px;
background: #eee;
background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#dadada));
background: -moz-linear-gradient(top, #f8f8f8, #dadada);
@@ -149,8 +152,9 @@ div.code {
#logo {
display: block;
outline: none;
position: absolute;
top: 0px; left: 10px;
float: left;
width: 242px;
margin-left: 10px;
}
#logo img {
margin: 5px 0 0 3px;
@@ -221,6 +225,7 @@ div.code {
display: block;
}
.navigation .contents.menu {
z-index: 100;
border-top: 0;
-webkit-border-top-left-radius: 0; -moz-border-radius-topleft: 0; border-top-left-radius: 0;
-webkit-border-top-right-radius: 0; -moz-border-radius-topright: 0; border-top-right-radius: 0;
@@ -377,3 +382,36 @@ div.code {
cursor: not-allowed;
}
@media (max-width: 820px) {
.container {
width: auto;
padding: 1em;
}
p, li, table {
width: auto;
}
#fadeout {
display: none;
}
#flybar {
position: static;
height: auto;
min-width: 245px;
}
#logo {
float: none;
}
.navigation {
float: none;
border: none;
}
div.code pre, div.code textarea {
border-left: none;
border-top-width: 1px;
width: auto;
float: none;
}
div.code pre:first-child {
border-top: none;
}
}

1
documentation/index.html.js
View File

@@ -3,6 +3,7 @@
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>CoffeeScript</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="canonical" href="http://coffeescript.org" />
<link rel="stylesheet" type="text/css" href="documentation/css/docs.css" />
<link rel="stylesheet" type="text/css" href="documentation/css/tomorrow.css" />