Merge pull request #814 from Mk996/feature/physics-simulation

physics-simulation done
fury-gl · Jul 29, 2023 · 0baaf03 · 0baaf03
2 parents 06bacaa + e9ab759
commit 0baaf03
Show file tree

Hide file tree

Showing 4 changed files with 238 additions and 95 deletions.
diff --git a/docs/source/_static/css/util.css b/docs/source/_static/css/util.css
@@ -2918,3 +2918,47 @@ iframe {border: none;}
 	right: 0px;
 	bottom: 0px;
 }
+
+/* Grid */
+.grid {
+	display: grid;
+}
+
+/* Gaps */
+.g-gap-2 {
+	grid-gap: 2em;
+}
+
+/* Columns */
+.g-col-3 {
+	grid-template-columns: repeat(3, 1fr);
+}
+.g-col-2 {
+	grid-template-columns: repeat(2, 1fr);
+}
+
+/* Rows */
+.g-row-2 {
+	grid-template-rows: repeat(2, 1fr);
+}
+
+/* Spans */
+.g-span-2 {
+	grid-column: span 2;
+}
+
+/* Mobile section */
+@media only screen and (max-width: 600px) {
+	/* Columns */
+	.g-m-col-2 {
+		grid-template-columns: repeat(2, 1fr);
+	}
+	.g-m-col-1 {
+		grid-template-columns: repeat(1, 1fr);
+	}
+
+	/* Rows */
+	.g-m-rows-3 {
+		grid-template-rows: repeat(3, 1fr);
+	}
+}
diff --git a/docs/source/_static/vendor/display-card.css b/docs/source/_static/vendor/display-card.css
@@ -56,6 +56,15 @@
   margin-right: 12px;
 }
 
+@media only screen and (max-width: 600px) {
+  .h-card__title-icon {
+    width: 15px;
+    height: 15px;
+    filter: brightness(0) invert(1);
+    margin-right: 8px;
+  }
+}
+
 .h-card__title {
   font-weight: 600;
   color: var(--colorPrimaryDark);
@@ -64,6 +73,13 @@
   margin-bottom: 10px;
 }
 
+@media only screen and (max-width: 600px) {
+  .h-card__title {
+    font-size: 12px;
+    color: white;
+  }
+}
+
 .h-card__data {
   display: flex;
   flex-direction: column;

diff --git a/docs/source/_static/vendor/tabs.css b/docs/source/_static/vendor/tabs.css
@@ -21,6 +21,18 @@
     margin: 30px 0;
 }
 
+.tabs-info {
+    font-size: 16px;
+    color: #4a4a4a;
+}
+
+@media screen and (max-width: 600px) {
+    .tabs-info {
+        font-size: 12.8px;
+        font-weight: bold;
+    }
+}
+
 .visualization, .data-science, .scientific-domains, .machine-learning, .array-libraries {
     max-width: 900px;
     margin: 15px auto;
@@ -43,14 +55,18 @@
     font-weight: 500;
     color: rgb(108, 122, 137);
 }
+.uk-tab > .uk-active > a {
+    color: var(--colorPrimaryDark) !important;
+    border-color: var(--colorPrimaryDark) !important;
+}
 
 @media screen and (max-width: 600px) {
 
     .uk-tab {
         margin-left: 0 !important;
     }
 
-    .uk-tab> .uk-active > a {
+    .uk-tab > .uk-active > a {
         border-color: var(--colorPrimaryDark) !important;
         color: var(--colorPrimaryDark) !important;
     }
@@ -106,40 +122,41 @@
     }
 }
 
-.grid-container {
-    display: grid;
-    grid-template-columns: auto auto;
-    grid-gap: 20px;
+/* Visualization */
+.visualization-images img,
+.visualization-images a {
+    border-radius: 10px;
 }
 
-.grid-container > div {
-    /* White, with 80% opacity */
-    background-color: rgba(255, 255, 255, 0.8);
-    text-align: middle;
+.image-grid > div {
+    background-color: rgb(0, 0, 0);
+    border-radius: 10px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+
+    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
 }
 
 @media only screen and (max-width: 600px) {
-    .grid-container {
-        display: block;
+    .image-grid > div {
+        min-height: 150px;
     }
 }
 
-/* Visualization */
-.visualization-images > img {
-    border-radius: 10px;
+.molecular-band {
+    padding: 30px;
+    background-color: white !important;
 }
 
-.image-grid {
-    display: grid;
-    grid-template-columns: auto auto auto;
-    grid-gap: 10px;
+.image-description {
+    color: black;
 }
 
-.image-grid > div {
-    background-color: rgb(238, 238, 238);
-    border: 2px solid rgb(255, 255, 255);
-    border-radius: 10px;
-    padding: 10px;
+.image-grid > div:hover {
+    box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
 }
 
 /* Scientific Domains */