text-decoration: overline;
}
-.icon {
- width: 48px;
- height: 48px;
-}
-
.template-icon {
width: 24px;
height: 24px;
margin-right: 0px;
}
+.wall-item-emoji {
+ margin-right: 5px;
+}
.wall-item-like-expanded,
.wall-item-dislike-expanded,
margin: 0;
}
+.wall-item-response {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
.type-link blockquote, .type-video blockquote {
margin-left: 0px;
max-height: 160px;
border: 0;
}
-.itentity-match-wrapper {
+.identity-match-wrapper {
float: left;
padding: 10px;
width: 120px;
max-height: 80px;
}
-/* forumlist widget */
-.forumlist-img {
+/* group list widget */
+.group-list-img {
height: 20px;
width: 20px;
vertical-align: middle;
}
-#forum-widget-collapse {
+#group-widget-collapse {
opacity: 0.3;
}
color: #ffffff;
}
-#forum-widget-collapse:hover {
+#group-widget-collapse:hover {
opacity: 1.0;
}
word-wrap: break-word;
}
-#register-explicid-content {
+#register-explicit-content {
font-weight: bold;
}
.imagegrid-row {
display: -ms-flexbox; /* IE10 */
display: flex;
- -ms-flex-wrap: wrap; /* IE10 */
- flex-wrap: wrap;
- padding: 0 4px;
- box-sizing: border-box;
+ margin-top: 1em;
+ column-gap: 5px;
}
-/* Create four equal columns that sits next to each other */
.imagegrid-column {
-ms-flex: 50%; /* IE10 */
flex: 50%;
- max-width: 50%;
- padding: 0 4px;
- box-sizing: border-box;
+ display: -ms-flexbox; /* IE10 */
+ display: flex;
+ flex-direction: column;
+ row-gap: 5px;
}
.imagegrid-column img {
- margin-top: 8px;
- vertical-align: middle;
- width: 100%;
+ -ms-flex: 50%; /* IE10 */
+ flex: 50%;
}
/**
* Image grid settings END
- **/
\ No newline at end of file
+ **/
+
+/* This helps allocating space for image before they are loaded, preventing content shifting once they are.
+ * Inspired by https://www.smashingmagazine.com/2016/08/ways-to-reduce-content-shifting-on-page-load/
+ * Please note: The space is effectively allocated using padding-bottom using the image ratio as a value.
+ * This ratio is never known in advance so no value is set in the stylesheet.
+ */
+figure.img-allocated-height {
+ position: relative;
+ background: center / auto rgba(0, 0, 0, 0.05) url(/images/icons/image.png) no-repeat;
+ margin: 0;
+}
+figure.img-allocated-height img{
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+}
+
+/**
+ * Horizontal masonry settings START
+ **/
+.masonry-row {
+ display: -ms-flexbox; /* IE10 */
+ display: flex;
+ /* Both the following values should be the same to ensure consistent margins between images in the grid */
+ column-gap: 5px;
+ margin-top: 5px;
+}
+/**
+ * Horizontal masonry settings AND
+ **/
+
+#contactblock .icon {
+ width: 48px;
+ height: 48px;
+}