Docker and drone file for deployment

Dockerfile

@@ -1,4 +1,5 @@
 FROM klakegg/hugo:alpine-onbuild AS hugo
 
-FROM nginx:alpine
-COPY --from=hugo /onbuild /usr/share/nginx/html
+FROM caddy:2-alpine
+
+ADD src/  /usr/share/caddy/

assets/scss/custom.scss

@@ -186,9 +186,6 @@ section {
                 }
             }
         }
-        p.text-xl {
-            //font-size: 1.4rem;
-        }
     }
     // Change bulletlists rendering in flex bloc    }
     &.li-block {
@@ -214,12 +211,10 @@ section {
         }
         // Add custom colored icons on each item
         &.section-1 {
-            //text-transform: uppercase;
             ul li {
                 font-weight: 500;
                 font-size: large;
                 position: relative;
-                //border: 1.5px dashed $bg-dark-blue;
               &:nth-child(1) {
                     @include add-decorative-shape($text-green, 'square', 1);
                 }
@@ -301,16 +296,13 @@ section {
 }
 
 // Dark context (homepage header, hero, footer)
-//.dark {
-
-    // Overwrite primary button design
+// Overwrite primary button design
 .btn-primary {
     background-color: $orange;
     color: white;
     border: 1px solid $orange;
     border-radius: 2em;
 }
-//}
 
 // Dark but only in sections
 section.dark {
@@ -398,3 +390,192 @@ figure.image {
     }
     figcaption {}
 }
+
+// RESPONSIVENESS
+
+@media screen and (max-width: 1279px) {
+  section {
+    &.li-block {
+      &.section-5 {
+        .container .row {
+          ul {
+            flex-wrap: wrap;
+          }
+          ul li {
+            flex: 30%;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 1023px) {
+  main > section {
+    &.section-4 {
+      h4 {
+        height: 224px;
+      }
+      .btn-primary {
+        top: 56%;
+      }
+    }
+  }
+
+  section {
+    &.li-block {
+      &.section-5 {
+        .container .row {
+          ul {
+            flex-wrap: wrap;
+          }
+          ul li {
+            flex: 50%;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 767px) {
+  main > section {
+    &.hero {
+      height: 110vh;
+    }
+    &.section-3 {
+      h2:before {
+        top: -70%;
+        left: 5%;
+        z-index: -1;
+      }
+    }
+    &.section-4 {
+      h4 {
+        height: 280px;
+      }
+      .btn-primary {
+        top: 64%;
+      }
+    }
+  }
+
+  section {
+    &.li-block {
+      .container .row {
+        & > div {
+          ul {
+            flex-direction: column;
+            li {
+              margin-bottom: 4rem;
+            }
+          }
+        }
+      }
+      // Add custom colored icons on each item
+      &.section-1 {
+        ul li {
+          &:nth-child(1) {
+            top: -66%;
+          }
+          &:nth-child(2) {
+            top: -66%;
+          }
+          &:nth-child(3):before {
+            top: -85%;
+          }
+          &:nth-child(4):before {
+            top: -85%;
+          }
+        }
+      }
+      &.section-5 {
+        .container .row {
+          ul {
+            flex-wrap: wrap;
+          }
+          ul li {
+            flex: 50%;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 513px) {
+  main > section {
+    &.hero {
+      height: 120vh;
+    }
+    &.section-4 {
+      h4 {
+        font-size: 1.1rem;
+      }
+      .btn-primary {
+        top: 64%;
+      }
+    }
+    &.section-5 {
+      .container .row {
+        ul li {
+          width: 350px;
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 470px) {
+  main > section {
+    &.section-4 {
+      h4 {
+        height: 280px;
+      }
+      .btn-primary {
+        top: 64%;
+      }
+    }
+  }
+
+  section {
+    &.li-block {
+      &.section-1 {
+        ul li {
+          &:nth-child(3):before {
+            top: -70%;
+          }
+          &:nth-child(4):before {
+            top: -70%;
+          }
+        }
+      }
+
+      &.section-5 {
+        .container .row {
+          ul {
+            flex-wrap: wrap;
+          }
+          ul li {
+            width: 350px;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 420px) {
+  section {
+    &.li-block {
+      &.section-5 {
+        .container .row {
+          ul li {
+            width: 300px;
+          }
+        }
+      }
+    }
+  }
+}
+

drone.yaml

@@ -8,8 +8,13 @@ trigger:
     - tag
 
 steps:
-  - name: build-hugo-website
-    image: hugomods/hugo:latest
+  - name: build-hugo
+    image: ariejan/drone-hugo
+    settings:
+      hugo_version: 0.65.3
+
+  - name: build-docker-caddy
+    image: plugins/docker
     settings:
       registry: h3m6q87t.gra7.container-registry.ovh.net
       username:
@@ -18,7 +23,7 @@ steps:
         from_secret: docker_password
       dockerfile: ./Dockerfile
       context: ./
-      repo: h3m6q87t.gra7.container-registry.ovh.net/chill-website
+      repo: h3m6q87t.gra7.container-registry.ovh.net/chill_website
       tag: ${DRONE_TAG:=latest}
       pull_image: true