Skip to content

Commit

Permalink
Add --pst prefix to all our CSS custom properties (variables) (#312)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jorisvandenbossche
jorisvandenbossche authored Mar 9, 2021
1 parent 9628268 commit 65ca2db
Show file tree
Hide file tree
Showing 8 changed files with 150 additions and 150 deletions.
2 changes: 1 addition & 1 deletion ...ndex.4ea0a4617f49cfd39b5b9e9540ffc872.css → ...ndex.57d3cd9fdfd1e83932aa4eb4774f9fb9.css
View file

Large diffs are not rendered by default.

132 changes: 66 additions & 66 deletions pydata_sphinx_theme/static/css/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,103 +2,103 @@
/*****************************************************************************
* Theme config
**/
--header-height: 60px;
--pst-header-height: 60px;

/*****************************************************************************
* Font size
**/
--font-size-base: 15px; /* base font size - applied at body / html level */
--pst-font-size-base: 15px; /* base font size - applied at body / html level */

/* heading font sizes */
--font-size-h1: 36px;
--font-size-h2: 32px;
--font-size-h3: 26px;
--font-size-h4: 21px;
--font-size-h5: 18px;
--font-size-h6: 16px;
--pst-font-size-h1: 36px;
--pst-font-size-h2: 32px;
--pst-font-size-h3: 26px;
--pst-font-size-h4: 21px;
--pst-font-size-h5: 18px;
--pst-font-size-h6: 16px;

/* smaller then heading font sizes*/
--font-size-milli: 12px;
--pst-font-size-milli: 12px;

/*****************************************************************************
* Font family
**/
--font-family-base: 'Lato', sans-serif;
--font-family-heading: 'Open Sans', sans-serif;
--pst-font-family-base: 'Lato', sans-serif;
--pst-font-family-heading: 'Open Sans', sans-serif;

/*****************************************************************************
* Color
*
* Colors are defined in rgb string way, "red, green, blue"
**/
--color-primary: 19, 6, 84;
--color-success: 40, 167, 69;
--color-info: 0, 123, 255; /*23, 162, 184;*/
--color-warning: 255, 193, 7;
--color-danger: 220, 53, 69;
--color-text-base: 51, 51, 51;
--pst-color-primary: 19, 6, 84;
--pst-color-success: 40, 167, 69;
--pst-color-info: 0, 123, 255; /*23, 162, 184;*/
--pst-color-warning: 255, 193, 7;
--pst-color-danger: 220, 53, 69;
--pst-color-text-base: 51, 51, 51;

--color-h1: var(--color-primary);
--color-h2: var(--color-primary);
--color-h3: var(--color-text-base);
--color-h4: var(--color-text-base);
--color-h5: var(--color-text-base);
--color-h6: var(--color-text-base);
--color-paragraph: var(--color-text-base);
--color-link: 0, 91, 129;
--color-link-hover: 227, 46, 0;
--color-headerlink: 198, 15, 15;
--color-headerlink-hover: 255, 255, 255;
--color-preformatted-text: 34, 34, 34;
--color-preformatted-background: 250, 250, 250;
--pst-color-h1: var(--pst-color-primary);
--pst-color-h2: var(--pst-color-primary);
--pst-color-h3: var(--pst-color-text-base);
--pst-color-h4: var(--pst-color-text-base);
--pst-color-h5: var(--pst-color-text-base);
--pst-color-h6: var(--pst-color-text-base);
--pst-color-paragraph: var(--pst-color-text-base);
--pst-color-link: 0, 91, 129;
--pst-color-link-hover: 227, 46, 0;
--pst-color-headerlink: 198, 15, 15;
--pst-color-headerlink-hover: 255, 255, 255;
--pst-color-preformatted-text: 34, 34, 34;
--pst-color-preformatted-background: 250, 250, 250;

--color-active-navigation: 19, 6, 84;
--color-navbar-link: 77, 77, 77;
--color-navbar-link-hover: var(--color-active-navigation);
--color-navbar-link-active: var(--color-active-navigation);
--color-sidebar-link: 77, 77, 77;
--color-sidebar-link-hover: var(--color-active-navigation);
--color-sidebar-link-active: var(--color-active-navigation);
--color-toc-link: 119, 117, 122;
--color-toc-link-hover: var(--color-active-navigation);
--color-toc-link-active: var(--color-active-navigation);
--pst-color-active-navigation: 19, 6, 84;
--pst-color-navbar-link: 77, 77, 77;
--pst-color-navbar-link-hover: var(--pst-color-active-navigation);
--pst-color-navbar-link-active: var(--pst-color-active-navigation);
--pst-color-sidebar-link: 77, 77, 77;
--pst-color-sidebar-link-hover: var(--pst-color-active-navigation);
--pst-color-sidebar-link-active: var(--pst-color-active-navigation);
--pst-color-toc-link: 119, 117, 122;
--pst-color-toc-link-hover: var(--pst-color-active-navigation);
--pst-color-toc-link-active: var(--pst-color-active-navigation);

/*****************************************************************************
* Icon
**/

/* font awesome icons*/
--icon-check-circle: '\f058';
--icon-info-circle: '\f05a';
--icon-exclamation-triangle: '\f071';
--icon-exclamation-circle: '\f06a';
--icon-times-circle: '\f057';
--icon-lightbulb: '\f0eb';
--pst-icon-check-circle: '\f058';
--pst-icon-info-circle: '\f05a';
--pst-icon-exclamation-triangle: '\f071';
--pst-icon-exclamation-circle: '\f06a';
--pst-icon-times-circle: '\f057';
--pst-icon-lightbulb: '\f0eb';

/*****************************************************************************
* Admonitions
**/

--color-admonition-default: var(--color-info);
--color-admonition-note: var(--color-info);
--color-admonition-attention: var(--color-warning);
--color-admonition-caution: var(--color-warning);
--color-admonition-warning: var(--color-warning);
--color-admonition-danger: var(--color-danger);
--color-admonition-error: var(--color-danger);
--color-admonition-hint: var(--color-success);
--color-admonition-tip: var(--color-success);
--color-admonition-important: var(--color-success);
--pst-color-admonition-default: var(--pst-color-info);
--pst-color-admonition-note: var(--pst-color-info);
--pst-color-admonition-attention: var(--pst-color-warning);
--pst-color-admonition-caution: var(--pst-color-warning);
--pst-color-admonition-warning: var(--pst-color-warning);
--pst-color-admonition-danger: var(--pst-color-danger);
--pst-color-admonition-error: var(--pst-color-danger);
--pst-color-admonition-hint: var(--pst-color-success);
--pst-color-admonition-tip: var(--pst-color-success);
--pst-color-admonition-important: var(--pst-color-success);

--icon-admonition-default: var(--icon-info-circle);
--icon-admonition-note: var(--icon-info-circle);
--icon-admonition-attention: var(--icon-exclamation-circle);
--icon-admonition-caution: var(--icon-exclamation-triangle);
--icon-admonition-warning: var(--icon-exclamation-triangle);
--icon-admonition-danger: var(--icon-exclamation-triangle);
--icon-admonition-error: var(--icon-times-circle);
--icon-admonition-hint: var(--icon-lightbulb);
--icon-admonition-tip: var(--icon-lightbulb);
--icon-admonition-important: var(--icon-exclamation-circle);
--pst-icon-admonition-default: var(--pst-icon-info-circle);
--pst-icon-admonition-note: var(--pst-icon-info-circle);
--pst-icon-admonition-attention: var(--pst-icon-exclamation-circle);
--pst-icon-admonition-caution: var(--pst-icon-exclamation-triangle);
--pst-icon-admonition-warning: var(--pst-icon-exclamation-triangle);
--pst-icon-admonition-danger: var(--pst-icon-exclamation-triangle);
--pst-icon-admonition-error: var(--pst-icon-times-circle);
--pst-icon-admonition-hint: var(--pst-icon-lightbulb);
--pst-icon-admonition-tip: var(--pst-icon-lightbulb);
--pst-icon-admonition-important: var(--pst-icon-exclamation-circle);

}
0 ...e/static/js/index.bf572f7d6dfb3e591c72.js → ...e/static/js/index.109f8ec7af5a9d176fcd.js
View file
File renamed without changes.
6 changes: 3 additions & 3 deletions pydata_sphinx_theme/static/webpack-macros.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,13 @@

