Release

.editorconfig

@@ -0,0 +1,18 @@
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.js]
+quote_type = single
+
+[*.md]
+charset = unset
+end_of_line = unset
+insert_final_newline = unset
+trim_trailing_whitespace = unset
+indent_style = unset
+indent_size = unset

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+package-lock.json

.stylelintrc

@@ -0,0 +1,159 @@
+{
+  "defaultSeverity": "warning",
+  "plugins": [
+    "@ronilaukkarinen/stylelint-value-no-unknown-custom-properties",
+    "stylelint-order"
+  ],
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-standard-scss"
+  ],
+  "customSyntax": "postcss-scss",
+  "rules": {
+    "order/order": [
+      {
+        "type": "at-rule",
+        "name": "import"
+      },
+      {
+        "type": "at-rule",
+        "name": "include"
+      },
+      {
+        "type": "at-rule",
+        "name": "extend"
+      },
+      "custom-properties",
+      "dollar-variables",
+      "declarations",
+      "rules",
+      {
+        "type": "at-rule",
+        "name": "media"
+      }
+    ],
+    "declaration-property-value-no-unknown": null,
+    "scss/at-mixin-argumentless-call-parentheses": null,
+    "scss/double-slash-comment-empty-line-before": null,
+    "scss/at-rule-conditional-no-parentheses": null,
+    "scss/dollar-variable-pattern": null,
+    "order/properties-alphabetical-order": true,
+    "alpha-value-notation": "number",
+    "declaration-block-no-redundant-longhand-properties": null,
+    "custom-property-empty-line-before": "never",
+    "color-no-invalid-hex": true,
+    "color-function-notation": null,
+    "color-hex-length": "short",
+    "selector-type-case": "lower",
+    "function-name-case": "lower",
+    "selector-attribute-quotes": "always",
+    "comment-whitespace-inside": "always",
+    "selector-max-specificity": "0,6,6",
+    "block-no-empty": true,
+    "max-line-length": null,
+    "declaration-empty-line-before": null,
+    "font-family-no-missing-generic-family-keyword": true,
+    "font-family-name-quotes": "always-where-required",
+    "at-rule-no-unknown": null,
+    "no-invalid-position-at-import-rule": null,
+    "declaration-no-important": true,
+    "comment-empty-line-before": null,
+    "scss/at-else-empty-line-before": "never",
+    "function-url-quotes": "always",
+    "unit-no-unknown": true,
+    "property-no-unknown": true,
+    "no-duplicate-selectors": true,
+    "length-zero-no-unit": true,
+    "font-weight-notation": "numeric",
+    "number-max-precision": 3,
+    "selector-class-pattern": null,
+    "selector-max-class": 5,
+    "selector-max-combinators": 5,
+    "selector-max-compound-selectors": 5,
+    "selector-max-pseudo-class": 2,
+    "selector-max-universal": 1,
+    "property-no-vendor-prefix": true,
+    "selector-no-vendor-prefix": true,
+    "selector-no-qualifying-type": null,
+    "declaration-block-no-duplicate-properties": true,
+    "no-unknown-animations": true,
+    "shorthand-property-no-redundant-values": true,
+    "declaration-block-single-line-max-declarations": 1,
+    "value-keyword-case": [
+      "lower",
+      {
+        "camelCaseSvgKeywords": true
+      }
+    ],
+    "csstools/value-no-unknown-custom-properties": [
+      true,
+      {
+        "importFrom": [
+          "style.css"
+        ]
+      }
+    ],
+    "rule-empty-line-before": [
+      "always-multi-line",
+      {
+        "except": [
+          "first-nested",
+          "after-single-line-comment"
+        ],
+        "ignore": [
+          "inside-block"
+        ]
+      }
+    ],
+    "at-rule-empty-line-before": [
+      "always",
+      {
+        "ignoreAtRules": [
+          "if",
+          "else"
+        ],
+        "except": [
+          "first-nested",
+          "blockless-after-same-name-blockless",
+          "blockless-after-blockless"
+        ],
+        "ignore": [
+          "after-comment"
+        ]
+      }
+    ],
+    "no-descending-specificity": null,
+    "max-nesting-depth": [
+      3,
+      {
+        "ignore": [
+          "blockless-at-rules",
+          "pseudo-classes"
+        ]
+      }
+    ],
+    "declaration-property-unit-allowed-list": [
+      {
+        "font-size": [
+          "rem",
+          "em",
+          "px"
+        ],
+        "/^animation/": [
+          "ms",
+          "s"
+        ],
+        "line-height": [
+          "px",
+          "%",
+          ""
+        ]
+      }
+    ],
+    "property-disallowed-list": [
+      "font",
+      "animation",
+      "background"
+    ]
+  }
+}

README.md

@@ -0,0 +1,30 @@
+## Mastodon, but it's Twitter
+
+Blasphemy! Yes, I know, but I just had to do this. I wanted to see if it's possible to get <a href="https://github.com/mastodon/mastodon">Mastodon</a> default user interface to look exactly like Twitter.
+
+Please note that this is a personal experiment _for fun_, but as far as I know colors can't be trademarked. No logos or other elements have been used without permission. Twitter reuses [FontAwesome](https://github.com/FortAwesome/Font-Awesome) for icons.
+
+See the [original post](https://mementomori.social/@rolle/109984108360395822).
+
+### Goals
+
+- **CSS only.** This means some pseudos and modern CSS hacks. The intent is to have the code base as simple and extendable as possible. The styles should be easily modifiable. Ready-made code works when placed in _Custom CSS_ box in {yourinstance.social/mementomori.social/admin/settings/appearance}
+- **Single-column layout only.** This experiment is not meant for advanced layout.
+
+### Roadmap
+
+- [x] Desktop views
+- [ ] Mobile views
+- [ ] Star to like heart with animation
+
+## Installation
+
+1. Copy the contents of style.css
+2. Install it as CSS to your assets or use Custom CSS in the Appearance settings in your instance
+
+## Contributing / testing
+
+1. Install [live-css-editor](https://github.com/webextensions/live-css-editor) (or any other extension that allows you to inject CSS into web pages) or use [Unite for macOS](https://www.bzgapps.com/unite)
+2. Get style.css from this repo
+3. Open extension and paste the CSS into the editor
+4. Click 📌-icon so the styles will be remembered for the domain or if you want just to use it as needed, activate styles from the extension's popup

package.json

@@ -0,0 +1,21 @@
+{
+  "name": "mastodon-twitter",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@ronilaukkarinen/stylelint-a11y": "^1.2.7",
+    "@ronilaukkarinen/stylelint-declaration-strict-value": "^1.9.2",
+    "@ronilaukkarinen/stylelint-value-no-unknown-custom-properties": "^4.0.1",
+    "postcss": "^8.4.21",
+    "postcss-scss": "^4.0.6",
+    "stylelint": "^15.2.0",
+    "stylelint-config-standard": "^30.0.1",
+    "stylelint-config-standard-scss": "^7.0.1"
+  }
+}