[feature] start rewriting css from scratch

.editorconfig

@@ -3,5 +3,5 @@ root = true
 [*.scss]
 indent_size = 2
 
-[{**/login.scss,**/tangerine/**/*.scss,**/gts/**/*.scss}]
+[{**/login.scss,**/tangerine/**/*.scss,**/gts/**/*.scss,app/css/**/*.css}]
 indent_size = 4

app/css/core/_core.css

@@ -0,0 +1,101 @@
+@import "colors";
+@import "columns";
+@import "scrollbars";
+@import "sizes";
+
+@import "multiple-columns";
+
+@import "components/drawer";
+@import "components/search";
+@import "components/column";
+@import "components/notification-filter-bar";
+@import "components/status/status";
+
+@import "modules/feed";
+@import "modules/status";
+
+@font-face {
+    font-family: "Manrope";
+    src: url("Manrope[wght].woff2") format("woff2-variations");
+}
+
+* {
+    box-sizing: border-box;
+
+    &::before,
+    &::after {
+        box-sizing: inherit;
+    }
+}
+
+body {
+    margin: 0;
+    font-family: "Manrope", ui-rounded, sans-serif;
+    color: var(--color-fg);
+    line-height: 1.5;
+    text-rendering: optimizelegibility;
+    background: var(--color-bg);
+}
+
+.ui {
+    width: 100%;
+    height: 100%;
+}
+
+button {
+    display: block;
+    padding: 6px;
+    border: 1px solid transparent;
+    color: var(--color-content-fg);
+    font: inherit;
+    line-height: inherit;
+    border-radius: 6px;
+    background-color: var(--color-content-secondary-bg);
+
+    &:is(:active, :focus, :hover) {
+        color: var(--color-accent);
+        background-color: var(--color-accent-bg);
+    }
+
+    &:focus-visible {
+        outline: solid 2px var(--color-accent-focus);
+        outline-offset: 2px;
+    }
+}
+
+button:has(svg) {
+    display: flex;
+    align-items: center;
+}
+
+img {
+    max-width: 100px;
+}
+
+svg.gts-icon {
+    display: block;
+    width: var(--size-icon);
+    height: var(--size-icon);
+}
+
+.compose-form__buttons {
+    display: flex;
+    gap: 5px;
+}
+
+.emojione {
+    --size: min(1em, 20px);
+
+    width: var(--size);
+    height: var(--size);
+}
+
+.ui__header,
+.search__popout,
+.drawer__inner__mastodon {
+    display: none;
+}
+
+.upload-area {
+    position: fixed;
+}

app/css/core/colors.css

@@ -0,0 +1,39 @@
+/* 🎨 Colors */
+:root {
+    color-scheme: light dark;
+
+    --color-bg: #f2eff5;
+    --gradient-bg: linear-gradient(90deg, var(--color-bg), var(--color-bg));
+    --color-fg: #2a2d37;
+    --color-fg-muted: #888494;
+    --color-secondary-bg: #e8e4f2;
+    --color-secondary-separator: #dfdbed;
+
+    --color-content-bg: #ffffff;
+    --color-content-fg: #444a5a;
+    --color-content-fg-bold: #000000;
+    --color-content-fg-muted: color-mix(
+        in srgb,
+        var(--color-content-fg),
+        var(--color-content-bg) 40%
+    );
+    --color-content-secondary-bg: #f5f4f9;
+    --color-content-secondary-separator: rgba(223, 219, 237, 0.4);
+    --color-content-bg-focus: #fffcfa;
+
+    --color-accent: #5758ff;
+    --color-accent-focus: #563acc;
+    --color-accent-lines: rgba(99, 100, 255, 0.12);
+    --color-accent-bg: #e5ddf6;
+    --color-accent-fg: #ffffff;
+
+    --color-lines: #e1dde4;
+    --color-lines-translucent: rgba(0, 0, 0, 0.15);
+
+    --color-confirm: #79bd9a;
+    --color-confirm-bg: rgba(121, 189, 154, 0.3);
+    --color-confirm-fg: #4e8a6b;
+
+    --color-reject: #df405a;
+    --color-reject-bg: rgba(223, 64, 90, 0.3);
+}