{% macro head_pre_bootstrap() %}
<link href="{{ pathto('_static/css/theme.css', 1) }}" rel="stylesheet" />
<link href="{{ pathto('_static/css/index.4ea0a4617f49cfd39b5b9e9540ffc872.css', 1) }}" rel="stylesheet" />
<link href="{{ pathto('_static/css/index.57d3cd9fdfd1e83932aa4eb4774f9fb9.css', 1) }}" rel="stylesheet" />
{% endmacro %}

{% macro head_js_preload() %}
<link rel="preload" as="script" href="{{ pathto('_static/js/index.bf572f7d6dfb3e591c72.js', 1) }}">
<link rel="preload" as="script" href="{{ pathto('_static/js/index.109f8ec7af5a9d176fcd.js', 1) }}">
{% endmacro %}

{% macro body_post() %}
<script src="{{ pathto('_static/js/index.bf572f7d6dfb3e591c72.js', 1) }}"></script>
<script src="{{ pathto('_static/js/index.109f8ec7af5a9d176fcd.js', 1) }}"></script>
{% endmacro %}
80 changes: 40 additions & 40 deletions src/scss/_admonitions.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
overflow: hidden;
page-break-inside: avoid;
border-left: 0.2rem solid;
border-color: rgba(var(--color-admonition-default), 1);
border-color: rgba(var(--pst-color-admonition-default), 1);
border-radius: 0.1rem;
box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.05),
0 0 0.05rem rgba(0, 0, 0, 0.1);
Expand All @@ -33,17 +33,17 @@
margin: 0 -0.6rem !important;
padding: 0.4rem 0.6rem 0.4rem 2rem;
font-weight: 700;
background-color: rgba(var(--color-admonition-default), 0.1);
background-color: rgba(var(--pst-color-admonition-default), 0.1);

