Skip to contentSkip to conversation

docs/website: cosmetic changes

PATCH Superseded Angelo Compagnucci 3 participants 6 messages Nov 30, 2015

v2 of 3 Superseded Latest is v3 →

lore
Share & tools
lore
#0 lore raw

PATCH v2 1/1 docs/website: cosmetic changes

* Resized too big icons in download and documentation pages

---
Cheangelog:

v1 -> v2:
Rebase to the latest git version

 docs/website/css/main.css  |  15 ++-
 docs/website/docs.html     |  30 ++---
 docs/website/download.html | 330 ++++++++++++++++++++++-----------------------
 3 files changed, 189 insertions(+), 186 deletions(-)
docs/website/css/main.css +10 -5
index db9c4c9..57009cf 100644
@@ -207,16 +207,21 @@ i {
 .flip-container {
 	perspective: 1000;
 }
-	/* flip the pane when hovered */
-	.flip-container:hover .flipper, .flip-container.hover .flipper {
-		transform: rotateY(180deg);
-	}
+/* flip the pane when hovered */
+.flip-container:hover .flipper, .flip-container.hover .flipper {
+	transform: rotateY(180deg);
+}
 
-.flip-container, .front, .back {
+.flip-container, .flip-container .front, .flip-container .back {
 	width: 180px;
 	height: 180px;
 }
 
+.flip-container-small, .flip-container-small .front, .flip-container-small .back {
+	width: 120px;
+	height: 120px;
+}
+
 /* flip speed goes here */
 .flipper {
 	transition: 0.6s;
docs/website/docs.html +15 -15
index 9cee36d..23cc13f 100644
@@ -13,59 +13,59 @@
 
       <div class="row mt centered">
 	<div class="col-sm-4">
-	  <div class="flip-container center-block" ontouchstart="this.classList.toggle('hover');">
+	  <div class="flip-container flip-container-small center-block" ontouchstart="this.classList.toggle('hover');">
 	    <div class="flipper">
 	      <div class="front">
-		<a href="/manual.html"><img src="images/browser.png" width="180" alt=""></a>
+		<a href="/manual.html"><img src="images/browser.png" width="120" alt=""></a>
 	      </div>
 	      <div class="back">
-		<a href="/manual.html"><img src="images/browser.png" width="180" alt=""></a>
+		<a href="/manual.html"><img src="images/browser.png" width="120" alt=""></a>
 	      </div>
 	    </div>
 	  </div>
 
-	  <h3>HTML <br>
+	  <h4>HTML <br>
 	    <a href="/manual.html">Stable</a> |
 	    <a href="http://nightly.buildroot.org/manual.html">Nightly</a>
-	  </h3>
+	  </h4>
 
 	</div>
 
 	<div class="col-sm-4">
-	  <div class="flip-container center-block" ontouchstart="this.classList.toggle('hover');">
+	  <div class="flip-container flip-container-small center-block" ontouchstart="this.classList.toggle('hover');">
 	    <div class="flipper">
 	      <div class="front">
-		<img src="images/pdf-icon.png" width="180" alt="">
+		<img src="images/pdf-icon.png" width="120" alt="">
 	      </div>
 	      <div class="back">
-		<img src="images/pdf-icon.png" width="180" alt="">
+		<img src="images/pdf-icon.png" width="120" alt="">
 	      </div>
 	    </div>
 	  </div>
 
-	  <h3>PDF <br>
+	  <h4>PDF <br>
 	    <a href="/downloads/manual/manual.pdf">Stable</a> |
 	    <a href="http://nightly.buildroot.org/manual.pdf">Nightly</a>
-	  </h3>
+	  </h4>
 
 	</div>
 
 	<div class="col-sm-4">
-	  <div class="flip-container center-block" ontouchstart="this.classList.toggle('hover');">
+	  <div class="flip-container flip-container-small center-block" ontouchstart="this.classList.toggle('hover');">
 	    <div class="flipper">
 	      <div class="front">
-		<img src="images/text.png" width="180" alt="">
+		<img src="images/text.png" width="120" alt="">
 	      </div>
 	      <div class="back">
-		<img src="images/text.png" width="180" alt="">
+		<img src="images/text.png" width="120" alt="">
 	      </div>
 	    </div>
 	  </div>
 
-	  <h3>ASCII <br>
+	  <h4>ASCII <br>
 	    <a href="/downloads/manual/manual.text">Stable</a> |
 	    <a href="http://nightly.buildroot.org/manual.text">Nightly</a>
-	  </h3>
+	  </h4>
 
 	</div>
       </div>
docs/website/download.html +164 -166

340 lines not on this page · raw message

Signature · 1 line
1.9.1
#1 lore raw

PATCH v2 1/1 docs/website: cosmetic changes

Quoted 53 lines
Quoted 1 line
Quoted 1 line
Quoted 1 line
Quoted 1 line

"Angelo" == Angelo Compagnucci <[email protected]> writes:

* Resized too big icons in download and documentation pages

---
Cheangelog:

v1 -> v2:
Rebase to the latest git version

 docs/website/css/main.css  |  15 ++-
 docs/website/docs.html     |  30 ++---
 docs/website/download.html | 330 ++++++++++++++++++++++-----------------------
 3 files changed, 189 insertions(+), 186 deletions(-)
docs/website/css/main.css +10 -5
index db9c4c9..57009cf 100644
@@ -207,16 +207,21 @@ i {
 .flip-container {
 	perspective: 1000;
 }
-	/* flip the pane when hovered */
-	.flip-container:hover .flipper, .flip-container.hover .flipper {
-		transform: rotateY(180deg);
-	}
+/* flip the pane when hovered */
+.flip-container:hover .flipper, .flip-container.hover .flipper {
+	transform: rotateY(180deg);
+}
 
-.flip-container, .front, .back {
+.flip-container, .flip-container .front, .flip-container .back {
 	width: 180px;
 	height: 180px;
 }
 
+.flip-container-small, .flip-container-small .front, .flip-container-small .back {
+	width: 120px;
+	height: 120px;
+}
+
 /* flip speed goes here */
 .flipper {
 	transition: 0.6s;
docs/website/docs.html +0 -0
index 9cee36d..23cc13f 100644

docs/website/docs.html line 19

Quoted 9 lines
docs/website/docs.html +2 -2
@@ -13,59 +13,59 @@
 
       <div class="row mt centered">
 	<div class="col-sm-4">
-	  <div class="flip-container center-block" ontouchstart="this.classList.toggle('hover');">
+	  <div class="flip-container flip-container-small center-block" ontouchstart="this.classList.toggle('hover');">
 	    <div class="flipper">
 	      <div class="front">
-		<a href="/manual.html"><img src="images/browser.png" width="180" alt=""></a>
+		<a href="/manual.html"><img src="images/browser.png" width="120" alt=""></a>

I'm far from a web expert, but why are we telling the browser to downscale these images?

file docs/website/images/browser.png
docs/website/images/browser.png: PNG image data, 256 x 256, 8-bit/color RGBA, non-interlaced

E.G. why don't we send a 180x180 (or 120x120) image in the first place?

Same for the other images.

docs/website/docs.html line 7

Quoted 6 lines
docs/website/docs.html +1 -1
+++ b/docs/website/download.html
@@ -4,176 +4,174 @@
 <div class="row nh">
 <div class="col-lg-10 col-lg-offset-1 col-md-12 col-sm-12 col-xs-12">
 
-  <div class="panel panel-primary">

This diff is not very readable to me. Notice that I'm right now changing download.html (to release 2015.11), so it would be good if you could rebase (again!).

Signature · 1 line
Bye, Peter Korsgaard
#2 lore raw

PATCH v2 1/1 docs/website: cosmetic changes

Hi Peter,

2015-11-30 23:01 GMT+01:00 Peter Korsgaard <[email protected]>:

Quoted 63 lines
Quoted 53 lines
Quoted 1 line
Quoted 1 line
Quoted 1 line
Quoted 1 line

"Angelo" == Angelo Compagnucci <[email protected]> writes:

* Resized too big icons in download and documentation pages

---
Cheangelog:

v1 -> v2:
Rebase to the latest git version

 docs/website/css/main.css  |  15 ++-
 docs/website/docs.html     |  30 ++---
 docs/website/download.html | 330 ++++++++++++++++++++++-----------------------
 3 files changed, 189 insertions(+), 186 deletions(-)
docs/website/css/main.css +10 -5
index db9c4c9..57009cf 100644
@@ -207,16 +207,21 @@ i {
 .flip-container {
     perspective: 1000;
 }
-    /* flip the pane when hovered */
-    .flip-container:hover .flipper, .flip-container.hover .flipper {
-            transform: rotateY(180deg);
-    }
+/* flip the pane when hovered */
+.flip-container:hover .flipper, .flip-container.hover .flipper {
+    transform: rotateY(180deg);
+}
 
-.flip-container, .front, .back {
+.flip-container, .flip-container .front, .flip-container .back {
     width: 180px;
     height: 180px;
 }
 
+.flip-container-small, .flip-container-small .front, .flip-container-small .back {
+    width: 120px;
+    height: 120px;
+}
+
 /* flip speed goes here */
 .flipper {
     transition: 0.6s;
docs/website/docs.html +0 -0
index 9cee36d..23cc13f 100644

docs/website/docs.html line 19

Quoted 9 lines
docs/website/docs.html +2 -2
@@ -13,59 +13,59 @@
 
       <div class="row mt centered">
     <div class="col-sm-4">
-      <div class="flip-container center-block" ontouchstart="this.classList.toggle('hover');">
+      <div class="flip-container flip-container-small center-block" ontouchstart="this.classList.toggle('hover');">
         <div class="flipper">
           <div class="front">
-            <a href="/manual.html"><img src="images/browser.png" width="180" alt=""></a>
+            <a href="/manual.html"><img src="images/browser.png" width="120" alt=""></a>
Quoted 7 lines

I'm far from a web expert, but why are we telling the browser to downscale these images?

file docs/website/images/browser.png
docs/website/images/browser.png: PNG image data, 256 x 256, 8-bit/color RGBA, non-interlaced

E.G. why don't we send a 180x180 (or 120x120) image in the first place?

They were from a smashing magazine free theme at that resolution, so i left the original image size. They can be rescaled, I'll glad to do it if you think it's important (to me not so much!)

Quoted 8 lines

Same for the other images.

Quoted 4 lines
docs/website/docs.html +1 -0
+++ b/docs/website/download.html
@@ -4,176 +4,174 @@
 <div class="row nh">
 <div class="col-lg-10 col-lg-offset-1 col-md-12 col-sm-12 col-xs-12">
Quoted 5 lines

docs/website/docs.html line 6

Quoted 1 line
docs/website/docs.html +0 -1
-  <div class="panel panel-primary">

This diff is not very readable to me. Notice that I'm right now changing download.html (to release 2015.11), so it would be good if you could rebase (again!).

No problem, I'll wait for a few more minutes (I'm tired!) and if the git tree will be updated, I'll send a patch in no time!

Sincerely, Angelo

Quoted 3 lines

--
Bye, Peter Korsgaard

Signature · 1 line
Profile: http://it.linkedin.com/in/compagnucciangelo
#3 lore raw

PATCH v2 1/1 docs/website: cosmetic changes

Quoted 69 lines · Angelo Compagnucci

Hi Peter,

2015-11-30 23:01 GMT+01:00 Peter Korsgaard <[email protected]>:

Quoted 66 lines
Quoted 53 lines
Quoted 1 line
Quoted 1 line
Quoted 1 line
Quoted 1 line

"Angelo" == Angelo Compagnucci <[email protected]> writes:

* Resized too big icons in download and documentation pages

---
Cheangelog:

v1 -> v2:
Rebase to the latest git version

 docs/website/css/main.css  |  15 ++-
 docs/website/docs.html     |  30 ++---
 docs/website/download.html | 330 ++++++++++++++++++++++-----------------------
 3 files changed, 189 insertions(+), 186 deletions(-)
docs/website/css/main.css +10 -5
index db9c4c9..57009cf 100644
@@ -207,16 +207,21 @@ i {
 .flip-container {
     perspective: 1000;
 }
-    /* flip the pane when hovered */
-    .flip-container:hover .flipper, .flip-container.hover .flipper {
-            transform: rotateY(180deg);
-    }
+/* flip the pane when hovered */
+.flip-container:hover .flipper, .flip-container.hover .flipper {
+    transform: rotateY(180deg);
+}
 
-.flip-container, .front, .back {
+.flip-container, .flip-container .front, .flip-container .back {
     width: 180px;
     height: 180px;
 }
 
+.flip-container-small, .flip-container-small .front, .flip-container-small .back {
+    width: 120px;
+    height: 120px;
+}
+
 /* flip speed goes here */
 .flipper {
     transition: 0.6s;
docs/website/docs.html +0 -0
index 9cee36d..23cc13f 100644

docs/website/docs.html line 19

Quoted 9 lines
docs/website/docs.html +2 -2
@@ -13,59 +13,59 @@
 
       <div class="row mt centered">
     <div class="col-sm-4">
-      <div class="flip-container center-block" ontouchstart="this.classList.toggle('hover');">
+      <div class="flip-container flip-container-small center-block" ontouchstart="this.classList.toggle('hover');">
         <div class="flipper">
           <div class="front">
-            <a href="/manual.html"><img src="images/browser.png" width="180" alt=""></a>
+            <a href="/manual.html"><img src="images/browser.png" width="120" alt=""></a>

I'm far from a web expert, but why are we telling the browser to downscale these images?

Quoted 8 lines
Quoted 4 lines

file docs/website/images/browser.png
docs/website/images/browser.png: PNG image data, 256 x 256, 8-bit/color RGBA, non-interlaced

E.G. why don't we send a 180x180 (or 120x120) image in the first place?

They were from a smashing magazine free theme at that resolution, so i left the original image size. They can be rescaled, I'll glad to do it if you think it's important (to me not so much!)

There are various reasons why it's better to scale at the server side:

- smaller image => less bandwidth;
- often better scaling algorithm with a real tool than with the browser;
- less visual discrepancy between different browsers.

Quoted 9 lines
Quoted 9 lines

Same for the other images.

Quoted 4 lines
docs/website/docs.html +1 -0
+++ b/docs/website/download.html
@@ -4,176 +4,174 @@
 <div class="row nh">
 <div class="col-lg-10 col-lg-offset-1 col-md-12 col-sm-12 col-xs-12">
Quoted 8 lines
Quoted 5 lines

docs/website/docs.html line 6

Quoted 1 line
docs/website/docs.html +0 -1
-  <div class="panel panel-primary">

This diff is not very readable to me. Notice that I'm right now changing download.html (to release 2015.11), so it would be good if you could rebase (again!).

No problem, I'll wait for a few more minutes (I'm tired!) and if the git tree will be updated, I'll send a patch in no time!

And then please also avoid the whitespace change :-)

Regards,
Arnout

Signature · 6 lines
Arnout Vandecappelle                          arnout at mind be
Senior Embedded Software Architect            +32-16-286500
Essensium/Mind                                http://www.mind.be
G.Geenslaan 9, 3001 Leuven, Belgium           BE 872 984 063 RPR Leuven
LinkedIn profile: http://www.linkedin.com/in/arnoutvandecappelle
GPG fingerprint:  7493 020B C7E3 8618 8DEC 222C 82EB F404 F9AC 0DDF
#4 lore raw

PATCH v2 1/1 docs/website: cosmetic changes

Dear Arnout Vandecappelle,

2015-11-30 23:20 GMT+01:00 Arnout Vandecappelle <[email protected]>:

Quoted 96 lines · Angelo Compagnucci
Quoted 69 lines

Hi Peter,

2015-11-30 23:01 GMT+01:00 Peter Korsgaard <[email protected]>:

Quoted 66 lines
Quoted 53 lines
Quoted 1 line
Quoted 1 line
Quoted 1 line
Quoted 1 line

"Angelo" == Angelo Compagnucci <[email protected]> writes:

* Resized too big icons in download and documentation pages

---
Cheangelog:

v1 -> v2:
Rebase to the latest git version

 docs/website/css/main.css  |  15 ++-
 docs/website/docs.html     |  30 ++---
 docs/website/download.html | 330 ++++++++++++++++++++++-----------------------
 3 files changed, 189 insertions(+), 186 deletions(-)
docs/website/css/main.css +10 -5
index db9c4c9..57009cf 100644
@@ -207,16 +207,21 @@ i {
 .flip-container {
     perspective: 1000;
 }
-    /* flip the pane when hovered */
-    .flip-container:hover .flipper, .flip-container.hover .flipper {
-            transform: rotateY(180deg);
-    }
+/* flip the pane when hovered */
+.flip-container:hover .flipper, .flip-container.hover .flipper {
+    transform: rotateY(180deg);
+}
 
-.flip-container, .front, .back {
+.flip-container, .flip-container .front, .flip-container .back {
     width: 180px;
     height: 180px;
 }
 
+.flip-container-small, .flip-container-small .front, .flip-container-small .back {
+    width: 120px;
+    height: 120px;
+}
+
 /* flip speed goes here */
 .flipper {
     transition: 0.6s;
docs/website/docs.html +0 -0
index 9cee36d..23cc13f 100644

docs/website/docs.html line 19

Quoted 9 lines
docs/website/docs.html +2 -2
@@ -13,59 +13,59 @@
 
       <div class="row mt centered">
     <div class="col-sm-4">
-      <div class="flip-container center-block" ontouchstart="this.classList.toggle('hover');">
+      <div class="flip-container flip-container-small center-block" ontouchstart="this.classList.toggle('hover');">
         <div class="flipper">
           <div class="front">
-            <a href="/manual.html"><img src="images/browser.png" width="180" alt=""></a>
+            <a href="/manual.html"><img src="images/browser.png" width="120" alt=""></a>

I'm far from a web expert, but why are we telling the browser to downscale these images?

Quoted 8 lines
Quoted 4 lines

file docs/website/images/browser.png
docs/website/images/browser.png: PNG image data, 256 x 256, 8-bit/color RGBA, non-interlaced

E.G. why don't we send a 180x180 (or 120x120) image in the first place?

They were from a smashing magazine free theme at that resolution, so i left the original image size. They can be rescaled, I'll glad to do it if you think it's important (to me not so much!)

There are various reasons why it's better to scale at the server side:

- smaller image => less bandwidth;
- often better scaling algorithm with a real tool than with the browser;
- less visual discrepancy between different browsers.

Quoted 11 lines
Quoted 11 lines

Same for the other images.

Quoted 6 lines
docs/website/docs.html +1 -1
+++ b/docs/website/download.html
@@ -4,176 +4,174 @@
 <div class="row nh">
 <div class="col-lg-10 col-lg-offset-1 col-md-12 col-sm-12 col-xs-12">
 
-  <div class="panel panel-primary">
Quoted 8 lines
Quoted 6 lines
Quoted 3 lines

This diff is not very readable to me. Notice that I'm right now changing download.html (to release 2015.11), so it would be good if you could rebase (again!).

No problem, I'll wait for a few more minutes (I'm tired!) and if the git tree will be updated, I'll send a patch in no time!

And then please also avoid the whitespace change :-)

Ok, it's very difficult to maintain that page without reformatting, will try.

Quoted 12 lines

Regards,
Arnout

--

Arnout Vandecappelle                          arnout at mind be
Senior Embedded Software Architect            +32-16-286500
Essensium/Mind                                http://www.mind.be
G.Geenslaan 9, 3001 Leuven, Belgium           BE 872 984 063 RPR Leuven
LinkedIn profile: http://www.linkedin.com/in/arnoutvandecappelle
GPG fingerprint:  7493 020B C7E3 8618 8DEC 222C 82EB F404 F9AC 0DDF
Signature · 1 line
Profile: http://it.linkedin.com/in/compagnucciangelo
#5 lore raw

PATCH v2 1/1 docs/website: cosmetic changes

Quoted 3 lines · Angelo Compagnucci

Dear Arnout Vandecappelle,

2015-11-30 23:20 GMT+01:00 Arnout Vandecappelle <[email protected]>:

[snip]

Quoted 3 lines
Quoted 1 line

And then please also avoid the whitespace change :-)

Ok, it's very difficult to maintain that page without reformatting, will try.

In that case, do the whitespace change as a separate patch so we can see what
changed.

Regards,
Arnout

Signature · 6 lines
Arnout Vandecappelle      arnout dot vandecappelle at essensium dot com
Senior Embedded Software Architect . . . . . . +32-478-010353 (mobile)
Essensium, Mind division . . . . . . . . . . . . . . http://www.mind.be
G.Geenslaan 9, 3001 Leuven, Belgium . . . . . BE 872 984 063 RPR Leuven
LinkedIn profile: http://www.linkedin.com/in/arnoutvandecappelle
GPG fingerprint:  7493 020B C7E3 8618 8DEC 222C 82EB F404 F9AC 0DDF