app/css/core/columns.css

@@ -0,0 +1,24 @@
+.columns-area {
+    display: flex;
+    padding: var(--size-layout-gap);
+    column-gap: var(--size-layout-gap);
+}
+
+.column {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    overflow: hidden;
+    border: 1px solid var(--color-lines);
+    border-radius: var(--size-layout-radius);
+    background: var(--color-content-bg);
+
+    .layout-multiple-columns & {
+        width: 400px;
+    }
+}
+
+.column > .scrollable {
+    max-height: 100%;
+    overflow-y: scroll;
+}

app/css/core/components/column.css

@@ -0,0 +1 @@
+@import "components/column/column-header";

app/css/core/components/column/column-header.css

@@ -0,0 +1,32 @@
+.column-header {
+    display: flex;
+    margin: 0;
+    font-size: max(16px, 1rem);
+    font-weight: bold;
+    backdrop-filter: blur(20px);
+}
+
+.column-header > button {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    gap: 15px;
+    padding-inline-start: 15px;
+    color: var(--color-content-fg);
+    background: var(--color-content-bg);
+
+    &:hover {
+        color: inherit;
+        background-color: transparent;
+    }
+}
+
+.column-header__buttons {
+    display: flex;
+    gap: var(--size-ui-gap);
+    padding: 5px;
+
+    > button {
+        background-color: transparent;
+    }
+}

app/css/core/components/drawer.css

@@ -0,0 +1,33 @@
+.drawer {
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--size-layout-gap);
+    min-width: 300px;
+    max-width: 400px;
+}
+
+.drawer__header {
+    display: flex;
+    column-gap: var(--size-ui-gap);
+    padding: 5px;
+    border: 1px solid var(--color-lines);
+    border-radius: var(--size-layout-radius);
+    background: var(--color-content-bg);
+}
+
+.drawer__header a {
+    --size-icon: 24px;
+
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    justify-content: center;
+    padding: 8px;
+    border-radius: var(--size-ui-radius);
+    color: inherit;
+    transition: all 0.3s;
+
+    &:is(:active, :focus, :hover) {
+        background-color: var(--color-accent-bg);
+    }
+}

app/css/core/components/notification-filter-bar.css

@@ -0,0 +1,66 @@
+.notification__filter-bar {
+    display: flex;
+}
+
+.notification__filter-bar {
+    display: flex;
+    gap: 8px;
+    margin-inline: -1px;
+    padding: 6px;
+    border: 1px solid var(--color-accent-lines);
+    background: var(--color-accent-bg);
+
+    a,
+    button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-grow: 1;
+        padding: 8px 6px;
+        min-width: 32px;
+        border: 0;
+        border-radius: var(--size-ui-radius);
+        color: var(--color-content-fg);
+        line-height: 20px;
+        text-decoration: none;
+        background: transparent;
+        transition: all 0.3s;
+
+        &:focus-visible,
+        &:hover {
+            background: var(--color-accent-lines);
+        }
+    }
+
+    a.active,
+    button.active {
+        color: var(--color-content-fg);
+        background: var(--color-content-bg);
+
+        /* &:focus-visible,
+        &:hover {
+            background: var(--color-notifications-bg--hover);
+        } */
+    }
+
+    a:not(:first-child),
+    button:not(:first-child) {
+        position: relative;
+
+        &::before {
+            position: absolute;
+            top: 6px;
+            right: calc(100% + 3px);
+            width: 2px;
+            height: 24px;
+            background: var(--color-accent-lines);
+            content: "";
+        }
+    }
+
+    svg.gts-icon {
+        --size: 20px;
+
+        display: block;
+    }
+}

app/css/core/components/search.css

