awacke1/SpacesoftheWeekReview

1* {2  box-sizing: border-box;3}4 5body {6  background: linear-gradient(to bottom, #080b12 0%, #111827 150px, #111827 100%);7  background-attachment: fixed;8  font-family: Arial, sans-serif;9  color: white;10  font-weight: 200;11}12 13header, main {14  max-width: 960px;15  margin: 0 auto;16}17 18header {19  padding: 10px 0;20  text-align: center;21}22 23h1 {24  font-size: 40px;25  font-weight: bold;26  margin-bottom: 16px;27  text-align: center;28}29 30h2 {31  font-size: 24px;32  font-weight: bold;33  margin-bottom: 20px;34  margin-top: 5px;35  text-align: left;36}37 38h3 {39  font-size: 14px;40  color: #586073;41  font-weight: 200;42  margin-bottom: 25px;43  margin-top: 5px;44  text-align: left;45}46 47h4 {48  font-size: 15px;49  color: #FFFFFF;50  font-weight: 200;51  text-align: left;52}53 54 55 56a:link {57  font-size: 16px;58  color: #FFFFFF;59  text-decoration-line: none;60}61 62a:visited {63  color: #FFFFFF;64}65 66a:hover {67  color: #FFFFFF;68}69 70a:active {71  color: #FFFFFF;72}73 74.link {75  font-weight: 900;76}77 78.small-link {79  font-size: 15px;80  font-weight: 200;81}82 83.link:hover {84  color: #FFD21E;85}86 87.link:active {88  color: #FFD21E;89}90 91 92.rectangle-link {93  display: flex;94  align-items: center;95  justify-content: center;96  height: 100%;97  width: 100%;98  position: absolute;99  color: inherit; /* Keeps the text color consistent */100  text-decoration: none; /* Removes underline from links */101}102 103.author-link {104  display: flex;105  align-items: center;106  justify-content: center;107  height: 100%;108  width: 100%;109  color: inherit; /* Keeps the text color consistent */110  text-decoration: none; /* Removes underline from links */111}112 113.button {114  background-color: #0d131f;115  border: none;116  color: white;117  border-radius: 0.5rem;118  padding-left: 15px;119  padding-right: 15px;120  padding-top: 8px;121  padding-bottom: 5px;122  text-align: center;123  text-decoration: none;124  display: inline-block;125  font-size: 16px;126  transition-duration: 0.4s;127}128 129.button:hover {130  background-color: #080b12;131}132 133 134.rectangles {135  display: flex;136  flex-wrap: wrap; /* Allows rectangles to wrap onto the next line */137  justify-content: flex-start; /* Aligns items to the left */138  gap: 10px; /* Space between rectangles */139  width: 100%; /* Ensures the container fills the full width */140  padding: 0 5px; /* Adjusts padding to ensure space for the gap on edges */141  box-sizing: border-box; /* Includes padding in the width calculation */142  margin-bottom: 20px;143}144 145.gradient-rectangle {146  flex: 1; /* Allows rectangles to grow and fill the available space */147  min-width: calc((100% - 10px) / 2); /* Adjusts for 4 items per line with a 10px gap between them */148  height: 160px; /* Height of the rectangle */149  display: flex;150  align-items: center;151  justify-content: center;152  position: relative;153  text-align: center;154  border-radius: 0.5rem;155}156 157.gradient-rectangle:hover {158  filter:brightness(1.1);159}160 161.gradient-rectangle-absent {162  flex: 1; /* Allows rectangles to grow and fill the available space */163  min-width: calc((100% - 10px) / 2); /* Adjusts for 4 items per line with a 10px gap between them */164  height: 160px; /* Height of the rectangle */165  display: flex;166  align-items: center;167  justify-content: center;168  position: relative;169  text-align: center;170  border-radius: 0.5rem;171  filter: grayscale(80%);172}173 174.gradient-rectangle-absent:hover {175  filter: grayscale(80%) contrast(95%) brightness(95%);176}177 178 179@media (max-width: 800px) {180  .gradient-rectangle {181    /* This makes each rectangle take full width of the container minus the gap on smaller screens, forcing them to stack */182    flex-basis: 100%; /* Overrides the flex property to take full width */183    min-width: 0; /* Resets the min-width to allow for full-width stacking */184  }185  .gradient-rectangle-absent {186    /* This makes each rectangle take full width of the container minus the gap on smaller screens, forcing them to stack */187    flex-basis: 100%; /* Overrides the flex property to take full width */188    min-width: 0; /* Resets the min-width to allow for full-width stacking */189  }190}191 192.emoji {193  font-size: 3.75rem;194  opacity: 0.6;195  position: absolute;196}197 198.emoji-down {199  font-size: 3.75rem;200  opacity: 0.3;201  position: absolute;202}203 204h5 {205  font-family: "Source Sans 3", sans-serif;206  font-weight: 700;207  font-size: 1.25rem;208  color: rgb(239 246 255);209  margin: 0;210  position: absolute;211  line-height: 1.25;212  z-index: 1;213  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25);214}215 216.week-title {217  font-family: "Source Sans 3", sans-serif;218  font-weight: 700;219  font-size: 1.25rem;220  color: rgb(239 246 255);221  line-height: 1.25;222  text-align: left;223  margin-bottom: 5px; /* Adjust spacing as needed */224  margin-top: 40px; /* Adjust spacing as needed */225  margin-left: 5px; /* Adjust spacing as needed */226}227 228 229.heart-container {230  position: absolute;231  top: 0;232  right: 0;233  height: 20px;234  margin-right: 16px;235  margin-top: 10px;236  display: flex;237  align-items: center;238  color: white; /* Ensures the heart and number are white */239  font-size: 1rem; /* Adjust size as needed */240}241 242.heart {243  opacity: 0.9;244  margin-right: 6px; /* Adds a little space between the heart and the number */245  font-size: .875rem;246  line-height: 0.8rem;247  font-family: "Source Sans 3", sans-serif;248 249}250 251.likes {252  opacity: 0.9;253  font-size: .875rem;254  line-height: 1.25rem;255  font-family: "Source Sans 3", sans-serif;256  font-optical-sizing: auto;257  font-weight: 400;258  font-style: normal;259}260 261.status-container {262  position: absolute;263  top: 0;264  left: 0;265  height: 18px;266  margin-left: 16px;267  margin-top: 12px;268  padding-left: 0.25rem;269  padding-right: 0.25rem;270  display: inline-flex;271  align-items: center;272  color: white; /* Ensures the heart and number are white */273  font-size: 1rem; /* Adjust size as needed */274  background-color: #ffffff1a;275  opacity: 0.9;276  border-radius: 0.25rem;277}278 279.cross {280  opacity: 0.8;281  margin-right: 3px; /* Adds a little space between the cross and the number */282  font-size: .8rem;283  line-height: 0.15rem;284  font-family: "IBM Plex Mono", sans-serif;285 286}287 288.zzz {289  opacity: 0.8;290  margin-right: 3px; /* Adds a little space between the cross and the number */291  font-size: .8rem;292  line-height: 0.3rem;293  font-family: "IBM Plex Mono", sans-serif;294 295}296 297.status {298  opacity: 0.8;299  font-size: 0.75rem;300  line-height: 0rem;301  font-family: "IBM Plex Mono", monospace;302  font-weight: 400;303  font-style: normal;304  margin-right: 0.125rem;305}306 307.author-container {308  position: absolute;309  bottom: 0;310  left: 0;311  height: 18px;312  margin-left: 16px;313  margin-bottom: 12px;314  padding-left: 0.25rem;315  padding-right: 0.25rem;316  display: inline-flex;317  align-items: center;318  color: white; /* Ensures the heart and number are white */319  font-size: 1rem; /* Adjust size as needed */320  opacity: 0.9;321  border-radius: 0.25rem;322  z-index: 2;323}324 325.author {326  opacity: 0.8;327  font-size: 0.9rem;328  line-height: 0rem;329  font-family: "IBM Plex Mono", monospace;330  font-weight: 400;331  font-style: normal;332  margin-left: 0.35rem;333}334 335.author:hover {336  opacity: 1;337  color: #FFD21E;338  font-weight: 500;339}340 341table {342    float: left;343    border-collapse: collapse;344    margin: auto;345    font-weight: 200;346    Overflow-x:scroll;347}348 349td, th {350    border: 0px;351    height: 40px;352    padding-left: 10px;353    padding-right: 10px;354    text-align: left;355    font-weight: 200;356}357 358table.alternate tr:nth-child(odd) {359    background-color: #111827;360}361 362table.alternate tr:nth-child(even) {363    background-color: #131b2b;364}365 366p {367  font-size: 16px;368  font-weight: 200;369}370 371main {372  padding: 20px 0;373}374 375section {376  padding-left: 20px;377  padding-right: 20px;378  padding-top: 0px;379  padding-bottom: 50px;380  position: relative;381  overflow: hidden;382}383 384section::before,385section::after {386  content: '';387  position: absolute;388  top: 0;389  right: 0;390  bottom: 0;391  left: 0;392  z-index: -1;393  margin: -10px;394  /*background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));*/395}396 397section::after {398  filter: blur(10px);399}400 401.leaderboard ul {402  list-style: none;403  padding: 0;404  margin: 0;405}406 407.leaderboard li {408  display: flex;409  align-items: center;410  border-bottom: 1px solid #ddd;411  padding: 16px 0;412}413 414.leaderboard img {415  width: 50px;416  height: 50px;417  border-radius: 50%;418  margin-right: 16px;419}420 421.leaderboard h3 {422  font-size: 24px;423  font-weight: bold;424  margin-bottom: 4px;425}426 427.leaderboard p {428  font-size: 16px;429  margin-bottom: 8px;430}431 432.leaderboard a {433  color: #007bff;434  text-decoration: none;435}436 437.leaderboard a:hover {438  text-decoration: underline;439}440 441.notes {442  padding: 32px;443  border-radius: 5px;444  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);445    background-color: #0d131f;446  position: relative;447  overflow: hidden;448}449 450.notes::before,451.notes::after {452  content: '';453  position: absolute;454  top: 0;455  right: 0;456  bottom: 0;457  left: 0;458  z-index: -1;459  margin: -10px;460  background-color: #0d131f;461}462 463.notes::after {464  filter: blur(10px);465}466 467.notes h2 {468  font-size: 28px;469  font-weight: bold;470  margin-bottom: 10px;471}472 473.notes p {474  font-size: 18px;475}476 477.tabs {478  display: flex;479  justify-content: space-around;480  margin-bottom: 10px;481  background-color: #0d131f;482  border-radius: 5px;483  transition-duration: 0.4s;484}485 486.tab-link {487  display: block; /* Ensure links behave as block elements to fill the flex container */488}489 490.tab-label {491  padding: 16px;492  font-weight: bold;493  cursor: pointer;494  position: relative;495  overflow: hidden;496  background-color: #0d131f;497  border-radius: 5px;498  transition-duration: 0.4s;499  display: block; /* Make the label fill the anchor link area */500  color: white; /* Adjust text color as needed */501}502 503.tab-link:hover .tab-label {504  background-color: #080b12;505}506 507/* Style for active tab */508.tab-label.active {509  background-color: #080b12; /* Active tab background color */510  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);511}512 513 514/*515.tabs label:before{516  content: '';517  position: absolute;518  top: 0;519  right: 0;520  bottom: 0;521  left: 0;522  z-index: -3;523  margin: -10px;524  525  border-radius: 5px;526}527 528.tabs label:after{529    530  border-radius: 5px;531}532 533.tabs label:hover {534  background-color: #080b12;535  border-radius: 5px;536}537 538.tabs  {539    background-color: #080b12;540  border-radius: 5px;541}542*/543 544.tab-content {545  display: none;546}547 548.tab-content.active {549  display: block;550}551 552 553/* Back to top button */554#myBtn {555  display: none; /* Hidden by default */556  position: fixed; /* Fixed/sticky position */557  bottom: 20px; /* Place the button at the bottom of the page */558  right: 30px; /* Place the button 30px from the right */559  z-index: 99; /* Make sure it does not overlap */560  border: none; /* Remove borders */561  outline: none; /* Remove outline */562  background-color: #0d131f; /* Set a background color */563  color: white; /* Text color */564  cursor: pointer; /* Add a mouse pointer on hover */565  padding: 15px; /* Some padding */566  border-radius: 5px; /* Rounded corners */567  font-size: 16px; /* Increase font size */568  font-weight: 600;569}570 571#myBtn:hover {572  background-color: #080b12; /* Add a dark-grey background on hover */573}574 575 576.hflogo {577  display: flex;578  overflow: hidden;579  position: fixed;580  left: 20px; /* Adjusted to be on the left */581  top: 20px;582  z-index: 20;583}