bundle.css 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  1. /* Doing CSS like the early 2000 */
  2. body {
  3. font-family: Verdana, Tahoma, sans-serif;
  4. background-color: #F6F6F6;
  5. max-width: 800px;
  6. margin: auto;
  7. }
  8. body article {
  9. padding: 0 5%;
  10. line-height: 1.6;
  11. }
  12. body article a {
  13. color: #3D3D3D;
  14. }
  15. body article a:visited {
  16. color: #6A6A6A;
  17. }
  18. main {
  19. border : 5px solid black;
  20. border-radius: 10px;
  21. }
  22. main p.pagination {
  23. text-align: center;
  24. }
  25. main p.pagination a {
  26. text-transform: uppercase;
  27. color: #111122;
  28. text-decoration: none;
  29. }
  30. .page-header {
  31. border: 5px solid black;
  32. border-radius: 10px;
  33. }
  34. .headerlogo {
  35. float: left;
  36. }
  37. .topnav {
  38. padding: 5px 50px;
  39. background-color: #0C5678;
  40. }
  41. .topnav a {
  42. color: aliceblue;
  43. background-color: #0C5678;
  44. padding: 5px 10px;
  45. border-width: 5px;
  46. border-color: black;
  47. }
  48. .topnav a:hover {
  49. background-color: #2f647c;
  50. }
  51. .breadcrumbs
  52. {
  53. padding: 5px 25px;
  54. font-weight: bold;
  55. }
  56. .gallery-grid img{
  57. width: 44%;
  58. display:inline;
  59. }
  60. .subfolder-list {
  61. list-style-type: none;
  62. border-radius: 10px;
  63. }
  64. ul.postlist {
  65. list-style-type: none;
  66. margin: 0;
  67. padding: 0;
  68. text-align: center;
  69. }
  70. .postlist a {
  71. color: #111122;
  72. }
  73. .postlist a:hover {
  74. text-decoration: underline;
  75. color: #5A5A5A;
  76. }
  77. .postlist a:visited {
  78. color: #635A5A;
  79. }
  80. .postlist a:visited:hover {
  81. color: #857c7c;
  82. }
  83. blockquote {
  84. font-size: 0.8em;
  85. background-color: rgb(224, 224, 224);
  86. padding: 1px 10px;
  87. border-left: 4px solid black;
  88. }
  89. #tag {
  90. background-color: rgb(224, 224, 224);
  91. margin: 10px 0px;
  92. padding: 2px 10px;
  93. border-left: 4px solid black;
  94. }
  95. #tag p {
  96. margin: 5px;
  97. font-style: italic;
  98. }
  99. @keyframes hacking {
  100. 0% {visibility: visible;}
  101. 50% {visibility: hidden;}
  102. 100% {visibility: hidden;}
  103. }
  104. h1::after {
  105. content: " _";
  106. animation-name: hacking;
  107. animation-duration: 1s;
  108. animation-delay: 2s;
  109. animation-iteration-count: infinite;
  110. }
  111. pre {
  112. background-color: gainsboro;
  113. }
  114. code {
  115. background-color: gainsboro;
  116. }
  117. .page-footer {
  118. float: right;
  119. }
  120. /* Gallery Styles for a Premium Look */
  121. /* ================================= */
  122. .gallery-grid {
  123. display: grid;
  124. /* Adjust 200px to make your thumbnails larger or smaller */
  125. grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  126. gap: 1.5rem;
  127. padding: 1rem;
  128. }
  129. .gallery-item {
  130. position: relative;
  131. aspect-ratio: 1 / 1; /* Makes every item a perfect square */
  132. overflow: hidden;
  133. border-radius: 8px;
  134. background: #222; /* Placeholder color while loading */
  135. transition: transform 0.3s ease;
  136. }
  137. .gallery-item img {
  138. width: 100%;
  139. height: 100%;
  140. object-fit: cover; /* Crops the image to fill the square without stretching */
  141. display: block;
  142. }
  143. /* Hover Effects to make it feel "Premium" */
  144. .gallery-item:hover {
  145. transform: scale(1.02);
  146. z-index: 10;
  147. }
  148. .meta-overlay {
  149. position: absolute;
  150. inset: 0;
  151. background: rgba(0, 0, 0, 0.4);
  152. display: flex;
  153. align-items: center;
  154. justify-content: center;
  155. opacity: 0;
  156. transition: opacity 0.3s ease;
  157. color: white;
  158. font-weight: bold;
  159. }
  160. .gallery-item:hover .meta-overlay {
  161. opacity: 1;
  162. }
  163. .back-link {
  164. margin-left: 25px;
  165. }
  166. .single_image ul li {
  167. list-style-type: none;
  168. font-size: 80%;
  169. }
  170. .uploaded-date {
  171. font-size: 80%;
  172. text-align: center;
  173. color: #555555;
  174. margin-top: 10px;
  175. }