User:Arumi/style.css2

From City of Hope MUSH
Jump to navigation Jump to search

@import url('https://fonts.googleapis.com/css2?family=Palanquin:wght@400;700&display=swap');

  1. bodyContent {

font-family: Palanquin; background-color: black; background-image: radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px), radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px), radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px), radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px); background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px; background-position: 0 0, 40px 60px, 130px 270px, 70px 100px; }

  1. catlinks {

position: absolute; bottom: 0; right: 0; transform: rotate(-5deg); }

  1. arumi-wrapper #toc {

background: transparent; border: none; }

  1. arumi-wrapper #toc .toctitle {

display: none; }

  1. arumi-wrapper h1, #arumi-wrapper h2 {

text-align: center; border-bottom: none; }

  1. arumi-wrapper a, #arumi-wrapper a:hover, #arumi-wrapper a:visited {

color: #ffff80; }

  1. arumi-wrapper h3, #arumi-sidebar th, #arumi-sidebar h1, #arumi-sidebar h2 {

background: linear-gradient(to right, #afd7ff 0%, #ffffff 75%, #ffff87 100%); text-align: center; border: solid 1px white; padding-top: 0; color: black; } .mw-editsection { display: none; }

  1. arumi-wrapper {

display: flex; flex-wrap: nowrap; justify-content: flex-start; max-width: 100%; padding: 10px; }

  1. arumi-main {

padding: 5px; color: #ffffff; }

  1. arumi-gallery p {

display: flex; flex-wrap: wrap; justify-content: flex-start; width: 100%; }

  1. arumi-sidebar {

text-align: center; background-color: transparent; color: #ffffff; min-width: 200px; padding: 5px; }

  1. arumi-sidebar img[alt~="Arumi-Goggles.jpg"] {

width:100%; height: auto; }

  1. arumi-sidebar img[alt="Sons of Ether.svg"] {

background: transparent; filter: invert(50%) sepia(50%) brightness(100%) contrast(100%) hue-rotate(134deg); }

  1. arumi-sidebar table td {

text-align: left; }

  1. arumi-gallery img:hover {

box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.5); transform: scale(2); transition-duration: 0.5s; }

  1. arumi-wrapper .stereotypes img {
   background-color: white;

}

  1. arumi-sidebar .dot5 img {

width: 0.75em; height: 0.75em; }

@media (max-width: 991px) { #arumi-main { font-size: 2.5em; } #arumi-sidebar { width: 100%; font-size: 2.5em; } #arumi-sidebar img[alt~="Dot.png"], #arumi-sidebar img[alt~="Dot-filled.png"] { width: 30px; height: 30px; } #arumi-wrapper { flex-direction: column-reverse; align-items: center; } #arumi-gallery p { flex-direction: column; align-items: center; } #arumi-sidebar img[alt="Sons of Ether.svg"] { max-width: 100%; height: auto; } } @media (min-width: 992px) { #arumi-wrapper { flex-direction: row; align-items: flex-start; } #arumi-main { flex-grow: 4; margin-right: 10px; } #arumi-sidebar { flex-grow: 1; max-width: 20%; margin-right: 10px; } #arumi-gallery { flex-direction: row; align-items: flex-start; } #arumi-sidebar img[alt="Sons of Ether.svg"] { max-width: 50%; height: auto; image-rendering: smooth; } .arumi-twocolumn ul { column-count: 2; } }