Responsive design for mobile (finally)
This commit is contained in:
Gaël Métais
+81
-29
@@ -5,15 +5,8 @@
|
||||
text-align: center;
|
||||
}
|
||||
.summary .globalScore {
|
||||
display: table;
|
||||
width: 60%;
|
||||
margin: 3em auto;
|
||||
}
|
||||
.summary .globalScore > div {
|
||||
display: table-cell;
|
||||
width: 50%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.summary .globalScore .globalGrade {
|
||||
margin: 0.5 auto;
|
||||
width: 2.5em;
|
||||
@@ -21,12 +14,10 @@
|
||||
line-height: 2.5em;
|
||||
border-radius: 0.5em;
|
||||
font-size: 3em;
|
||||
font-weight: bold;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.summary .globalScore .on100 {
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
margin: 0.5em 0 1em;
|
||||
}
|
||||
.summary .globalScore .screenshotWrapper:hover {
|
||||
@@ -54,28 +45,63 @@
|
||||
top: 1.5em;
|
||||
left: 0.9em;
|
||||
}
|
||||
@media (min-width: 820px) {
|
||||
.summary .globalScore {
|
||||
width: 65%;
|
||||
display: table;
|
||||
}
|
||||
.summary .globalScore > div {
|
||||
display: table-cell;
|
||||
width: 50%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
.summary .notations {
|
||||
width: 100%;
|
||||
display: table;
|
||||
width: 80%;
|
||||
margin: 0 10% 1.5em;
|
||||
border-spacing: 1em;
|
||||
margin: 0 0 1.5em;
|
||||
border-spacing: 0 1em;
|
||||
}
|
||||
@media (min-width: 820px) {
|
||||
.summary .notations {
|
||||
width: 80%;
|
||||
margin: 0 10% 1.5em;
|
||||
border-spacing: 1em;
|
||||
}
|
||||
}
|
||||
.summary .notations > div {
|
||||
display: table-row;
|
||||
}
|
||||
.summary .notations > div > div {
|
||||
display: table-cell;
|
||||
height: 2.5em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
@media (min-width: 820px) {
|
||||
.summary .notations > div > div {
|
||||
display: table-cell;
|
||||
height: 2.5em;
|
||||
}
|
||||
}
|
||||
.summary .notations .category {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
width: 20%;
|
||||
width: 50%;
|
||||
float: left;
|
||||
text-align: left;
|
||||
margin: 1em 0.25em;
|
||||
}
|
||||
@media (min-width: 820px) {
|
||||
.summary .notations .category {
|
||||
width: 20%;
|
||||
text-align: center;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
.summary .notations .criteria {
|
||||
font-weight: normal;
|
||||
width: 75%;
|
||||
}
|
||||
@media (min-width: 820px) {
|
||||
.summary .notations .criteria {
|
||||
width: 75%;
|
||||
}
|
||||
}
|
||||
.summary .notations .A.categoryScore,
|
||||
.summary .notations .B.categoryScore,
|
||||
@@ -87,10 +113,23 @@
|
||||
width: 2.5em;
|
||||
max-width: 2.5em;
|
||||
min-width: 2.5em;
|
||||
font-size: 2em;
|
||||
margin: 0.2em;
|
||||
font-size: 1.5em;
|
||||
text-align: center;
|
||||
border-radius: 0.5em;
|
||||
font-weight: bold;
|
||||
float: right;
|
||||
}
|
||||
@media (min-width: 820px) {
|
||||
.summary .notations .A.categoryScore,
|
||||
.summary .notations .B.categoryScore,
|
||||
.summary .notations .C.categoryScore,
|
||||
.summary .notations .D.categoryScore,
|
||||
.summary .notations .E.categoryScore,
|
||||
.summary .notations .F.categoryScore,
|
||||
.summary .notations .NA.categoryScore {
|
||||
float: none;
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
.summary .notations .grade .A,
|
||||
.summary .notations .grade .B,
|
||||
@@ -134,7 +173,6 @@
|
||||
}
|
||||
.summary .notations .criteria .result {
|
||||
width: 18%;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
@@ -148,12 +186,18 @@
|
||||
margin: -2px 0;
|
||||
}
|
||||
.summary .notations .criteria .info {
|
||||
width: 2%;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
background: #FFF;
|
||||
padding-left: 0.1em;
|
||||
padding-right: 0.1em;
|
||||
display: none;
|
||||
}
|
||||
@media (min-width: 820px) {
|
||||
.summary .notations .criteria .info {
|
||||
display: table-cell;
|
||||
width: 2%;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
background: #FFF;
|
||||
padding-left: 0.1em;
|
||||
padding-right: 0.1em;
|
||||
}
|
||||
}
|
||||
.summary .notations .criteria .info svg {
|
||||
fill: transparent;
|
||||
@@ -161,8 +205,16 @@
|
||||
.summary .fromShare {
|
||||
margin-bottom: 3em;
|
||||
}
|
||||
.summary .tweet {
|
||||
display: none;
|
||||
}
|
||||
@media (min-width: 820px) {
|
||||
.summary .tweet {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.summary .tweet .tweetText {
|
||||
color: #413;
|
||||
color: #212240;
|
||||
background: #F2F2F2;
|
||||
border: none;
|
||||
width: 25em;
|
||||
@@ -172,7 +224,7 @@
|
||||
}
|
||||
.summary .tweet .tweetButton,
|
||||
.summary .tweet .linkedinButton {
|
||||
color: #413;
|
||||
color: #212240;
|
||||
background: #F2F2F2;
|
||||
margin-right: 0;
|
||||
}
|
||||
@@ -187,7 +239,7 @@
|
||||
.summary .sponsor {
|
||||
font-size: 0.9em;
|
||||
margin-bottom: 4em;
|
||||
color: #413;
|
||||
color: #ffa319;
|
||||
}
|
||||
.summary .sponsor a {
|
||||
color: inherit;
|
||||
|
||||
+17
-5
@@ -1,5 +1,10 @@
|
||||
html {
|
||||
margin: 100px 50px;
|
||||
margin: 35px 5px;
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
html {
|
||||
margin: 100px 50px;
|
||||
}
|
||||
}
|
||||
body {
|
||||
margin: 0 auto;
|
||||
@@ -27,16 +32,23 @@ h1 {
|
||||
margin-top: 2em;
|
||||
}
|
||||
.resultsMenu .menuItem {
|
||||
font-size: 0.8em;
|
||||
display: inline-block;
|
||||
margin: 1em;
|
||||
width: 8em;
|
||||
width: 7em;
|
||||
height: 7em;
|
||||
color: #fff;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 0.5em;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.resultsMenu .menuItem {
|
||||
font-size: 1em;
|
||||
margin: 1em;
|
||||
width: 8em;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
}
|
||||
.resultsMenu .menuItem svg {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
+23
-14
@@ -2,7 +2,6 @@
|
||||
text-align: center;
|
||||
}
|
||||
.rule .ruleTable {
|
||||
display: table;
|
||||
border-spacing: 1em;
|
||||
width: 90%;
|
||||
margin: 2em auto;
|
||||
@@ -10,16 +9,20 @@
|
||||
border: 1px dashed #666;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
.rule .ruleTable > div {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.rule .ruleTable .left {
|
||||
width: 33%;
|
||||
font-weight: bold;
|
||||
}
|
||||
.rule .ruleTable .right {
|
||||
width: 67%;
|
||||
@media (min-width: 820px) {
|
||||
.rule .ruleTable {
|
||||
display: table;
|
||||
}
|
||||
.rule .ruleTable > div {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.rule .ruleTable .left {
|
||||
width: 33%;
|
||||
}
|
||||
.rule .ruleTable .right {
|
||||
width: 67%;
|
||||
}
|
||||
}
|
||||
.rule .score {
|
||||
font-size: 2.5em;
|
||||
@@ -27,7 +30,7 @@
|
||||
height: 2em;
|
||||
width: 2em;
|
||||
border-radius: 0.5em;
|
||||
margin: 0 auto 0.5em;
|
||||
margin: 0 auto 0.25em;
|
||||
}
|
||||
.rule h3 {
|
||||
margin-bottom: 0em;
|
||||
@@ -67,7 +70,13 @@
|
||||
border-spacing: 0 0.25em;
|
||||
margin: 0 auto;
|
||||
min-width: 10%;
|
||||
max-width: 90%;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
@media (min-width: 820px) {
|
||||
.rule .offendersTable {
|
||||
max-width: 90%;
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
.rule .offendersTable > div {
|
||||
display: table-row;
|
||||
@@ -75,7 +84,7 @@
|
||||
.rule .offendersTable > div > div {
|
||||
display: table-cell;
|
||||
background: #f2f2f2;
|
||||
padding: 0 1em;
|
||||
padding: 0 0.25em;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
@@ -2,6 +2,16 @@
|
||||
text-align: center;
|
||||
}
|
||||
.screenshot .screenshotWrapper {
|
||||
font-size: 2.08333333em;
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
@media (min-width: 420px) {
|
||||
.screenshot .screenshotWrapper {
|
||||
font-size: 1.6em;
|
||||
}
|
||||
}
|
||||
@media (min-width: 640px) {
|
||||
.screenshot .screenshotWrapper {
|
||||
font-size: 2.08333333em;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,16 +7,8 @@
|
||||
}
|
||||
|
||||
.summary .globalScore {
|
||||
display: table;
|
||||
width: 60%;
|
||||
margin: 3em auto;
|
||||
|
||||
> div {
|
||||
display: table-cell;
|
||||
width: 50%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.globalGrade {
|
||||
margin: 0.5 auto;
|
||||
width: 2.5em;
|
||||
@@ -24,12 +16,10 @@
|
||||
line-height: 2.5em;
|
||||
border-radius: 0.5em;
|
||||
font-size: 3em;
|
||||
font-weight: bold;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.on100 {
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
margin: 0.5em 0 1em;
|
||||
}
|
||||
|
||||
@@ -61,40 +51,77 @@
|
||||
top: 1.5em;
|
||||
left: 0.9em;
|
||||
}
|
||||
|
||||
@media (min-width: 820px) {
|
||||
width: 65%;
|
||||
display: table;
|
||||
|
||||
> div {
|
||||
display: table-cell;
|
||||
width: 50%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.summary .notations {
|
||||
width: 100%;
|
||||
display: table;
|
||||
width: 80%;
|
||||
margin: 0 10% 1.5em;
|
||||
border-spacing: 1em;
|
||||
margin: 0 0 1.5em;
|
||||
border-spacing: 0 1em;
|
||||
|
||||
@media (min-width: 820px) {
|
||||
width: 80%;
|
||||
margin: 0 10% 1.5em;
|
||||
border-spacing: 1em;
|
||||
}
|
||||
}
|
||||
.summary .notations > div {
|
||||
display: table-row;
|
||||
}
|
||||
.summary .notations > div > div {
|
||||
display: table-cell;
|
||||
height: 2.5em;
|
||||
vertical-align: middle;
|
||||
|
||||
@media (min-width: 820px) {
|
||||
display: table-cell;
|
||||
height: 2.5em;
|
||||
}
|
||||
}
|
||||
.summary .notations .category {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
width: 20%;
|
||||
width: 50%;
|
||||
float: left;
|
||||
text-align: left;
|
||||
margin: 1em 0.25em;
|
||||
|
||||
@media (min-width: 820px) {
|
||||
width: 20%;
|
||||
text-align: center;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
.summary .notations .criteria {
|
||||
font-weight: normal;
|
||||
width: 75%;
|
||||
|
||||
@media (min-width: 820px) {
|
||||
width: 75%;
|
||||
}
|
||||
}
|
||||
.A, .B, .C, .D, .E, .F, .NA {
|
||||
.summary .notations &.categoryScore {
|
||||
width: 2.5em;
|
||||
max-width: 2.5em;
|
||||
min-width: 2.5em;
|
||||
font-size: 2em;
|
||||
margin: 0.2em;
|
||||
font-size: 1.5em;
|
||||
text-align: center;
|
||||
border-radius: 0.5em;
|
||||
font-weight: bold;
|
||||
float: right;
|
||||
|
||||
@media (min-width: 820px) {
|
||||
float: none;
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
.summary .notations .grade & {
|
||||
width: 1em;
|
||||
@@ -134,7 +161,6 @@
|
||||
}
|
||||
.summary .notations .criteria .result {
|
||||
width: 18%;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
@@ -147,12 +173,17 @@
|
||||
margin: -2px 0;
|
||||
}
|
||||
.summary .notations .criteria .info {
|
||||
width: 2%;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
background: #FFF;
|
||||
padding-left: 0.1em;
|
||||
padding-right: 0.1em;
|
||||
display: none;
|
||||
|
||||
@media (min-width: 820px) {
|
||||
display: table-cell;
|
||||
width: 2%;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
background: #FFF;
|
||||
padding-left: 0.1em;
|
||||
padding-right: 0.1em;
|
||||
}
|
||||
}
|
||||
.summary .notations .criteria .info svg {
|
||||
fill: transparent;
|
||||
@@ -163,8 +194,13 @@
|
||||
}
|
||||
|
||||
.summary .tweet {
|
||||
display: none;
|
||||
@media (min-width: 820px) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tweetText {
|
||||
color: #413;
|
||||
color: #212240;
|
||||
background: #F2F2F2;
|
||||
border: none;
|
||||
width: 25em;
|
||||
@@ -173,7 +209,7 @@
|
||||
box-shadow: 0.05em 0.1em 0 0 #999;
|
||||
}
|
||||
.tweetButton, .linkedinButton {
|
||||
color: #413;
|
||||
color: #212240;
|
||||
background: #F2F2F2;
|
||||
margin-right: 0;
|
||||
&:hover {
|
||||
@@ -189,7 +225,7 @@
|
||||
.summary .sponsor {
|
||||
font-size: 0.9em;
|
||||
margin-bottom: 4em;
|
||||
color: #413;
|
||||
color: #ffa319;
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
html {
|
||||
margin: 100px 50px;
|
||||
margin: 35px 5px;
|
||||
@media (min-width: 640px) {
|
||||
margin: 100px 50px;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -27,16 +30,22 @@ h1 {
|
||||
margin-top: 2em;
|
||||
}
|
||||
.resultsMenu .menuItem {
|
||||
font-size: 0.8em;
|
||||
display: inline-block;
|
||||
margin: 1em;
|
||||
width: 8em;
|
||||
width: 7em;
|
||||
height: 7em;
|
||||
color: #fff;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 0.5em;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
|
||||
@media (min-width: 640px) {
|
||||
font-size: 1em;
|
||||
margin: 1em;
|
||||
width: 8em;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
+24
-14
@@ -3,23 +3,27 @@
|
||||
}
|
||||
|
||||
.rule .ruleTable {
|
||||
display: table;
|
||||
border-spacing: 1em;
|
||||
width: 90%;
|
||||
margin: 2em auto;
|
||||
background: #f2f2f2;
|
||||
border: 1px dashed #666;
|
||||
border-radius: 0.5em;
|
||||
> div {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.left {
|
||||
width: 33%;
|
||||
font-weight: bold;
|
||||
}
|
||||
.right {
|
||||
width: 67%;
|
||||
|
||||
@media (min-width: 820px) {
|
||||
display: table;
|
||||
|
||||
> div {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.left {
|
||||
width: 33%;
|
||||
}
|
||||
.right {
|
||||
width: 67%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -29,7 +33,7 @@
|
||||
height: 2em;
|
||||
width: 2em;
|
||||
border-radius: 0.5em;
|
||||
margin: 0 auto 0.5em;
|
||||
margin: 0 auto 0.25em;
|
||||
}
|
||||
|
||||
.rule h3 {
|
||||
@@ -75,13 +79,19 @@
|
||||
border-spacing: 0 0.25em;
|
||||
margin: 0 auto;
|
||||
min-width: 10%;
|
||||
max-width: 90%;
|
||||
font-size: 0.875em;
|
||||
|
||||
@media (min-width: 820px) {
|
||||
max-width: 90%;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
> div {
|
||||
display: table-row;
|
||||
> div {
|
||||
display: table-cell;
|
||||
background: #f2f2f2;
|
||||
padding: 0 1em;
|
||||
padding: 0 0.25em;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
&:hover {
|
||||
|
||||
@@ -3,6 +3,14 @@
|
||||
}
|
||||
|
||||
.screenshot .screenshotWrapper {
|
||||
font-size: 2.08333333333333em;
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
@media (min-width: 420px) {
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
font-size: 2.08333333333333em;
|
||||
}
|
||||
}
|
||||
@@ -4,6 +4,7 @@
|
||||
<title>Yellow Lab Tools</title>
|
||||
<base href="<%= baseUrl %>">
|
||||
<link rel="icon" type="image/png" href="img/favicon.png">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<meta property="og:image" content="img/logo-large.png" />
|
||||
<meta name="description" content="Free online web performance tool. Audit your webpage for performance and front-end quality issues. And it's open-source!" />
|
||||
|
||||
|
||||
@@ -112,7 +112,7 @@ var policies = {
|
||||
"jsErrors": {
|
||||
"tool": "phantomas",
|
||||
"label": "JavaScript errors",
|
||||
"message": "<p>Just to let you know there are some errors on the page.</p><p><b>Please note that some errors only occur in the PhantomJS browser, so you might need to double check on other browsers.</b></p>",
|
||||
"message": "<p>Just to let you know there are some errors on the page.</p>",
|
||||
"isOkThreshold": 0,
|
||||
"isBadThreshold": 1,
|
||||
"isAbnormalThreshold": 4,
|
||||
@@ -783,7 +783,7 @@ var policies = {
|
||||
"totalWeight": {
|
||||
"tool": "redownload",
|
||||
"label": "Total weight",
|
||||
"message": "<p>The weight is of course very important if you want the page to load fast. Try to stay under 1MB, which is already very long to download over a slow connection.</p><p>Please note that Yellow Lab Tools' engine (PhantomJS) is not compatible with image srcset (unless you use a polyfill). This can lead to incorrect page weight.</p>",
|
||||
"message": "<p>The weight is of course very important if you want the page to load fast. Try to stay under 1MB, which is already very long to download over a slow connection.</p>",
|
||||
"isOkThreshold": 1048576,
|
||||
"isBadThreshold": 2621440,
|
||||
"isAbnormalThreshold": 4194304,
|
||||
@@ -793,7 +793,7 @@ var policies = {
|
||||
"imageOptimization": {
|
||||
"tool": "redownload",
|
||||
"label": "Image optimization",
|
||||
"message": "<p>This metric measures the number of bytes that could be saved by optimizing images.</p><p>Image optimization is generally one of the easiest way to reduce a page weight, and as a result, the page load time. Don't use Photoshop or other image editing tools, they're not very good for optimization. Use specialized tools such as <a href=\"https://kraken.io/\" target=\"_blank\">Kraken.io</a> or the excellent <a href=\"https://imageoptim.com/\" target=\"_blank\">ImageOptim</a> on Mac. For SVG images, you can use <a href=\"https://jakearchibald.github.io/svgomg/\" target=\"_blank\">SVGOMG</a></p><p>The tools in use in YellowLabTools are not set to their maximum optimization power (JPEG quality 85), so you might be able to compress even more!</p><p>Please note that Yellow Lab Tools' engine (PhantomJS) is not compatible with image srcset (unless you use a polyfill). This can lead to incorrect page weight.</p>",
|
||||
"message": "<p>This metric measures the number of bytes that could be saved by optimizing images.</p><p>Image optimization is generally one of the easiest way to reduce a page weight, and as a result, the page load time. Don't use Photoshop or other image editing tools, they're not very good for optimization. Use specialized tools such as <a href=\"https://kraken.io/\" target=\"_blank\">Kraken.io</a> or the excellent <a href=\"https://imageoptim.com/\" target=\"_blank\">ImageOptim</a> on Mac. For SVG images, you can use <a href=\"https://jakearchibald.github.io/svgomg/\" target=\"_blank\">SVGOMG</a></p><p>The tools in use in YellowLabTools are not set to their maximum optimization power (JPEG quality 85), so you might be able to compress even more!</p>",
|
||||
"isOkThreshold": 20480,
|
||||
"isBadThreshold": 204800,
|
||||
"isAbnormalThreshold": 307200,
|
||||
|
||||
Reference in New Issue
Block a user