@@ -0,0 +1,50 @@
+/* 🔍 Search */
+.search {
+    position: relative;
+    display: flex;
+}
+
+.search > input {
+    display: block;
+    padding: 12px 40px;
+    width: 100%;
+    border: 1px solid var(--color-accent-lines);
+    border-radius: var(--size-layout-radius);
+    color: var(--color-content-fg);
+    font: inherit;
+    font-weight: 500;
+    line-height: 20px;
+    background: var(--color-accent-bg);
+    transition: 0.2s;
+    transition-property: border-color, background-color, outline;
+
+    &::placeholder {
+        font-weight: 500;
+        color: var(--color-accent);
+    }
+
+    &:focus::placeholder {
+        color: var(--color-content-fg);
+        opacity: 0.4;
+    }
+}
+
+.search > .gts-icon {
+    --size-icon: 20px;
+
+    position: absolute;
+    top: 13px;
+    left: 13px;
+}
+
+.search > button {
+    position: absolute;
+    top: 7px;
+    right: 7px;
+    padding: 6px;
+    background: transparent;
+
+    &:not(.active) {
+        display: none;
+    }
+}

app/css/core/components/status/_status.css

@@ -0,0 +1,10 @@
+/* 🚥 Status */
+@import "components/status/account";
+@import "components/status/action-bar";
+@import "components/status/avatar";
+@import "components/status/container";
+@import "components/status/content";
+@import "components/status/display-name";
+@import "components/status/icons";
+@import "components/status/info";
+@import "components/status/prepend";

app/css/core/components/status/account.css

@@ -0,0 +1,8 @@
+/* 🚥 Status: Account */
+.status__info__account {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 10px;
+    overflow: hidden;
+    text-overflow: clip;
+}

app/css/core/components/status/action-bar.css

@@ -0,0 +1,16 @@
+/* 🚥 Status: Action bar */
+.status__action-bar {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+
+    button {
+        color: var(--color-accent);
+        background-color: transparent;
+    }
+}
+
+.status__relative-time {
+    margin-left: auto;
+    color: var(--color-content-fg);
+}

app/css/core/components/status/avatar.css

@@ -0,0 +1,38 @@
+/* 🚥 Status: Avatar */
+.status__avatar {
+}
+
+.status {
+    .account__avatar {
+        border-radius: var(--size-ui-radius);
+    }
+
+    .account__avatar-overlay {
+        position: relative;
+        padding-block-end: 10px;
+        padding-inline-end: 10px;
+    }
+
+    .account__avatar-overlay-base,
+    .account__avatar-overlay-overlay {
+        display: block;
+        width: var(--size-avatar);
+        height: var(--size-avatar);
+        border-radius: var(--size-ui-radius);
+        background-position: center;
+        background-size: cover;
+        background-repeat: no-repeat;
+    }
+
+    .account__avatar-overlay-base {
+        --size-avatar: 36px;
+    }
+
+    .account__avatar-overlay-overlay {
+        --size-avatar: 24px;
+
+        position: absolute;
+        bottom: 0;
+        right: 0;
+    }
+}

app/css/core/components/status/container.css

@@ -0,0 +1,13 @@
+.status {
+    --color-status-bg: var(--color-content-bg);
+
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--size-layout-gap);
+    padding: 15px;
+    text-wrap: pretty;
+
+    a {
+        word-break: break-word;
+    }
+}

app/css/core/components/status/content.css

@@ -0,0 +1,37 @@
+/* 🚥 Status: Content */
+.status__content__text {
+    > :first-child {
+        margin-block-start: 0;
+    }
+
+    > :last-child {
+        margin-block-end: 0;
+    }
+}
+
+.status__content__text a {
+    color: var(--color-accent);
+    text-decoration-line: underline;
+    text-decoration-color: var(--color-accent-bg);
+    text-decoration-thickness: 2px;
+    text-underline-offset: 2px;
+
+    &:hover {
+        text-decoration-color: var(--color-accent);
+    }
+}
+
+.status__content__text a.mention {
+    text-decoration: none;
+
+    span {
+        text-decoration-line: underline;
+        text-decoration-color: var(--color-accent-bg);
+        text-decoration-thickness: 2px;
+        text-underline-offset: 2px;
+    }
+
+    &:is(:active, :focus, :hover) span {
+        text-decoration-color: var(--color-accent);
+    }
+}

