Add halo and carbon bg

tr4cks · Aug 6, 2023 · 9a7f28c · 9a7f28c
1 parent b2f38fc
commit 9a7f28c
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -16,6 +16,9 @@
  </head>
  <body>
  <main>
+ {{if .power}}
+ <div class="halo"></div>
+ {{end}}
  <form method="post" {{if .power}}onsubmit="return confirmForm();"{{end}} class="center">
  <div class="power-container">
  <button type="submit" class="power-button {{if .power}}power-button--on{{end}} {{if .error}}power-button--error{{end}}">

diff --git a/static/carbon-fibre-big.png b/static/carbon-fibre-big.png
diff --git a/static/style.css b/static/style.css
@@ -1,11 +1,23 @@
 html {
- background-color: #444444;
+ background-color: rgb(30, 30, 30);
+ background-image: url("/static/carbon-fibre-big.png");
 }
 
 html, body, main {
  height: 100%;
 }
 
+.halo {
+ position: fixed;
+ top: calc(50% - 12px);
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 50%);
+ z-index: -5;
+}
+
 .center {
  height: 100%;
  display: flex;
@@ -107,3 +119,10 @@ html, body, main {
  box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),
  0px 0px 3px 2px rgba(135,187,83,0.5);
 }
+
+@media (min-width: 640px) {
+ .halo {
+ width: 900px;
+ height: 900px; 
+ }
+}