Bug fixes and improvements

Dockerfile

@@ -12,6 +12,8 @@ RUN npm run build
 
 FROM nginx:alpine
 
+HEALTHCHECK --interval=1m --timeout=10s CMD curl --fail http://localhost/ || exit 1
+
 WORKDIR /usr/share/nginx/html
 
 RUN rm -rf *

docker-compose.yml

@@ -1,4 +1,4 @@
-version: "3.8"
+version: '3.8'
 
 services:
   timeline:
@@ -13,7 +13,7 @@ services:
           # no cpu limit
           memory: 16M
         reservations:
-          cpus: "0.2"
+          cpus: '0.2'
           memory: 16M
       placement:
         max_replicas_per_node: 1

nginx-config/nginx.conf

@@ -11,6 +11,7 @@ events {
 
 http {
     server_tokens off;
+    
     include       /etc/nginx/mime.types;
     default_type  application/octet-stream;
 

src/framework/primitives/implementations/image.ts

@@ -9,16 +9,16 @@ export class Image implements Primitive {
     private readonly alt: string
   ) {}
 
-  public toHTML(noContainer = false): html {
+  public toHTML(container = false): html {
     return `
-        ${!noContainer ? `<div class="figure-container">` : ''}
+        ${container ? `<div class="figure-container">` : ''}
             <img tabindex="0"
                 srcset="${this.image.srcSet}" 
                 sizes="${this.getSizes()}"
                 src="${last(this.image.images)?.path}" 
                 alt="${this.alt}"
             />
-        ${!noContainer ? `</div>` : ''}
+        ${container ? `</div>` : ''}
       `;
   }
 

src/framework/primitives/implementations/video.ts

@@ -8,16 +8,16 @@ export class Video implements Primitive {
     private readonly webm: url,
     private readonly options?: string
   ) {}
-  public toHTML(noContainer = false): string {
+  public toHTML(container = false): string {
     return `
-        ${!noContainer ? `<div class="figure-container">` : ''}
+        ${container ? `<div class="figure-container">` : ''}
           <video ${this.options} ${
       this.poster ? `poster="${this.poster}` : ''
     }" >
               <source src="${this.webm}" type="video/webm"/>
               <source src="${this.mp4}" type="video/mp4"/>
           </video>
-        ${!noContainer ? `</div>` : ''}
+        ${container ? `</div>` : ''}
     `;
   }
 }

src/page/about/about.html.ts

@@ -5,7 +5,7 @@ import './about.scss';
 
 export const generate = ({ name, picture }: Header): html => `
     <section id="about">
-        ${picture.toHTML(true)}
+        ${picture.toHTML()}
         <div class="placeholder"></div>
         <h1>${name}</h1>
     </section>

src/page/about/about.scss

@@ -16,6 +16,7 @@ section#about {
     @include square($img-size);
     border-radius: 100%;
     cursor: pointer;
+    box-shadow: var(--shadow);
   }
 
   p {

src/page/theme-switcher/theme-switcher.ts

@@ -21,7 +21,8 @@ export class PageThemeSwitcher extends PageElement {
     super(createElement(generate()));
 
     const storedIsDark = PageThemeSwitcher.loadFromLocalStorage();
-    const isDark = storedIsDark ? storedIsDark : isSystemLevelDarkModeEnabled();
+    const isDark =
+      storedIsDark !== null ? storedIsDark : isSystemLevelDarkModeEnabled();
 
     if (isDark) {
       (this.element as HTMLInputElement).checked = true;

src/page/timeline/timeline-element/timeline-element.html.ts

@@ -15,7 +15,7 @@ export const generate = (
         </div>
         <div class="card">
             <h2>${title}</h2>
-            ${figure.toHTML()}
+            ${figure.toHTML(true)}
             ${description.toHTML()}
             ${
               more

src/portfolio.ts

@@ -290,7 +290,7 @@ export const create = () => {
       curiumVitaes: [{ name: `Curriculum vitae`, url: cvEnglish }],
       email: `andras@schmelczer.dev`,
       lastEditText: `Last modified on `,
-      lastEdit: new Date(2020, 8 + 1, 30), // months are 0 indexed
+      lastEdit: new Date(2020, 9 - 1, 10), // months are 0 indexed
     }),
   };
 

src/style/a.scss

@@ -12,7 +12,7 @@ a {
   display: inline-block;
   overflow: hidden;
 
-  padding-bottom: $line-width;
+  padding: 0 3px $line-width 0;
 
   &:before,
   &:after {

src/style/vars.scss

@@ -22,7 +22,7 @@
     --large-margin: 70px;
     --normal-margin: 45px;
     --small-margin: 25px;
-    --shadow: 0 0 10px 2px rgba(0, 0, 0, 0.075), 0 0 1px rgba(0, 0, 0, 0.2);
+    --shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.2);
     --inset-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.075),
       inset 0 0 1px rgba(0, 0, 0, 0.2);
     --icon-size: 35px;
@@ -36,7 +36,7 @@
     --large-margin: 60px;
     --normal-margin: 30px;
     --small-margin: 15px;
-    --shadow: 0 0 10px 2px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.125);
+    --shadow: 0 0 10px 2px rgba(0, 0, 0, 0.75), 0 0 1px rgba(0, 0, 0, 0.125);
     --inset-shadow: inset 0 0 10px 2px rgba(0, 0, 0, 0.05),
       inset 0 0 1px rgba(0, 0, 0, 0.125);
     --icon-size: 25px;