mirror of
https://github.com/ebullient/obsidian-theme-ebullientworks.git
synced 2026-07-22 03:10:29 +00:00
✨ feat(publish): Update Publish files to include web-specific fixes for Codeblocks
Signed-off-by: Sigrunixia <Scholarlysigrun@icloud.com> ✨ feat(publish): Update Publish files to include web-specific fixes for Codeblocks ✨ feat(publish): Update Publish files to include web-specific fixes for Codeblocks Signed-off-by: Sigrunixia <Scholarlysigrun@icloud.com> ✨ feat: Add publish code styling to EbullientWorksTheme Signed-off-by: Sigrunixia <Scholarlysigrun@icloud.com> ✨ feat: add styles for responsive images and videos Signed-off-by: Sigrunixia <Scholarlysigrun@icloud.com> ✨ feat: Add callout styling to body and content Signed-off-by: Sigrunixia <Scholarlysigrun@icloud.com> ✨ feat(typography): add styling for internal links in published markdown Signed-off-by: Sigrunixia <Scholarlysigrun@icloud.com> ✨ Add default styling variables for published content container Adds default styling variables for published content container, including page width and padding, page and component titles, input and graph heights, sidebar dimensions, site headers and navigation, outline headings, footer display, and font sizes for various screen widths. Also includes Obsidian Publish mobile variables for smaller screens. Signed-off-by: Sigrunixia <Scholarlysigrun@icloud.com> Added theme-dark-code.png and theme-light-code.png. Signed-off-by: Sigrunixia <Scholarlysigrun@icloud.com> chore: Generated publish.css Signed-off-by: Sigrunixia <Scholarlysigrun@icloud.com>
This commit is contained in:
GitHub
Sigrunixia
parent
f6af1c25ce
commit
fa681e560c
10 changed files with 354 additions and 149 deletions
BIN
images/theme-dark-code.png
Normal file
BIN
images/theme-dark-code.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
BIN
images/theme-light-code.png
Normal file
BIN
images/theme-light-code.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
|
|
@ -1,136 +0,0 @@
|
|||
// Published Variables
|
||||
// Defaults will be after the line block
|
||||
|
||||
.published-container {
|
||||
/* Page */
|
||||
--footer-display: block;
|
||||
display: flex;
|
||||
/* Page titles */
|
||||
flex-direction: column;
|
||||
--sidebar-font-size: 1rem; //14px;
|
||||
--outline-heading-weight-active: 600;
|
||||
--graph-height: 16.25rem;
|
||||
--header-height: var(--h1-size);
|
||||
--input-height: 2.5rem; //32px
|
||||
/* Component titles, e.g. backlinks, graph, table of contents */
|
||||
--logo-height: auto;
|
||||
height: 100%;
|
||||
--nav-item-weight-active: 500;
|
||||
--sidebar-left-border-width: 0.0625rem; //1px;
|
||||
--sidebar-left-width: 17.5rem;
|
||||
--logo-max-height: 12.5rem;
|
||||
/* Inputs */
|
||||
--logo-max-width: calc(100% - 18px);
|
||||
/* Graph */
|
||||
--site-menu-icon-size: 1.5rem;
|
||||
/* Sidebars */
|
||||
--site-name-font: inherit;
|
||||
--site-name-size: var(--h2-size);
|
||||
--site-name-weight: 700; //600;
|
||||
overflow: auto;
|
||||
--nav-parent-item-weight: 500;
|
||||
position: relative;
|
||||
/* Site header */
|
||||
--logo-radius: 0.5rem;
|
||||
--sidebar-right-background: transparent;
|
||||
--sidebar-right-border-width: 0px;
|
||||
--sidebar-right-width: 18.75rem;
|
||||
--page-side-padding: 2rem; // 48px
|
||||
--component-title-font: var(--font-ui); //inherit
|
||||
--page-title-font: var(--h1-font);
|
||||
--page-title-line-height: var(--h1-line-height);
|
||||
--component-title-size: var(--font-ui-small);
|
||||
--page-title-size: var(--h1-size); //2.6em
|
||||
/* Navigation */
|
||||
--component-title-style: normal; //inherit
|
||||
--page-title-style: var(--h1-style);
|
||||
/* Outline */
|
||||
--component-title-transform: uppercase;
|
||||
/* Footer */
|
||||
--component-title-variant: normal; //Inherit
|
||||
|
||||
--page-title-variant: var(--h1-font);
|
||||
--component-title-weight: 600;
|
||||
--page-title-weight: var(--h1-weight);
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
--logo-width: auto;
|
||||
--page-width: 100%; // 800px
|
||||
width: 100%;
|
||||
|
||||
&::selection {
|
||||
background-color: var(--text-selection);
|
||||
}
|
||||
}
|
||||
|
||||
// What does this do?
|
||||
.published-container .loader-cube {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
|
||||
@mixin link-spacing {
|
||||
border-radius: 0.3125rem;
|
||||
font-size: 1rem;
|
||||
margin: 0.625rem;
|
||||
padding: 0.625rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
body {
|
||||
font-size: var(--font-ui-medium);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 750px) {
|
||||
body {
|
||||
font-size: var(--font-ui-medium);
|
||||
--popover-display: none;
|
||||
--input-height: 2.25rem;
|
||||
}
|
||||
|
||||
.published-container {
|
||||
--footer-display: none;
|
||||
--header-height: 4rem;
|
||||
--site-name-size: 1.125rem;
|
||||
--page-side-padding: 1rem;
|
||||
--page-title-size: 1.8em;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
body {
|
||||
font-size: var(--font-ui-medium);
|
||||
}
|
||||
|
||||
.published-container {
|
||||
--footer-display: none;
|
||||
--outline-heading-weight-active: 600;
|
||||
--header-height: var(--h2-size);
|
||||
--logo-height: auto;
|
||||
--nav-item-weight-active: 500;
|
||||
--logo-max-height: 150px;
|
||||
--logo-max-width: calc(100% - 18px);
|
||||
--site-menu-icon-size: 1.375rem;
|
||||
/* Navigation */
|
||||
--site-name-size: var(--h3-size);
|
||||
--nav-parent-item-weight: 500;
|
||||
/* Outline */
|
||||
--logo-radius: 0.375rem;
|
||||
/* Footer */
|
||||
--logo-width: auto;
|
||||
|
||||
>.markdown-preview-view {
|
||||
>.markdown-preview-sizer {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
198
src/fragments/20-publish-variables.scss
Normal file
198
src/fragments/20-publish-variables.scss
Normal file
|
|
@ -0,0 +1,198 @@
|
|||
.published-container {
|
||||
// These are the Default Ones that Come with App.css
|
||||
|
||||
// Page width and padding
|
||||
--page-width: 100%;
|
||||
--page-side-padding: 48px;
|
||||
|
||||
// Page titles
|
||||
--page-title-color: var(--h1-color);
|
||||
--page-title-font: var(--h1-font);
|
||||
--page-title-line-height: var(--h1-line-height);
|
||||
--page-title-size: 2.6em;
|
||||
--page-title-style: var(--h1-style);
|
||||
--page-title-variant: var(--h1-variant);
|
||||
--page-title-weight: var(--h1-weight);
|
||||
|
||||
|
||||
// Component Titles
|
||||
--component-title-color: var(--text-normal);
|
||||
--component-title-font: inherit;
|
||||
--component-title-size: var(--font-ui-small);
|
||||
--component-title-style: inherit;
|
||||
--component-title-transform: uppercase;
|
||||
--component-title-variant: inherit;
|
||||
--component-title-weight: var(--font-semibold);
|
||||
|
||||
// Inputs
|
||||
--input-height: 32px;
|
||||
|
||||
// Graph
|
||||
--graph-height: 260px;
|
||||
|
||||
// Sidebar
|
||||
--sidebar-font-size: 14px;
|
||||
--sidebar-left-width: 280px;
|
||||
--sidebar-left-background: var(--background-primary);
|
||||
--sidebar-left-border-width: 1px;
|
||||
--sidebar-left-border-color: var(--background-modifier-border);
|
||||
--sidebar-right-width: 300px;
|
||||
--sidebar-right-background: transparent;
|
||||
--sidebar-right-border-width: 0px;
|
||||
--sidebar-right-border-color: var(--background-modifier-border);
|
||||
|
||||
// Site Headers
|
||||
--logo-width: auto;
|
||||
--logo-height: auto;
|
||||
--logo-max-width: calc(100% - 18px);
|
||||
--logo-max-height: 200px;
|
||||
--logo-radius: 8px;
|
||||
--header-height: 50px;
|
||||
--site-name-color: var(--text-normal);
|
||||
--site-name-color-hover: var(--text-muted);
|
||||
--site-name-font: inherit;
|
||||
--site-name-size: 22px;
|
||||
--site-name-weight: var(--font-semibold);
|
||||
--site-menu-icon-color: var(--text-faint);
|
||||
--site-menu-icon-color-hover: var(--text-normal);
|
||||
--site-menu-icon-size: 24px;
|
||||
|
||||
// Site Navigation
|
||||
--nav-collapse-icon-color: var(--text-faint);
|
||||
--nav-collapse-icon-color-hover: var(--text-muted);
|
||||
--nav-parent-item-color: var(--text-normal);
|
||||
--nav-parent-item-color-active: var(--text-accent);
|
||||
--nav-parent-item-weight: var(--font-medium);
|
||||
--nav-item-color: var(--text-muted);
|
||||
--nav-item-color-hover: var(--text-normal);
|
||||
--nav-item-color-active: var(--text-accent);
|
||||
--nav-item-border-color: var(--background-modifier-border);
|
||||
--nav-item-border-color-active: var(--text-accent);
|
||||
--nav-item-weight-active: var(--font-medium);
|
||||
|
||||
// Outline
|
||||
--outline-heading-color: var(--text-muted);
|
||||
--outline-heading-color-hover: var(--text-normal);
|
||||
--outline-heading-color-active: var(--text-accent);
|
||||
--outline-heading-weight-active: var(--font-semibold);
|
||||
|
||||
// Footer
|
||||
--footer-display: block;
|
||||
|
||||
// Fonts
|
||||
--font-text-size: 16px;
|
||||
--font-text-theme: var(--ebw-font-text);
|
||||
--font-monospace-theme: var(--ebw-font-monospace);
|
||||
--font-interface-theme: var(--ebw-font-text);
|
||||
--font-mermaid: var(--ebw-font-monospace);
|
||||
}
|
||||
|
||||
body {
|
||||
/* Tooltips */
|
||||
--tooltip-display: none;
|
||||
/* Popovers */
|
||||
--popover-display: block;
|
||||
|
||||
// Added to fix borders on callouts
|
||||
--callout-border-width: 0.05rem 0 0 0.05rem;
|
||||
}
|
||||
|
||||
|
||||
.theme-dark {
|
||||
--nav-item-border-color-hover: var(--yellow-2);
|
||||
}
|
||||
|
||||
.theme-light {
|
||||
--nav-item-border-color-hover: var(--yellow-4);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Obsidian Publish mobile variables */
|
||||
/* --------------------------------- */
|
||||
@media screen and (max-width: 750px) {
|
||||
body {
|
||||
--popover-display: none;
|
||||
--input-height: 36px;
|
||||
}
|
||||
.published-container {
|
||||
--site-name-size: 18px;
|
||||
--header-height: 50px;
|
||||
--header-background: var(--background-primary);
|
||||
--page-title-size: 2em;
|
||||
--page-side-padding: 24px;
|
||||
--footer-display: none;
|
||||
--list-spacing: 0.15em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
body {
|
||||
font-size: var(--font-ui-medium);
|
||||
}
|
||||
|
||||
.published-container {
|
||||
--footer-display: none;
|
||||
--outline-heading-weight-active: 600;
|
||||
--header-height: var(--h2-size);
|
||||
--logo-height: auto;
|
||||
--nav-item-weight-active: 500;
|
||||
--logo-max-height: 150px;
|
||||
--logo-max-width: calc(100% - 18px);
|
||||
--site-menu-icon-size: 1.375rem;
|
||||
/* Navigation */
|
||||
--site-name-size: var(--h3-size);
|
||||
--nav-parent-item-weight: 500;
|
||||
/* Outline */
|
||||
--logo-radius: 0.375rem;
|
||||
/* Footer */
|
||||
--logo-width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1280px) {
|
||||
/* ... rules and variables for screens larger than a big tablet */
|
||||
.published-container {
|
||||
--page-side-padding: 10rem;
|
||||
--sidebar-left-width: 230px;
|
||||
--sidebar-right-width: 250px;
|
||||
--graph-height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (min-width: 1440px) {
|
||||
/* ... rules and variables for screens larger than a small monitor */
|
||||
.published-container {
|
||||
--page-side-padding: 12rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1600px) {
|
||||
/* ... rules and variables for screens larger than a medium monitor */
|
||||
.published-container {
|
||||
--page-side-padding: 14rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1920px) {
|
||||
/* ... rules and variables for screens larger than a average monitor */
|
||||
.published-container {
|
||||
--page-side-padding: 16rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2560px) {
|
||||
/* ... rules and variables for screens larger than a good monitor */
|
||||
.published-container {
|
||||
--page-side-padding: 18rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 3840px) {
|
||||
/* ... rules and variables for screens larger than a projector */
|
||||
.published-container {
|
||||
--page-side-padding: 20rem;
|
||||
}
|
||||
}
|
||||
0
src/fragments/21-publish-container.scss
Normal file
0
src/fragments/21-publish-container.scss
Normal file
4
src/fragments/25-publish-typography.scss
Normal file
4
src/fragments/25-publish-typography.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
.markdown-rendered .internal-link {
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}
|
||||
7
src/fragments/27-callmonitions.scss
Normal file
7
src/fragments/27-callmonitions.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
body {
|
||||
--callout-border-width: 0.05rem 0 0 0.05rem;
|
||||
}
|
||||
|
||||
.callout-content {
|
||||
background-color: var(--background-primary-alt);
|
||||
}
|
||||
19
src/fragments/28-publish-image-embeds.scss
Normal file
19
src/fragments/28-publish-image-embeds.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
// Make Images and Videos Responsive
|
||||
.internal-embed img {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 2em auto;
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 10px;
|
||||
aspect-ratio: 16 / 9;
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
iframe {
|
||||
aspect-ratio: 16 / 9;
|
||||
height: auto;
|
||||
width: auto;
|
||||
}
|
||||
109
src/fragments/29-publish-code.scss
Normal file
109
src/fragments/29-publish-code.scss
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
// Code Variables
|
||||
|
||||
.frontmatter-container, .popover.hover-popover::after, .markdown-preview-view:not(.allow-fold-lists) {
|
||||
&.list-collapse-indicator, &.allow-fold-headings .heading-collapse-indicator, &.show-frontmatter .frontmatter {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
pre[class*='language-'] {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*='language-'], pre[class*='language-'] {
|
||||
background: var(--background-secondary-alt);
|
||||
}
|
||||
|
||||
code[class*='language-'], pre[class*='language-'] {
|
||||
color: var(--blue-3);
|
||||
background: none;
|
||||
word-wrap: break-word;
|
||||
white-space: break-spaces;
|
||||
word-break: normal;
|
||||
font-family: var(--font-monospace-theme);
|
||||
text-align: left;
|
||||
word-spacing: normal;
|
||||
line-height: 1.2;
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
.markdown-rendered {
|
||||
pre {
|
||||
position: relative;
|
||||
padding: 0.5rem 1rem;
|
||||
min-height: 2rem;
|
||||
background-color: var(--background-primary-alt);
|
||||
border-radius: 4px;
|
||||
white-space: break-spaces;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
pre code {
|
||||
background-color: var(--background-primary-alt);
|
||||
}
|
||||
}
|
||||
|
||||
.token {
|
||||
|
||||
&.atrule {
|
||||
color: var(--pink-2);
|
||||
}
|
||||
|
||||
&.attr-value {
|
||||
color: var(--green-3);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.bold {
|
||||
color: var(--green-4);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
&.boolean {
|
||||
color: var(--cyan-3);
|
||||
}
|
||||
|
||||
&.builtin {
|
||||
color: var(--cyan-2);
|
||||
}
|
||||
|
||||
&.comment {
|
||||
color: var(--purple-4);
|
||||
}
|
||||
|
||||
&.function {
|
||||
color: var(--pink-3);
|
||||
}
|
||||
|
||||
&.important {
|
||||
color: var(--red-3);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.number {
|
||||
color: var(--yellow-3);
|
||||
}
|
||||
|
||||
&.property-access {
|
||||
color: var(--yellow-2);
|
||||
}
|
||||
|
||||
&.punctuation {
|
||||
color: var(--purple-3);
|
||||
}
|
||||
|
||||
&.regex {
|
||||
color: var(--red-4);
|
||||
}
|
||||
|
||||
&.variable {
|
||||
color: var(--blue-3);
|
||||
}
|
||||
&.unit {
|
||||
color: var(--gray-dark-4);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,18 +1,22 @@
|
|||
@import 'fragments/01-color-palette';
|
||||
@import 'fragments/02-fonts';
|
||||
@use 'fragments/01-color-palette' as *;
|
||||
@use 'fragments/02-fonts' as *;
|
||||
|
||||
@import 'fragments/03-core-theme-dark';
|
||||
@import 'fragments/03-core-theme-light';
|
||||
@use 'fragments/03-core-theme-dark' as *;
|
||||
@use 'fragments/03-core-theme-light' as *;
|
||||
|
||||
@import 'fragments/03a-workspace-layout';
|
||||
@use 'fragments/04-headings-hr-tags' as *;
|
||||
@use 'fragments/05-text-links' as *;
|
||||
@use 'fragments/06-lists-checkboxes' as *;
|
||||
|
||||
@import 'fragments/04-headings-hr-tags';
|
||||
@import 'fragments/05-text-links';
|
||||
@import 'fragments/06-lists-checkboxes';
|
||||
@use 'fragments/08-blockquote-callouts' as *;
|
||||
@use 'fragments/09-codeblocks' as *;
|
||||
@use 'fragments/10-images-embeds' as *;
|
||||
@use 'fragments/15-table' as *;
|
||||
|
||||
@import 'fragments/08-blockquote-callouts';
|
||||
@import 'fragments/09-codeblocks';
|
||||
@import 'fragments/10-images-embeds';
|
||||
@import 'fragments/15-table';
|
||||
|
||||
@import 'fragments/19-publish-container';
|
||||
@use 'fragments/20-publish-variables' as *;
|
||||
//@use 'fragments/21-publish-container' as *;
|
||||
@use 'fragments/25-publish-typography' as *;
|
||||
@use 'fragments/27-callmonitions' as *;
|
||||
@use 'fragments/28-publish-image-embeds' as *;
|
||||
@use 'fragments/29-publish-code' as *;
|
||||
|
|
|
|||
Loading…
Reference in a new issue