Update dialog styles

besseddrest · Jul 19, 2023 · 5c43000 · 5c43000
1 parent e8bc129
commit 5c43000
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="./styles/styles.css" title="Portfolio Styles">
   </head>
   <body>
-    <dialog id="modal"></dialog>
+    <dialog id="modal" class="modal"></dialog>
     <div class="container">
       <main>
         <section class="intro">

diff --git a/styles/styles.css b/styles/styles.css
diff --git a/styles/styles.css.map b/styles/styles.css.map
diff --git a/styles/styles.scss b/styles/styles.scss
@@ -61,4 +61,23 @@ h1 {
       height: auto;
     }
   }
+}
+
+.modal {
+  background: transparent;
+  border: 0;
+
+  &:focus {
+    border: 0;
+    outline: none;
+  }
+
+  &::backdrop {
+    background-color: rgba(0, 0, 0, 0.6);
+  }
+
+  img {
+    width: auto;
+    height: calc(100vh - 4rem);
+  }
 }