base.css 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254
  1. /* global base styles */
  2. @layer base {
  3. html,
  4. body{
  5. background-color: #b19fb3;
  6. @apply h-screen
  7. }
  8. a{
  9. @apply text-purple-400 font-semibold underline;
  10. }
  11. a[rel] {
  12. @apply whitespace-nowrap;
  13. }
  14. blockquote {
  15. @apply pl-2 border-l-8 border-gray-600 italic;
  16. }
  17. blockquote cite {
  18. display: block;
  19. }
  20. h1,
  21. h2,
  22. h3,
  23. h4,
  24. h5,
  25. h6,
  26. #site-title {
  27. @apply font-bold font-mono;
  28. }
  29. h1 {
  30. @apply text-3xl;
  31. }
  32. h2 {
  33. @apply text-2xl;
  34. }
  35. h3 {
  36. @apply text-xl;
  37. }
  38. h4 {
  39. @apply text-lg;
  40. }
  41. textarea, input {
  42. @apply w-full p-2 bg-white border border-gray-400 rounded;
  43. }
  44. textarea {
  45. @apply h-24;
  46. }
  47. details > *:not(summary) {
  48. @apply pl-4;
  49. }
  50. ol {
  51. @apply list-decimal list-inside;
  52. }
  53. ul {
  54. @apply list-disc list-inside;
  55. }
  56. li > ol,
  57. li > ul {
  58. @apply pl-4;
  59. }
  60. li > ul {
  61. list-style-type: circle;
  62. }
  63. li > ol {
  64. list-style-type: lower-roman;
  65. }
  66. pre {
  67. @apply w-full my-2 p-2 bg-gray-50 rounded;
  68. }
  69. code {
  70. @apply inline-block px-1 bg-gray-50 rounded-sm;
  71. }
  72. hr {
  73. @apply w-full border-gray-700 mt-4 mb-2;
  74. }
  75. .form {
  76. /* filler */
  77. }
  78. .form label {
  79. @apply block text-lg font-semibold;
  80. }
  81. .form label .desc {
  82. @apply text-xs lowercase;
  83. }
  84. .form label .desc::before {
  85. content: "(";
  86. }
  87. .form label .desc::after {
  88. content: ")";
  89. }
  90. .form input,
  91. .form select {
  92. @apply inline-block w-full max-w-screen-lg border border-gray-400 rounded;
  93. }
  94. .form .input-prefix {
  95. @apply flex w-full max-w-screen-lg border border-gray-400 rounded overflow-hidden;
  96. }
  97. .form .input-prefix::before {
  98. @apply bg-gray-200 pl-2 pr-1;
  99. content: attr(data-prefix);
  100. }
  101. .form .input-prefix input {
  102. @apply border-none rounded-none;
  103. }
  104. /* tables */
  105. table {
  106. @apply w-full bg-purple-200 border-2;
  107. }
  108. table a {
  109. @apply text-black;
  110. }
  111. table thead,
  112. table tbody,
  113. table thead tr,
  114. table tbody tr {
  115. @apply flex w-full;
  116. }
  117. table thead {
  118. @apply bg-gray-100 border-b-2 border-black;
  119. }
  120. table thead th {
  121. @apply text-left;
  122. }
  123. table tbody {
  124. @apply flex-col items-center justify-between overflow-y-auto max-h-80;
  125. }
  126. table thead tr *,
  127. table tbody tr * {
  128. @apply flex-1;
  129. }
  130. table tbody tr:nth-child(even){
  131. @apply bg-purple-100;
  132. }
  133. table tbody tr{
  134. @apply hover:bg-white;
  135. }
  136. table thead th:first-child,
  137. table tbody td:first-child {
  138. @apply pl-2;
  139. }
  140. table thead th:last-child,
  141. table tbody td:last-child {
  142. @apply pr-2;
  143. }
  144. article figure {
  145. @apply max-w-lg mx-auto p-2 border border-gray-400 rounded text-center;
  146. }
  147. figure img {
  148. @apply w-full sm:w-3/4 xl:w-5/6 mx-auto;
  149. }
  150. figure figcaption {
  151. @apply w-full sm:w-3/4 xl:w-5/6 mx-auto text-sm italic;
  152. }
  153. }
  154. @layer components {
  155. /* standard classes */
  156. .btn {
  157. @apply inline-block bg-white p-2 border border-black rounded text-black font-normal no-underline;
  158. }
  159. .panel {
  160. @apply w-full my-2 border border-black p-2 rounded bg-gray-200 relative;
  161. }
  162. .fullscreen {
  163. @apply block w-screen h-screen;
  164. }
  165. /* wrap an image such that it is only minimally scaled to fit a desired area. */
  166. /* actual size it left to be applied to the element. */
  167. .image-wrapper {
  168. @apply inline-block items-center justify-items-center overflow-hidden;
  169. }
  170. .image-wrapper img {
  171. @apply w-full h-full object-cover;
  172. }
  173. /* Navbar styles */
  174. #sidebar
  175. {
  176. @apply w-screen xl:w-1/5 lg:max-w-xs bg-pink-500 border-r border-black;
  177. background-image: linear-gradient(to bottom, rgba(123,100,127,0) 0%, rgba(123,100,127,0.25) 5%, rgba(123,100,127,0.75) 25%, rgba(123,100,127,1) 90%), url("/imgs/hex_500_1000_10.png");
  178. }
  179. #sidebar h1,
  180. #sidebar div,
  181. #sidebar p {
  182. @apply mx-auto my-4 px-6 py-4 bg-opacity-75 bg-gray-200 rounded text-center;
  183. }
  184. #sidebar h1 {
  185. @apply w-max bg-opacity-70;
  186. }
  187. #sidebar p,
  188. #sidebar div {
  189. @apply mx-8;
  190. }
  191. #sidebar #site-title {
  192. @apply text-3xl;
  193. }
  194. #nav {
  195. @apply flex flex-wrap justify-around;
  196. }
  197. #nav a {
  198. @apply flex-1-1/3 xs:flex-auto lg:flex-1-1/3 text-black;
  199. }
  200. /* Blog */
  201. .blog-post {
  202. @apply w-full md:w-3/4 xl:w-1/2 max-w-3xl mx-auto;
  203. }
  204. .blog-post--body {
  205. @apply px-2;
  206. }
  207. .blog-post--body h2 {
  208. @apply mt-4;
  209. }
  210. .blog-post--body p {
  211. @apply my-2;
  212. }
  213. .blog-post--footer {
  214. @apply mt-8 p-2 font-mono text-sm border-t border-black;
  215. }
  216. /* Console */
  217. .console {
  218. @apply p-2 bg-black font-mono rounded;
  219. color: #00FF00;
  220. }
  221. .console p {
  222. @apply m-0;
  223. }
  224. .console * {
  225. color: inherit;
  226. }
  227. }