i forget where that css thread is but i started a byob dark mode

The Something Awful Forums > Main > BYOB: BYOB BYOB BOYB BBOY YOBB YBOB BBYO?? > i forget where that css thread is but i started a byob dark mode

your friend sk: (ヤイケス!)

it's not done yet but if you have any ideas/comments/whatever i'd love to try and improve it! you can just download the CSS file and load it into your browser for byob, which i don't know how to do in any browser tbh but it's definitely possible!

this probably only works for the thread listing for now, but maybe it works elsewhere??

(starry night wasn't my idea but i forget whose it was :abrathink:

)

download link: https://ufile.io/zfxqhwy2
if you prefer not to download it directly: https://pastebin.com/ivzExkSp

your friend sk fucked around with this message at 03:41 on Aug 17, 2021

Join the BYOB Army

^{thank you again Saoshyant!!}

# ? Aug 17, 2021 03:38

Adbot: ADBOT LOVES YOU

# ? May 1, 2024 05:36

Code Jockey: 69420 basic bytes free

I'm very excited for this and will try it when I am back on my pc, thank you sk

# ? Aug 17, 2021 08:50

cruft

Maybe post a screen shot.

If you'd like, I can drop this into my browser extension so it's easier for people to view.

# ? Aug 17, 2021 16:33

nut

ya i'd love to see a screenshot for those of us least technologically capable who still think css is the sound snake make

# ? Aug 17, 2021 16:44

IGgy IGsen: "If I lose I will set myself on fire."

I just tried it. Here's what it looks like so far.

If you wanna try it yourself you gotta hit F12 in your browser (I think it's that in every browser but I use firefox) there should be a tab or something along the lines of style editor. In here should be several css sytlesheets, one of them is called byob.css

Basically put what's in the op in there, just paste it and bam. It'll return to normal on reload unless you save it.

# ? Aug 17, 2021 17:14

IGgy IGsen: "If I lose I will set myself on fire."

Hold on, does that dark mode re-enable rotating images??? Cause it looks that way on my screenshot.

# ? Aug 17, 2021 17:16

cruft

The original CSS thread is https://forums.somethingawful.com/showthread.php?threadid=3956215

# ? Aug 17, 2021 17:20

your friend sk: (ヤイケス!)

I will post a screenshot after work!

IGgy IGsen posted:

Hold on, does that dark mode re-enable rotating images??? Cause it looks that way on my screenshot.

hell yeah it does

# ? Aug 17, 2021 19:34

your friend sk: (ヤイケス!)

Join the BYOB Army

^{thank you again Saoshyant!!}

# ? Aug 17, 2021 21:31

IGgy IGsen: "If I lose I will set myself on fire."

That looks freaking dope.

Just copying in the css doesn't seem to work though (see my previous post with a screenshot, where I thought, yeah I can see hints of greatness but it's a wip)

# ? Aug 17, 2021 21:38

cruft

your friend sk posted:

I like the idea of starry night, but to my eye, that's way too busy.

What about something like

cruft fucked around with this message at 21:48 on Aug 17, 2021

# ? Aug 17, 2021 21:41

cruft

cruft posted:

I like the idea of starry night, but to my eye, that's way too busy.

What about something like

code:

body {
  background-image: url('https://images.unsplash.com/photo-1563305096-9af2877f57f9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8');
  background-size: contain;
}

That'll make this:

# ? Aug 17, 2021 21:55

nut

IGgy IGsen posted:

That looks freaking dope.

# ? Aug 17, 2021 22:24

your friend sk: (ヤイケス!)

cruft posted:

code:

body {
  background-image: url('https://images.unsplash.com/photo-1563305096-9af2877f57f9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8');
  background-size: contain;
}

That'll make this:

that looks good too! I'm cool with whatever people want!

# ? Aug 18, 2021 00:02

cruft

your friend sk posted:

that looks good too! I'm cool with whatever people want!

Yeah, same, I'm just shooting for a way to increase the contrast between the cookie crumb text and the background image. There's a ton of contrast and hue differences in starry night, which makes it really difficult to differentiate text against.

I bet I could gin up a night sky in css. Give me an hour or two.

# ? Aug 18, 2021 00:34

cruft

cruft posted:

Yeah, same, I'm just shooting for a way to increase the contrast between the cookie crumb text and the background image. There's a ton of contrast and hue differences in starry night, which makes it really difficult to differentiate text against.

I bet I could gin up a night sky in css. Give me an hour or two.

Oh shiiiittttt you gotta try this sk! Put it at the top of your css file.

code:

body {
  background: black url("http://www.script-tutorials.com/demos/360/images/stars.png");
}

#container {
  background:transparent url("http://www.script-tutorials.com/demos/360/images/twinkling.png") repeat top center;
  animation:move-twink-back 600s linear infinite;    
}

@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}

# ? Aug 18, 2021 00:47

your friend sk: (ヤイケス!)

cruft posted:

Oh shiiiittttt you gotta try this sk! Put it at the top of your css file.

code:

body {
  background: black url("http://www.script-tutorials.com/demos/360/images/stars.png");
}

#container {
  background:transparent url("http://www.script-tutorials.com/demos/360/images/twinkling.png") repeat top center;
  animation:move-twink-back 600s linear infinite;    
}

@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}

e: aw man can't we just steal this friggin sick background from reddit

your friend sk fucked around with this message at 02:40 on Aug 18, 2021

Join the BYOB Army

^{thank you again Saoshyant!!}

# ? Aug 18, 2021 01:12

Adbot: ADBOT LOVES YOU

# ? May 1, 2024 05:36

your friend sk: (ヤイケス!)

no update on dark mode but you can use this to make avatars/sigs spin:

code:

dd.title img,
p.signature img,
p.signature video {
  -webkit-animation:spin 6000s linear infinite;
  -moz-animation:spin 6000s linear infinite;
  animation:spin 6000s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

i recommend Stylus for your custom CSS needs! you can dump this into a new style for the domain forums.somethingawful.com to use it. it will apply to every forum, which is a big improvement imo

e: here, it is

your friend sk fucked around with this message at 00:55 on Aug 26, 2021

Join the BYOB Army

^{thank you again Saoshyant!!}

# ? Aug 26, 2021 00:51

The Something Awful Forums > Main > BYOB: BYOB BYOB BOYB BBOY YOBB YBOB BBYO?? > i forget where that css thread is but i started a byob dark mode