app/css/core/components/status/display-name.css

@@ -0,0 +1,35 @@
+/* 🚥 Status: Display name */
+.status__display-name {
+    align-self: start;
+    justify-self: start;
+    color: var(--color-content-fg);
+    font-size: 15px;
+    line-height: 1.2;
+    text-decoration: none;
+    overflow: hidden;
+
+    .display-name {
+        display: block;
+        max-width: 100%;
+        overflow: hidden;
+        font-weight: 700;
+        text-overflow: clip;
+    }
+
+    .display-name__html {
+        font-weight: 700;
+    }
+
+    .display-name__account {
+        color: var(--color-secondary-fg);
+        font-weight: 400;
+        word-break: normal;
+    }
+
+    &:hover .display-name__html {
+        text-decoration-line: underline;
+        text-decoration-color: currentColor;
+        text-decoration-thickness: 2px;
+        text-underline-offset: 2px;
+    }
+}

app/css/core/components/status/icons.css

@@ -0,0 +1,46 @@
+/* 🚥 Status: Icons */
+.status__info__icons {
+    --size-icon: 18px;
+
+    position: relative;
+    display: flex;
+    gap: 5px;
+    align-items: start;
+    color: var(--color-content-fg);
+
+    .text-icon {
+        font-size: 12px;
+        line-height: 20px;
+    }
+
+    &::before {
+        position: absolute;
+        top: 0;
+        right: calc(100% + 5px);
+        width: 20px;
+        height: 100%;
+        content: "";
+        background: linear-gradient(90deg, transparent, var(--color-status-bg));
+        transition: all 0.2s;
+    }
+}
+
+.status__info__icons button.icon-button {
+    display: block;
+    margin: -3px;
+    padding: 2px;
+    color: inherit;
+    background-color: transparent;
+
+    svg.gts-icon {
+        transition: transform ease-in-out 0.2s;
+    }
+
+    &.active svg.gts-icon {
+        transform: rotate(-180deg);
+    }
+
+    &:hover {
+        color: var(--color-accent-hover);
+    }
+}

app/css/core/components/status/info.css

@@ -0,0 +1,10 @@
+/* 🚥 Status: Info */
+.status__info {
+    display: grid;
+    gap: 5px;
+    grid-template-columns: 1fr auto;
+
+    .notification__message {
+        grid-column: 1/-1;
+    }
+}

app/css/core/components/status/prepend.css

@@ -0,0 +1,43 @@
+/* 🚥 Status: Prepend */
+.status__prepend {
+    display: inline-flex;
+    align-items: center;
+    align-self: start;
+    gap: 5px;
+    padding: 5px 10px;
+    border: 1px solid var(--color-accent-lines);
+    border-radius: 50px;
+    color: var(--color-content-fg);
+    font-size: 13px;
+    font-weight: 500;
+    background-color: var(--color-content-secondary-bg);
+
+    &:focus-within {
+        outline: 2px solid var(--color-accent-focus);
+        outline-offset: 3px;
+    }
+}
+
+.status__prepend-icon {
+    --size: 18px;
+
+    display: block;
+    width: var(--size);
+    height: var(--size);
+}
+
+.status__prepend-display-name {
+    color: inherit;
+    text-decoration: underline;
+    text-decoration-color: var(--color-accent-muted-fg);
+
+    &:hover {
+        color: inherit;
+        text-decoration-thickness: 2px;
+    }
+
+    &:focus-visible {
+        color: var(--color-accent-focus);
+        outline-color: transparent;
+    }
+}

app/css/core/modules/feed.css

@@ -0,0 +1,8 @@
+[role="feed"].item-list {
+}
+
+[role="feed"].item-list > article {
+    &:not(:last-child) {
+        border-bottom: 1px solid var(--color-lines);
+    }
+}

app/css/core/multiple-columns.css

@@ -0,0 +1,17 @@
+body.layout-multiple-columns {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    padding-bottom: env(safe-area-inset-bottom);
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+
+    :is(.app-holder, .app-holder > div, .columns-area) {
+        height: 100%;
+    }
+
+    .ui {
+        display: flex;
+        flex: 0 0 auto;
+    }
+}

