diff --git a/docs/source/_static/css/util.css b/docs/source/_static/css/util.css index e602e93f0..abdd6032e 100644 --- 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); + } +} \ No newline at end of file diff --git a/docs/source/_static/vendor/display-card.css b/docs/source/_static/vendor/display-card.css index 5da184b6e..201269588 100644 --- 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 index 0ed2282ae..ec5355000 100644 --- 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,6 +55,10 @@ 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) { @@ -50,7 +66,7 @@ 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 */ diff --git a/docs/source/_templates/home.html b/docs/source/_templates/home.html index 37d29e22a..599ac96ef 100644 --- a/docs/source/_templates/home.html +++ b/docs/source/_templates/home.html @@ -219,41 +219,92 @@

Install FURY And Start Using It!