+++ /dev/null
-# 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.
`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.
<!--End Row-->
</div>
<!--End Container-->
+
<!--Compact Laptops-->
<div class="container">
<h3 class="title text-center">Compact Laptops</h3>
</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> -->
projects / fsf-giving-guide.git / commitdiff
