Add css for cards (#2056)

Svetlana Karslioglu · web-flow · commit df1bcfe14a59 · 2022-09-26T15:02:14.000-07:00
diff --git a/_static/css/custom.css b/_static/css/custom.css
@@ -0,0 +1,67 @@
+/* sphinx-design styles for cards/tabs
+*/
+
+:root {
+    --sd-color-primary: #6c6c6d;
+    --sd-color-primary-highlight: #f3f4f7;
+    --sd-color-card-border-hover: #ee4c2c;
+    --sd-color-card-border: #f3f4f7;
+    --sd-color-card-background: #f3f4f7;
+    --sd-color-card-text: inherit;
+    --sd-color-card-header: transparent;
+    --sd-color-card-footer: transparent;
+    --sd-color-tabs-label-active: hsla(231, 99%, 66%, 1);
+    --sd-color-tabs-label-hover: hsla(231, 99%, 66%, 1);
+    --sd-color-tabs-label-inactive: hsl(0, 0%, 66%);
+    --sd-color-tabs-underline-active: hsla(231, 99%, 66%, 1);
+    --sd-color-tabs-underline-hover: rgba(178, 206, 245, 0.62);
+    --sd-color-tabs-underline-inactive: transparent;
+    --sd-color-tabs-overline: rgb(222, 222, 222);
+    --sd-color-tabs-underline: rgb(222, 222, 222);
+}
+
+.sd-card {
+    position: relative;
+    background-color: #f3f4f7;
+    opacity: 0.5;
+    border-radius: 0px;
+    width: 30%;
+    border: none
+}
+
+
+.sd-card-img {
+    opacity: 0.5;
+    width: 200px;
+    padding: 0px;
+}
+
+.sd-card-img:hover {
+    opacity: 1.0;
+    background-color: #f3f4f7;
+}
+
+
+.sd-card:after {
+    display: block;
+    opacity: 1;
+    content: '';
+    border-bottom: solid 1px #ee4c2c;  
+    background-color: #fff;
+    transform: scaleX(0);  
+    transition: transform .250s ease-in-out;
+    transform-origin:  0% 50%;
+}
+
+.sd-card:hover {
+    background-color: #fff;
+    opacity: 1;
+    border-top: 1px solid #f3f4f7;
+    border-left: 1px solid #f3f4f7;
+    border-right: 1px solid #f3f4f7;
+}
+
+.sd-card:hover:after {
+    transform: scaleX(1);
+}
+
diff --git a/conf.py b/conf.py
@@ -71,6 +71,7 @@
     'sphinx.ext.intersphinx',
     'sphinx_copybutton',
     'sphinx_gallery.gen_gallery',
+    'sphinx_design'
 ]
 
 intersphinx_mapping = {
@@ -263,19 +264,23 @@
      'Miscellaneous'),
 ]
 
+html_css_files = [
+        'https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.css',
+        'css/custom.css'
+    ]
 
 def setup(app):
     # NOTE: in Sphinx 1.8+ `html_css_files` is an official configuration value
     # and can be moved outside of this function (and the setup(app) function
     # can be deleted).
-    html_css_files = [
-        'https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.css'
-    ]
+    #html_css_files = [
+    #    'https://cdn.jsdelivr.net/npm/katex@0.10.0-beta/dist/katex.min.css'
+    #]
     # In Sphinx 1.8 it was renamed to `add_css_file`, 1.7 and prior it is
     # `add_stylesheet` (deprecated in 1.8).
-    add_css = getattr(app, 'add_css_file', app.add_stylesheet)
-    for css_file in html_css_files:
-        add_css(css_file)
+    #add_css = getattr(app, 'add_css_file', app.add_stylesheet)
+    #for css_file in html_css_files:
+    #    add_css(css_file)
 
     # Custom CSS
     # app.add_stylesheet('css/pytorch_theme.css')
