Noissue - Added device widths & refactored website-default utilities

static/scss/_utilities.scss

Index: static/scss/_utilities.scss
===================================================================
--- a/static/scss/_utilities.scss
+++ b/static/scss/_utilities.scss
@@ -13,29 +13,53 @@
 //
 // You should have received a copy of the GNU General Public License
 // along with website-defaults.  If not, see <http://www.gnu.org/licenses/>.
 
 /*******************************************************************************
  * Utilities
  ******************************************************************************/
 
+/* Responsive widths
+ ******************************************************************************/
+
 /**
- * Stretch content full-width
+ * Stretch content (e.g. images) full-width
  */
 .full-width
 {
   display: block;
   width: 100%;
-  margin: $small-space 0px;

[juliandoucette, 2017/10/24 14:08:34]

Because width says nothing about vertical spacing.

[ire, 2017/10/25 09:20:00]

Acknowledged.

 }
 
 /**
- * Clearfix content
+ * Center content within a (responsive) fixed width
  */
+.container
+{
+  width: $container-width;
+  max-width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: $small-space;
+  padding-left: $small-space;
+}
+
+/* Device widths
+ ******************************************************************************/
+
+.phone-width { width: $phone-width; }
+.phablet-width { width: $phablet-width; }
+.tablet-width { width: $tablet-width; }
+.desktop-width { width: $desktop-width; }
+.large-desktop-width { width: $large-desktop-width; }
+
+/* Clearfix
+ ******************************************************************************/
+
 .clearfix:after,
 .clearfix:before
 {
   display: table;
   content: " ";
 }
 
 .clearfix:after