style.css 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  1. @tailwind base;
  2. @tailwind components;
  3. body {
  4. display: grid;
  5. grid-template-columns: auto 1fr;
  6. grid-template-rows: auto auto 1fr;
  7. grid-template-areas:
  8. "header header"
  9. "nav nav"
  10. "main main";
  11. min-height: 100vh;
  12. }
  13. header {
  14. @apply bg-gray-800 text-gray-50 flex justify-between items-center select-none;
  15. grid-area: header;
  16. box-shadow: 0 -3px 10px 3px black;
  17. z-index: 1;
  18. }
  19. header > * {
  20. @apply p-3;
  21. }
  22. a.brand {
  23. @apply flex items-center;
  24. }
  25. a.brand:hover {
  26. @apply bg-gray-900;
  27. }
  28. a.brand span {
  29. @apply mx-2 font-sans text-sm text-gray-100;
  30. }
  31. a.brand img {
  32. @apply h-7 w-auto;
  33. }
  34. aside.menu {
  35. @apply bg-gray-700 text-white p-2 w-full select-none;
  36. grid-area: nav;
  37. box-shadow: -3px 0 10px 2px black;
  38. }
  39. main {
  40. @apply py-8 mx-5;
  41. grid-area: main;
  42. }
  43. .center {
  44. @apply mx-auto;
  45. }
  46. .menu .menu-title {
  47. @apply text-gray-200 uppercase text-xs font-sans py-2;
  48. }
  49. .menu .menu-list a {
  50. @apply py-1 px-2 rounded-sm text-white block;
  51. }
  52. .menu .menu-list a:hover {
  53. @apply text-gray-700 bg-white;
  54. }
  55. .menu .menu-list a.is-active {
  56. @apply bg-blue-500 text-white;
  57. }
  58. .content {
  59. @apply prose max-w-full;
  60. }
  61. .content.big {
  62. @apply prose-xl;
  63. }
  64. .artifacts-header {
  65. @apply text-4xl font-bold mt-20;
  66. }
  67. .artifacts-list {
  68. display: grid;
  69. grid-template-columns: auto;
  70. gap: 0.2rem 0.5rem;
  71. align-items: center;
  72. }
  73. .artifacts-list .artifact-link {
  74. @apply text-white bg-blue-600 rounded-sm p-1 px-2 no-underline font-normal mt-2;
  75. height: min-content;
  76. }
  77. .artifacts-list .artifact-link:hover {
  78. @apply bg-blue-700;
  79. }
  80. .artifacts-list .artifact-desc {
  81. @apply italic text-sm;
  82. }
  83. .artifact-item {
  84. @apply bg-gray-200 my-3;
  85. }
  86. .artifact-item .artifact-contents {
  87. @apply p-4 hidden;
  88. }
  89. .artifact-item .artifact-contents.contents-visible {
  90. @apply block;
  91. }
  92. .artifact-contents .changelog {
  93. @apply text-sm;
  94. }
  95. .artifact-contents .changelog li {
  96. @apply my-0;
  97. }
  98. .artifact-contents .changelog li::before {
  99. font-family: "fontello";
  100. content: '\f105';
  101. top: calc(0.875em - 0.73em);
  102. background-color: transparent;
  103. left: 0.5em;
  104. }
  105. .artifact-details {
  106. @apply flex items-center bg-gray-300 select-none;
  107. }
  108. .artifact-details .icon-downup {
  109. @apply ml-auto mr-2 text-gray-500;
  110. }
  111. .artifact-details:hover {
  112. @apply cursor-pointer bg-gray-200;
  113. }
  114. .artifact-details .artifact-id {
  115. @apply p-4 bg-blue-500 font-bold text-white text-lg;
  116. }
  117. .artifact-details:hover .artifact-id {
  118. @apply bg-blue-400;
  119. }
  120. .artifact-details .hash-button {
  121. @apply mx-4 py-1 px-3 border-blue-600 rounded border font-mono text-blue-600;
  122. }
  123. .artifact-details .hash-button:hover {
  124. @apply bg-blue-600 text-white;
  125. }
  126. .artifact-details .build-date-text {
  127. @apply text-gray-600 text-lg;
  128. }
  129. @screen md {
  130. body {
  131. grid-template-areas:
  132. "header header"
  133. "header header"
  134. "nav main";
  135. }
  136. aside.menu {
  137. @apply w-56;
  138. }
  139. .menu .menu-view {
  140. @apply sticky top-0;
  141. }
  142. }
  143. @screen xl {
  144. .artifacts-list {
  145. grid-template-columns: max-content auto;
  146. gap: 0.5rem 0.5rem;
  147. }
  148. .artifacts-list .artifact-link {
  149. @apply mt-0;
  150. }
  151. main {
  152. @apply mx-40;
  153. }
  154. aside.menu {
  155. @apply w-72;
  156. }
  157. }
  158. @tailwind utilities;