Skip to content

Commit

Permalink
Merge pull request #6 from lazercaveman/develop
Browse files Browse the repository at this point in the history
Develop
  • Loading branch information
lazercaveman authored Sep 15, 2021
2 parents 6c89a12 + ead1ca0 commit 81acd0e
Show file tree
Hide file tree
Showing 18 changed files with 383 additions and 194 deletions.
33 changes: 33 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
# Changelog
All notable changes to this project will be documented in this file.

## [1.0.3] - 10.09.2021
### Added
- Styling for inline-code-blocks
- Customized styling of right sidebar and related content
### Changed
- Updated Colors of h1 and h2 to be more consistent according to colors of other headlines
- Updated Colors of anker Tags to be moire visible
- Adjusted positioning and dimendions of nav-header and contained items
### Fixed
- Nav-Header items where visualized as active, when they wherent.

## [1.0.2] - 10.09.2021
### Fixed
- Fixed Error with Code-Blocks background color, where code-lines overlap each other
### Changed
- Updated Colors
- Updated Font-Sizes
- Adjusted margin of some elements
- Updated installation instructions within README.md

## [1.0.1] - 10.09.2021
### Added
- Added initial styling for obsidian settings

## [1.0.0] - 10.09.2021
### Added
- Screenshot for preview
- Readme with description, credits, and so on
- Basic Scss architecture for managing theme styling
- initialized repo
148 changes: 103 additions & 45 deletions obsidian.css
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,14 @@
--color-primary-900: #15161f;
--color-primary-1000: #0a0b0f;
--color-primary-1100: #050608;
--color-title-h1: #00C9A7;
--color-title-h2: #00C9A7;
--color-title-h1: #845EC2;
--color-title-h2: #D65DB1;
--color-title-h3: #FF6F91;
--color-title-h4: #FF9671;
--color-title-h5: #FFC75F;
--color-title-h6: #c0cdf3;
--color-element-icon: #adb9db;
--color-element-icon-hover: #ebeff7;
--color-element-border: #0a0b0f;
--color-element-border-light: #484e6d;
--color-element-ordered-list-indicator: #ebeff7;
Expand All @@ -25,10 +26,12 @@
--color-element-markup-attribute: #555555;
--color-element-markup-attribute-value: #555555;
--color-text-strong: #ebeff7;
--color-text-code: #6be399;
--color-text-code: #00C9A7;
--color-text-inline-code: #00C9A7;
--color-text-paragraph: #c0cdf3;
--color-text-quote: #a1acce;
--color-text-link: #67a0fb;
--color-text-quote-border: #a1acce;
--color-text-link: #00bfff;
--color-text-linkUrl: #555555;
--color-text-hash-tag: #adb9db;
}
Expand Down Expand Up @@ -141,26 +144,6 @@
.cm-s-obsidian .cm-strong {
color: var(--color-text-strong);
}
.cm-s-obsidian pre.HyperMD-codeblock {
font-family: var(--color-family-secondary);
font-size: var(--color-size-small);
font-weight: 500;
line-height: var(--color-lineheight-max);
}
.cm-s-obsidian .cm-hmd-codeblock {
color: var(--color-text-code);
}
.cm-s-obsidian .CodeMirror-linenumber {
color: var(--color-primary-100);
font-size: var(--color-size-regular);
}
.cm-s-obsidian .CodeMirror-gutter-elt {
padding-right: 10px;
}
.cm-s-obsidian .cm-formatting,
.cm-s-obsidian .CodeMirror-foldmarker {
color: var(--color-primary-100);
}
.cm-s-obsidian .cm-formatting-link,
.cm-s-obsidian .cm-link {
color: var(--color-text-link) !important;
Expand All @@ -177,6 +160,23 @@
.cm-s-obsidian span.cm-quote.cm-formatting {
color: var(--color-primary-100);
}

.cm-s-obsidian pre.HyperMD-codeblock {
font-family: var(--color-family-secondary);
font-size: var(--color-size-small);
font-weight: 500;
line-height: var(--color-lineheight-max);
}
.cm-s-obsidian .cm-hmd-codeblock {
color: var(--color-text-code);
}
.cm-s-obsidian .CodeMirror-linenumber {
color: var(--color-primary-100);
font-size: var(--color-size-regular);
}
.cm-s-obsidian span.cm-inline-code {
color: var(--color-text-code);
}
.cm-s-obsidian span.cm-tag {
color: var(--color-element-markup-tags);
}
Expand All @@ -186,12 +186,22 @@
.cm-s-obsidian span.cm-string {
color: var(--color-element-markup-attribute-value);
}

.cm-s-obsidian .CodeMirror-gutter-elt {
padding-right: 10px;
}
.cm-s-obsidian .cm-formatting,
.cm-s-obsidian .CodeMirror-foldmarker {
color: var(--color-primary-100);
}

.cm-s-obsidian span.cm-formatting-list-ol {
color: var(--color-element-ordered-list-indicator);
}
.cm-s-obsidian span.cm-formatting-list-ul {
color: var(--color-element-unordered-list-indicator);
}

.cm-s-obsidian span.cm-hashtag {
padding: 5px;
color: var(--color-text-hash-tag);
Expand All @@ -217,7 +227,6 @@
white-space: pre-wrap;
}
.markdown-preview-view h1 {
margin-top: 0;
font-size: var(--color-size-5xtra-large);
color: var(--color-title-h1);
}
Expand Down Expand Up @@ -284,10 +293,10 @@
text-decoration: underline;
}
.markdown-preview-view blockquote {
margin-left: 20px;
padding: 20px;
margin: 40px 20px;
padding-left: 40px;
border: unset;
border-left: 3px solid var(--color-primary-500);
border-left: 3px solid var(--color-text-quote-border);
font-style: italic;
}
.markdown-preview-view blockquote p {
Expand Down Expand Up @@ -343,6 +352,12 @@
font-size: var(--color-size-regular);
background-color: unset !important;
}
.markdown-preview-view p code {
padding: 3px 10px;
color: var(--color-text-inline-code);
background-color: var(--color-primary-1100) !important;
border-radius: 5px;
}

