Entries Closed 🐫 [CSS] Design (Webwide) by Committee

[Adam]

There is a famous saying, "a camel is a horse designed by a committee", emphasising the ineffectiveness of including many conflicting opinions into a single project through compromise.

Now, I think that's a little harsh on a camel, but hey it's not my quote. 😉

That being said, I thought we'd have a little fun and see just how bad (or great?) designing by committee really is!

You will spot a new theme, a clone of the default theme, in the style picker (footer) called 'Design by Committee'.

In this thread, you may post CSS (or LESS) that will be added to a extra CSS file. Feel free to hotlink images (host at Imgur) if you really want.

All non-site-breaking suggestions will be added. You may need to chuck in some !important's.

* { font-family: 'Comic Sans' !important; } is discouraged but not strictly forbidden... 😂

This should be interesting... 😄

 

[Adam]

I'll start shall I?

.p-navgroup-link--user:hover, .structItem--thread:hover {
    .avatar {
        transform: rotate(360deg);
        transition: 1s;
    }
}

🤭

 

[Gummibeer]

body {
  transform: rotate(180deg);
}

😉🤪 - reason: the world is upside down right now.

 

[avena]

Hey, @Adam shall the CSS be agnostic of context? For example, your CSS code includes classes to specific HTML elements, but @Gummibeer code is not.

 

[Adam]

body {
  transform: rotate(180deg);
}

😉🤪 - reason: the world is upside down right now.

Haha! I love it, but I’m gonna file that one under ‘site breaking’. 🤣

 

[Adam]

Hey, @Adam shall the CSS be agnostic of context? For example, your CSS code includes classes to specific HTML elements, but @Gummibeer code is not.

Anything you like that does not make it totally unusable! 😋

 

[Adam]

Come on people I want (mostly usable) C H A O S when we're done with this thing. 🤭

.uix_logo {
    transform: rotate(-5deg);
    transition: 0.5s;
   
    &:hover {
        transform: rotate(5deg);
    }
}

a.username[data-user-id="1"] {
    &:after {
        content: '👨🏼‍💻'
    }
}

 

[Sharkie]

.uix_sidebarNav .uix_sidebarNavList .p-navEl-link span, .uix_sidebarNav .uix_sidebarNavList {
text-shadow: 1px 1px #ff66ff;
}

Look, this isn't as chaos as I wanted, and I'm not totally sure if the jumble of words is right (yes I copy/pasted from inspect, judge away). But it adds a bit of... static aesthetic. 🤣

 

[Adam]

.uix_sidebarNav .uix_sidebarNavList .p-navEl-link span, .uix_sidebarNav .uix_sidebarNavList {
text-shadow: 1px 1px #ff66ff;
}

Look, this isn't as chaos as I wanted, and I'm not totally sure if the jumble of words is right (yes I copy/pasted from inspect, judge away). But it adds a bit of... static aesthetic. 🤣

That is hideous! I love it. Added.

 

[Sharkie]

The hideousness is what makes it absolutely perfect. 😂😂

 

[avena]

Here the CSS code for a loader animation.

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

div {
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin: auto;
  background: white;
  width: 64px;
  height: 64px;
  border-radius: 64px;
  border-top: 4px solid #F86DFE;
  border-bottom: 4px solid #FEAA06;
  border-right: 4px solid #2FDB5A;
  border-left: 4px solid #4E9EFE;

  animation-name: rotate;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

Live: https://codepen.io/alelepd/pen/RwPEEry

 

[Jordan]

.message-name, .structItemContainer .structItem-minor ul li:first-child a, .structItemContainer .structItem-cell .structItem-minor a, .username  {
    text-shadow: 0px 0px 3px #0076da;
}

Everyone will having a glowing username like the forums of 2000s xD

 

[Sharkie]

Everyone will having a glowing username like the forums of 2000s xD

Yassssss all the text shadows. 😂

 

[Gummibeer]

Rainbow post-titles on index and detail view 🌈 🏳️‍🌈

.structItem-title a,
.p-body-header .p-title-value .label-append {
    background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

source: https://w3bits.com/rainbow-text/
It's not animated so it shouldn't be too distracting.

 

[sfcgeorge]

This one makes it easier to know when you've scrolled down the page

@media (prefers-reduced-motion: no-preference) {
  .p-nav {
      background: url(https://raw.githubusercontent.com/sfcgeorge/uploads/master/uPic/3297996jhk3cxp0nf.gif) !important;
  }

  .uix_headerContainer .p-navSticky.is-sticky .p-nav {
      background: url(https://raw.githubusercontent.com/sfcgeorge/uploads/master/uPic/tenor.gif) !important;
  }
}

 

[Gummibeer]

This one makes it easier to know when you've scrolled down the page

.p-nav {
    background: url(https://raw.githubusercontent.com/sfcgeorge/uploads/master/uPic/3297996jhk3cxp0nf.gif) !important;
}

.uix_headerContainer .p-navSticky.is-sticky .p-nav {
    background: url(https://raw.githubusercontent.com/sfcgeorge/uploads/master/uPic/tenor.gif) !important;
}

Because of this super crazy animation this should be at least wrapped in a prefers-reduced-motion media query.

prefers-reduced-motion: Sometimes less movement is more

The prefers-reduced-motion media query detects whether the user has requested that the system minimize the amount of animation or motion it uses. This is for users who either require or prefer minimized animations; for example people with vestibular disorders often desire animations to be kept...

web.dev

 

[sfcgeorge]

Because of this super crazy animation this should be at least wrapped in a prefers-reduced-motion media query.

prefers-reduced-motion: Sometimes less movement is more

The prefers-reduced-motion media query detects whether the user has requested that the system minimize the amount of animation or motion it uses. This is for users who either require or prefer minimized animations; for example people with vestibular disorders often desire animations to be kept...

web.dev

That seems too responsible for design by committee but I've added it to be kind 😄

 

[sfcgeorge]

@media (prefers-reduced-motion: no-preference) {
  .button:hover, a.button:hover {
    transform: scale(1.5) rotate(1080deg) rotateX(20deg) rotateY(15deg);
    filter: brightness(125%) saturate(200%);
  }   
}

 

[Gummibeer]

That seems too responsible for design by committee but I've added it to be kind 😄

I would agree if it wouldn't risk the health of some. So like my 180° rotated page or white on white would make the page unusable but don't risk the health of users.

 

[sfcgeorge]

it is too hard to know what is link, what is buton. please can make it so you know what link is and what buton like a label or something

a::after, .button::before {
  content: "buton: ";
  position: absolute;
  top: -20px;
  left: 0;
  color: black;
  background: yellow;
  height: 15px;
  line-height: 15px;
  font-size: 12px;
  text-transform: lowercase;
  opacity: 0.75;
  font-weight: normal;
}

a:not(.button) {
  position: relative;
}

a:not(.button)::after {
  content: "link: ";
}