User:THE OWL/Sandbox: Difference between revisions

From Valve Developer Community
Jump to navigation Jump to search
mNo edit summary
m (Minor fixes)
Line 1: Line 1:
{{DISPLAYTITLE:THE OWL's Sandbox}}__NOTOC__
{{DISPLAYTITLE:THE OWL’s Sandbox}}__NOTOC__
Damn, it's a little difficult to work on everything below...
Damn, it’s a little difficult to work on everything below…


Below I'm slowly working on a new unified design. I'll be back home soon and will try to speed up the process of working on it.
Below I’m slowly working on a new unified design. I’ll be back home soon and will try to speed up the process of working on it.


<center> <p>'''Navigation'''</p> </center>
<center> <p>'''Navigation'''</p> </center>


<div style="display:flex; justify-content:center; gap:.5em"><!--
<div style="display:flex; justify-content:center; gap:.5em"><!--
--> {{link|button|Special:PrefixIndex/User:THE OWL/Sandbox/Templates|Templates}} <span style="opacity:.5">·</span> <span> {{link|button|Special:PrefixIndex/User:THE OWL/Sandbox/Pages|Pages}}</span>
--> {{Link|button|Special:PrefixIndex/User:THE OWL/Sandbox/Templates|Templates}} <span style="opacity:.5">•</span> {{Link|button|Special:PrefixIndex/User:THE OWL/Sandbox/Pages|Pages}}
</div>
</div>


Line 13: Line 13:


<div style="display:flex; justify-content:center; gap:.5em"><!--
<div style="display:flex; justify-content:center; gap:.5em"><!--
--> {{link|button|/Pages/Main Page|Main Page}} <span style="opacity:.5">·</span> {{link|button|/Pages/Discussion page|Discussion page}}</span> <span style="opacity:.5">·</span> {{link|button|/Pages/Entity page|Entity page}}</span> </span>·</span> {{link|button|/Pages/Software docs|Software docs}}</span> <span style="opacity:.5">·</span> <span> {{link|button|/Pages/User page|User page}}</span>
--> {{Link|button|/Pages/Main Page|Main Page}} <span style="opacity:.5">•</span> {{Link|button|/Pages/Discussion page|Discussion page}} <span style="opacity:.5">•</span> {{Link|button|/Pages/Entity page|Entity page}} <span style="opacity:.5">•</span> {{Link|button|/Pages/Software docs|Software docs}} <span style="opacity:.5">•</span> {{Link|button|/Pages/User page|User page}}
</div>
</div>


{{clr}}
{{Clr}}


== Colors ==
== Colors ==
<div style="display:flex; flex-wrap:wrap; gap:1em">
<div style="display:flex; flex-wrap:wrap; gap:1em">
<div style="display:inherit; gap:.4em">
<div style="display:inherit; gap:.4em">
<div style="background-color:rgb(41 41 41); outline:1px solid rgb(255 255 255 / 50%); border-radius:50%; padding:.5em .75em"></div>
<div style="border-radius:50%; padding:.5em .75em; background-color:rgb(41 41 41); outline:1px solid rgb(255 255 255 / 50%)"></div>
<div> Island <span style="opacity:.5"> (41 41 41) </span> </div>
<div> Island <span style="opacity:.5"> (41 41 41) </span> </div>
</div>
</div>
<div style="display:inherit; gap:.4em">
<div style="display:inherit; gap:.4em">
<div style="background-color:rgb(116 185 224); outline:1px solid rgb(255 255 255 / 50%); border-radius:50%; padding:.5em .75em"></div>
<div style="border-radius:50%; padding:.5em .75em; background-color:rgb(116 185 224); outline:1px solid rgb(255 255 255 / 50%)"></div>
<div> Link <span style="opacity:.5"> (116 185 225) </span> </div>
<div> Link <span style="opacity:.5"> (116 185 225) </span> </div>
</div>
</div>
<div style="display:inherit; gap:.4em">
<div style="display:inherit; gap:.4em">
<div style="background-color:rgb(150 165 145); outline:1px solid rgb(255 255 255 / 50%); border-radius:50%; padding:.5em .75em"></div>
<div style="border-radius:50%; padding:.5em .75em; background-color:rgb(150 165 145); outline:1px solid rgb(255 255 255 / 50%)"></div>
<div> Code <span style="opacity:.5"> (150 165 145) </span> </div>
<div> Code <span style="opacity:.5"> (150 165 145) </span> </div>
</div>
</div>
Line 39: Line 39:


<div style="display:flex; gap:1em; margin-bottom:.5em">
<div style="display:flex; gap:1em; margin-bottom:.5em">
<div style="background-color:rgb(0 0 0 / 50%); border-radius:6px; padding:1em 3em 2em 1em">
<div style="border-radius:6px; padding:1em 3em 2em 1em; background-color:rgb(0 0 0 / 50%)">
<div style="font-size:1.5em; font-weight:400; color:rgb(255 255 255 / 85%)"> Aa </div>
<div style="font-size:1.5em; font-weight:400; color:rgb(255 255 255 / 85%)"> Aa </div>
<div style=""> Regular <span style="opacity:.5">(400)</span> </div>
<div> Regular <span style="opacity:.5">(400)</span> </div>
</div>
</div>
<div style="background-color:rgb(0 0 0 / 50%); border-radius:6px; padding:1em 3em 2em 1em">
<div style="border-radius:6px; padding:1em 3em 2em 1em; background-color:rgb(0 0 0 / 50%)">
<div style="font-size:1.5em; font-weight:700; color:rgb(255 255 255 / 85%)"> Aa </div>
<div style="font-size:1.5em; font-weight:700; color:rgb(255 255 255 / 85%)"> Aa </div>
<div style=""> Bold <span style="opacity:.5">(700)</span> </div>
<div> Bold <span style="opacity:.5">(700)</span> </div>
</div>
</div>
<div style="background-color:rgb(0 0 0 / 50%); border-radius:6px; padding:1em 3em 2em 1em">
<div style="border-radius:6px; padding:1em 3em 2em 1em; background-color:rgb(0 0 0 / 50%)">
<div style="font-size:1.5em; font-weight:900; color:rgb(255 255 255 / 85%)"> Aa </div>
<div style="font-size:1.5em; font-weight:900; color:rgb(255 255 255 / 85%)"> Aa </div>
<div style=""> Black <span style="opacity:.5">(900)</span> </div>
<div> Black <span style="opacity:.5">(900)</span> </div>
</div>
</div>
</div>
</div>
Line 56: Line 56:


<div style="display:flex; gap:1em; margin-bottom:.5em">
<div style="display:flex; gap:1em; margin-bottom:.5em">
<div style="background-color:rgb(0 0 0 / 50%); border-radius:6px; padding:1em 3em 2em 1em">
<div style="border-radius:6px; padding:1em 3em 2em 1em; background-color:rgb(0 0 0 / 50%)">
<div style="font-family:monospace; font-size:2.2em; font-weight:400; color:rgb(255 255 255 / 85%)"> Aa </div>
<div style="font-family:monospace; font-size:2.2em; font-weight:400; color:rgb(255 255 255 / 85%)"> Aa </div>
<div style=""> Regular <span style="opacity:.5">(400)</span> </div>
<div> Regular <span style="opacity:.5">(400)</span> </div>
</div>
</div>
</div>
</div>
Line 64: Line 64:
== Iconography ==
== Iconography ==
=== Navigation ===
=== Navigation ===
It's empty here for now.
It’s empty here for now.


== Buttons ==
== Buttons ==
It's empty here for now.
It’s empty here for now.




== Selectors & Elements ==
== Selectors & Elements ==
=== Checkbox ===
=== Checkbox ===
It's empty here for now.
It’s empty here for now.


=== Toggle button ===
=== Toggle button ===
It's empty here for now.
It’s empty here for now.


=== Tabs ===
=== Tabs ===
It's empty here for now.
It’s empty here for now.

Revision as of 01:39, 17 June 2024

Damn, it’s a little difficult to work on everything below…

Below I’m slowly working on a new unified design. I’ll be back home soon and will try to speed up the process of working on it.

Navigation

Special:PrefixIndex/User:THE OWL/Sandbox/Templates • Special:PrefixIndex/User:THE OWL/Sandbox/Pages

Preview of Page Types

/Pages/Main Page • /Pages/Discussion page • /Pages/Entity page • /Pages/Software docs • /Pages/User page

Colors

Island (41 41 41)
Link (116 185 225)
Code (150 165 145)

Typography

Typeface

sans-serif (general)

Aa
Regular (400)
Aa
Bold (700)
Aa
Black (900)

monospace (for code)

Aa
Regular (400)

Iconography

Navigation

It’s empty here for now.

Buttons

It’s empty here for now.


Selectors & Elements

Checkbox

It’s empty here for now.

Toggle button

It’s empty here for now.

Tabs

It’s empty here for now.

Retrieved from "https://developer.valvesoftware.com/w/index.php?title=User:THE_OWL/Sandbox&oldid=407542"