.markdown-preview-view p .tag {
padding: 10px;
Expand Down Expand Up @@ -404,17 +419,37 @@ svg {
display: none;
}

.workspace-tab-header-container {
margin-top: 4px;
margin-left: 4px;
height: fit-content;
.nav-header {
margin: 10px;
padding: 0;
}

.nav-header .nav-buttons-container {
justify-content: flex-start;
gap: 10px;
margin-top: 12px;
}
.nav-header .nav-action-button {
margin: 20px 0 10px 0;
display: flex;
justify-content: center;
align-items: center;
padding: 0;
width: 40px;
height: 40px;
border: 1px solid var(--color-primary-1100);
background: var(--color-primary-1100);
border-radius: 50%;
transition: background-color 0.2s ease;
}
.nav-header .nav-action-button:hover {
background-color: #000;
}
.nav-header .nav-action-button:hover svg {
color: var(--color-element-icon-hover);
}
.nav-header .nav-action-button svg {
margin: 0;
padding: 0;
transition: color 0.2s ease;
}

.workspace-tab-container-inner {
Expand All @@ -426,32 +461,55 @@ svg {
background-color: var(--color-primary-1100);
}

.workspace-tab-header {
.workspace-tab-header-container {
margin-top: 10px;
margin-left: 10px;
height: fit-content;
}
.workspace-tab-header-container .workspace-tab-header {
background-color: transparent;
border-radius: 10px;
cursor: pointer;
}

.workspace-tab-header-inner {
padding: 10px;
.workspace-tab-header-container .workspace-tab-header.is-active {
background-color: var(--color-primary-800);
border-radius: 10px;
}

.workspace-tab-header-inner-icon {
.workspace-tab-header-container .workspace-tab-header-inner {
padding: 10px;
}
.workspace-tab-header-container .workspace-tab-header-inner-icon {
display: flex;
justify-content: center;
align-items: center;
}

.workspace-tab-header.is-before-active,
.workspace-tab-header.is-after-active {
.workspace-tab-header-container .workspace-tab-header.is-before-active,
.workspace-tab-header-container .workspace-tab-header.is-after-active,
.workspace-tab-header-container .workspace-tab-header-inner {
background-color: transparent;
}
.workspace-tab-header.is-before-active .workspace-tab-header-inner,
.workspace-tab-header.is-after-active .workspace-tab-header-inner {
.workspace-tab-header-container .workspace-tab-header.is-before-active .workspace-tab-header-inner,
.workspace-tab-header-container .workspace-tab-header.is-after-active .workspace-tab-header-inner,
.workspace-tab-header-container .workspace-tab-header-inner .workspace-tab-header-inner {
background-color: transparent;
}

.view-content .tree-item-inner {
color: var(--color-text-paragraph);
}

.tag-pane-tag-text {
color: var(--color-text-paragraph);
}
.tag-pane-tag-text:before {
content: "# ";
}

.tag-pane-tag-count {
color: var(--color-text-code);
background-color: var(--color-primary-1100);
}

.titlebar {
background-color: var(--color-primary-1000);
}
Expand Down
11 changes: 7 additions & 4 deletions scss/_colors.scss
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,16 @@ $colors: (
1100: #050608,
),
title: (
h1: #00C9A7,
h2: #00C9A7,
h1: #845EC2,
h2: #D65DB1,
h3: #FF6F91,
h4: #FF9671,
h5: #FFC75F,
h6: #c0cdf3,
),
element: (
icon: #adb9db,
icon-hover: #ebeff7,
border: #0a0b0f,
border-light: #484e6d,
ordered-list-indicator: #ebeff7,
Expand All @@ -33,10 +34,12 @@ $colors: (
),
text: (
strong: #ebeff7,
code: #6be399,
code: #00C9A7,
inline-code: #00C9A7,
paragraph: #c0cdf3,
quote: #a1acce,
link: #67a0fb,
quote-border: #a1acce,
link: #00bfff,
linkUrl: #555555,
hash-tag: #adb9db,
),
Expand Down
1 change: 0 additions & 1 deletion scss/modules/editor/TODO:md

This file was deleted.

38 changes: 38 additions & 0 deletions scss/modules/editor/code.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
.cm-s-obsidian {

pre.HyperMD-codeblock {
font-family: font(family, secondary);
font-size: font(size, small);
font-weight: 500;
line-height: font(lineheight, max);
// DEBUG: setting a background-color is currently leading to text-selections is overlayed by the background https://forum.obsidian.md/t/inline-code-occludes-text-selection-and-vim-cursor/11552/8
// background-color: color(primary, 1100);
}

.cm-hmd-codeblock {
color: color(text, code);
}

.CodeMirror-linenumber {
color: color(primary, 100);
font-size: font(size, regular);
}

span.cm-inline-code {
color: color(text, code);
}

// Markup-Styling
span {
&.cm-tag {
color: color(element, markup-tags);
}
&.cm-attribute {
color: color(element, markup-attribute);
}
&.cm-string {
color: color(element, markup-attribute-value);
}
}

}
12 changes: 12 additions & 0 deletions scss/modules/editor/editor.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
.cm-s-obsidian {

.CodeMirror-gutter-elt {
padding-right: 10px;
}

.cm-formatting,
.CodeMirror-foldmarker {
color: color(primary, 100);
}

}
Loading

0 comments on commit 81acd0e

Please sign in to comment.