tcsenpai/obsidiangarden_netlify
1
0
Fork 0
mirror of https://github.com/tcsenpai/obsidiangarden_netlify.git synced 2025-06-06 20:55:21 +00:00
Code Issues 5 Packages Projects Releases Wiki Activity

fixes for styles and meta

Browse Source
This commit is contained in:
Utsob Roy 2023-02-11 20:06:20 +06:00
parent 09ae915992
commit 3a1cdaebda
3 changed files with 76 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/site/_data/meta.js
View File

@ -20,15 +20,21 @@ module.exports = async () => {
title: false, title: false,
default: process.env.MATURITY_DEFAULT, default: process.env.MATURITY_DEFAULT,
}; };
if (process.env.MATURITY_TITLE) { if (process.env.MATURITY_TITLE && process.env.MATURITY_TITLE == "true") {
bodyClasses.push("title-maturity"); bodyClasses.push("title-maturity");
maturitySettings.title = true; maturitySettings.title = true;
} }
if (process.env.MATURITY_FILETREE) { if (
process.env.MATURITY_FILETREE &&
process.env.MATURITY_FILETREE == "true"
) {
bodyClasses.push("filetree-maturity"); bodyClasses.push("filetree-maturity");
maturitySettings.filetree = true; maturitySettings.filetree = true;
} }
if (process.env.MATURITY_INTERNAL_LINKS) { if (
process.env.MATURITY_INTERNAL_LINKS &&
process.env.MATURITY_INTERNAL_LINKS == "true"
) {
bodyClasses.push("links-maturity"); bodyClasses.push("links-maturity");
maturitySettings.links = true; maturitySettings.links = true;
} }

126
src/site/styles/digital-garden-base.scss
View File

