Merge pull request #9 from AndyLnd/main

Resize Doomguy to fit container
virejdasani · Dec 9, 2022 · 914d19b · 914d19b
2 parents 7467199 + 5df7b16
commit 914d19b
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 90 deletions.
diff --git a/assets/main.css b/assets/main.css
@@ -1,92 +1,26 @@
-body {
+body, html {
   background-color: transparent;
 }
 
-.doomFaces {
-  min-width: none;
-  max-width: none;
-  min-height: none;
-  max-height: none;
-}
-
-.wrapper {
-  min-height: 100vh;
-  color: #000;
+section {
+  max-height: 100vh;
   font-family: 'Muli', sans-serif;
   font-size: 1rem;
   background-color: transparent;
-  display: -ms-grid;
-  display: grid;
-  place-items: center;
-}
-
-.container {
-  background-color: rgba(0, 0, 0, 0.178);
-
-  padding-right: 20px;
-  padding-left: 20px;
-  border-radius: 1em;
-  max-width: 900px;
-  max-height: 500px;
-  margin-right: auto;
-  margin-left: auto;
-  display: -ms-grid;
   display: grid;
+  grid-template-rows: min(calc(100% - 32px), 256px) 32px;
   place-items: center;
-  -webkit-box-shadow: 0px 17px 34px -20px #f5fafa;
-  box-shadow: 0px 17px 34px -20px #f2f8f8;
-}
-
-.add-color-button {
-  display: block;
-  border: none;
-  margin: 0 auto;
-}
-
-.text {
-  font-size: 1rem;
-  margin-bottom: 0.8em;
-}
-
-.title {
-  margin-bottom: 0.9em;
-}
-
-.subtitle {
-  color: antiquewhite;
-  font-size: 0.9rem;
-  text-transform: uppercase;
-  margin-bottom: 1.5em;
-  font-weight: 700;
 }
 
-.container {
-  max-width: 900px;
-  overflow: hidden;
-  padding: 0;
+section img {
+  object-fit: contain;
 }
 
-.content {
-  display: -ms-grid;
-  display: grid;
-  place-items: center;
-  padding: 0 3em;
-  margin-bottom: 1.8em;
+h2 {
+  color: lightgrey;
+  font-weight: 900;
 }
 
-.mail {
-  padding: 0.5em 0 0.5em 1.5em;
-  line-height: 3;
-  width: 100%;
-  border: 1px solid #d9d9d9;
-  border-radius: 0.5em;
-  margin-bottom: 1em;
+h2.alarm {
+  color: rgb(176, 7, 41);
 }
-
-.text {
-  font-size: 1rem;
-  color: rgb(247, 243, 243);
-  width: 90%;
-  text-align: center;
-  margin-top: 0.5em;
-}
diff --git a/src/extension.ts b/src/extension.ts
@@ -217,25 +217,26 @@ class CustomSidebarViewProvider implements vscode.WebviewViewProvider {
       vscode.Uri.joinPath(this._extensionUri, "assets", `doom${i}.png`)
     );
 
-    return getHtml(doomFace);
+    return getHtml(doomFace, stylesheetUri);
   }
 }
 
-function getHtml(doomFace: any) {
+function getHtml(doomFace: vscode.Uri, stylesheetUri: vscode.Uri) {
+  const errorNum = getNumErrors();
   return `
     <!DOCTYPE html>
-			<html lang="en">
-			<head>
-
-			</head>
-
-			<body>
-			<section class="wrapper">
-      <img class="doomFaces" src="${doomFace}" alt="" >
-      <h1 id="errorNum">${getNumErrors() + " errors"}</h1>
-			</section>
+    <html lang="en">
+      <head>
+        <link rel="stylesheet" href="${stylesheetUri}" />
+      </head>
+      <body>
+        <section>
+          <img src="${doomFace}">
+          <h2 class=${errorNum ? "alarm" : ""}>
+            ${errorNum} ${errorNum === 1 ? "error" : "errors"}
+          </h2>
+        </section>
       </body>
-
 		</html>
   `;
 }