Conversation

Notices

1. frogzone@wizard.casa's status on Tuesday, 09-Apr-2024 22:46:37 JST frogzone

   • iced quinnsmas :blobcatsanta:
   • r
   • realcaseyrollins
   • silverpill
   • Nimda
   • p

   @r @nimda @silverpill @icedquinn @p @realcaseyrollins
   I'm super happy to report that i decided to spend a few minutes playing with css and its been several hours (i'm naughty like that but hey, why not).

   the following is the result that i get with minor html and css that will be provided in next toot (please ignore grain for possible privacy added in gimp)

   the html frames are still moveable by the user but they turn black when 1 pixel wide, i can add a light edge to each frame manually if you want, to bring out the frame border.

   • frogzone@wizard.casa's status on Tuesday, 09-Apr-2024 22:46:36 JST frogzone

     in reply to

     • iced quinnsmas :blobcatsanta:
     • r
     • realcaseyrollins
     • silverpill
     • Nimda
     • p

     @nimda @silverpill @r @icedquinn @realcaseyrollins @p

     ## HTML changes

     - For top frameset add attribute: cols="36%,*"
     - For both framesets border="1"
     - Use 🖉 (U+1F589, not 'edit' [profile])
     - Use ☺ (U+263A, remove "Emoji list" and place its entire <a> element before the 'NSFW' element)
     - add attribute 'placeholder="Your toot here 🖊"' (U+1F58A) (remove label above text box)
     - instead of 'public', try ⊜ (U+229C) and write a tooltip, aka title attribute, as "Public")
     - instead of 'unlisted', try ⊝ (U+229D) and write a tooltip as "Unlisted")
     - instead of 'private/followers only', try ⊚(U+229A) and write a tooltip as "Private/Followers only")
     - instead of 'direct', try ⊙(U+2299) and write a tooltip as "Direct message (DM)")
     - (NOTE: fyi there are the following additional glyphs available ⊛⊘⊕⊗🖂 so you can decide what you want to do. Can everyone see them in their browsers???)
     - instead of "refresh" alongside headings, try 🗘 (U+1F5D8)

   • frogzone@wizard.casa's status on Tuesday, 09-Apr-2024 22:46:36 JST frogzone

     in reply to

     • iced quinnsmas :blobcatsanta:
     • r
     • realcaseyrollins
     • silverpill
     • Nimda
     • p

     @nimda @silverpill @r @icedquinn @realcaseyrollins @p

     ## CSS

     .dark, .dark body, .dark .more-content { padding: 3px; } /*More rounding*/ .dark .status-container-container, .dark .notification-container, .dark .emoji-item-container { border-radius: 6px; } .user-list-profile-img .img-link, .status-profile-img-container .img-link { border-radius: 4px; } .retweet-info .status-profile-img { border-radius: 4px; } .nav-container { margin: 6px; } .status-container { margin: -2px 0; } .status-uname { font-weight:bold; } .status-name { font-weight: bold; } .status-content p { margin: 6px; } div.nav-link-container nav ul:nth-child(2) li { text-transform: uppercase; font-size:12px } .status-content { font-size: 14px; } .btn-link { font-size: 14px; } .status-action { font-size: 14px; } .dark input[type="text"], .dark textarea { border-radius: 4px; } .dark input[type="submit"], .dark button, .dark select, .dark input::file-selector-button { border-radius: 4px; } div.form-field-s:nth-child(7) { text-align: right; } div.form-field-s:nth-child(7) > button:nth-child(1) { padding:3px 20px; border-color:#666 } /*Emoji resize*/ img.emoji { min-height: 18px; max-height: 18px; } img.emoji:hover{ min-height: 32px; max-height: 32px; } /*Visibility indictors*/ .remote-link { font-size: inherit; /* aka ***remove*** "font-size: smaller" */ font-weight: normal; }
   • r (r@freesoftwareextremist.com)'s status on Tuesday, 09-Apr-2024 22:47:02 JST r

     in reply to

     • p
     • p
     @frogzone @p @p Only the font-size should use relative unit, using px for rest of the things is fine. Actually, most websites still use px for font-size, even bloat used it until the recent redesign. It's more of an accessibility issue than anything. See https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#pixels
   • frogzone@wizard.casa's status on Tuesday, 09-Apr-2024 22:47:03 JST frogzone

     in reply to

     • r
     • p
     • p

     @r

     >36% looks way too wide

     hang on, you mean the left side looks too wide! i thought you meant eaelier that the right side looks too wide and i jus now realise you fix/hold the left side at 400ish px, which, to me makes the right side look way too wide when i widen. :P

     By what you're telling me it sounds like the best remedy will be to measure everything in em, including margins and profile images, then we simply use media queries to change the font-size. then everything will look okay even on some massive 4k display etc. i can go ahead and do that.

     @p are you still there, or have you moved to @p? you might be interested in knowing what we're discussing here.

   • r (r@freesoftwareextremist.com)'s status on Tuesday, 09-Apr-2024 22:47:04 JST r

     in reply to
     @frogzone
     >For top frameset add attribute: cols="36%,*"
     36% looks way too wide on a typical 16:9 display
     >For both framesets border="1"
     border is not a standard attribute for a frameset, it might work in some browsers, I know it does in Chrome and Firefox, but because it's not part of the standard, I'm not going to use it.
     >font-size: 14px;
     px is an absolute value and shouldn't be used for text because it doesn't change when you change the default font size of the browser.
     >Can everyone see them in their browsers?
     I can see some of them, but most of them appear as boxes.
     
     None of this really matters if you just want to keep these changes to yourself though. I'm glad you were able to customize it to your liking.