Adding convertible laptop/tablets.
authorZak Rogoff <zak@fsf.org>
Thu, 12 Jan 2017 18:03:37 +0000 (13:03 -0500)
committerZak Rogoff <zak@fsf.org>
Thu, 12 Jan 2017 18:03:37 +0000 (13:03 -0500)
v7/Guidelines.md [deleted file]
v7/README.md
v7/givingguide.html
v7/img/products/microsoft-surface-blocked.png [new file with mode: 0644]
v7/img/products/microsoft-surface-blocked.xcf [new file with mode: 0644]
v7/img/products/technoethical-x200t.png [new file with mode: 0644]
v7/img/products/technoethical-x200t.xcf [new file with mode: 0644]

diff --git a/v7/Guidelines.md b/v7/Guidelines.md
deleted file mode 100644 (file)
index 48b652c..0000000
+++ /dev/null
@@ -1,32 +0,0 @@
-# Guidelines for future use
----
-## Images:
-
-* If it's a logo then ALWAYS export the images from its VECTOR (.svg, .eps, .pdf) source. If a vector source isn't available, use a very large image and scale it down.
-
-* Do not put a logo next to a product or vice-versa, Always use images with the same nature (i.e. product versus product; logo versus logo)
-
-* Charities' logos should be exported to 580px × 580px, transparent PNG
-
-* Products' images, "good" or "naughty" should be put inside transparent, square PNG files at 350px × 350px, and a padding consistent with existing images.
-
-## BUY/GET button
-
-* Copy the entire block of code including the two lines for comments before and after the Divs.
-
-* Paste it just after the **h5** line.
-
-* Append a unique string to the `id` `href` `aria-controls` of the **a** elements, as well as the `id` of the next div and the content of `document.getElementById('...')` so that all have the same text. Example: `get-iem-smartphone` `get-item-compact` ...
-
-* Change the content of the Anchor link **a** and its `href` attributes to link to different sellers.
-
-* If the product has only one source use this code instead:
-
-`<a class="btn get-item" role="button" href="#">BUY</a>`
-
-
-## General Best Practices
-
-* Resist the urge to add another list-element **li** to announce a SALE, a BONUS, or anything unrelated to being a PROS or CONS. Instead use the SALE triangle, and Bootstrap's *alert* (Check its documentation, or existing code if unsure)
-
-* Avoid using very long titles as they tend to wrap into multiple lines on mobile devices. Be concise.
index b7478d3..dc090ea 100644 (file)
@@ -12,3 +12,37 @@ run `make` at the root of the source tree, then visit
 `localhost:8000`.  The `Makefile` relies on Python for starting the
 development web server, but it's trivial to serve the page using the
 web server of your preference if you do not have Python.
+
+
+# Guidelines for future use
+---
+## Images:
+
+* If it's a logo then ALWAYS export the images from its VECTOR (.svg, .eps, .pdf) source. If a vector source isn't available, use a very large image and scale it down.
+
+* Do not put a logo next to a product or vice-versa, Always use images with the same nature (i.e. product versus product; logo versus logo)
+
+* Charities' logos should be exported to 580px × 580px, transparent PNG
+
+* Products' images, "good" or "naughty" should be put inside transparent, square PNG files at 350px × 350px, and a padding consistent with existing images.
+
+## BUY/GET button
+
+* Copy the entire block of code including the two lines for comments before and after the Divs.
+
+* Paste it just after the **h5** line.
+
+* Append a unique string to the `id` `href` `aria-controls` of the **a** elements, as well as the `id` of the next div and the content of `document.getElementById('...')` so that all have the same text. Example: `get-iem-smartphone` `get-item-compact` ...
+
+* Change the content of the Anchor link **a** and its `href` attributes to link to different sellers.
+
+* If the product has only one source use this code instead:
+
+`<a class="btn get-item" role="button" href="#">BUY</a>`
+
+
+## General Best Practices
+
+* Resist the urge to add another list-element **li** to announce a SALE, a BONUS, or anything unrelated to being a PROS or CONS. Instead use the SALE triangle, and Bootstrap's *alert* (Check its documentation, or existing code if unsure)
+
+* Avoid using very long titles as they tend to wrap into multiple lines on mobile devices. Be concise.
index 8f7fd32..7ba059e 100644 (file)
@@ -323,6 +323,7 @@ Many of these items are <a href="https://www.fsf.org/resources/hw/endorsement/re
         <!--End Row-->
       </div>
       <!--End Container-->
