style_nobg.css 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. /* See humans.txt for full thanks */
  2. body {
  3. max-width: 800px ;
  4. margin: auto ;
  5. }
  6. h1 {
  7. text-align: left ;
  8. }/* LIGHT MODE */
  9. :root {
  10. --color: #0f0f0f;
  11. --link-color: #3b0000;
  12. --bg-color: hsl(204, 44%, 65%);
  13. }
  14. /* unvisited link */
  15. a:link {
  16. color: #975777;
  17. }
  18. /* visited link */
  19. a:visited {
  20. color: #13131f;
  21. }
  22. /* mouse over link */
  23. a:hover {
  24. color: #1313df;
  25. }
  26. /* selected link */
  27. a:active {
  28. color: #37374b;
  29. }
  30. /* DARK MODE */
  31. @media (prefers-color-scheme: dark) {
  32. :root {
  33. --color: #ffffff;
  34. --link-color: #20bdec;
  35. --bg-color: hsl(30, 36%, 4%);
  36. }
  37. /* unvisited link */
  38. a:link {
  39. color: #ffa8de;
  40. }
  41. /* visited link */
  42. a:visited {
  43. color: #ffc5a8;
  44. }
  45. /* mouse over link */
  46. a:hover {
  47. color: #7fbfff;
  48. }
  49. /* selected link */
  50. a:active {
  51. color: #ffffff;
  52. }
  53. }
  54. body {
  55. max-width: 800px ;
  56. margin: auto ;
  57. color: var(--color);
  58. background-image: var(--bg-image);
  59. background-color: var(--bg-color);
  60. }
  61. /* unvisited link */
  62. a:link {
  63. color: var(--link-color);
  64. }
  65. .blackstar {
  66. position:fixed;
  67. bottom:151;
  68. left:15%;
  69. }
  70. /* This removed the underline for links */
  71. a:link { text-decoration: none; }
  72. a:visited { text-decoration: none; }
  73. a:hover { text-decoration: underline; }
  74. a:active { text-decoration: underline; }
  75. /* What font to use */
  76. h1, h2, h3, a, th, blockquote, ubuntu, center {
  77. font-family: Ubuntu, "Noto Sans", "Liberation Sans", Helvetica, Arial, sans-serif;
  78. }
  79. pre, tt, xmp, ubuntu-mono {
  80. font-family: monospace, "Ubuntu Monospace", Courier;
  81. }
  82. p {
  83. font-family: Ubuntu, "Noto Sans", "Liberation Sans", Helvetica, Arial, sans-serif;
  84. }
  85. a {
  86. text-decoration: underline;
  87. }
  88. a:hover {
  89. text-decoration: none;
  90. }
  91. /* Thank you to Job of joppiesaus.neocities.org for not only writing the following CSS, but also allowing me to use it */
  92. /* 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 */
  93. figure {
  94. display: block;
  95. margin: 0 auto;
  96. max-width: 95vw;
  97. border: 1px solid #000;
  98. background: #000;
  99. background: rgba(0, 0, 0, 0.5);
  100. width: min-content;
  101. border-radius: 2px;
  102. }
  103. figure {
  104. float: right;
  105. max-width: 33vw;
  106. margin: 3px;
  107. margin-left: 5px;
  108. margin-right: 0;
  109. }
  110. /* The Following code has been written by Randy and has given his consent for me to use it */
  111. /* I am unsure if the following code *can* even be copyrighted due to how generic it is */
  112. blockquote {
  113. border-left: 0.1em solid #cc66ff;
  114. padding-left: 0.3em;
  115. }
  116. /* The following was written by devils.gay - thank you */
  117. uppercase,yell {
  118. text-transform: uppercase;
  119. }
  120. /* The following has been taken from the below URL */
  121. /* https://learn2dev.com/articles/css-shorts/spoilers */
  122. .spoiler-text {
  123. background: black;
  124. color: transparent;
  125. cursor: help;
  126. user-select: none;
  127. transition: background 0.3s ease 0.2s, color 0.2s ease 0.25s;
  128. }
  129. .spoiler-text:hover,
  130. .spoiler-text:focus {
  131. background: #e8e8e8;
  132. color: inherit;
  133. }
  134. .tag {
  135. padding: 10px;
  136. border: 5px solid gray;
  137. margin: 0;
  138. background-color: #4D4A7C;
  139. }