Use div class=allcenter around all images.
[libguestfs-talks.git] / 2019-fosdem / style.css
index 0f7be38..35588a8 100644 (file)
@@ -81,12 +81,13 @@ div.plugins {
     background: #f8f8ff;
     border: 1px solid rgb(204,0,0);
     border-radius: 15px;
+    margin-left: auto;
+    margin-right: auto;
     width: 800px;
     height: 400px;
     /* Position relative is needed so that items may be
        positioned inside. */
     position: relative;
-    column-count: 4;
 }
 
 div.plugins p#caption {
@@ -99,14 +100,17 @@ div.plugins p#caption {
 }
 
 div.plugins ul {
+    position: absolute;
+    top: 10%;
+    width: 700px;
+    height: 380px;
+    column-count: 4;
     list-style-type: none;
-    top: 50%;
-    transform: translateY(15%);
     margin: 0;
 }
 
 div.plugins ul li {
-    padding: 4px;
+    padding: 0px;
     margin: 5px;
 }
 
@@ -124,12 +128,13 @@ div.filters {
     background: #f8fff8;
     border: 1px solid rgb(204,0,0);
     border-radius: 15px;
+    margin-left: auto;
+    margin-right: auto;
     width: 800px;
     height: 200px;
     /* Position relative is needed so that items may be
        positioned inside. */
     position: relative;
-    column-count: 4;
 }
 
 div.filters p.filtercaption {
@@ -142,14 +147,17 @@ div.filters p.filtercaption {
 }
 
 div.filters ul {
+    position: absolute;
+    top: 10%;
+    width: 700px;
+    height: 180px;
+    column-count: 4;
     list-style-type: none;
-    top: 50%;
-    transform: translateY(15%);
     margin: 0;
 }
 
 div.filters ul li {
-    padding: 4px;
+    padding: 0px;
     margin: 5px;
 }
 
@@ -161,3 +169,75 @@ div.filters ul li.highlighted {
     border-radius: 20px;
     font-weight: bold;
 }
+
+/* For images which must be centered on the page. */
+div.allcenter {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 50vw;
+}
+
+div.all-center img {
+}
+
+/* Outlined text. */
+.outline {
+    text-shadow: 2px 2px 0 rgb(204,0,0),
+                 -2px 2px 0 rgb(204,0,0),
+                 2px -2px 0 rgb(204,0,0),
+                 -2px -2px 0 rgb(204,0,0),
+                 0px 2px 0 rgb(204,0,0),
+                 0px -2px 0 rgb(204,0,0),
+                 -2px 0px 0 rgb(204,0,0),
+                 2px 0px 0 rgb(204,0,0),
+                 4px 4px 0 rgb(204,0,0),
+                 -4px 4px 0 rgb(204,0,0),
+                 4px -4px 0 rgb(204,0,0),
+                 -4px -4px 0 rgb(204,0,0),
+
+                 0px 4px 0 rgb(204,0,0),
+                 0px -4px 0 rgb(204,0,0),
+                 -4px 0px 0 rgb(204,0,0),
+                 4px 0px 0 rgb(204,0,0),
+                 2px 4px 0 rgb(204,0,0),
+                 -2px 4px 0 rgb(204,0,0),
+                 2px -4px 0 rgb(204,0,0),
+                 -2px -4px 0 rgb(204,0,0),
+                 4px 2px 0 rgb(204,0,0),
+                 -4px 2px 0 rgb(204,0,0),
+                 4px -2px 0 rgb(204,0,0),
+                 -4px -2px 0 rgb(204,0,0),
+
+                 4px 4px 0 rgb(255,128,128),
+                 -4px 4px 0 rgb(255,128,128),
+                 4px -4px 0 rgb(255,128,128),
+                 -4px -4px 0 rgb(255,128,128),
+                 0px 4px 0 rgb(255,128,128),
+                 0px -4px 0 rgb(255,128,128),
+                 -4px 0px 0 rgb(255,128,128),
+                 4px 0px 0 rgb(255,128,128),
+                 8px 8px 0 rgb(255,128,128),
+                 -8px 8px 0 rgb(255,128,128),
+                 8px -8px 0 rgb(255,128,128),
+                 -8px -8px 0 rgb(255,128,128),
+
+                 0px 8px 0 rgb(255,128,128),
+                 0px -8px 0 rgb(255,128,128),
+                 -8px 0px 0 rgb(255,128,128),
+                 8px 0px 0 rgb(255,128,128),
+                 4px 8px 0 rgb(255,128,128),
+                 -4px 8px 0 rgb(255,128,128),
+                 4px -8px 0 rgb(255,128,128),
+                 -4px -8px 0 rgb(255,128,128),
+                 8px 4px 0 rgb(255,128,128),
+                 -8px 4px 0 rgb(255,128,128),
+                 8px -4px 0 rgb(255,128,128),
+                 -8px -4px 0 rgb(255,128,128);
+}
+
+/* Warning symbol. */
+span.warning {
+    background-color: yellow;
+    font-weight: bold;
+}