@ -5,6 +5,9 @@
body { body {
overflow-x: hidden; overflow-x: hidden;
--maturity-icon-1: url(/img/tree-1.svg);
--maturity-icon-2: url(/img/tree-2.svg);
--maturity-icon-3: url(/img/tree-3.svg);
} }
.content { .content {
@ -15,16 +18,15 @@ body {
margin-top: 90px; margin-top: 90px;
position: relative; position: relative;
@media(max-width: 800px) { @media (max-width: 800px) {
margin-top: 75px; margin-top: 75px;
} }
} }
.external-link { .external-link {
background-position: center right; background-position: center right;
background-repeat: no-repeat; background-repeat: no-repeat;
background-image: linear-gradient(transparent, transparent), url('/img/outgoing.svg'); background-image: linear-gradient(transparent, transparent), url("/img/outgoing.svg");
background-size: 13px; background-size: 13px;
padding-right: 16px; padding-right: 16px;
background-position-y: 4px; background-position-y: 4px;
@ -88,10 +90,10 @@ ul.task-list {
} }
.toc-container { .toc-container {
font-size: 1rem; font-size: 1rem;
max-height: 220px; max-height: 220px;
overflow-y: auto; overflow-y: auto;
margin-bottom:10px; margin-bottom: 10px;
border-left: 1px solid var(--text-accent); border-left: 1px solid var(--text-accent);
ul { ul {
list-style-type: none; list-style-type: none;
@ -100,19 +102,19 @@ ul.task-list {
margin-bottom: 0; margin-bottom: 0;
} }
ul:not(:first-child) { ul:not(:first-child) {
margin-bottom:3px; margin-bottom: 3px;
} }
li{ li {
padding-top: 4px; padding-top: 4px;
&::before{ &::before {
content: '# ' !important; content: "# " !important;
color: var(--text-accent); color: var(--text-accent);
font-size: 0.8rem; font-size: 0.8rem;
} }
a{ a {
text-decoration: none; text-decoration: none;
&:hover{ &:hover {
text-decoration: underline; text-decoration: underline;
} }
} }
@ -149,7 +151,7 @@ ul.task-list {
border-left: 1px solid var(--text-accent); border-left: 1px solid var(--text-accent);
max-height: 200px; max-height: 200px;
overflow-y: auto; overflow-y: auto;
overflow-x:hidden; overflow-x: hidden;
} }
.backlink-card { .backlink-card {
@ -164,15 +166,14 @@ ul.task-list {
} }
} }
.no-backlinks-message{ .no-backlinks-message {
font-size: 0.8rem; font-size: 0.8rem;
color: var(--text-normal); color: var(--text-normal);
} }
.graph { .graph {
.graph-title-container { .graph-title-container {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
width: 320px; width: 320px;
} }
@ -195,9 +196,7 @@ ul.task-list {
width: fit-content; width: fit-content;
} }
@media (max-width: 1400px) {
@media(max-width: 1400px) {
#link-graph { #link-graph {
border-radius: 0 10px 10px 10px; border-radius: 0 10px 10px 10px;
} }
@ -209,11 +208,11 @@ ul.task-list {
max-width: 700px; max-width: 700px;
margin: auto; margin: auto;
border-radius: 0; border-radius: 0;
border-top: 2px solid var(--background-secondary); border-top: 2px solid var(--background-secondary);
justify-content: space-between; justify-content: space-between;
} }
.sidebar-container{ .sidebar-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
@ -221,7 +220,7 @@ ul.task-list {
.graph { .graph {
flex: 1; flex: 1;
.graph-title-container{ .graph-title-container {
justify-content: flex-start; justify-content: flex-start;
} }
} }
@ -230,8 +229,8 @@ ul.task-list {
display: none; display: none;
} }
} }
@media(max-width: 800px) { @media (max-width: 800px) {
.sidebar-container{ .sidebar-container {
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
} }
@ -252,7 +251,7 @@ ul.task-list {
h1 { h1 {
font-size: 32px !important; font-size: 32px !important;
} }
@media(max-width: 800px) { @media (max-width: 800px) {
h1 { h1 {
display: none; display: none;
} }
@ -269,7 +268,7 @@ ul.task-list {
justify-content: flex-end; justify-content: flex-end;
margin-bottom: -60px; margin-bottom: -60px;
@media(max-width: 800px) { @media (max-width: 800px) {
justify-content: center; justify-content: center;
} }
@ -290,11 +289,11 @@ ul.task-list {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@media(max-width: 1400px) { @media (max-width: 1400px) {
position: fixed; position: fixed;
} }
@media(max-width: 800px) { @media (max-width: 800px) {
h1 { h1 {
font-size: 18px !important; font-size: 18px !important;
} }
@ -307,8 +306,7 @@ ul.task-list {
} }
.search-button { .search-button {
@media (max-width: 800px) {
@media(max-width: 800px) {
min-width: 36px; min-width: 36px;
margin: 10px 25px 10px 25px; margin: 10px 25px 10px 25px;
} }
@ -317,7 +315,7 @@ ul.task-list {
.search-text { .search-text {
display: flex; display: flex;
justify-content: center; justify-content: center;
@media(max-width: 800px){ @media (max-width: 800px) {
display: none; display: none;
} }
} }
@ -325,7 +323,7 @@ ul.task-list {
.notelink { .notelink {
padding: 5px 0 5px 25px; padding: 5px 0 5px 25px;
a{ a {
&:hover { &:hover {
text-decoration: underline !important; text-decoration: underline !important;
} }
@ -361,10 +359,9 @@ ul.task-list {
right: 0; right: 0;
left: 0; left: 0;
bottom: 0; bottom: 0;
z-index: 5 z-index: 5;
} }
.search-container { .search-container {
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
position: fixed; position: fixed;
@ -400,7 +397,6 @@ ul.task-list {
font-size: 2rem; font-size: 2rem;
background-color: var(--background-primary); background-color: var(--background-primary);
color: var(--text-primary); color: var(--text-primary);
} }
.search-box input:focus { .search-box input:focus {
@ -425,7 +421,7 @@ ul.task-list {
font-size: 1.2rem; font-size: 1.2rem;
cursor: pointer; cursor: pointer;
&.active{ &.active {
border: 2px solid var(--text-accent); border: 2px solid var(--text-accent);
} }
} }
@ -459,25 +455,21 @@ ul.task-list {
border: 1px solid var(--text-normal); border: 1px solid var(--text-normal);
cursor: pointer; cursor: pointer;
>span { > span {
padding: 3px 3px 3px 10px; padding: 3px 3px 3px 10px;
} }
>i { > i {
margin-left: 10px; margin-left: 10px;
} }
&:hover { &:hover {
border: 1px solid var(--text-accent); border: 1px solid var(--text-accent);
} }
} }
.search-keys { .search-keys {
@media(max-width: 800px) { @media (max-width: 800px) {
display: none; display: none;
} }
} }
@ -487,12 +479,12 @@ ul.task-list {
.callout-icon, .callout-icon,
.callout-fold, .callout-fold,
.callout-content { .callout-content {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.callout-fold{ .callout-fold {
cursor: pointer; cursor: pointer;
} }
.callout-title { .callout-title {
@ -501,10 +493,10 @@ ul.task-list {
} }
.callout { .callout {
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
word-wrap: break-word; word-wrap: break-word;
display: block; display: block;
font-size: 1rem; font-size: 1rem;
} }
.callout.is-collapsed { .callout.is-collapsed {
@ -524,13 +516,11 @@ ul.task-list {
.referred { .referred {
border: 1px dashed; border: 1px dashed;
border-color: var(--text-accent); border-color: var(--text-accent);
padding: 10px; padding: 10px;
margin-left: -10px; margin-left: -10px;
margin-right: -10px; margin-right: -10px;
} }
// Graph Controls // Graph Controls
.graph-title-container { .graph-title-container {
position: relative; position: relative;
@ -585,7 +575,7 @@ ul.task-list {
flex-direction: row; flex-direction: row;
align-items: flex-start; align-items: flex-start;
gap: 7px; gap: 7px;
.slider { .slider {
datalist { datalist {
display: flex; display: flex;
@ -616,7 +606,25 @@ ul.task-list {
} }
} }
input[type=range]::-webkit-slider-thumb { input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
margin-top: -10px; margin-top: -10px;
}
body.title-maturity .cm-s-obsidian > header > h1[data-maturity="1"]::before,
body.filetree-maturity .filename[data-maturity="1"]::before,
body.links-maturity .internal-link[data-maturity="1"]::before {
background-image: var(--maturity-icon-1);
}
body.title-maturity .cm-s-obsidian > header > h1[data-maturity="2"]::before,
body.filetree-maturity .filename[data-maturity="2"]::before,
body.links-maturity .internal-link[data-maturity="2"]::before {
background-image: var(--maturity-icon-2);
}
body.title-maturity .cm-s-obsidian > header > h1[data-maturity="3"]::before,
body.filetree-maturity .filename[data-maturity="3"]::before,
body.links-maturity .internal-link[data-maturity="3"]::before {
background-image: var(--maturity-icon-3);
} }

33
src/site/styles/style.scss
View File

@ -18,10 +18,6 @@
--callout-title-padding: 0; --callout-title-padding: 0;
--callout-title-size: inherit; --callout-title-size: inherit;
--callout-content-padding: 0; --callout-content-padding: 0;
--maturity-icon-1: url(/img/tree-1.svg);
--maturity-icon-2: url(/img/tree-2.svg);
--maturity-icon-3: url(/img/tree-3.svg);
} }
h1 { h1 {
@ -221,32 +217,3 @@ p > code {
.callout.is-collapsed .callout-fold .svg-icon { .callout.is-collapsed .callout-fold .svg-icon {
transform: rotate(-90deg); transform: rotate(-90deg);
} }
body.title-maturity .cm-s-obsidian > header > h1[data-maturity]::before,
body.filetree-maturity .filename[data-maturity]::before,
body.links-maturity .internal-link[data-maturity]::before {
content: " ";
display: inline-block;
width: 1em;
height: 1em;
background-size: contain;
background-repeat: no-repeat;
}
body.title-maturity .cm-s-obsidian > header > h1[data-maturity="1"]::before,
body.filetree-maturity .filename[data-maturity="1"]::before,
body.links-maturity .internal-link[data-maturity="1"]::before {
background-image: var(--maturity-icon-1);
}
body.title-maturity .cm-s-obsidian > header > h1[data-maturity="2"]::before,
body.filetree-maturity .filename[data-maturity="2"]::before,
body.links-maturity .internal-link[data-maturity="2"]::before {
background-image: var(--maturity-icon-2);
}
body.title-maturity .cm-s-obsidian > header > h1[data-maturity="3"]::before,
body.filetree-maturity .filename[data-maturity="3"]::before,
body.links-maturity .internal-link[data-maturity="3"]::before {
background-image: var(--maturity-icon-3);
}