base.css 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  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. h1,
  15. h2,
  16. h3,
  17. h4,
  18. h5,
  19. h6,
  20. #site-title {
  21. @apply font-bold font-mono;
  22. }
  23. h1 {
  24. @apply text-3xl;
  25. }
  26. h2 {
  27. @apply text-2xl;
  28. }
  29. h3 {
  30. @apply text-xl;
  31. }
  32. h4 {
  33. @apply text-lg;
  34. }
  35. textarea {
  36. @apply w-full h-24 p-2 bg-white border border-gray-400 rounded;
  37. }
  38. ol {
  39. @apply list-decimal list-inside;
  40. }
  41. ul {
  42. @apply list-disc list-inside;
  43. }
  44. li > ol,
  45. li > ul {
  46. @apply pl-4;
  47. }
  48. pre {
  49. @apply w-full my-2 p-2 bg-gray-50 rounded;
  50. }
  51. code {
  52. @apply inline-block px-1 bg-gray-50 rounded-sm;
  53. }
  54. hr {
  55. @apply w-full border-gray-700 mt-4 mb-2;
  56. }
  57. .form {
  58. /* filler */
  59. }
  60. .form label {
  61. @apply block text-lg font-semibold;
  62. }
  63. .form label .desc {
  64. @apply text-xs lowercase;
  65. }
  66. .form label .desc::before {
  67. content: "(";
  68. }
  69. .form label .desc::after {
  70. content: ")";
  71. }
  72. .form input,
  73. .form select {
  74. @apply inline-block w-full max-w-screen-lg border border-gray-400 rounded;
  75. }
  76. .form .input-prefix {
  77. @apply flex w-full max-w-screen-lg border border-gray-400 rounded overflow-hidden;
  78. }
  79. .form .input-prefix::before {
  80. @apply bg-gray-200 pl-2 pr-1;
  81. content: attr(data-prefix);
  82. }
  83. .form .input-prefix input {
  84. @apply border-none rounded-none;
  85. }
  86. /* tables */
  87. table {
  88. @apply w-full bg-purple-200 border-2;
  89. }
  90. table a {
  91. @apply text-black;
  92. }
  93. table thead,
  94. table tbody,
  95. table thead tr,
  96. table tbody tr {
  97. @apply flex w-full;
  98. }
  99. table thead {
  100. @apply bg-gray-100 border-b-2 border-black;
  101. }
  102. table thead th {
  103. @apply text-left;
  104. }
  105. table tbody {
  106. @apply flex-col items-center justify-between overflow-y-auto max-h-80;
  107. }
  108. table thead tr *,
  109. table tbody tr * {
  110. @apply flex-1;
  111. }
  112. table tbody tr:nth-child(even){
  113. @apply bg-purple-100;
  114. }
  115. table tbody tr{
  116. @apply hover:bg-white;
  117. }
  118. table thead th:first-child,
  119. table tbody td:first-child {
  120. @apply pl-2;
  121. }
  122. table thead th:last-child,
  123. table tbody td:last-child {
  124. @apply pr-2;
  125. }
  126. }
  127. @layer components {
  128. /* standard classes */
  129. .btn {
  130. @apply inline-block bg-white p-2 border border-black rounded text-black font-normal no-underline;
  131. }
  132. .panel {
  133. @apply w-full my-2 border border-black p-2 rounded bg-gray-200 relative;
  134. }
  135. .fullscreen {
  136. @apply block w-screen h-screen;
  137. }
  138. /* wrap an image such that it is only minimally scaled to fit a desired area. */
  139. /* actual size it left to be applied to the element. */
  140. .image-wrapper {
  141. @apply inline-block items-center justify-items-center overflow-hidden;
  142. }
  143. .image-wrapper img {
  144. @apply w-full h-full object-cover;
  145. }
  146. /* Navbar styles */
  147. #sidebar
  148. {
  149. @apply w-screen xl:w-1/6 lg:max-w-xs bg-pink-500 border-r border-black;
  150. 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");
  151. }
  152. #sidebar h1,
  153. #sidebar div,
  154. #sidebar p {
  155. @apply mx-auto my-4 px-6 py-4 bg-opacity-50 bg-white rounded text-center;
  156. }
  157. #sidebar h1 {
  158. @apply w-max bg-opacity-70;
  159. }
  160. #sidebar p,
  161. #sidebar div {
  162. @apply mx-8;
  163. }
  164. #sidebar #site-title {
  165. @apply text-3xl;
  166. }
  167. #nav {
  168. @apply flex justify-around;
  169. }
  170. #nav a {
  171. @apply text-black;
  172. }
  173. /* Blog */
  174. .blog-post {
  175. @apply w-full md:w-3/4 xl:w-1/2 max-w-3xl mx-auto;
  176. }
  177. .blog-post--body {
  178. @apply px-2;
  179. }
  180. .blog-post--body h2 {
  181. @apply mt-4;
  182. }
  183. .blog-post--body p {
  184. @apply my-2;
  185. }
  186. .blog-post--body blockquote {
  187. @apply pl-2 border-l-8 border-gray-600 italic;
  188. }
  189. .blog-post--footer {
  190. @apply mt-8 p-2 font-mono text-sm border-t border-black;
  191. }
  192. }