&:before {
position: absolute;
left: 0.6rem;
width: 1rem;
height: 1rem;
color: rgba(var(--color-admonition-default), 1);
color: rgba(var(--pst-color-admonition-default), 1);
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: var(--icon-admonition-default);
content: var(--pst-icon-admonition-default);
}

// Next element after title needs some extra upper-space
Expand All @@ -53,109 +53,109 @@
}

&.attention {
border-color: rgba(var(--color-admonition-attention), 1);
border-color: rgba(var(--pst-color-admonition-attention), 1);
.admonition-title {
background-color: rgba(var(--color-admonition-attention), 0.1);
background-color: rgba(var(--pst-color-admonition-attention), 0.1);

&:before {
color: rgba(var(--color-admonition-attention), 1);
content: var(--icon-admonition-attention);
color: rgba(var(--pst-color-admonition-attention), 1);
content: var(--pst-icon-admonition-attention);
}
}
}

&.caution {
border-color: rgba(var(--color-admonition-caution), 1);
border-color: rgba(var(--pst-color-admonition-caution), 1);
.admonition-title {
background-color: rgba(var(--color-admonition-caution), 0.1);
background-color: rgba(var(--pst-color-admonition-caution), 0.1);

&:before {
color: rgba(var(--color-admonition-caution), 1);
content: var(--icon-admonition-caution);
color: rgba(var(--pst-color-admonition-caution), 1);
content: var(--pst-icon-admonition-caution);
}
}
}

