15 votes

Its still rough, but I made a really busy tildes theme

Posted by tomf (edited )
Tags: stylus, css, user created, themes.display

I decided to rewrite this from scratch. You can try it out if you're game.

album

I wiped out my profile in Chrome the other day and forgot to back up stylus and some other settings for a few extensions. I found an old post where I listed part of a theme I'd started working on, but had since abandoned.

I couldn't find a copy of the ol' Tiltweaks stylus theme, either, so I decided to bring back that old, unfinished gem to get my theme back to roughly where I had it before... then I added a bunch of other crap in.

Anyway, here's the link to a busy screencap.

The two column layout isn't for everybody, but in the brief time I've spent with it, I'm starting to like it.

Just thought I'd share. I'm about 99.6% certain everybody will see it and say, 'gross' :)

27 comments

  1. [5]
    psi
    Link
    It's actually Tilweaks, not Tiltweaks, which might partially explain your difficulty in hunting it down. But only partially since the link is dead. But luckily I still use Tilweaks! (But...

    It's actually Tilweaks, not Tiltweaks, which might partially explain your difficulty in hunting it down.

    But only partially since the link is dead. But luckily I still use Tilweaks! (But unluckily, only v 1.01, it seems.)

    I'll export my Stylus themes. I'm not sure what's relevant here, but I only have two themes (Tilweaks and a dracula theme for Hacker News), so it shouldn't be too much to sort out.

    Stylus themes 
    [
  {
    "settings": {
      "openEditInWindow": false,
      "openEditInWindow.popup": false,
      "windowPosition": {},
      "show-badge": true,
      "disableAll": false,
      "exposeIframes": false,
      "newStyleAsUsercss": false,
      "styleViaXhr": false,
      "patchCsp": false,
      "config.autosave": true,
      "popup.breadcrumbs": true,
      "popup.breadcrumbs.usePath": false,
      "popup.enabledFirst": true,
      "popup.stylesFirst": true,
      "popup.autoResort": false,
      "popup.borders": false,
      "popup.findStylesInline": true,
      "popup.findSort": "u",
      "manage.onlyEnabled": false,
      "manage.onlyLocal": false,
      "manage.onlyUsercss": false,
      "manage.onlyEnabled.invert": false,
      "manage.onlyLocal.invert": false,
      "manage.onlyUsercss.invert": false,
      "manage.actions.expanded": true,
      "manage.backup.expanded": true,
      "manage.filters.expanded": true,
      "manage.newUI": true,
      "manage.newUI.favicons": false,
      "manage.newUI.faviconsGray": true,
      "manage.newUI.targets": 3,
      "manage.newUI.sort": "title,asc",
      "editor.options": {},
      "editor.toc.expanded": true,
      "editor.options.expanded": true,
      "editor.lint.expanded": true,
      "editor.lineWrapping": true,
      "editor.smartIndent": true,
      "editor.indentWithTabs": false,
      "editor.tabSize": 4,
      "editor.keyMap": "sublime",
      "editor.theme": "default",
      "editor.beautify": {
        "selector_separator_newline": true,
        "newline_before_open_brace": false,
        "newline_after_open_brace": true,
        "newline_between_properties": true,
        "newline_before_close_brace": true,
        "newline_between_rules": false,
        "preserve_newlines": true,
        "end_with_newline": false,
        "indent_conditional": true
      },
      "editor.beautify.hotkey": "",
      "editor.lintDelay": 300,
      "editor.linter": "csslint",
      "editor.lintReportDelay": 500,
      "editor.matchHighlight": "token",
      "editor.autoCloseBrackets": true,
      "editor.autocompleteOnTyping": false,
      "editor.contextDelete": true,
      "editor.selectByTokens": true,
      "editor.appliesToLineWidget": true,
      "editor.livePreview": true,
      "editor.colorpicker": true,
      "editor.colorpicker.hexUppercase": false,
      "editor.colorpicker.hotkey": "",
      "editor.colorpicker.color": "",
      "editor.colorpicker.maxHeight": 300,
      "hotkey._execute_browser_action": "",
      "hotkey.openManage": "",
      "hotkey.styleDisableAll": "",
      "sync.enabled": "google",
      "iconset": 0,
      "badgeDisabled": "#8B0000",
      "badgeNormal": "#006666",
      "popupWidth": 246,
      "updateInterval": 24
    }
  },
  {
    "enabled": false,
    "updateUrl": "https://userstyles.org/styles/chrome/97106.json",
    "md5Url": "https://update.userstyles.org/97106.md5",
    "url": "http://userstyles.org/styles/97106",
    "originalMd5": "052f0b6422e73a5f2a8ffc739fc90376",
    "installDate": 1588811901332,
    "sections": [
      {
        "code": "* {\n    color: #f8f8f2 !important;\n    background-color: #282a36 !important;\n  }\n  body > center > table > tbody > tr:first-child * {\n    background-color: #44475a !important;\n  }\n  body > center > table > tbody > tr:first-child * a:hover {\n    background: #6272a4 !important;\n  }\n  code, pre, input, textarea {\n    background: #44475a !important;\n  }\n  a {\n    color: #8be9fd !important;\n  }\n  .subtext a {\n    color: #6272a4 !important;\n  }\n  a:visited, a:visited span {\n    color: #bd93f9 !important;\n  }\n  a:hover, a:hover span {\n    background: #44475a !important;\n  }",
        "domains": [
          "news.ycombinator.com"
        ]
      }
    ],
    "name": "Hacker News - Dracula",
    "originalDigest": "37015f311c9ca79845cf133a084bb9b6882eb26c",
    "_id": "5073da6e-5f49-463c-83f4-733575e844a6",
    "_rev": 1626393490775,
    "id": 1,
    "updateDate": 1588812687224,
    "_usw": {}
  },
  {
    "enabled": true,
    "updateUrl": "https://git.sr.ht/~admicos/scripts/blob/master/usercss/tildes.net/tilweaks.user.styl",
    "url": "https://tild.es/q0z",
    "installDate": 1593108200807,
    "sourceCode": "/* ==UserStyle==\n@name           Tilweaks\n@namespace      https://ecmelberk.com\n@version        1.0.1\n@description    Tweaks to Tildes' user interface\n@author         admicos\n@homepageURL\thttps://tild.es/q0z\n@updateURL      https://git.sr.ht/~admicos/scripts/blob/master/usercss/tildes.net/tilweaks.user.styl\n@license        MIT\n@preprocessor   stylus\n\n@var text       fontSize    \"Font Size\" 18px\n\n@var checkbox   thinLogoFont \"Thin Logo Font\" 1\n@var checkbox   themedLogos  \"Themed Logos\"   1\n\n@var checkbox   noSidebarBg  \"No Sidebar Background\" 1\n@var checkbox   donationBox  \"Donation Box Layout\"   1\n@var checkbox   sideBtnClear \"Clear Sidebar Button\"  1\n\n@var checkbox   noZebraStripe \"No Alternating Topic Colors\" 1\n@var checkbox   mainBorder    \"Add Border To Main Element\"  1\n@var checkbox   extraSpacing  \"Add Extra Spacing\"           1\n\n@var checkbox   noCommentBorder   \"No Comment Borders\"      1\n@var checkbox   depthIndicator    \"Comment Depth Indicator\" 1\n@var checkbox   commentBackground \"Comment Background\"      1\n==/UserStyle== */\n\n@-moz-document domain(\"tildes.net\") {\n    /*\n     * Theme specific logos (except Solarized Dark) by Bauke\n     * https://gitlab.com/Bauke/tildes-logos\n     *\n     * Colors from Tildes' source (Specific variable names are commented)\n     * https://gitlab.com/tildes/tildes/-/tree/master/tildes/scss/themes\n     */\n     \n    body.theme-atom-one-dark {\n        /* $background */\n        --tw-dark-bg: hsl(220, 13%, 18%);\n\n        /* $background-alt */\n        --tw-light-bg: #21242b;\n\n        /* $foreground-alt */\n        --tw-border: hsl(220, 9%, 55%);\n\n        /* $cyan */\n        --tw-accent: hsl(187, 47%, 55%);\n\n        /* handpicked */\n        --tw-semitransparent: rgba(222, 222, 255, .075);\n\n        --tw-logo: url(\"https://gitlab.com/Bauke/tildes-logos/-/raw/master/png/tildes-atom-one-dark.png\");\n    }\n\n    body.theme-black {\n        /* background-primary */\n        --tw-dark-bg: #000;\n\n        /* background-secondary */\n        --tw-light-bg: #222;\n\n        /* foreground-secondary */\n        --tw-border: #888;\n\n        /* link */\n        --tw-accent: #268bd2;\n\n        /* handpicked */\n        --tw-semitransparent: rgba(255, 255, 255, .075);\n\n        --tw-logo: url(\"https://gitlab.com/Bauke/tildes-logos/-/raw/master/png/tildes-black.png\");\n    }\n\n    body.theme-white {\n        /* background-primary */\n        --tw-dark-bg: #fff;\n\n        /* background-secondary */\n        --tw-light-bg: #eee;\n\n        /* foreground-secondary */\n        --tw-border: #888;\n\n        /* link */\n        --tw-accent: #0030e0;\n\n        /* handpicked */\n        --tw-semitransparent: rgba(0, 0, 0, .035);\n\n        --tw-logo: url(\"https://gitlab.com/Bauke/tildes-logos/-/raw/master/png/tildes-white.png\");\n    }\n\n    body.theme-dracula {\n        /* $background */\n        --tw-dark-bg: #282a36;\n\n        /* $background-alt */\n        --tw-light-bg: #44475a;\n\n        /* $foreground-alt */\n        --tw-border: #6272a4;\n\n        /* $cyan */\n        --tw-accent: #8be9fd;\n\n        /* handpicked */\n        --tw-semitransparent: rgba(200, 200, 255, .075);\n\n        --tw-logo: url(\"https://gitlab.com/Bauke/tildes-logos/-/raw/master/png/tildes-dracula.png\");\n    }\n\n    body.theme-gruvbox-dark {\n        /* $gb-dm-bg0 */\n        --tw-dark-bg: #282828;\n\n        /* $gb-dm-bg1 */\n        --tw-light-bg: #3c3836;\n\n        /* $gb-dm-fg4 */\n        --tw-border: #a89984;\n\n        /* $gb-dm-light-blue */\n        --tw-accent: #83a598;\n\n        /* handpicked */\n        --tw-semitransparent: rgba(255, 200, 200, .05);\n\n        --tw-logo: url(\"https://gitlab.com/Bauke/tildes-logos/-/raw/master/png/tildes-gruvbox-dark.png\");\n    }\n\n    body.theme-gruvbox-light {\n        /* $gb-lm-bg0 */\n        --tw-dark-bg: #fbf1c7;\n\n        /* $gb-lm-bg1 */\n        --tw-light-bg: #ebdbb2;\n\n        /* $gb-lm-fg4 */\n        --tw-border: #7c6f64;\n\n        /* $gb-lm-light-blue */\n        --tw-accent: #076678;\n\n        /* handpicked */\n        --tw-semitransparent: rgba(200, 150, 128, .125);\n\n        --tw-logo: url(\"https://gitlab.com/Bauke/tildes-logos/-/raw/master/png/tildes-gruvbox-light.png\");\n    }\n\n    body.theme-solarized-dark {\n        /* $base03 */\n        --tw-dark-bg: #002b36;\n\n        /* $base02 */\n        --tw-light-bg: #073642;\n\n        /* $base01 */\n        --tw-border: #586e75;\n\n        /* $blue */\n        --tw-accent: #268bd2;\n\n        /* handpicked */\n        --tw-semitransparent: rgba(200, 255, 255, .035);\n\n        /* Default tildes logo is already \"solarized\" */\n        --tw-logo: url(\"https://tildes.net/favicon-32x32.png\");\n    }\n\n    body.theme-solarized-light {\n        /* $base3 */\n        --tw-dark-bg: #fdf6e3;\n\n        /* $base2 */\n        --tw-light-bg: #eee8d5;\n\n        /* $base1 */\n        --tw-border: #93a1a1;\n\n        /* $blue */\n        --tw-accent: #268bd2;\n\n        /* handpicked */\n        --tw-semitransparent: rgba(0, 0, 0, .035);\n\n        /* Default tildes logo is already \"solarized\" */\n        --tw-logo: url(\"https://gitlab.com/Bauke/tildes-logos/-/raw/master/png/tildes-solarized-light.png\");\n    }\n\n    body.theme-zenburn {\n        /* $background */\n        --tw-dark-bg: #3f3f3f;\n\n        /* $background-alt */\n        --tw-light-bg: #4f4f4f;\n\n        /* $foreground-alt */\n        --tw-border: #aaa;\n\n        /* $blue */\n        --tw-accent: #8cd0d3;\n\n        /* handpicked */\n        --tw-semitransparent: rgba(200, 200, 200, .05);\n\n        --tw-logo: url(\"https://gitlab.com/Bauke/tildes-logos/-/raw/master/png/tildes-zenburn.png\");\n    }\n\n    /* Change font size */\n    html {\n        font-size: fontSize;\n    }\n\n    .site-header-logo {\n        /* Use custom logo */\n        if themedLogos {\n            background-image: var(--tw-logo);\n            background-size: contain;\n        }\n\n        if thinLogoFont {\n            font-weight: 100;\n            letter-spacing: 0.05rem;\n        }\n    }\n\n    #sidebar {\n        /* Hide sidebar background, make it appear \"floating\" */\n        if noSidebarBg {\n            background-color: transparent !important;\n        }\n\n        /*\n         * Make the \"browse the list of groups\" button border-only\n         * to make it less distracting.\n         */\n        if sideBtnClear {\n            & > .btn-primary:not(:hover) {\n                background-color: transparent !important;\n                color: var(--tw-accent);\n            }\n        }\n    }\n\n    /*\n     * Donation goal looks out of place without a background\n     * So let's just tweak it a little to make it look better\n     */\n    if donationBox {\n        .donation-goal {\n            border: 0;\n            padding: 0;\n\n            align-items: start;\n            text-align: left;\n        }\n\n        /* Reverse the progress bar ordering so the percent value is first */\n        .donation-goal-progress {\n            flex-direction: row-reverse;\n\n            /* Fix spacing from the previous change */\n            & > span {\n                margin-left: 0;\n                margin-right: 0.4rem;\n            }\n\n            /* Make the donation progress meter smaller */\n            & > meter {\n                height: .1rem;\n\n                /* Change color of donation progress meter (webkit untested) */\n                &::-moz-meter-bar,\n                &::-webkit-meter-bar {\n                    background: var(--tw-accent) !important;\n                }\n            }\n        }\n    }\n\n    /* Give the main element a little border to make it appear a little more \"contained\" */\n    if mainBorder {\n        main {\n            border: 1px solid var(--tw-border);\n        }\n    }\n\n    .topic-listing {\n        /*\n         * Disable the \"zebra striping\" of topics,\n         * we add spacing to differentiate them instead\n         */\n        if noZebraStripe {\n            & > li:nth-of-type(2n) {\n                background-color: transparent !important;\n            }\n        }\n\n        /* Give topics extra spacing */\n        if extraSpacing {\n            & > li {\n                margin-top: 0.4rem;\n            }\n        }\n    }\n\n    if extraSpacing {\n        /* Add some padding to text posts */\n        .topic-full-text {\n            padding: 0.75rem 0.25rem;\n        }\n\n        /* Pull divider closer to post */\n        .topic-comments,\n        .topic-comments > .divider {\n            margin-top: 0.25rem\n        }\n    }\n\n    /* Disable the default comment borders */\n    if noCommentBorder {\n        .comment {\n            border: 0;\n            border-bottom: 0 !important;\n        }\n    }\n\n    /* Add indicators to nested comments */\n    if depthIndicator {\n        .comment-tree:not([id=\"comments\"]) {\n            border-left: 2px dotted var(--tw-light-bg);\n        }\n\n        /* Switch the margin and padding around to make nesting indicators nicer */\n        .comment-tree-replies {\n            margin-left: 0;\n            padding-left: 1rem;\n        }\n    }\n\n    /* Give the comment text some extra padding to seperate it from the header and actions */\n    .comment-text {\n        if extraSpacing {\n            padding: 0.5rem;\n\n            /* Put a little padding on code blocks */\n            & pre {\n                padding: .5rem;\n            }\n        }\n\n        if commentBackground {\n            /* Make quotes and code blocks stand out */\n            & blockquote,\n            & pre,\n            & code {\n                background-color: var(--tw-dark-bg) !important;\n            }\n        }\n    }\n\n    /* Give comments their own backgrounds to make them stand out */\n    if commentBackground {\n        .comment-itself {\n            background-color: var(--tw-semitransparent);\n        }\n    }\n\n    /*\n     * Add Tilweaks notice to the footer\n     * Feel free to add your own name if you want :)\n     */\n    .site-footer-theme-selection:after {\n        display: block;\n        content: \"(Tilweaks by @admicos)\";\n\n        margin-top: .25rem;\n    }\n}\n",
    "sections": [
      {
        "code": "body.theme-atom-one-dark {\n/* $background */\n    --tw-dark-bg: #282c34;\n/* $background-alt */\n    --tw-light-bg: #21242b;\n/* $foreground-alt */\n    --tw-border: #828997;\n/* $cyan */\n    --tw-accent: #56b6c2;\n/* handpicked */\n    --tw-semitransparent: rgba(222,222,255,0.075);\n    --tw-logo: url(\"https://gitlab.com/Bauke/tildes-logos/-/raw/master/png/tildes-atom-one-dark.png\");\n  }\n  body.theme-black {\n/* background-primary */\n    --tw-dark-bg: #000;\n/* background-secondary */\n    --tw-light-bg: #222;\n/* foreground-secondary */\n    --tw-border: #888;\n/* link */\n    --tw-accent: #268bd2;\n/* handpicked */\n    --tw-semitransparent: rgba(255,255,255,0.075);\n    --tw-logo: url(\"https://gitlab.com/Bauke/tildes-logos/-/raw/master/png/tildes-black.png\");\n  }\n  body.theme-white {\n/* background-primary */\n    --tw-dark-bg: #fff;\n/* background-secondary */\n    --tw-light-bg: #eee;\n/* foreground-secondary */\n    --tw-border: #888;\n/* link */\n    --tw-accent: #0030e0;\n/* handpicked */\n    --tw-semitransparent: rgba(0,0,0,0.035);\n    --tw-logo: url(\"https://gitlab.com/Bauke/tildes-logos/-/raw/master/png/tildes-white.png\");\n  }\n  body.theme-dracula {\n/* $background */\n    --tw-dark-bg: #282a36;\n/* $background-alt */\n    --tw-light-bg: #44475a;\n/* $foreground-alt */\n    --tw-border: #6272a4;\n/* $cyan */\n    --tw-accent: #8be9fd;\n/* handpicked */\n    --tw-semitransparent: rgba(200,200,255,0.075);\n    --tw-logo: url(\"https://gitlab.com/Bauke/tildes-logos/-/raw/master/png/tildes-dracula.png\");\n  }\n  body.theme-gruvbox-dark {\n/* $gb-dm-bg0 */\n    --tw-dark-bg: #282828;\n/* $gb-dm-bg1 */\n    --tw-light-bg: #3c3836;\n/* $gb-dm-fg4 */\n    --tw-border: #a89984;\n/* $gb-dm-light-blue */\n    --tw-accent: #83a598;\n/* handpicked */\n    --tw-semitransparent: rgba(255,200,200,0.05);\n    --tw-logo: url(\"https://gitlab.com/Bauke/tildes-logos/-/raw/master/png/tildes-gruvbox-dark.png\");\n  }\n  body.theme-gruvbox-light {\n/* $gb-lm-bg0 */\n    --tw-dark-bg: #fbf1c7;\n/* $gb-lm-bg1 */\n    --tw-light-bg: #ebdbb2;\n/* $gb-lm-fg4 */\n    --tw-border: #7c6f64;\n/* $gb-lm-light-blue */\n    --tw-accent: #076678;\n/* handpicked */\n    --tw-semitransparent: rgba(200,150,128,0.125);\n    --tw-logo: url(\"https://gitlab.com/Bauke/tildes-logos/-/raw/master/png/tildes-gruvbox-light.png\");\n  }\n  body.theme-solarized-dark {\n/* $base03 */\n    --tw-dark-bg: #002b36;\n/* $base02 */\n    --tw-light-bg: #073642;\n/* $base01 */\n    --tw-border: #586e75;\n/* $blue */\n    --tw-accent: #268bd2;\n/* handpicked */\n    --tw-semitransparent: rgba(200,255,255,0.035);\n/* Default tildes logo is already \"solarized\" */\n    --tw-logo: url(\"https://tildes.net/favicon-32x32.png\");\n  }\n  body.theme-solarized-light {\n/* $base3 */\n    --tw-dark-bg: #fdf6e3;\n/* $base2 */\n    --tw-light-bg: #eee8d5;\n/* $base1 */\n    --tw-border: #93a1a1;\n/* $blue */\n    --tw-accent: #268bd2;\n/* handpicked */\n    --tw-semitransparent: rgba(0,0,0,0.035);\n/* Default tildes logo is already \"solarized\" */\n    --tw-logo: url(\"https://gitlab.com/Bauke/tildes-logos/-/raw/master/png/tildes-solarized-light.png\");\n  }\n  body.theme-zenburn {\n/* $background */\n    --tw-dark-bg: #3f3f3f;\n/* $background-alt */\n    --tw-light-bg: #4f4f4f;\n/* $foreground-alt */\n    --tw-border: #aaa;\n/* $blue */\n    --tw-accent: #8cd0d3;\n/* handpicked */\n    --tw-semitransparent: rgba(200,200,200,0.05);\n    --tw-logo: url(\"https://gitlab.com/Bauke/tildes-logos/-/raw/master/png/tildes-zenburn.png\");\n  }\n  html {\n    font-size: 18px;\n  }\n  .site-header-logo {\n/* Use custom logo */\n    background-image: var(--tw-logo);\n    background-size: contain;\n    font-weight: 100;\n    letter-spacing: 0.05rem;\n  }\n  #sidebar {\n/* Hide sidebar background, make it appear \"floating\" */\n    background-color: transparent !important;\n  }\n  #sidebar > .btn-primary:not(:hover) {\n    background-color: transparent !important;\n    color: var(--tw-accent);\n  }\n  .donation-goal {\n    border: 0;\n    padding: 0;\n    align-items: start;\n    text-align: left;\n  }\n  .donation-goal-progress {\n    flex-direction: row-reverse;\n/* Fix spacing from the previous change */\n/* Make the donation progress meter smaller */\n  }\n  .donation-goal-progress > span {\n    margin-left: 0;\n    margin-right: 0.4rem;\n  }\n  .donation-goal-progress > meter {\n    height: 0.1rem;\n/* Change color of donation progress meter (webkit untested) */\n  }\n  .donation-goal-progress > meter::-moz-meter-bar,\n  .donation-goal-progress > meter::-webkit-meter-bar {\n    background: var(--tw-accent) !important;\n  }\n  main {\n    border: 1px solid var(--tw-border);\n  }\n  .topic-listing > li:nth-of-type(2n) {\n    background-color: transparent !important;\n  }\n  .topic-listing > li {\n    margin-top: 0.4rem;\n  }\n  .topic-full-text {\n    padding: 0.75rem 0.25rem;\n  }\n  .topic-comments,\n  .topic-comments > .divider {\n    margin-top: 0.25rem;\n  }\n  .comment {\n    border: 0;\n    border-bottom: 0 !important;\n  }\n  .comment-tree:not([id=\"comments\"]) {\n    border-left: 2px dotted var(--tw-light-bg);\n  }\n  .comment-tree-replies {\n    margin-left: 0;\n    padding-left: 1rem;\n  }\n  .comment-text {\n    padding: 0.5rem;\n/* Put a little padding on code blocks */\n/* Make quotes and code blocks stand out */\n  }\n  .comment-text pre {\n    padding: 0.5rem;\n  }\n  .comment-text blockquote,\n  .comment-text pre,\n  .comment-text code {\n    background-color: var(--tw-dark-bg) !important;\n  }\n  .comment-itself {\n    background-color: var(--tw-semitransparent);\n  }\n  .site-footer-theme-selection:after {\n    display: block;\n    content: \"(Tilweaks by @admicos)\";\n    margin-top: 0.25rem;\n  }",
        "start": 37,
        "domains": [
          "tildes.net"
        ]
      }
    ],
    "usercssData": {
      "name": "Tilweaks",
      "namespace": "https://ecmelberk.com",
      "version": "1.0.1",
      "description": "Tweaks to Tildes' user interface",
      "author": "admicos",
      "homepageURL": "https://tild.es/q0z",
      "updateURL": "https://git.sr.ht/~admicos/scripts/blob/master/usercss/tildes.net/tilweaks.user.styl",
      "license": "MIT",
      "preprocessor": "stylus",
      "vars": {
        "fontSize": {
          "type": "text",
          "label": "Font Size",
          "name": "fontSize",
          "value": null,
          "default": "18px",
          "options": null
        },
        "thinLogoFont": {
          "type": "checkbox",
          "label": "Thin Logo Font",
          "name": "thinLogoFont",
          "value": null,
          "default": "1",
          "options": null
        },
        "themedLogos": {
          "type": "checkbox",
          "label": "Themed Logos",
          "name": "themedLogos",
          "value": null,
          "default": "1",
          "options": null
        },
        "noSidebarBg": {
          "type": "checkbox",
          "label": "No Sidebar Background",
          "name": "noSidebarBg",
          "value": null,
          "default": "1",
          "options": null
        },
        "donationBox": {
          "type": "checkbox",
          "label": "Donation Box Layout",
          "name": "donationBox",
          "value": null,
          "default": "1",
          "options": null
        },
        "sideBtnClear": {
          "type": "checkbox",
          "label": "Clear Sidebar Button",
          "name": "sideBtnClear",
          "value": null,
          "default": "1",
          "options": null
        },
        "noZebraStripe": {
          "type": "checkbox",
          "label": "No Alternating Topic Colors",
          "name": "noZebraStripe",
          "value": null,
          "default": "1",
          "options": null
        },
        "mainBorder": {
          "type": "checkbox",
          "label": "Add Border To Main Element",
          "name": "mainBorder",
          "value": null,
          "default": "1",
          "options": null
        },
        "extraSpacing": {
          "type": "checkbox",
          "label": "Add Extra Spacing",
          "name": "extraSpacing",
          "value": null,
          "default": "1",
          "options": null
        },
        "noCommentBorder": {
          "type": "checkbox",
          "label": "No Comment Borders",
          "name": "noCommentBorder",
          "value": null,
          "default": "1",
          "options": null
        },
        "depthIndicator": {
          "type": "checkbox",
          "label": "Comment Depth Indicator",
          "name": "depthIndicator",
          "value": null,
          "default": "1",
          "options": null
        },
        "commentBackground": {
          "type": "checkbox",
          "label": "Comment Background",
          "name": "commentBackground",
          "value": null,
          "default": "1",
          "options": null
        }
      }
    },
    "author": "admicos",
    "description": "Tweaks to Tildes' user interface",
    "name": "Tilweaks",
    "originalDigest": "04d4b28b3778f231d9ebed6184a3c44733641a79",
    "_id": "90573ee0-4dad-4804-a006-c1b4e81b94bd",
    "_rev": 1626393492215,
    "id": 4,
    "_usw": {},
    "updateDate": 1626393344509,
    "_isUswLinked": true,
    "tmpSourceCode": "/* ==UserStyle==\n@name           Tilweaks\n@namespace      https://ecmelberk.com\n@version        1.0.1\n@description    Tweaks to Tildes' user interface\n@author         admicos\n@homepageURL\thttps://tild.es/q0z\n@updateURL      https://git.sr.ht/~admicos/scripts/blob/master/usercss/tildes.net/tilweaks.user.styl\n@license        MIT\n@preprocessor   stylus\n\n@var text       fontSize    \"Font Size\" 18px\n\n@var checkbox   thinLogoFont \"Thin Logo Font\" 1\n@var checkbox   themedLogos  \"Themed Logos\"   1\n\n@var checkbox   noSidebarBg  \"No Sidebar Background\" 1\n@var checkbox   donationBox  \"Donation Box Layout\"   1\n@var checkbox   sideBtnClear \"Clear Sidebar Button\"  1\n\n@var checkbox   noZebraStripe \"No Alternating Topic Colors\" 1\n@var checkbox   mainBorder    \"Add Border To Main Element\"  1\n@var checkbox   extraSpacing  \"Add Extra Spacing\"           1\n\n@var checkbox   noCommentBorder   \"No Comment Borders\"      1\n@var checkbox   depthIndicator    \"Comment Depth Indicator\" 1\n@var checkbox   commentBackground \"Comment Background\"      1\n==/UserStyle== */\n\n@-moz-document domain(\"tildes.net\") {\n    /*\n     * Theme specific logos (except Solarized Dark) by Bauke\n     * https://gitlab.com/Bauke/tildes-logos\n     *\n     * Colors from Tildes' source (Specific variable names are commented)\n     * https://gitlab.com/tildes/tildes/-/tree/master/tildes/scss/themes\n     */\n     \n    body.theme-atom-one-dark {\n        /* $background */\n        --tw-dark-bg: hsl(220, 13%, 18%);\n\n        /* $background-alt */\n        --tw-light-bg: #21242b;\n\n        /* $foreground-alt */\n        --tw-border: hsl(220, 9%, 55%);\n\n        /* $cyan */\n        --tw-accent: hsl(187, 47%, 55%);\n\n        /* handpicked */\n        --tw-semitransparent: rgba(222, 222, 255, .075);\n\n        --tw-logo: url(\"https://gitlab.com/Bauke/tildes-logos/-/raw/master/png/tildes-atom-one-dark.png\");\n    }\n\n    body.theme-black {\n        /* background-primary */\n        --tw-dark-bg: #000;\n\n        /* background-secondary */\n        --tw-light-bg: #222;\n\n        /* foreground-secondary */\n        --tw-border: #888;\n\n        /* link */\n        --tw-accent: #268bd2;\n\n        /* handpicked */\n        --tw-semitransparent: rgba(255, 255, 255, .075);\n\n        --tw-logo: url(\"https://gitlab.com/Bauke/tildes-logos/-/raw/master/png/tildes-black.png\");\n    }\n\n    body.theme-white {\n        /* background-primary */\n        --tw-dark-bg: #fff;\n\n        /* background-secondary */\n        --tw-light-bg: #eee;\n\n        /* foreground-secondary */\n        --tw-border: #888;\n\n        /* link */\n        --tw-accent: #0030e0;\n\n        /* handpicked */\n        --tw-semitransparent: rgba(0, 0, 0, .035);\n\n        --tw-logo: url(\"https://gitlab.com/Bauke/tildes-logos/-/raw/master/png/tildes-white.png\");\n    }\n\n    body.theme-dracula {\n        /* $background */\n        --tw-dark-bg: #282a36;\n\n        /* $background-alt */\n        --tw-light-bg: #44475a;\n\n        /* $foreground-alt */\n        --tw-border: #6272a4;\n\n        /* $cyan */\n        --tw-accent: #8be9fd;\n\n        /* handpicked */\n        --tw-semitransparent: rgba(200, 200, 255, .075);\n\n        --tw-logo: url(\"https://gitlab.com/Bauke/tildes-logos/-/raw/master/png/tildes-dracula.png\");\n    }\n\n    body.theme-gruvbox-dark {\n        /* $gb-dm-bg0 */\n        --tw-dark-bg: #282828;\n\n        /* $gb-dm-bg1 */\n        --tw-light-bg: #3c3836;\n\n        /* $gb-dm-fg4 */\n        --tw-border: #a89984;\n\n        /* $gb-dm-light-blue */\n        --tw-accent: #83a598;\n\n        /* handpicked */\n        --tw-semitransparent: rgba(255, 200, 200, .05);\n\n        --tw-logo: url(\"https://gitlab.com/Bauke/tildes-logos/-/raw/master/png/tildes-gruvbox-dark.png\");\n    }\n\n    body.theme-gruvbox-light {\n        /* $gb-lm-bg0 */\n        --tw-dark-bg: #fbf1c7;\n\n        /* $gb-lm-bg1 */\n        --tw-light-bg: #ebdbb2;\n\n        /* $gb-lm-fg4 */\n        --tw-border: #7c6f64;\n\n        /* $gb-lm-light-blue */\n        --tw-accent: #076678;\n\n        /* handpicked */\n        --tw-semitransparent: rgba(200, 150, 128, .125);\n\n        --tw-logo: url(\"https://gitlab.com/Bauke/tildes-logos/-/raw/master/png/tildes-gruvbox-light.png\");\n    }\n\n    body.theme-solarized-dark {\n        /* $base03 */\n        --tw-dark-bg: #002b36;\n\n        /* $base02 */\n        --tw-light-bg: #073642;\n\n        /* $base01 */\n        --tw-border: #586e75;\n\n        /* $blue */\n        --tw-accent: #268bd2;\n\n        /* handpicked */\n        --tw-semitransparent: rgba(200, 255, 255, .035);\n\n        /* Default tildes logo is already \"solarized\" */\n        --tw-logo: url(\"https://tildes.net/favicon-32x32.png\");\n    }\n\n    body.theme-solarized-light {\n        /* $base3 */\n        --tw-dark-bg: #fdf6e3;\n\n        /* $base2 */\n        --tw-light-bg: #eee8d5;\n\n        /* $base1 */\n        --tw-border: #93a1a1;\n\n        /* $blue */\n        --tw-accent: #268bd2;\n\n        /* handpicked */\n        --tw-semitransparent: rgba(0, 0, 0, .035);\n\n        /* Default tildes logo is already \"solarized\" */\n        --tw-logo: url(\"https://gitlab.com/Bauke/tildes-logos/-/raw/master/png/tildes-solarized-light.png\");\n    }\n\n    body.theme-zenburn {\n        /* $background */\n        --tw-dark-bg: #3f3f3f;\n\n        /* $background-alt */\n        --tw-light-bg: #4f4f4f;\n\n        /* $foreground-alt */\n        --tw-border: #aaa;\n\n        /* $blue */\n        --tw-accent: #8cd0d3;\n\n        /* handpicked */\n        --tw-semitransparent: rgba(200, 200, 200, .05);\n\n        --tw-logo: url(\"https://gitlab.com/Bauke/tildes-logos/-/raw/master/png/tildes-zenburn.png\");\n    }\n\n    /* Change font size */\n    html {\n        font-size: fontSize;\n    }\n\n    .site-header-logo {\n        /* Use custom logo */\n        if themedLogos {\n            background-image: var(--tw-logo);\n            background-size: contain;\n        }\n\n        if thinLogoFont {\n            font-weight: 100;\n            letter-spacing: 0.05rem;\n        }\n    }\n\n    #sidebar {\n        /* Hide sidebar background, make it appear \"floating\" */\n        if noSidebarBg {\n            background-color: transparent !important;\n        }\n\n        /*\n         * Make the \"browse the list of groups\" button border-only\n         * to make it less distracting.\n         */\n        if sideBtnClear {\n            & > .btn-primary:not(:hover) {\n                background-color: transparent !important;\n                color: var(--tw-accent);\n            }\n        }\n    }\n\n    /*\n     * Donation goal looks out of place without a background\n     * So let's just tweak it a little to make it look better\n     */\n    if donationBox {\n        .donation-goal {\n            border: 0;\n            padding: 0;\n\n            align-items: start;\n            text-align: left;\n        }\n\n        /* Reverse the progress bar ordering so the percent value is first */\n        .donation-goal-progress {\n            flex-direction: row-reverse;\n\n            /* Fix spacing from the previous change */\n            & > span {\n                margin-left: 0;\n                margin-right: 0.4rem;\n            }\n\n            /* Make the donation progress meter smaller */\n            & > meter {\n                height: .1rem;\n\n                /* Change color of donation progress meter (webkit untested) */\n                &::-moz-meter-bar,\n                &::-webkit-meter-bar {\n                    background: var(--tw-accent) !important;\n                }\n            }\n        }\n    }\n\n    /* Give the main element a little border to make it appear a little more \"contained\" */\n    if mainBorder {\n        main {\n            border: 1px solid var(--tw-border);\n        }\n    }\n\n    .topic-listing {\n        /*\n         * Disable the \"zebra striping\" of topics,\n         * we add spacing to differentiate them instead\n         */\n        if noZebraStripe {\n            & > li:nth-of-type(2n) {\n                background-color: transparent !important;\n            }\n        }\n\n        /* Give topics extra spacing */\n        if extraSpacing {\n            & > li {\n                margin-top: 0.4rem;\n            }\n        }\n    }\n\n    if extraSpacing {\n        /* Add some padding to text posts */\n        .topic-full-text {\n            padding: 0.75rem 0.25rem;\n        }\n\n        /* Pull divider closer to post */\n        .topic-comments,\n        .topic-comments > .divider {\n            margin-top: 0.25rem\n        }\n    }\n\n    /* Disable the default comment borders */\n    if noCommentBorder {\n        .comment {\n            border: 0;\n            border-bottom: 0 !important;\n        }\n    }\n\n    /* Add indicators to nested comments */\n    if depthIndicator {\n        .comment-tree:not([id=\"comments\"]) {\n            border-left: 2px dotted var(--tw-light-bg);\n        }\n\n        /* Switch the margin and padding around to make nesting indicators nicer */\n        .comment-tree-replies {\n            margin-left: 0;\n            padding-left: 1rem;\n        }\n    }\n\n    /* Give the comment text some extra padding to seperate it from the header and actions */\n    .comment-text {\n        if extraSpacing {\n            padding: 0.5rem;\n\n            /* Put a little padding on code blocks */\n            & pre {\n                padding: .5rem;\n            }\n        }\n\n        if commentBackground {\n            /* Make quotes and code blocks stand out */\n            & blockquote,\n            & pre,\n            & code {\n                background-color: var(--tw-dark-bg) !important;\n            }\n        }\n    }\n\n    /* Give comments their own backgrounds to make them stand out */\n    if commentBackground {\n        .comment-itself {\n            background-color: var(--tw-semitransparent);\n        }\n    }\n\n    /*\n     * Add Tilweaks notice to the footer\n     * Feel free to add your own name if you want :)\n     */\n    .site-footer-theme-selection:after {\n        display: block;\n        content: \"(Tilweaks by @admicos)\";\n\n        margin-top: .25rem;\n    }\n}\n",
    "metadata": {
      "name": "Tilweaks",
      "namespace": "https://ecmelberk.com",
      "version": "1.0.1",
      "description": "Tweaks to Tildes' user interface",
      "author": "admicos",
      "homepageURL": "https://tild.es/q0z",
      "updateURL": "https://git.sr.ht/~admicos/scripts/blob/master/usercss/tildes.net/tilweaks.user.styl",
      "license": "MIT",
      "preprocessor": "stylus",
      "vars": {
        "fontSize": {
          "type": "text",
          "label": "Font Size",
          "name": "fontSize",
          "value": null,
          "default": "18px",
          "options": null
        },
        "thinLogoFont": {
          "type": "checkbox",
          "label": "Thin Logo Font",
          "name": "thinLogoFont",
          "value": null,
          "default": "1",
          "options": null
        },
        "themedLogos": {
          "type": "checkbox",
          "label": "Themed Logos",
          "name": "themedLogos",
          "value": null,
          "default": "1",
          "options": null
        },
        "noSidebarBg": {
          "type": "checkbox",
          "label": "No Sidebar Background",
          "name": "noSidebarBg",
          "value": null,
          "default": "1",
          "options": null
        },
        "donationBox": {
          "type": "checkbox",
          "label": "Donation Box Layout",
          "name": "donationBox",
          "value": null,
          "default": "1",
          "options": null
        },
        "sideBtnClear": {
          "type": "checkbox",
          "label": "Clear Sidebar Button",
          "name": "sideBtnClear",
          "value": null,
          "default": "1",
          "options": null
        },
        "noZebraStripe": {
          "type": "checkbox",
          "label": "No Alternating Topic Colors",
          "name": "noZebraStripe",
          "value": null,
          "default": "1",
          "options": null
        },
        "mainBorder": {
          "type": "checkbox",
          "label": "Add Border To Main Element",
          "name": "mainBorder",
          "value": null,
          "default": "1",
          "options": null
        },
        "extraSpacing": {
          "type": "checkbox",
          "label": "Add Extra Spacing",
          "name": "extraSpacing",
          "value": null,
          "default": "1",
          "options": null
        },
        "noCommentBorder": {
          "type": "checkbox",
          "label": "No Comment Borders",
          "name": "noCommentBorder",
          "value": null,
          "default": "1",
          "options": null
        },
        "depthIndicator": {
          "type": "checkbox",
          "label": "Comment Depth Indicator",
          "name": "depthIndicator",
          "value": null,
          "default": "1",
          "options": null
        },
        "commentBackground": {
          "type": "checkbox",
          "label": "Comment Background",
          "name": "commentBackground",
          "value": null,
          "default": "1",
          "options": null
        }
      }
    }
  }
]
    6 votes
    1. [3]
      admicos
      (edited )
      Link Parent
      edit: it's back: https://tild.es/q0z Author of Tilweaks here, I recently deleted the Gitea instance at git.ebc.li so that's why the link's dead. I've (probably temporarily) uploaded it to...

      edit: it's back: https://tild.es/q0z

      Author of Tilweaks here, I recently deleted the Gitea instance at git.ebc.li so that's why the link's dead.

      I've (probably temporarily) uploaded it to https://gist.github.com/Admicos/61f67d37cd0e0ad9dd494c87ec8fe6b8 while I procrastinate think about what to do next. The auto updates will be broken as it was a quick copy paste job, but the theme should still work. Click the Raw button to install it

      cc @tomf

      5 votes
      1. tomf
        Link Parent
        nice! this is such a great theme for the site. Thanks for reposting it! :)

        nice! this is such a great theme for the site. Thanks for reposting it! :)

        1 vote
      2. psi
        Link Parent
        Neat, thanks!

        Neat, thanks!

        1 vote
    2. tomf
      Link Parent
      awesome! thanks for this! I had it in my history, but like you said, everything is dead. The waybackmachine didn't have anything, either. its funny -- I had that same HN theme, or at least...

      awesome! thanks for this! I had it in my history, but like you said, everything is dead. The waybackmachine didn't have anything, either.

      its funny -- I had that same HN theme, or at least something very similar, so you including that is golden! :)

      Its such a pain to track down userstyles and userscripts again. I think I'm pretty much there, though. Only a couple for sites I don't care about like youtube and discord.

      quick edit: double replied, ditched the other one.

      3 votes
  2. [6]
    bub
    Link
    This cramped feeling reminds me of why I find it difficult to look at Hacker News for any length of time. And I think that's interesting because Hacker News doesn't have a lot going on, so it's...

    This cramped feeling reminds me of why I find it difficult to look at Hacker News for any length of time.

    And I think that's interesting because Hacker News doesn't have a lot going on, so it's not exactly "busy." I think the annoyance factor that they share is mostly due to the sea of tiny-font low-contrast fiddly buttons.

    High-contrast dark modes really go a long way to improve things imo.

    6 votes
    1. tomf
      Link Parent
      HN is fairly easy to make your own. Its worth doing if you use the site a lot. You'll probably hate my HN, though :)

      HN is fairly easy to make your own. Its worth doing if you use the site a lot. You'll probably hate my HN, though :)

      2 votes
    2. [4]
      petrichor
      Link Parent
      I second @tomf, making a HN theme is very straightforward and fun. A quick tip wrt. fiddly buttons: try replacing the vote arrows with CSS triangles.

      I second @tomf, making a HN theme is very straightforward and fun. A quick tip wrt. fiddly buttons: try replacing the vote arrows with CSS triangles.

      2 votes
      1. [3]
        tomf
        Link Parent
        great tip with the CSS arrows! Is yours cleaner than this? :) .votearrow { margin: 4px 0px 5px; background: none; width: 0; height: 0; border-style: solid; border-width: 0 5px 5px 5px;...

        great tip with the CSS arrows! Is yours cleaner than this? :)

            .votearrow {
        margin: 4px 0px 5px;
        background: none;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 5px 5px 5px;
        border-color: transparent transparent #282a36 transparent;
    }
    .rotate180 {
        margin-top: 10px;
    }
    td.votelinks {
        width: 19px;
        padding: 4px 4px 0px 0px;
    }
        1 vote
        1. [2]
          petrichor
          Link Parent
          Practically identical! I ended up settling on border-width: 0 5px 8px 5px; for a more equilateral-ish triangle.

          Practically identical! I ended up settling on border-width: 0 5px 8px 5px; for a more equilateral-ish triangle.

          2 votes
          1. tomf
            Link Parent
            awesome! that's way better! Thanks for this

            border-width: 0 5px 8px 5px;

            awesome! that's way better! Thanks for this

            2 votes
  3. [3]
    Amarok
    (edited )
    Link
    On a big 4K monitor it's actually rather nice, makes better use of all that screen real estate. Edit: I realized there's another reason I like it this way. It's reminding me of books with the two...

    On a big 4K monitor it's actually rather nice, makes better use of all that screen real estate.

    Edit: I realized there's another reason I like it this way. It's reminding me of books with the two column layout. We're always scrolling up/down all the time, and it made me wonder what a site that decided to go the other way, right/left, might feel like. I like the idea of just swiping left/right to move from one Tildes page to the next on mobile, and just having them march back and forth the same way with a two column layout on desktop. Turn the infinite scroll into page turning.

    It'd give this place a very different 'feel' to other social media sites if it ran along the other axis, that's for sure. I don't even know if I'd like it that way but I would kinda like to try it out that way for a while just to explore the idea.

    4 votes
    1. tomf
      (edited )
      Link Parent
      right! This part is covered with ol.topic-listing { column-count: 2; } but it isn't perfect. If the first item on the second column has a preview, it'll jump it up a bit. I'm not great with CSS,...

      right! This part is covered with

      ol.topic-listing {
    column-count: 2;
}

      but it isn't perfect. If the first item on the second column has a preview, it'll jump it up a bit. I'm not great with CSS, but I don't think a workaround will be too difficult.

      quick edit: this might do the trick.

      body .topic-listing > li {
    display: inline-block;
    width: 100%;
}
      2 votes
    2. Pistos
      Link Parent
      That's a fair point, and I don't disagree, but, in my case (with a 4k monitor) I just use a larger font and an unmaximized browser window.

      That's a fair point, and I don't disagree, but, in my case (with a 4k monitor) I just use a larger font and an unmaximized browser window.

      2 votes
  4. [13]
    PhantomBand
    Link
    Looks great, don't see how it's busy though. Would love to use it.

    Looks great, don't see how it's busy though. Would love to use it.

    3 votes
    1. [12]
      tomf
      Link Parent
      Check out https://pastebin.com/raw/uh5MSDk5 There are a few things you may want to change. I have it so it hides post votes until I voted and I also hide all of the votes on comments, which you...

      Check out https://pastebin.com/raw/uh5MSDk5

      There are a few things you may want to change. I have it so it hides post votes until I voted and I also hide all of the votes on comments, which you may not like. Instead of Votes(6) or whatever, it'll say 'Vote' or 'Voted', for instance. .comment-votes is hidden for votes on your comments.

      You'll want to switch up the typefaces in play. I'm using Operator Mono Nerd Font, since I use for almost everything.

      Lastly, do a search for tomf and replace those with your own name so your nick is highlighted.

      Give it a swing. I'm not great with CSS... so you'll definitely find quirks :)

      3 votes
      1. [11]
        PhantomBand
        Link Parent
        Thanks!

        Thanks!

        2 votes
        1. [10]
          tomf
          Link Parent
          if you find anything really goofy, hit me up! Its something I left alone for over a year then spent a little time on again... which is just me being nervous about sharing something I'm not totally...

          if you find anything really goofy, hit me up! Its something I left alone for over a year then spent a little time on again... which is just me being nervous about sharing something I'm not totally confident with. haha

          2 votes
          1. [9]
            PhantomBand
            Link Parent
            Hm, the pastebin is private?

            Hm, the pastebin is private?

            2 votes
            1. [8]
              tomf
              Link Parent
              derp. its fixed.

              derp. its fixed.

              2 votes
              1. [7]
                PhantomBand
                Link Parent
                Okay, so I checked it. Well, I like it overall, but for some reason there's text missing on buttons and stuff. Is that on me or?

                Okay, so I checked it.

                Well, I like it overall, but for some reason there's text missing on buttons and stuff. Is that on me or?

                2 votes
                1. [6]
                  tomf
                  Link Parent
                  for the vote buttons, the votes are hidden until you vote it up. Comment votes are also hidden. You can change --vote-color: #F8F8F2; to --vote-color: #057191; to get the post karma back. For...

                  for the vote buttons, the votes are hidden until you vote it up. Comment votes are also hidden. You can change --vote-color: #F8F8F2; to --vote-color: #057191; to get the post karma back.

                  For comments, search for article.topic-full menu button[data-ic-src*="/vote"] and remove that and the following two. .comment-votes is your own, so remove that part if you want to see votes for your own.

                  I'm not anti-karma or whatever, but it was something I played with a while ago and really liked.

                  Video for anyone interested

                  quick edit: might be worth adding this to make code blocks clearer.

                  body code, body pre {background-color:var(--fg-dark)}
                  2 votes
                  1. [5]
                    PhantomBand
                    Link Parent
                    Tried Solarizing it for a bit (will try a dark theme later), what do you think?

                    Tried Solarizing it for a bit (will try a dark theme later), what do you think?

                    2 votes
                    1. [4]
                      tomf
                      Link Parent
                      nice! that's great. If I can figure out the options part of Stylus, I'd love to add in color schemes and some other options. I updated the pastebin to add a better background for code blocks and...

                      nice! that's great. If I can figure out the options part of Stylus, I'd love to add in color schemes and some other options.

                      I updated the pastebin to add a better background for code blocks and added some comments in the vote hiding. :)

                      2 votes
                      1. [3]
                        PhantomBand
                        Link Parent
                        Sounds good!

                        Sounds good!

                        1 vote
                        1. [2]
                          tomf
                          Link Parent
                          ok, last actual update for today I added in some checkboxes for comment vote toggles, added an option to make it full-width, and also an option to add more columns.

                          ok, last actual update for today

                          I added in some checkboxes for comment vote toggles, added an option to make it full-width, and also an option to add more columns.

                          3 votes