Terminal Window

Another one...

by Nicholas Berlette

HTML

<div class=" main-bg bg-black bg-gradient-radial to-slate-900/60 from-indigo-900/60 text-white overflow-hidden w-screen h-screen relative inset" data-theme="dark">

  <section class="max-w-lg absolute top-1/2 left-1/2 transform translate-x-[-50%] translate-y-[-75%] block z-[100]">
    <div class="relative">
    
      <div terminal id="terminal" title="/usr/bin/bash" class="dark overflow-hidden terminal terminal-window">
        <div class="w-full absolute top-12 left-0 right-0 bottom-0 line-numbers-bg">
          <pre class="!bg-hero-signal-white code-outer overflow-x-auto !leading-5.5 h-full w-full block"><code class="code"><span class="line"><span style="color: #db889a;">is</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">string</span><span style="color: #D8DEE9FF">(</span><span style="color: #A3BE8C">value</span><span style="color: #ECEFF499">: unknown</span><span style="color: #D8DEE9FF">)</span> <span style="color: #81A1C1">=&gt;</span> <span style="color: #A3BE8C">value</span> <span style="color: #ECEFF499">is</span> <span style="color: #d4976c">string</span><span style="color:#ECEFF499">;</span></span><span class="line"><span style="color: #db889a;">is</span><span style="color: #ECEFF4">.</span><span style="color: #d4976c;">assert</span><span style="color: #ECEFF4">.</span><span style="color: #88C0D0">string</span><span style="color: #D8DEE9FF">(</span><span style="color: #A3BE8C">value</span><span style="color: #ECEFF499">: unknown</span><span style="color: #D8DEE9FF">)</span> <span style="color: #81A1C1">=&gt;</span> <span style="color: #d4976c">asserts</span> <span style="color: #A3BE8C">value</span> <span style="color: #ECEFF499">is</span> <span style="color: #d4976c">string</span><span style="color:#ECEFF499">;</span></span></code></pre>
        </div>
      </div>
      
    </div>
  </section>
  
    <div class="w-full h-full animate-fade-in animate-duration-2s linear opacity-100 blur-5 bg-hero-bathroom-floor bg-opacity-50">
...

SCSS

:root {
  --light-bg-1: #f0f0f0;
  --light-bg-2: #cfcfcf;
  --light-bg-3: #ececec;
  --light-bg-4: #9ab;
  --light-bg-alpha-1: #fff6;
  --light-text-1: #000;
  --light-text-2: #123;
  --light-text-3: #000a;
  --light-text-4: #456;
  --light-border-1: #0004;
  --light-border-2: #0003;
  --light-shadow-4: #0004;
  --light-btn-shadow: #00000019;

  /* backgrounds (dark) */
  --dark-bg-1: #111518;
  --dark-bg-2: #111827;
  --dark-bg-3: #20262e;
  --dark-bg-4: #234;
  --dark-bg-alpha-1: #ffffff05;
  --dark-text-1: #fff;
  --dark-text-2: #ddd;
  --dark-text-3: #fffa;
  --dark-text-4: #789;
  --dark-border-1: #000a;
  --dark-border-2: #fff3;
  --dark-shadow-4: #000;
  
  /* shadows */
  --shadow-1: #0004;
  --shadow-2: #0003;
  --shadow-3: #0002;
  --shadow-4: #0004;
}

:root:not(.light) {
  /* defaults */
  --bg-1: var(--dark-bg-1);
  --bg-2: var(--dark-bg-2);
  --bg-3: var(--dark-bg-3);
  --bg-4: var(--dark-bg-4);
  --bg-alpha-1: var(--dark-bg-alpha-1);
  --text-1: var(--dark-text-1);
  --text-2: var(--dark-text-2);
  --text-3: var(--dark-text-3);
  --text-4: var(--dark-text-4);
  --border-1: var(--dark-border-1);
  --border-2: var(--dark-border-2);
}
.dark {
  /* backgrounds (dark) */
  --bg-1: #111518;
  --bg-2: #111827;
  --bg-3: #20262e;
  --bg-4: #234;
  --bg-alpha-1: #ffffff05;
  --text-1: #fff;
  --text-2: #ddd;
  --text-3: #fffa;
  --text-4: #789;
  --border-1: #000a;
  --border-2: #fff3;
  --shadow-4: #000;
}
.light {
  --bg-1: #f0f0f0;
  --bg-2: #cfcfcf;
  --bg-3: #ececec;
  --bg-4: #9ab;
  --bg-alpha-1: #fff6;
  --text-1: #000;
  --text-2: #123;
  --text-3: #000a;
  --text-4: #456;
  --border-1: #0004;
  --border-2: #0003;
  --shadow-4: #0004;
  --btn-shadow: #00000019;
}

html, body {
  overflow: hidden;
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-sans, system-ui, sans-serif);
  -webkit-user-scroll: none;
  -webkit-user-select: none;
  user-select: none;
}

html {
 ...