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

Jump to bottom

[CSS] Local fonts, working fonts! #123

Merged
merged 4 commits into from
Dec 6, 2023
Merged

[CSS] Local fonts, working fonts! #123

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
66e2c20
Dark mode increased contrast, created pyos variables, added custom cs…
sneakers-the-rat Dec 6, 2023
0ad1837
Local fonts, remove unincluted header template
sneakers-the-rat Dec 6, 2023
42027f4
'[pre-commit.ci 🤖] Apply code format tools to PR'
pre-commit-ci[bot] Dec 6, 2023
b8fbbf7
Merge branch 'main' into css-local-fonts
lwasser Dec 6, 2023
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
Binary file added _static/fonts/itim-v14-latin-regular.woff2
View file
Open in desktop
Binary file not shown.
Binary file added _static/fonts/poppins-v20-latin-700.woff2
View file
Open in desktop
Binary file not shown.
Binary file added _static/fonts/poppins-v20-latin-700italic.woff2
View file
Open in desktop
Binary file not shown.
Binary file added _static/fonts/poppins-v20-latin-italic.woff2
View file
Open in desktop
Binary file not shown.
Binary file added _static/fonts/poppins-v20-latin-regular.woff2
View file
Open in desktop
Binary file not shown.
103 changes: 92 additions & 11 deletions _static/pyos.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,21 @@
/* PyOS-specific vars :) */
:root {
--pyos-color-primary: #703c87;
--pyos-color-secondary: #8045e5;
--pyos-color-secondary-highlight: #591bc2;
--pyos-color-tertiary: #A66C98;
--pyos-color-dark: #542568;
--pyos-color-light: #DAABCF;

/* Darkmode Adjustments*/
--pyos-dm-color-primary: #C483E0;

/* Fonts (overrides base theme) */
--pst-font-family-heading: 'Poppins', sans-serif;
--pst-font-family-base: 'Poppins', sans-serif;
--pyos-font-family-h1: 'Itim', serif;
}

html, body {
font-size: 1.0rem;
}
Expand All @@ -19,7 +37,6 @@ html, body {

html, body {
font-size: 1.02rem;
font-family: 'Poppins', sans-serif!important;
}

body p {
Expand All @@ -30,15 +47,11 @@ body p {
margin-bottom: 70px!important;
}

h2, h3, h4 {
font-family: 'Poppins', sans-serif!important;
}

h1 {
margin-top: 10px;
margin-bottom: 40px;
font-family: 'Itim'!important;
color: #542568;
font-family: var(--pyos-font-family-h1) !important;
color: var(--pyos-h1-color);
}
h2 {
margin-top: 80px;
Expand Down Expand Up @@ -66,6 +79,16 @@ figcaption {
font-size: .9em;
}

/* Navbar */
/*
Don't fill all vertical space beneath TOC, which causes
readthedocs version selector to fall off the page and the
ugly scrollbar to show all the time
*/
.bd-sidebar-primary .sidebar-primary-items__end {
margin-bottom: unset;
margin-top: unset;
}

/* Tutorial block page */
.left-div {
Expand Down Expand Up @@ -139,17 +162,17 @@ figcaption {


html[data-theme=light] {
--pst-color-primary: #703c87;
--pst-color-primary: var(--pyos-color-primary);
--pst-color-primary-text: #fff;
--pst-color-primary-highlight: #053f49;
--sd-color-primary: var(--pst-color-primary);
--sd-color-primary-text: var(--pst-color-primary-text);
--sd-color-primary-highlight: var(--pst-color-primary-highlight);
--sd-color-primary-bg: #d0ecf1;
--sd-color-primary-bg-text: #14181e;
--pst-color-secondary: #8045e5;
--pst-color-secondary: var(--pyos-color-secondary);
--pst-color-secondary-text: #fff;
--pst-color-secondary-highlight: #591bc2;
--pst-color-secondary-highlight: var(--pyos-color-secondary-highlight);
--sd-color-secondary: var(--pst-color-secondary);
--sd-color-secondary-text: var(--pst-color-secondary-text);
--sd-color-secondary-highlight: var(--pst-color-secondary-highlight);
Expand All @@ -165,5 +188,63 @@ html[data-theme=light] {
--sd-color-success-bg-text: #14181e;
--pst-color-info: #A66C98; /* general admonition */
--pst-color-info-bg: #eac8e2;
--pst-heading-color: #542568;
--pst-heading-color: var(--pyos-color-dark);
--pyos-h1-color: var(--pyos-color-dark);
}

html[data-theme=dark] {
--pst-color-primary: var(--pyos-dm-color-primary);
--pst-color-link: var(--pyos-color-light);
--pst-color-link-hover: var(--pyos-dm-color-primary);
--pyos-h1-color: var(--pyos-color-light);
}


/* -------------------------------------- */
/* Generated by https://gwfh.mranftl.com/ */

/* poppins-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
src: url('./fonts/poppins-v20-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-italic - latin */
@font-face {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok so somehow you're telling sass to find the fonts in our local fonts folder here so they are vendored rather than called from google fonts.

it would be great to make these changes everywhere - our website as well calls the google fonts website.

font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Poppins';
font-style: italic;
font-weight: 400;
src: url('./fonts/poppins-v20-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-700 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
src: url('./fonts/poppins-v20-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-700italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Poppins';
font-style: italic;
font-weight: 700;
src: url('./fonts/poppins-v20-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* itim-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Itim';
font-style: normal;
font-weight: 400;
src: url('./fonts/itim-v14-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

6 changes: 0 additions & 6 deletions _templates/header.html
View file
Open in desktop

This file was deleted.

25 changes: 23 additions & 2 deletions noxfile.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@

nox.options.reuse_existing_virtualenvs = True

build_command = ["-b", "html", ".", "_build/html"]
OUTPUT_DIR = "_build"
build_command = ["-b", "html", ".", "/".join([OUTPUT_DIR, "/html"])]

@nox.session
def docs(session):
Expand All @@ -24,10 +25,30 @@ def docs_live(session):
"build_assets",
"tmp",
]
# Explicitly include custom CSS in each build since
# sphinx doesn't think _static files should change since,
# well, they're static.
# Include these as the final `filenames` argument
AUTOBUILD_INCLUDE = [
"_static/pyos.css"
]

# ----------------
# Assemble command
cmd = ["sphinx-autobuild"]
for folder in AUTOBUILD_IGNORE:
cmd.extend(["--ignore", f"*/{folder}/*"])
cmd.extend(build_command + session.posargs)

cmd.extend(build_command)

# use positional arguments if we have them
if len(session.posargs) > 0:
cmd.extend(session.posargs)
# otherwise use default output and include directory
else:
cmd.extend(AUTOBUILD_INCLUDE)

# ----------------
session.run(*cmd)

docs_dir = os.path.join("_build", "html")
Expand Down
Loading