Update login.scss

.gitea/workflows/build-image.yml

@@ -0,0 +1,34 @@
+name: Build and Push Masto Image
+
+on:
+  workflow_dispatch:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Generate timestamp
+        id: vars
+        run: echo "TAG=$(date +%Y%m%d-%H%M)" >> $GITHUB_ENV
+
+      - name: Login to Docker Hub
+        run: |
+          echo "${{ secrets.DOCKER_PASSWORD }}" | docker login \
+            -u "${{ secrets.DOCKER_USERNAME }}" \
+            --password-stdin
+
+      - name: Build image
+        run: |
+          docker build \
+            -t domoel/masto:latest \
+            -t domoel/masto:${TAG} \
+            .
+
+      - name: Push image
+        run: |
+          docker push domoel/masto:latest
+          docker push domoel/masto:${TAG}

Dockerfile

@@ -1,12 +1,16 @@
 ### BUILDER IMAGE ###
 FROM docker.io/superseriousbusiness/masto-fe-standalone-woodpecker-build:0.1.0 AS builder
 
-# Prepare the build directory, copy
-# relevant source + config files over.
 WORKDIR /build
+
+USER root
+RUN mkdir -p /build/.yarn && chown -R node:node /build
+USER node
+
 COPY --chown=node:node app /build/app
 COPY --chown=node:node config /build/config
 COPY --chown=node:node public /build/public
+
 COPY --chown=node:node \
     .browserslistrc \
     babel.config.js \
@@ -16,19 +20,19 @@ COPY --chown=node:node \
     yarn.lock \
     /build/
 
-# Create a production build of the frontend.
 RUN yarn && yarn build:production
 
-### RUNTIME IMAGE ###
-FROM nginx:alpine AS runtime
 
-# Copy bigger nested stuff.
+### RUNTIME IMAGE ###
+FROM docker.io/nginx:alpine AS runtime
+
 COPY --from=builder /build/public/packs/js/flavours/glitch /usr/share/nginx/html/packs/js/flavours/glitch
 COPY --from=builder /build/public/packs/js/flavours/vanilla /usr/share/nginx/html/packs/js/flavours/vanilla
 
-# Copy remaining files.
 COPY --from=builder /build/public /usr/share/nginx/html/
 
-# Set up nginx.
 COPY nginx.conf /etc/nginx/nginx.conf
+
 EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

app/javascript/flavours/glitch/styles/login.scss

