Converting Layouts to Stylus

public/playground.css

@@ -1,73 +1,169 @@
-.bluebutton {
-  color: red;
-  padding: 5px;
-  background-color: #ffa500;
-  border: 1px solid #000;
-  display: inline;
+@import './pink.css';
+.RV-Alignment displaygrid,
+.RV-Alignment .RV-Alignment--top {
+  display: grid;
+  align-content: start;
 }
-.button {
-  padding: 5px;
-  background-color: #ffa500;
-  border: 1px solid #000;
-  display: inline;
+.RV-Alignment .RV-Alignment--bottom {
+  display: grid;
+  align-content: end;
 }
-.wred {
-  color: red;
+.RV-Alignment .RV-Alignment--left {
+  display: grid;
+  justify-content: start;
 }
-.field {
-  display: inline;
-  padding: 10px;
-  border-bottom: 2px solid #00f;
+.RV-Alignment .RV-Alignment--right {
+  display: grid;
+  justify-content: end;
 }
-.wurst .field {
-  display: inline;
-  padding: 10px;
-  border-bottom: 2px solid #00f;
-  color: red;
+.RV-Alignment .RV-Alignment--horizontalCenter {
+  display: grid;
+  justify-content: center;
 }
-.debug {
-  --one: {"button":"({\".bluebutton\":\"(anonymous(c))\",\".button\":\"(anonymous(c))\"})","field":"({\".field\":\"(anonymous())\",\".wurst .field\":\"(anonymous())\"})"};
-  --two: {".bluebutton":"({\"button\":\"(#008000)\",\"field\":\"(red())\"})",".wred":"({\"button\":\"(#008000)\",\"field\":\"(red())\"})",".wurst .field":"({\"button\":\"(#008000)\",\"field\":\"(red())\"})"};
+.RV-Alignment .RV-Alignment--verticalCenter {
+  display: grid;
+  align-items: center;
 }
-.bluebutton.bluebutton {
-  color: #008000;
+.RV-Alignment .RV-Alignment--center {
+  display: grid;
+  justify-content: center;
+  display: grid;
+  align-items: center;
 }
-.button.bluebutton {
-  color: #008000;
+.RV-ContentCrop {
+  display: block;
+  overflow: hidden;
 }
-.field.bluebutton {
-  border-bottom: 2px solid red;
-  color: #00f;
+.RV-ContentCrop img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
 }
-.wurst .field.bluebutton {
-  border-bottom: 2px solid red;
-  color: #00f;
+.RV-ContentCrop p {
+  overflow: hidden;
+  display: block;
+  text-overflow: ellipsis;
+  padding: 0;
+  margin: 0;
+  line-height: 1.21;
+  z-index: -20;
+  position: relative;
+  background-color: #fff;
+  height: 96.80000000000001%;
 }
-.bluebutton.wred {
-  color: #008000;
+.RV-ContentCrop--fade--fade:after {
+  background-image: linear-gradient(180deg, rgba(255,255,255,0), #fff);
+  display: block;
+  content: ' ';
+  opacity: 0.8;
+  position: relative;
+  top: -25%;
+  width: 100%;
+  height: 25%;
+  z-index: -10;
 }
-.button.wred {
-  color: #008000;
+.RV-ContentCrop--ellipsis--ellipsis:after {
+  position: relative;
+  display: block;
+  bottom: 1.2em;
+  left: calc(100% - 3ch);
+  content: '...';
+  font-size: 1.2em;
+  min-width: 2em;
+  background-color: #fff;
+  padding: 0 2px;
 }
-.field.wred {
-  border-bottom: 2px solid red;
-  color: #00f;
+.RV-ContentCrop--square {
+  width: 100%;
+  padding-top: 100%;
+  position: relative;
 }
-.wurst .field.wred {
-  border-bottom: 2px solid red;
-  color: #00f;
+.RV-ContentCrop--square img,
+.RV-ContentCrop--square div {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
 }
-.bluebutton.wurst .field {
-  color: #008000;
+.RV-ContentCrop--1to2 {
+  width: 100%;
+  padding-top: 200%;
+  position: relative;
 }
-.button.wurst .field {
-  color: #008000;
+.RV-ContentCrop--1to2 img {
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
 }
-.field.wurst .field {
-  border-bottom: 2px solid red;
-  color: #00f;
+.RV-ContentCrop--2to1 {
+  width: 100%;
+  padding-top: 50%;
+  position: relative;
 }
-.wurst .field.wurst .field {
-  border-bottom: 2px solid red;
-  color: #00f;
+.RV-ContentCrop--2to1 img {
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+.RV-ContentCrop--4to3 {
+  width: 100%;
+  padding-top: 75%;
+  position: relative;
+}
+.RV-ContentCrop--4to3 img {
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+.RV-ContentCrop--16to9 {
+  width: 100%;
+  padding-top: 56.25%;
+  position: relative;
+}
+.RV-ContentCrop--16to9 img {
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+.RV-ContentCrop--3to2 {
+  width: 100%;
+  padding-top: 66.66666666666666%;
+  position: relative;
+}
+.RV-ContentCrop--3to2 img {
+  object-fit: cover;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+.RV-ContentCrop--left img {
+  object-position: left;
+}
+.RV-ContentCrop--center img {
+  object-position: center;
+}
+.RV-ContentCrop--top img {
+  object-position: top;
+}
+.RV-ContentCrop--bottom img {
+  object-position: bottom;
+}
+.RV-ContentCrop--center img {
+  object-position: center;
 }