app/css/core/scrollbars.css

@@ -0,0 +1,28 @@
+/* 🖱️ Scrollbars */
+:root:has(.app-body) *::-webkit-scrollbar-track {
+    background-color: var(--color-bg);
+    padding: 2px;
+}
+:root:has(.app-body) *::-webkit-scrollbar-thumb {
+    background-color: var(--color-accent);
+    border-radius: 8px;
+    opacity: 0.4;
+    box-shadow: none;
+}
+:root:has(.app-body) *::-webkit-scrollbar-track:hover {
+    background-color: var(--color-bg);
+}
+:root:has(.app-body) *::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-accent);
+    opacity: 0.7;
+}
+@media screen and (max-width: 1175px) {
+    :root:has(.app-body) *::-webkit-scrollbar {
+        display: none;
+    }
+}
+:root,
+* {
+    scrollbar-color: var(--color-accent) var(--color-bg);
+    scrollbar-width: thin;
+}

app/css/core/sizes.css

@@ -0,0 +1,9 @@
+/* 📏 Sizes */
+:root {
+    --size-layout-gap: 10px;
+    --size-layout-radius: 8px;
+    --size-ui-gap: 5px;
+    --size-ui-radius: 6px;
+
+    --size-icon: max(1em, 20px);
+}

app/javascript/packs/common.js

@@ -1,2 +1,2 @@
 import "./public-path";
-import "styles/application.scss";
+import "../css/core/_core.css";

config/webpack/shared.js

@@ -10,6 +10,12 @@ const AssetsManifestPlugin = require("webpack-assets-manifest");
 const { env, settings, core, flavours, output } = require("./configuration");
 const rules = require("./rules");
 
+const foliui = {
+  core: {
+    import: "./app/css/core/_core.css",
+  }
+}
+
 function reducePacks (data, into = {}) {
   if (!data.pack) {
     return into;
@@ -61,6 +67,7 @@ function reducePacks (data, into = {}) {
 const entries = Object.assign(
   reducePacks(core),
   Object.values(flavours).reduce((map, data) => reducePacks(data, map), {}),
+  foliui,
 );
 
 

config/webpacker.yml

@@ -11,7 +11,7 @@ default: &default
 
   # Additional paths webpack should lookup modules
   # ['app/assets', 'engine/foo/app/assets']
-  resolved_paths: []
+  resolved_paths: ["app/css"]
 
   # Reload manifest.json on all requests so we reload latest compiled packs
   cache_manifest: false
@@ -61,8 +61,8 @@ development:
     https: false
     port: 3035
     webSocketURL:
-      hostname: '0.0.0.0'
+      hostname: "0.0.0.0"
-      pathname: '/ws'
+      pathname: "/ws"
       port: 3035
     hmr: false
     # Inline should be set to true if using HMR
@@ -70,11 +70,11 @@ development:
     client:
       overlay: true
     open: true
-    allowedHosts: 'all'
+    allowedHosts: "all"
     headers:
-      'Access-Control-Allow-Origin': '*'
+      "Access-Control-Allow-Origin": "*"
     watch_options:
-      ignored: '**/node_modules/**'
+      ignored: "**/node_modules/**"
 
 test:
   <<: *default

public/index.html

@@ -19,10 +19,10 @@
     <script src="/verify-state.js"></script>
     <script src="/packs/js/common.js"></script>
     <script src="/packs/js/core/common.js"></script>
-    <link rel="stylesheet" media="all" href="/packs/css/core/common.css" />
+    <link rel="stylesheet" media="all" href="/packs/css/core.css" />
 
     <script src="/packs/js/flavours/glitch/common.js"></script>
-    <link rel="stylesheet" media="all" href="/packs/css/flavours/glitch/common.css" />
+    <!-- <link rel="stylesheet" media="all" href="/packs/css/flavours/glitch/common.css" /> -->
 
     <script src="/packs/js/flavours/glitch/home.js"></script>
 </head>