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

Better experience for smaller screen sizes

Browse Source
This commit is contained in:
Ole Eskild Steensen 2023-01-08 12:17:13 +01:00
parent 44f642af10
commit 23a1e937e7
6 changed files with 78 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/site/_includes/components/filetree.njk
View File

@ -22,8 +22,8 @@
{%endif%}
{% endmacro %}
<div x-init="isDesktop = (window.innerWidth>=1490) ? true: false;"
x-on:resize.window="isDesktop = (window.innerWidth>=1490) ? true : false;"
<div x-init="isDesktop = (window.innerWidth>=1400) ? true: false;"
x-on:resize.window="isDesktop = (window.innerWidth>=1400) ? true : false;"
x-data="{isDesktop: true, showFilesMobile: false}">
<div x-show.important="!isDesktop">

2
src/site/_includes/components/graphScript.njk
View File

@ -129,5 +129,5 @@
}, 10);
}
renderGraph(330,300);
renderGraph(320,320);
</script>

2
src/site/_includes/components/linkPreview.njk
View File

@ -1,4 +1,4 @@
<!-- All credit for this implementation goes to https://github.com/maximevaillancourt/digital-garden-jekyll-template/blob/master/_includes/link-previews.html -->
<!-- All credit for the link preview implementation goes to https://github.com/maximevaillancourt/digital-garden-jekyll-template/blob/master/_includes/link-previews.html -->
<style>
#tooltip-wrapper {
background: var(--background-primary);

10
src/site/_includes/components/searchButton.njk
View File

@ -1,7 +1,11 @@
<div class="search-button" onclick="toggleSearch()">
<span class="search-icon">
<i class="fa fa-search"></i>
</span>
<span class="search-text">
<span>Search</span>
<div style="font-size: 0.6rem; padding: 2px 2px 0 6px; text-align:center;" class="search-keys">
<span style="font-size: 0.6rem; padding: 2px 2px 0 6px; text-align:center; transform: translateY(4px);" class="search-keys">
CTRL + K
</div>
</div>
</span>
</span>
</div>

2
src/site/_includes/components/sidebar.njk
View File

@ -4,7 +4,7 @@
{%if settings.dgShowLocalGraph === true%}
<div class="graph">
<div style="display: flex; justify-content: flex-end;">
<div class="graph-title-container">
<div class="graph-title">Connected Pages</div>
</div>
<div id="link-graph"></div>

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

@ -8,15 +8,15 @@ body {
}
.content {
max-width: 800px;
max-width: 700px;
margin: auto;
font-size: 22px;
font-size: 18px;
line-height: 1.5;
margin-top: 90px;
position: relative;
@media(max-width: 800px) {
margin-top: 150px;
margin-top: 75px;
}
}
@ -194,6 +194,12 @@ ul.task-list {
}
.graph {
.graph-title-container {
display: flex;
justify-content: flex-end;
}
.graph-title {
width: fit-content;
background-color: var(--background-secondary);
@ -212,7 +218,12 @@ ul.task-list {
width: fit-content;
}
@media(max-width: 1490px) {
@media(max-width: 1400px) {
#link-graph {
border-radius: 0 10px 10px 10px;
}
.sidebar {
position: relative;
transform: none;
@ -220,20 +231,32 @@ ul.task-list {
margin-top: 50px;
max-width: 800px;
margin: auto;
border-radius: 0;
border-top: 2px solid var(--background-secondary);
justify-content: space-between;
}
.sidebar-container{
display: flex;
flex-direction: row;
justify-content: space-between;
}
.graph {
display: none;
flex: 1;
.graph-title-container{
justify-content: flex-start;
}
}
.toc {
display: none;
}
.backlinks {
margin-top: 0;
border-top: 3px solid var(--background-secondary);
border-radius: 0;
}
@media(max-width: 800px) {
.sidebar-container{
display: flex;
flex-direction: column-reverse;
}
}
@ -249,6 +272,19 @@ ul.task-list {
color: var(--text-muted);
overflow-y: auto;
width: 250px;
h1 {
font-size: 32px !important;
}
@media(max-width: 800px) {
h1 {
display: none;
}
.search-button {
width: 100%;
margin: 2px;
}
}
}
.empty-navbar {
@ -277,6 +313,15 @@ ul.task-list {
display: flex;
justify-content: space-between;
align-items: center;
@media(max-width: 1400px) {
position: fixed;
}
@media(max-width: 800px) {
h1 {
font-size: 18px !important;
}
}
.navbar-inner {
display: flex;
@ -287,8 +332,16 @@ ul.task-list {
.search-button {
@media(max-width: 800px) {
min-width: 120px;
margin: 10px 50px 10px 25px;
min-width: 36px;
margin: 10px 25px 10px 25px;
}
}
.search-text {
display: flex;
justify-content: center;
@media(max-width: 800px){
display: none;
}
}
}
@ -425,7 +478,7 @@ ul.task-list {
display: flex;
align-items: center;
min-width: 150px;
margin: 10px 65px;
margin: 10px 40px 10px 10px;
border: 1px solid var(--text-normal);
cursor: pointer;