+
       <!--Compact Laptops-->
       <div class="container">
         <h3 class="title text-center">Compact Laptops</h3>
@@ -558,6 +559,74 @@ Many of these items are <a href="https://www.fsf.org/resources/hw/endorsement/re
       </div>
       <!-- End Container -->
 
+      <!--Compact Laptops-->
+      <div class="container">
+        <h3 class="title text-center">Convertible Laptops/Tablets</h3>
+        <div class="row is-table-row">
+          <div class="good col-md-6 col-sm-6">
+            <img src="img/products/technoethical-x200t.png" alt="Technoethical convertible tablet laptop" class="center-block" />
+            <h5 class="text-center">X200t with GNU/Linux</h5>
+
+            <!-- Buy/Download Button   -->
+            <a id="get-item-convertible" class="btn get-item" role="button" data-toggle="collapse" href="#sellers-convertible" aria-expanded="false" aria-controls="sellers-convertible" style="display:none">
+              BUY
+              <!-- Begin Sale -->
+              <span class="sale" >sale</span>
+              <!-- End Sale -->
+            </a>
+            <div class="collapse" id="sellers-convertible">
+              <div class="center-block seller-group">
+                <p style="color: #6b6b6b">
+                  <strong>Get it from</strong>
+                </p>
+
+                <a href="https://tehnoetic.com/tet-x200t" class="seller action-button">Technoethical</a>
+                <p class="sale-info links">
+                  <a href="#technoethical-promotion">Sale details.</a>
+                </p>
+              </div>
+            </div>
+
+            <script>
+            document.getElementById('get-item-convertible').style.display = '';
+            </script>
+            <noscript>
+              <div class="center-block seller-group">
+                <p style="color: #6b6b6b">
+                  <strong>Get it from</strong>
+                </p>
+
+                                <a href="https://tehnoetic.com/tet-x200t" class="seller action-button">Technoethical</a>
+                                <p class="sale-info links">
+                                  <a href="#technoethical-promotion">Sale details.</a>
+                                </p>           </div>
+            </noscript>
+            <!-- End Buy/Download button -->
+            <ul class="pros">
+              <li>Runs the <a href="https://www.gnu.org/distros/free-distros.en.html">FSF-endorsed</a> Trisquel operating system with libreboot firmware.</li>
+              <li>Durable hardware is meant to last and is easy to repair.</li>
+              <li>Created by a small business that replaces all restrictive components from a stock laptop.</li>
+            </ul>
+
+          </div>
+          <!--End Good-->
+
+          <div class="bad col-md-6 col-sm-6">
+            <img src="img/products/microsoft-surface-blocked.png" alt="lenovo" class="center-block" />
+            <h5 class="text-center">Microsoft Surface</h5>
+            <ul class="cons">
+              <li>Runs on proprietary software that profits from treating the user as a product -- <a href="https://edri.org/microsofts-new-small-print-how-your-personal-data-abused/">each account is assigned an advertising ID</a> to help Microsoft sell user
+                data.
+              </li>
+              <li>Mandatory Windows updates force users to test potentially unstable new versions. <a href="https://www.fsf.org/campaigns/windows">Read more about Windows's abuses.</a></li>
+            </ul>
+          </div>
+          <!--End Bad-->
+        </div>
+        <!--End Row-->
+      </div>
+      <!--End Container-->
+
       <!-- Begin Recommended Template -->
       <div class="container-fluid recommended-section">
         <!-- <h1 class="text-center"></h1> -->
diff --git a/v7/img/products/microsoft-surface-blocked.png b/v7/img/products/microsoft-surface-blocked.png
new file mode 100644 (file)
index 0000000..8cc012d
Binary files /dev/null and b/v7/img/products/microsoft-surface-blocked.png differ
diff --git a/v7/img/products/microsoft-surface-blocked.xcf b/v7/img/products/microsoft-surface-blocked.xcf
new file mode 100644 (file)
index 0000000..3eab340
Binary files /dev/null and b/v7/img/products/microsoft-surface-blocked.xcf differ
diff --git a/v7/img/products/technoethical-x200t.png b/v7/img/products/technoethical-x200t.png
new file mode 100644 (file)
index 0000000..bfd9d3a
Binary files /dev/null and b/v7/img/products/technoethical-x200t.png differ
diff --git a/v7/img/products/technoethical-x200t.xcf b/v7/img/products/technoethical-x200t.xcf
new file mode 100644 (file)
index 0000000..026bb81
Binary files /dev/null and b/v7/img/products/technoethical-x200t.xcf differ