Mercurial > whatever / file diff

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/theme/static/css/peertube.css	Tue Aug 28 15:07:01 2018 +0200
@@ -0,0 +1,37 @@
+*
+ * Responsive design style sheet for pelican PeerTube integration.
+ * Makes the video as wide as possible, keeping a specified aspect ratio
+ * of the video (e.g. 4:3, 16:9, etc. for width vs height).  The video
+ * will resize and shrink as you resize the browser window.  Enjoy!
+ *
+ * Integrate these definitions into your project style sheet, and use as
+ *
+ * <div class="peertube peertube-16x9">
+ *     <iframe src="https://your.peertube.instance/embed/VIDEO_ID" allowfullscreen seamless frameborder="0"></iframe>
+ * </div>
+ *
+ * (c) 2018 David Douard <david.douard@sdfa3.org>, license: MIT
+ */
+
+.peertube-4x3 {
+	padding-bottom: 75%;  /* inverse of 4:3 aspect ratio */
+}
+.peertube-16x9 {
+	padding-bottom: 56.25%;  /* inverse of 16:9 aspect ratio */
+}
+.peertube-4x3,
+.peertube-16x9 {
+	position: relative;
+	height: 0;
+	overflow: hidden;
+}
+.peertube-4x3 iframe,
+.peertube-16x9 iframe {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	margin: 0;
+	border: 0;
+}