Sfoglia il codice sorgente

apply old terminal style to Staff Credits

Yuki Takei 6 anni fa
parent
commit
fff9144173
1 ha cambiato i file con 19 aggiunte e 1 eliminazioni
  1. 19 1
      src/client/styles/scss/_staff_credit.scss

+ 19 - 1
src/client/styles/scss/_staff_credit.scss

@@ -1,5 +1,21 @@
 // Staff Credit
 #staff-credit {
+  // see https://css-tricks.com/old-timey-terminal-styling/
+  @mixin old-timey-terminal-styling() {
+    text-shadow: 0 0 10px #c8c8c8;
+    background-color: black;
+    background-image: radial-gradient(rgba(50, 100, 100, 0.75), black 120%);
+    &::after {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      content: '';
+      background: repeating-linear-gradient(0deg, rgba(black, 0.15), rgba(black, 0.15) 2px, transparent 2px, transparent 4px);
+    }
+  }
+
   font-family: 'Press Start 2P', $basefont1;
   color: white;
 
@@ -15,6 +31,7 @@
 
   $credit-length: -200em;
 
+  // see https://css-tricks.com/old-timey-terminal-styling/
   .credit-curtain {
     position: fixed;
     top: 10vh;
@@ -22,7 +39,8 @@
     width: 80vw;
     height: 80vh;
     overflow-y: hidden;
-    background-color: black;
+
+    @include old-timey-terminal-styling();
   }
 
   .credit-body {