Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add --pst prefix to all our CSS custom properties (variables) #312

Merged
merged 2 commits into from
Mar 9, 2021
Merged

Add --pst prefix to all our CSS custom properties (variables) #312

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
93d5193
Add --pst prefix to all our CSS custom properties (variables)
jorisvandenbossche Jan 26, 2021
03ddf9d
Merge remote-tracking branch 'upstream/master' into prefix-variables
jorisvandenbossche Mar 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ...ndex.4ea0a4617f49cfd39b5b9e9540ffc872.css → ...ndex.57d3cd9fdfd1e83932aa4eb4774f9fb9.css
View file
Open in desktop

Large diffs are not rendered by default.

132 changes: 66 additions & 66 deletions pydata_sphinx_theme/static/css/theme.css
View file
Open in desktop
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
Open in desktop
File renamed without changes.
6 changes: 3 additions & 3 deletions pydata_sphinx_theme/static/webpack-macros.html
View file
Open in desktop
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
Open in desktop
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