First pass at responsive CSS

OllieJC · Aug 15, 2021 · 7310cc1 · 7310cc1
1 parent 28c0674
commit 7310cc1
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 34 deletions.
diff --git a/css/main.css → css/main-202108151709.css b/css/main.css → css/main-202108151709.css
@@ -13,11 +13,23 @@ main {
 }
 
 #forkMe {
-  position:absolute;
-  top:1em;
-  right:0;
-  border:0;
-  transform: rotateY(0deg) rotate(45deg);
+  display: none;
+}
+
+@media only screen and (max-width: 790px)  {
+  main {
+    display: block !important;
+  }
+  .vertical-divider {
+    display: none;
+  }
+  .tbat-menu {
+    width: 100% !important;
+    display: block !important;
+  }
+  .tbat-menu-fixed {
+    position: relative !important;
+  }
 }
 
 .tbat-menu {
@@ -30,7 +42,7 @@ main {
 .main-window {
   width: 100%;
   min-height: 100vh;
-  padding: 2em 2em 0 3em;
+  padding: 2em 2em 2em 3em;
 }
 
 .window-active {
@@ -204,10 +216,6 @@ select.form-novelty {
 
 .dropdown-toggle { outline: 0; }
 
-#window-threatactorlibrary button {
-  margin-right: 1em;
-}
-
 .aps-badge {
   margin-left: 1em;
 }
@@ -224,6 +232,10 @@ select.form-novelty {
   display: none;
 }
 
+.btn {
+  margin: 0.3em 1em 0.3em 0;
+}
+
 .btn-toggle {
   display: inline-flex;
   align-items: center;

diff --git a/index.html b/index.html
@@ -7,30 +7,8 @@
     <meta name="author" content="OllieJC">
     <title>Threat Box Assessment Tool</title>
 
-
-
-    <!-- Bootstrap core CSS -->
-<link href="css/bootstrap.min.css" rel="stylesheet">
-
-    <style>
-      .bd-placeholder-img {
-        font-size: 1.125rem;
-        text-anchor: middle;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        user-select: none;
-      }
-
-      @media (min-width: 768px) {
-        .bd-placeholder-img-lg {
-          font-size: 3.5rem;
-        }
-      }
-    </style>
-
-
-    <!-- Custom styles for this template -->
-    <link href="css/main.css" rel="stylesheet">
+    <link href="css/bootstrap.min.css" rel="stylesheet">
+    <link href="css/main-202108151709.css" rel="stylesheet">
   </head>
   <body>