diff --git a/front/src/css/dashboard.css b/front/src/css/dashboard.css
index 26246cf..78313eb 100644
--- a/front/src/css/dashboard.css
+++ b/front/src/css/dashboard.css
@@ -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;
diff --git a/front/src/css/main.css b/front/src/css/main.css
index 95fd3ba..d45ff6e 100644
--- a/front/src/css/main.css
+++ b/front/src/css/main.css
@@ -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;
}
diff --git a/front/src/css/rule.css b/front/src/css/rule.css
index 97e5bec..24e789e 100644
--- a/front/src/css/rule.css
+++ b/front/src/css/rule.css
@@ -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;
}
diff --git a/front/src/css/screenshot.css b/front/src/css/screenshot.css
index 505d893..0df36d4 100644
--- a/front/src/css/screenshot.css
+++ b/front/src/css/screenshot.css
@@ -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;
+ }
+}
diff --git a/front/src/less/dashboard.less b/front/src/less/dashboard.less
index ce5fdd9..9f2ca51 100644
--- a/front/src/less/dashboard.less
+++ b/front/src/less/dashboard.less
@@ -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;
}
diff --git a/front/src/less/main.less b/front/src/less/main.less
index 0ea6346..48753a9 100644
--- a/front/src/less/main.less
+++ b/front/src/less/main.less
@@ -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;
}
diff --git a/front/src/less/rule.less b/front/src/less/rule.less
index b5c5827..43cae38 100644
--- a/front/src/less/rule.less
+++ b/front/src/less/rule.less
@@ -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 {
diff --git a/front/src/less/screenshot.less b/front/src/less/screenshot.less
index a214659..5bc58e3 100644
--- a/front/src/less/screenshot.less
+++ b/front/src/less/screenshot.less
@@ -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;
+ }
}
\ No newline at end of file
diff --git a/front/src/main.html b/front/src/main.html
index 8d53753..5959394 100644
--- a/front/src/main.html
+++ b/front/src/main.html
@@ -4,6 +4,7 @@
Yellow Lab Tools
Just to let you know there are some errors on the page.
Please note that some errors only occur in the PhantomJS browser, so you might need to double check on other browsers.
",
+ "message": "Just to let you know there are some errors on the page.
",
"isOkThreshold": 0,
"isBadThreshold": 1,
"isAbnormalThreshold": 4,
@@ -783,7 +783,7 @@ var policies = {
"totalWeight": {
"tool": "redownload",
"label": "Total weight",
- "message": "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.
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.
",
+ "message": "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.
",
"isOkThreshold": 1048576,
"isBadThreshold": 2621440,
"isAbnormalThreshold": 4194304,
@@ -793,7 +793,7 @@ var policies = {
"imageOptimization": {
"tool": "redownload",
"label": "Image optimization",
- "message": "This metric measures the number of bytes that could be saved by optimizing images.
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 Kraken.io or the excellent ImageOptim on Mac. For SVG images, you can use SVGOMG
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!
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.
",
+ "message": "This metric measures the number of bytes that could be saved by optimizing images.
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 Kraken.io or the excellent ImageOptim on Mac. For SVG images, you can use SVGOMG
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!
",
"isOkThreshold": 20480,
"isBadThreshold": 204800,
"isAbnormalThreshold": 307200,