@@ -2,16 +2,18 @@
 @import 'reset';
 
 :root {
-    --color-bg: #191b22;
+    --light-color: #f7f7fa;
-    --color-fg: #fff;
+    --dark-color: #1e1f29;
+    --footer-color: #2f313d;
+    --hover-color: #bd93f9;
 }
 
 body {
-    color: var(--color-fg);
+    color: var(--light-color);
     font-family: ui-rounded, mastodon-font-sans-serif, sans-serif;
     font-size: 1rem;
     line-height: 1.5;
-    background: var(--color-bg);
+    background-color: var(--dark-color);
 }
 
 .login-container {
@@ -19,7 +21,7 @@ body {
 
     display: grid;
     row-gap: var(--login-row-gap);
-    margin: 50px auto;
+    margin: 34px auto;
     padding: 1rem;
     max-width: 30rem;
     box-sizing: border-box;
@@ -27,10 +29,15 @@ body {
 
 header {
     display: flex;
-    justify-content: center;
+    justify-content: flex-start;
 
     img {
-        height: 150px;
+        display: block;
+        width: auto;
+        height: auto;
+        max-width: 90px;
+        max-height: 90px;
+        object-fit: contain;
     }
 }
 
@@ -41,19 +48,18 @@ main {
 }
 
 h1 {
+    margin-bottom: 15px;
     font-size: 28px;
     line-height: 33px;
     font-weight: 700;
-    margin-bottom: 15px;
 }
 
 label {
-    font-family: inherit;
-    color: var(--color-fg);
     display: block;
-    word-wrap: break-word;
-    font-weight: 500;
     grid-column: 1 / -1;
+    color: var(--light-color);
+    font-family: inherit;
+    font-weight: 500;
 }
 
 form {
@@ -62,64 +68,82 @@ form {
     grid-template-columns: 1fr min-content;
 }
 
-:focus-visible,
+input[type='text'] {
-button:focus-visible {
+    display: block;
-    outline: 2px solid #66befe;
+    margin: 0;
-    outline-offset: 3px;
+    padding: 0.75rem 1rem;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 0;
+    box-sizing: border-box;
+    color: var(--light-color);
+    font-family: inherit;
+    font-size: inherit;
+    line-height: 1.5;
+    background-color: rgba(255, 255, 255, 0.04);
+    box-shadow: none;
+    transition: color 0.2s ease, background-size 0.2s ease, border-color 0.2s ease;
+
+    &:focus {
+        outline: none;
+        border-color: var(--hover-color);
+    }
 }
 
 button {
-    padding: 7px 10px;
+    padding: 0.75rem 1.5rem;
-    border: 1px solid lighten(#66befe, 7%);
+    border: 1px solid rgba(255, 255, 255, 0.15);
-    border-radius: 4px;
+    border-radius: 0;
     box-sizing: border-box;
-    color: #2a2b2f;
+    color: var(--dark-color);
     font-family: inherit;
     font-size: inherit;
-    font-weight: 500;
+    font-weight: bold;
-    text-align: center;
     white-space: nowrap;
-    background-color: #66befe;
+    background-color: var(--light-color);
+    cursor: pointer;
 
     &:hover {
-        background-color: #89caff;
+        color: var(--dark-color);
+        background-color: var(--hover-color);
     }
 
     &:disabled {
-        background-color: #9baec8;
+        color: var(--dark-color);
+        background-color: rgba(255, 255, 255, 0.35);
         cursor: default;
     }
 }
 
-input[type='text'] {
-    display: block;
-    margin: 0;
-    padding: 15px;
-    border: 1px solid lighten(#282c37, 7%);
-    border-radius: 4px;
-    box-sizing: border-box;
-    box-shadow: none;
-    color: #9baec8;
-    font-family: inherit;
-    font-size: inherit;
-    line-height: 18px;
-    background: #282c37;
-}
-
 .content {
     padding: 15px;
-    border-radius: 4px;
+    border-radius: 0;
-    border: 1px solid lighten(#39404f, 7%);
+    border: 1px solid rgba(248, 248, 242, 0.08);
-    color: #fff;
+    border-left: 4px solid var(--hover-color);
-    background-color: #39404f;
+    color: var(--light-color);
+    background-color: var(--footer-color);
 }
 
 .link-footer {
     padding-inline: 10px;
-    color: #97a8b4;
+    color: rgba(247, 247, 250, 0.75);
     font-size: 0.875rem;
 
     a {
-        color: inherit;
+        color: var(--hover-color);
+        text-decoration: none;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+}
+
+@media (max-width: 500px) {
+    form {
+        grid-template-columns: 1fr;
+    }
+
+    button {
+        width: 100%;
     }
 }

public/login.html

@@ -3,7 +3,7 @@
 
 <head>
     <meta charset="UTF-8">
-    <title>Login | Masto-FE (🦥 flavour)</title>
+    <title>Zeitfresser Mastodon Frontend</title>
     <meta content="width=device-width, initial-scale=1" name="viewport">
     <link rel="stylesheet" media="all" href="/packs/css/flavours/glitch/login.css" />
     <script src="/auth.js"></script>
@@ -12,10 +12,10 @@
 <body class="app-body">
     <div class="login-container">
         <header>
-            <img  alt="a friendly smiling sloth" src="images/mascot.svg" />
+            <img  alt="a friendly smiling sloth" src="images/logo.avif" />
         </header>
         <main>
-            <h1>Log into your instance</h1>
+            <h1>Zeitfresser Mastodon Frontend</h1>
             <form method="post" id="login">
                 <label for="instance">Instance URL</label>
                 <input type="text" id="instance" value="" class="input instance">
@@ -25,17 +25,16 @@
             </form>
             <aside class="content">
                 <p>
-                    <strong>Note:</strong>
+                    Zeitfresser Mastodon is a client-sided web frontend to run Mastodon or GoToSocial server backends on your machine
-                    this application is completely client-side, meaning everything happens in the browser on your machine.
                     It does not store information anywhere else than your browser's local storage.
                 </p>
             </aside>
         </main>
         <footer class="link-footer">
             <p>
-                <strong>Masto-FE (🦥 flavour)</strong>
+                <strong>Zeitfresser Mastodon Frontend</strong>
                 <span aria-hidden="true"> · </span>
-                <a href="https://codeberg.org/superseriousbusiness/masto-fe-standalone" rel="noopener noreferrer" target="_blank">
+                <a href="https://git.ztfr.eu/Dome/Masto" rel="noopener noreferrer" target="_blank">
                     Source code
                 </a>
             </p>