Make content loaders support image aspect ratios

src/definitions/elements/loader.less

@@ -168,7 +168,7 @@
 
 /* Placeholder Paragraph */
 .ui.content.loader {
-  position: relative;
+  position: static;
   left: 0px;
   top: 0px;
   transform: none;
@@ -224,6 +224,19 @@
 .ui.content.loader .image:not(.header) {
   height: @contentImageHeight;
 }
+.ui.content.loader .square.image:not(.header) {
+  height: 0px;
+  overflow: hidden;
+  /* 1/1 aspect ratio */
+  padding-top: 100%;
+}
+.ui.content.loader .rectangular.image:not(.header) {
+  height: 0px;
+  overflow: hidden;
+  /* 4/3 aspect ratio */
+  padding-top: 75%;
+}
+
 
 /* Lines */
 .ui.content.loader .line {

src/themes/default/elements/loader.variables

@@ -25,7 +25,7 @@
 --------------------*/
 
 /* Text */
-@contentLoaderMaxWidth: 30rem;
+@contentLoaderMaxWidth: 50rem;
 @textDistance: @relativeMini;
 @loaderTextColor: @textColor;
 @invertedLoaderTextColor: @invertedTextColor;
@@ -33,9 +33,9 @@
 @contentSpacing: 20px;
 
 /* Content Loader Lines */
-@contentLineMargin: 12px;
-@contentHeaderLineHeight: 9px;
-@contentLineHeight: 7px;
+@contentLineMargin: @12px;
+@contentHeaderLineHeight: @9px;
+@contentLineHeight: @7px;
 @contentParagraphLineHeight: @contentLineHeight;
 
 /* Image */
@@ -43,11 +43,11 @@
 
 /* Header Image */
 @contentImageWidth: 50px;
-@contentImageTextIndent: 10px;
+@contentImageTextIndent: @10px;
 
 /* Paragraph */
 @contentHeaderLineOneOutdent: 0px;
-@contentHeaderLineTwoOutdent: 120px;
+@contentHeaderLineTwoOutdent: 8rem;
 
 @contentLineOneOutdent: 4rem;
 @contentLineTwoOutdent: 7rem;