&.warning {
border-color: rgba(var(--color-admonition-warning), 1);
border-color: rgba(var(--pst-color-admonition-warning), 1);
.admonition-title {
background-color: rgba(var(--color-admonition-warning), 0.1);
background-color: rgba(var(--pst-color-admonition-warning), 0.1);

&:before {
color: rgba(var(--color-admonition-warning), 1);
content: var(--icon-admonition-warning);
color: rgba(var(--pst-color-admonition-warning), 1);
content: var(--pst-icon-admonition-warning);
}
}
}

&.danger {
border-color: rgba(var(--color-admonition-danger), 1);
border-color: rgba(var(--pst-color-admonition-danger), 1);
.admonition-title {
background-color: rgba(var(--color-admonition-danger), 0.1);
background-color: rgba(var(--pst-color-admonition-danger), 0.1);

&:before {
color: rgba(var(--color-admonition-danger), 1);
content: var(--icon-admonition-danger);
color: rgba(var(--pst-color-admonition-danger), 1);
content: var(--pst-icon-admonition-danger);
}
}
}

&.error {
border-color: rgba(var(--color-admonition-error), 1);
border-color: rgba(var(--pst-color-admonition-error), 1);
.admonition-title {
background-color: rgba(var(--color-admonition-error), 0.1);
background-color: rgba(var(--pst-color-admonition-error), 0.1);

&:before {
color: rgba(var(--color-admonition-error), 1);
content: var(--icon-admonition-error);
color: rgba(var(--pst-color-admonition-error), 1);
content: var(--pst-icon-admonition-error);
}
}
}

&.hint {
border-color: rgba(var(--color-admonition-hint), 1);
border-color: rgba(var(--pst-color-admonition-hint), 1);
.admonition-title {
background-color: rgba(var(--color-admonition-hint), 0.1);
background-color: rgba(var(--pst-color-admonition-hint), 0.1);

&:before {
color: rgba(var(--color-admonition-hint), 1);
content: var(--icon-admonition-hint);
color: rgba(var(--pst-color-admonition-hint), 1);
content: var(--pst-icon-admonition-hint);
}
}
}

&.tip {
border-color: rgba(var(--color-admonition-tip), 1);
border-color: rgba(var(--pst-color-admonition-tip), 1);
.admonition-title {
background-color: rgba(var(--color-admonition-tip), 0.1);
background-color: rgba(var(--pst-color-admonition-tip), 0.1);

&:before {
color: rgba(var(--color-admonition-tip), 1);
content: var(--icon-admonition-tip);
color: rgba(var(--pst-color-admonition-tip), 1);
content: var(--pst-icon-admonition-tip);
}
}
}

&.important {
border-color: rgba(var(--color-admonition-important), 1);
border-color: rgba(var(--pst-color-admonition-important), 1);
.admonition-title {
background-color: rgba(var(--color-admonition-important), 0.1);
background-color: rgba(var(--pst-color-admonition-important), 0.1);

&:before {
color: rgba(var(--color-admonition-important), 1);
content: var(--icon-admonition-important);
color: rgba(var(--pst-color-admonition-important), 1);
content: var(--pst-icon-admonition-important);
}
}
}

&.note {
border-color: rgba(var(--color-admonition-note), 1);
border-color: rgba(var(--pst-color-admonition-note), 1);
.admonition-title {
background-color: rgba(var(--color-admonition-note), 0.1);
background-color: rgba(var(--pst-color-admonition-note), 0.1);

&:before {
color: rgba(var(--color-admonition-note), 1);
content: var(--icon-admonition-note);
color: rgba(var(--pst-color-admonition-note), 1);
content: var(--pst-icon-admonition-note);
}
}
}
Expand Down
Loading

0 comments on commit 65ca2db

Please sign in to comment.