Design guidelines

.drone.yml

@@ -1,5 +1,5 @@
 pipeline:
     documentation:
-        image: nextcloudci/documentation:1.0.11
+        image: nextcloudci/documentation:documentation-4
         commands:
             - make all

_shared_assets/themes/nextcloud_com/static/styles.css

@@ -3,8 +3,8 @@
 
 /* enable to reveal boxes everywhere  */
 /** {
-	border-style: solid;
-	border-color: red;
+    border-style: solid;
+    border-color: red;
  }*/
 
 @font-face {
@@ -55,6 +55,7 @@ body {
 
 h1, h2, h3 {
     font-weight: 300;
+    margin-top: 40px !important;
 }
 h1 {
     font-size: 45px;
@@ -77,13 +78,13 @@ img {
 }
 
 .btn-default {
-    /* 	background: rgba(240,240,240,.9); */
-    /* 	border: 1px solid rgba(210,210,210,.9); */
+    /*     background: rgba(240,240,240,.9); */
+    /*     border: 1px solid rgba(210,210,210,.9); */
 }
 
 .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
-    /* 	background: white; */
-    /* 	border: 1px solid rgba(240,240,240,.9); */
+    /*     background: white; */
+    /*     border: 1px solid rgba(240,240,240,.9); */
 }
 
 .btn-primary {
@@ -93,9 +94,9 @@ img {
 }
 
 .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
-    /* 	background: #428BCA; */
-    /* 	border: 1px solid #1D2D44; */
-    /* 	color: white; */
+    /*     background: #428BCA; */
+    /*     border: 1px solid #1D2D44; */
+    /*     color: white; */
 }
 
 /* button a {color: #1d2d44} */
@@ -974,15 +975,15 @@ img.desaturate {
     background-size: cover;
     -o-background-size: cover;
     /*    border: 0px; */
-    /* 	min-height: 450px; background-position: 35% 40%; */
+    /*     min-height: 450px; background-position: 35% 40%; */
     position: relative;
     margin-left: 0px !important;
     margin-right: 0px !important;
     margin: 0 0 0 0 !important;
 }
 
 /*.ft-img-center {
-	margin: 0 auto;
+    margin: 0 auto;
 }*/
 
 .ft-sharing {
@@ -1019,7 +1020,7 @@ img.desaturate {
 
 @media (max-width: 767px) {
     .ft-everywhere-img {
-        /* 	height: auto; */
+        /*     height: auto; */
         width: 20%;
         right: 5%;
     }
@@ -1045,12 +1046,12 @@ img.desaturate {
 }
 
 /*.ft-img-overlay a {
-	display: table;
+    display: table;
 }*/
 
 /*.ft-img-overlay img {
-	width: 100%;
-	height: 100%;
+    width: 100%;
+    height: 100%;
 }*/
 
 .ft-play-overlay {
@@ -1059,9 +1060,9 @@ img.desaturate {
     top: 30%;
     left: 45%;
     margin-top: 10px;
-    /* 	width: 0px; */
-    /* 	height: 0px; */
-    /* 	padding: 50%; */
+    /*     width: 0px; */
+    /*     height: 0px; */
+    /*     padding: 50%; */
 }
 
 .youtube i {
@@ -1142,3 +1143,63 @@ a.headerlink {
 li.next {
     float: right;
 }
+
+/* Floating image on code */
+.figure.figure-with-code img {
+    margin: 0;
+}
+.figure.figure-with-code {
+    float: right;
+    max-width: 40%;
+    min-width: 200px;
+}
+.figure.figure-with-code + .code.html,
+.figure.figure-with-code + .highlight-html {
+    max-width: 59%;
+}
+.figure.figure-with-code + .code.html::after,
+.figure.figure-with-code + .highlight-html::after {
+    content: ' ';
+    clear: both;
+    display: block;
+}
+
+/* Fix nested lists bold */
+li > dl > dt {
+    font-weight: inherit;
+}
+
+/* Icons grid */
+#icons > blockquote > div {
+    display: inline-flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+#icons > blockquote > div > div {
+    margin: 20px;
+    text-align: center;
+    flex: 10%;
+}
+#icons > blockquote > div img {
+    margin: 5px;
+}
+#icons > blockquote > div p {
+    font-size: inherit;
+}
+#icons > blockquote > div a {
+    display: flex;
+    width: 42px;
+    height: 42px;
+    margin: auto;
+}
+#icons > blockquote > div > div a[href*='white'],
+#icons > blockquote > div > div a[href*='/calendar.'],
+#icons > blockquote > div > div a[href*='/caret.'],
+#icons > blockquote > div > div a[href*='/contacts.'],
+#icons > blockquote > div > div a[href*='/files1.'],
+#icons > blockquote > div > div a[href*='/music.'],
+#icons > blockquote > div > div a[href*='/picture.'],
+#icons > blockquote > div > div a[href*='white'] {
+    background: #ddd;
+    border-radius: 50%;
+}