123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189 |
- /* See humans.html for full thanks */
- body {
- max-width: 800px ;
- margin: auto ;
- }
- h1 {
- text-align: left ;
- }
- /* LIGHT MODE */
- :root {
- --color: #0f0f0f;
- --link-color: #3b0000;
- --bg-image: url(bg_light.png);
- --bg-color: hsl(204, 44%, 65%);
- background-size: auto;
- background-repeat: auto;
- background-position: center;
- background-attachment: fixed;
- }
- /* unvisited link */
- a:link {
- color: #975777;
- }
- /* visited link */
- a:visited {
- color: #13131f;
- }
- /* mouse over link */
- a:hover {
- color: #1313df;
- }
- /* selected link */
- a:active {
- color: #37374b;
- }
- /* DARK MODE */
- @media (prefers-color-scheme: dark) {
- :root {
- --color: #ffffff;
- --link-color: #20bdec;
- --bg-image: url(bg.png);
- --bg-color: hsl(30, 36%, 4%);
- }
- /* unvisited link */
- a:link {
- color: #ffa8de;
- }
- /* visited link */
- a:visited {
- color: #ffc5a8;
- }
- /* mouse over link */
- a:hover {
- color: #7fbfff;
- }
- /* selected link */
- a:active {
- color: #ffffff;
- }
- }
- body {
- max-width: 800px ;
- margin: auto ;
- color: var(--color);
- background-image: var(--bg-image);
- background-color: var(--bg-color);
- background-size: auto;
- background-repeat: auto;
- background-position: center;
- background-attachment: fixed;
- }
- /* unvisited link */
- a:link {
- color: var(--link-color);
- }
- /* While this part was cool, I decided to get rid of it due to accessibility reasons, but what it did was remove the underlines for links
- a:link { text-decoration: none; }
- a:visited { text-decoration: none; }
- a:hover { text-decoration: underline; }
- a:active { text-decoration: underline; } */
- /* What font to use */
- h1, h2, h3, a, li, th, br, ubuntu, p, blockquote, center {
- font-family: Ubuntu, "Noto Sans", "Liberation Sans", Helvetica, Arial, sans-serif;
- }
- pre, tt, xmp, ubuntu-mono {
- font-family: monospace, "Ubuntu Monospace", Courier;
- }
- a {
- text-decoration: underline;
- }
- a:hover {
- text-decoration: none;
- }
- /* Thank you to Job of joppiesaus.neocities.org for not only writing the following CSS, but also allowing me to use it */
- /* Job has been a friend of mine for a few years now, and it would really make me happy if you checked out their website */
- figure {
- display: block;
- margin: 0 auto;
- max-width: 95vw;
- border: 1px solid #999;
- background: #000;
- background: rgba(0, 0, 0, 0.5);
- width: min-content;
- border-radius: 2px;
- }
- figure {
- float: right;
- max-width: 33vw;
- margin: 3px;
- margin-left: 5px;
- margin-right: 0;
- }
- /* The Following code has been written by Randy and has given his consent for me to use it */
- /* I am unsure if the following code *can* even be copyrighted due to how generic it is */
- blockquote {
- border-left: 0.1em solid #cc66ff;
- padding-left: 0.3em;
- }
- /* The following was written by devils.gay - thank you */
- uppercase,yell {
- text-transform: uppercase;
- }
- /* The following has been taken from the below URL */
- /* https://learn2dev.com/articles/css-shorts/spoilers */
- .spoiler-text {
- background: black;
- color: transparent;
- cursor: help;
- user-select: none;
- transition: background 0.3s ease 0.2s, color 0.2s ease 0.25s;
- }
- .spoiler-text:hover,
- .spoiler-text:focus {
- background: #e8e8e8;
- color: inherit;
- }
- /* Following taken from /accessibility/#autoplay part of the website */
- .flashing {
- -webkit-filter: blur(5px); /* For Safari 6.0 - 9.0 */
- filter: blur(5px);
- }
- .flashing:hover {
- -webkit-filter: none;
- filter: none;
- }
- /* Following taken from /accessibility/#autoplay part of the website */
- .flashing {
- -webkit-filter: blur(5px); /* For Safari 6.0 - 9.0 */
- filter: blur(5px);
- }
- .flashing:hover {
- -webkit-filter: none;
- filter: none;
- }
- .tag {
- padding: 10px;
- border: 5px solid gray;
- margin: 0;
- background-color: #4D4A7C;
- }
|