feat(Docker): Add docker for browser-sync

Crop image to real content

assets/js/theme.js

@@ -1,21 +0,0 @@
-// https://web.dev/building-a-theme-switch-component/
-const storageKey = 'theme-preference'
-
-const getColorPreference = () => {
-    if (localStorage.getItem(storageKey))
-        return localStorage.getItem(storageKey)
-    else
-        return window.matchMedia('(prefers-color-scheme: dark)').matches
-            ? 'dark'
-            : 'light'
-}
-
-const setPreference = () => {
-    localStorage.setItem(storageKey, theme.value)
-    reflectPreference()
-}
-
-window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ({matches:isDark}) => {
-  theme.value = isDark ? 'dark' : 'light'
-  setPreference()
-})

docker-compose.yml

@@ -0,0 +1,11 @@
+---
+services:
+  web:
+    build: docker
+    volumes:
+      - ./src:/data
+      - /data/node_modules
+    ports:
+    - "3000:3000"
+    - "3001:3001"
+    command: start --server --files "/data"

docker/Dockerfile

@@ -0,0 +1,9 @@
+FROM node:current-alpine
+
+RUN npm -g install browser-sync
+
+WORKDIR /data
+
+EXPOSE 3000 3001
+
+ENTRYPOINT ["browser-sync"]

src/assets/css/dark_theme.css

@@ -1,21 +1,21 @@
 :root {
+    --color-active: #FF00C7;
     --color-bg-head: #77A3D2;
-    --color-bg-sctn-pink: #EDCCE7;
-    --color-bg-sctn-green: #CDFB52;
     --color-bg-sctn-blue: #52f8fb;
     --color-bg-sctn-fuscia: #FF00C7;
-    --color-active: #FF00C7;
+    --color-bg-sctn-green: #CDFB52;
-    --color-visited: #4B003B;
+    --color-bg-sctn-pink: #EDCCE7;
-    --color-hover: #EDCCE7;
-    --color-link: #000000;
-    --color-icone: #fff;
-    --color-discu-pink: #FFB4EF;
-    --color-link-f: #00fa6c;
-    --color-link-block: #4B003B;
     --color-bg: #000000;
-    --color-txt: #ffffff;
-    --color-txt-b: #000000;
-    --color-discu-pink: #4B003B;
-    --color-discu-green: #1C4D00;
     --color-discu-blue: #00354B;
+    --color-discu-green: #1C4D00;
+    --color-discu-pink: #4B003B;
+    --color-discu-pink: #FFB4EF;
+    --color-hover: #EDCCE7;
+    --color-icone: #fff;
+    --color-link-block: #4B003B;
+    --color-link-f: #00fa6c;
+    --color-link: #000000;
+    --color-txt-b: #000000;
+    --color-txt: #ffffff;
+    --color-visited: #4B003B;
 }

src/assets/css/light_theme.css

@@ -1,22 +1,22 @@
 :root {
+    --color-active: #FF00C7;
     --color-bg-head: #77A3D2;
-    --color-bg: white;
-    --color-bg-sctn-pink: #EDCCE7;
-    --color-bg-sctn-green: #CDFB52;
     --color-bg-sctn-blue: #52f8fb;
     --color-bg-sctn-fuscia: #FF00C7;
-    --color-active: #FF00C7;
+    --color-bg-sctn-green: #CDFB52;
-    --color-visited: #4B003B;
+    --color-bg-sctn-pink: #EDCCE7;
-    --color-hover: #EDCCE7;
+    --color-bg: white;
-    --color-link: #000000;
-    --color-icone: #fff;
-    --color-discu-pink: #FFB4EF;
-    --color-link-f: #00fa6c;
-    --color-link-block: #4B003B;
-    --color-txt: #23f3f3;
-    --color-link: #000000;
-    --color-icone: #000;
-    --color-discu-pink: #FFB4EF;
-    --color-discu-green: #CEFFB2;
     --color-discu-blue: #B4E9FF;
+    --color-discu-green: #CEFFB2;
+    --color-discu-pink: #FFB4EF;
+    --color-discu-pink: #FFB4EF;
+    --color-hover: #EDCCE7;
+    --color-icone: #000;
+    --color-icone: #fff;
+    --color-link-block: #4B003B;
+    --color-link-f: #00fa6c;
+    --color-link: #000000;
+    --color-link: #000000;
+    --color-txt: #23f3f3;
+    --color-visited: #4B003B;
 }

src/assets/css/style_hactarus.css

@@ -1,17 +1,18 @@
 /* Navigation */
 body {
+    margin: 0;
+    padding: 0;
 }
 
-header  {
+menu {
-    height: 5vh;
+    margin: 0;
-}
+    padding: 0;
-header > nav {
     position: fixed;
     top: 0;
     right: 0;
     left: 0;
     height: 5vh;
-    background-color: transparent;
+    vertical-align: middle;
     background-repeat: no-repeat;
     border: none;
     cursor: pointer;
@@ -20,7 +21,9 @@ header > nav {
     color: var(--color-link);
 }
 
-nav>ul {
+menu>ul {
+    margin: 0;
+    padding: 0;
     display: flex;
     flex-direction: row;
     width: 100%;
@@ -28,8 +31,11 @@ nav>ul {
     justify-content: space-around;
 }
 
-nav>ul>li {
+menu>ul>li {
-    flex: auto;
+    flex: content;
+}
+
+header {
 }
 
 section {
@@ -78,18 +84,17 @@ h2 {
 
 .fond {
     background-repeat: no-repeat;
-    background-size: cover;
+    background-size: 100% auto;
-    padding-bottom: 100%;
-    padding-top: 18vh;
     background-image: url(../images/background.png);
     background-color: var(--color-bg-head);
     filter: contrast(130%);
     text-align: center;
 }
+.fond > img{
+    width: 50vw;
+    min-height: 20vh;
+}
 
-.highlight {
+img {
-    background: linear-gradient(120deg, #ff00e329 0%, #74ff0069 100%);
+    max-width: 100vw;
-    background-repeat: no-repeat;
-    background-size: 100% 20%;
-    background-position: 0 60%;
 }