Skip to content

Commit

Permalink
Merge pull request #41 from redwoodjs/fix/prod-styling-bug
Browse files Browse the repository at this point in the history 
Fix/prod styling bug
  • Loading branch information
@clairefro
clairefro authored Jan 24, 2021
2 parents f7276e0 + 197a1d1 commit 9d07052
Show file tree
Hide file tree
Showing 2 changed files with 74 additions and 65 deletions.
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"editor.formatOnSave": true
}
136 changes: 71 additions & 65 deletions src/css/custom.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
/* IMPORTANT: use class substring matching for classes that include "@docusaurus". This prevents styling build failures in production */
/* ex: [class^='docTitle'] instead of .docTitle_node_modules-\@docusaurus-theme-classic-lib-next-theme-DocItem- */

/* stylelint-disable docusaurus/copyright-header */
/**
* Any CSS included here will be global. The classic template
Expand All @@ -7,140 +10,143 @@

/* You can override the default Infima variables here. */
:root {
--ifm-color-primary: #BF4722;
--ifm-color-primary-dark: #682712;
--ifm-color-primary-darker: #341309;
--ifm-color-primary-darkest: #1f0a04;
--ifm-color-primary-light: #E38163;
--ifm-color-primary-lighter: #EBA48E;
--ifm-color-primary-lightest: #F3C7BA;
--ifm-code-font-size: 95%;
--ifm-menu-color-background-active:#FAEAE5;
--ifm-code-background:#FAEAE5;
--ifm-background-surface-color: #FAEAE5;
--ifm-blockquote-color: #E38163;
--ifm-color-emphasis-300: #EBA48E;
--ifm-code-border-radius: 0.25rem;
--ifm-code-font-size: 90%;
--ifm-font-family-base: "Open Sans", system-ui, -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, sans-serif;
--ifm-font-family-monospace: "Fira Code", "Fira Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--ifm-footer-background-color: #fdf8f6;
--ifm-color-primary: #bf4722;
--ifm-color-primary-dark: #682712;
--ifm-color-primary-darker: #341309;
--ifm-color-primary-darkest: #1f0a04;
--ifm-color-primary-light: #e38163;
--ifm-color-primary-lighter: #eba48e;
--ifm-color-primary-lightest: #f3c7ba;
--ifm-code-font-size: 95%;
--ifm-menu-color-background-active: #faeae5;
--ifm-code-background: #faeae5;
--ifm-background-surface-color: #faeae5;
--ifm-blockquote-color: #e38163;
--ifm-color-emphasis-300: #eba48e;
--ifm-code-border-radius: 0.25rem;
--ifm-code-font-size: 90%;
--ifm-font-family-base: 'Open Sans', system-ui, -apple-system,
BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--ifm-font-family-monospace: 'Fira Code', 'Fira Mono', SFMono-Regular, Menlo,
Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
--ifm-footer-background-color: #fdf8f6;
}

/* Page titles, h1 */
.docTitle_node_modules-\@docusaurus-theme-classic-lib-next-theme-DocItem- {
font-size: 2rem !important;
[class^='docTitle'] {
font-size: 2rem !important;
}

html[data-theme='dark'] {
--ifm-background-color: #120502;
--ifm-background-surface-color: #341309;
--ifm-menu-color-background-active: #1f0a04;
--ifm-background-color: #120502;
--ifm-background-surface-color: #341309;
--ifm-menu-color-background-active: #1f0a04;
}

.DocSearch {
--docsearch-searchbox-background: #ffffff;
--docsearch-searchbox-background: #ffffff;
}

.DocSearch-Button-Key {
--docsearch-key-gradient: linear-gradient(-26.5deg,#682712,#341309);
--docsearch-muted-color: #FAEAE5;
--docsearch-key-shadow: inset 0 -2px 0 0 #1f0a04, inset 0 0 1px 1px #682712, 0 2px 2px 0 rgba(3,4,9,0.3);
--docsearch-key-gradient: linear-gradient(-26.5deg, #682712, #341309);
--docsearch-muted-color: #faeae5;
--docsearch-key-shadow: inset 0 -2px 0 0 #1f0a04, inset 0 0 1px 1px #682712,
0 2px 2px 0 rgba(3, 4, 9, 0.3);
}

html[data-theme='dark'] .DocSearch {
--docsearch-searchbox-background: #1f0a04;
--docsearch-searchbox-background: #1f0a04;
}

html[data-theme='dark'] code {
color: #E38163;
background-color: #341309;
color: #e38163;
background-color: #341309;
}

.navbar__title {
letter-spacing: -0.03rem;
letter-spacing: -0.03rem;
}

.menu__link {
font-size: 90%;
font-weight: 600;
font-size: 90%;
font-weight: 600;
}

.markdown a {
text-decoration: underline;
text-decoration: underline;
}

blockquote {
font-size: 90%;
color: #682712;
background-color: #FAEAE5;
border-radius: 0.25rem;
border-left: none;
font-size: 90%;
color: #682712;
background-color: #faeae5;
border-radius: 0.25rem;
border-left: none;
}

blockquote code {
background-color: #F3C7BA;
background-color: #f3c7ba;
}

html[data-theme='dark'] blockquote {
background-color: #1f0a04;
color: #E38163;
background-color: #1f0a04;
color: #e38163;
}

code {
color: #682712;
font-size: 85%;
color: #682712;
font-size: 85%;
}

html[data-theme='dark'] blockquote .codeBlockLines_node_modules-\@docusaurus-theme-classic-lib-next-theme-CodeBlock- {
background-color: #120502 !important;
html[data-theme='dark'] blockquote [class^='codeBlockLines'] {
background-color: #120502 !important;
}

.codeBlockLines_node_modules-\@docusaurus-theme-classic-lib-next-theme-CodeBlock- {
background-color: #230b07 !important;
[class^='codeBlockLines'] {
background-color: #230b07 !important;
}

.token.comment {
color: #634747 !important;
color: #634747 !important;
}

.navbar {
box-shadow: none;
box-shadow: none;
}

.footer {
background-color: #fdf8f6;
color: var(--ifm-color-primary-dark);
background-color: #fdf8f6;
color: var(--ifm-color-primary-dark);
}

html[data-theme='dark'] .footer {
background-color: #1f0a04;
background-color: #1f0a04;
}

.footer__title {
color: var(--ifm-color-primary-dark);
color: var(--ifm-color-primary-dark);
}

.footer__link-item {
color: var(--ifm-color-primary);
color: var(--ifm-color-primary);
}

.docusaurus-highlight-code-line {
background-color: #3c1913;
display: block;
margin: 0 calc(-1 * var(--ifm-pre-padding));
padding: 0 var(--ifm-pre-padding);
background-color: #3c1913;
display: block;
margin: 0 calc(-1 * var(--ifm-pre-padding));
padding: 0 var(--ifm-pre-padding);
}

/* Hack to get youtube videos to be responsive */
.video-container {
position: relative;
padding-bottom: 60%;
margin: 1rem 0;
position: relative;
padding-bottom: 60%;
margin: 1rem 0;
}

.video-container iframe {
position: absolute;
width: 100%;
height: 100%;
position: absolute;
width: 100%;
height: 100%;
}

0 comments on commit 9d07052

Please sign in to comment.