/* Buzzwords */ @keyframes rainbow { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } .buzzword-list, .inlinelist { padding: 0; } .inlinelist:first-child:last-child { margin: 0; } .buzzword, .buzzword-list li, .inlinelist .inlinelist-item { display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone; font-family: Georgia, serif; font-size: 116%; white-space: normal; line-height: 1.85; padding: .2em .5em; margin: 4px 4px 4px 0; transition: .15s linear outline; } .inlinelist .inlinelist-item.active { background-color: #222; color: #fff; font-weight: inherit; } .inlinelist .inlinelist-item.active :link, .inlinelist .inlinelist-item.active :visited { color: #fff; } .inlinelist .inlinelist-item code { background-color: transparent; font-size: 80%; margin-left: 6px; padding-left: 6px; display: inline-block; position: relative; } @media (max-width: 26.8125em) { /* 429px */ .inlinelist .inlinelist-item { overflow: hidden; } .inlinelist .inlinelist-item code { float: right; line-height: 1.75; } } @media (min-width: 26.875em) { /* 430px */ .inlinelist .inlinelist-item code { float: none; } .inlinelist .inlinelist-item code:before { content: " "; border-left: 1px solid rgba(255,255,255,.8); position: absolute; left: -2px; top: -2px; bottom: 2px; } @media (prefers-color-scheme: dark) { .inlinelist .inlinelist-item code:before { border-left-color: rgba(0,0,0,.8); } } } a.buzzword { text-decoration: underline; } .buzzword-list a, .inlinelist a { text-decoration: none; } .inlinelist .inlinelist-item { font-size: 100%; line-height: 2; } @supports not(-webkit-box-decoration-break: clone) { .buzzword, .buzzword-list li, .inlinelist .inlinelist-item { display: inline-block; } } .buzzword-list li, .buzzword { background-color: #f7f7f7; } @media (prefers-color-scheme: dark) { .buzzword-list li, .buzzword { background-color: #080808; } } .inlinelist .inlinelist-item { background-color: #e9e9e9; } @media (prefers-color-scheme: dark) { .inlinelist .inlinelist-item { background-color: #000; } .inlinelist .inlinelist-item a { color: #fff; } .inlinelist .inlinelist-item code { color: inherit; } } .inlinelist .inlinelist-item:hover, .inlinelist .inlinelist-item:focus, .buzzword-list li:hover, .buzzword-list li:focus, .buzzword:hover, .buzzword:focus, .rainbow-active:hover, .rainbow-active:focus { position: relative; background-image: linear-gradient(238deg, #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff0080); background-size: 1200% 1200%; background-position: 2% 80%; color: #fff; text-shadow: 0 0 2px rgba(0,0,0,.9); animation: rainbow 4s ease-out alternate infinite; } .rainbow-active-noanim { animation: none !important; } .inlinelist .inlinelist-item:hover a, .inlinelist .inlinelist-item:focus a, .buzzword-list li:hover a, .buzzword-list li:focus a, a.buzzword:hover, a.buzzword:focus, a.rainbow-active:hover, a.rainbow-active:focus { color: #fff; text-decoration: none; } @media (prefers-reduced-motion: reduce) { .inlinelist .inlinelist-item:hover, .inlinelist .inlinelist-item:focus, .buzzword-list li:hover, .buzzword-list li:focus, .buzzword:hover, .buzzword:focus, .rainbow-active:hover, .rainbow-active:focus { animation: none; } } .buzzword-list li:hover:after, .buzzword-list li:focus:after, .buzzword:hover:after, .buzzword:focus:after { font-family: system-ui, -apple-system, sans-serif; content: "Buzzword alert!!!"; position: absolute; left: 0; top: 0; max-width: 8em; color: #f00; font-weight: 700; text-transform: uppercase; transform: rotate(-10deg) translate(-25%, -125%); text-shadow: 1px 1px 5px rgba(0,0,0,.6); line-height: 1.2; pointer-events: none; } main h2 .buzzword, main h3 .buzzword, main p .buzzword { padding: 0px 7px; font-size: 1em; /* 18px /18 */ margin: 0; line-height: 1.444444444444; /* 26px /18 */ font-family: inherit; } main h2 a.buzzword, main h3 a.buzzword, main p a.buzzword { text-decoration: underline; } /* Small viewport */ @media (max-width: 26.8125em) { /* 429px */ .inlinelist .inlinelist-item { display: block; width: auto; padding: 0; line-height: 1.4; } .inlinelist .inlinelist-item > a { display: block; padding: .2em .5em; } } @media (min-width: 26.875em) { /* 430px */ .inlinelist .inlinelist-item > a { display: inline-block; white-space: nowrap; } } .numberflag { display: inline-flex; align-items: center; justify-content: center; background-color: #dff7ff; border-radius: 50%; width: 1.75em; height: 1.75em; font-weight: 600; } @media (prefers-color-scheme: dark) { .numberflag { background-color: #00bcd4; color: #222; } } h1 .numberflag, h2 .numberflag, h3 .numberflag, h4 .numberflag, h5 .numberflag { width: 1.25em; height: 1.25em; } h2 .numberflag { position: relative; margin-right: 0.25em; /* 10px /40 */ } h2 .numberflag:after { content: " "; position: absolute; bottom: -1px; left: 0; height: 1px; background-color: #fff; width: calc(100% + 0.4em); /* 16px /40 */ } @media (prefers-color-scheme: dark) { h2 .numberflag:after { background-color: #222; } } /* Super featured list on home page */ .list-superfeatured .avatar { width: calc(30px + 5vw); height: calc(30px + 5vw); max-width: 60px; max-height: 60px; margin-left: 0; } @media (max-width: 26.8125em) { /* 429px */ .list-superfeatured .inlinelist-item > a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } @media (min-width: 26.875em) { /* 430px */ .list-superfeatured .inlinelist-item { font-size: 110%; } } /* Only top level */ .inlinelist-no-nest ul, .inlinelist-no-nest ol { display: none; }