Entries Open 🐫 [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