davejansen/Ghost-Theme-Source
1
0
Fork 0
Code Issues Pull Requests Activity

Improved HTML table rendering

Browse Source 
fixes #17
This commit is contained in:
Sodbileg Gansukh
2024-01-03 16:17:55 +07:00
parent c060944364
commit ebc4792154
6 changed files with 36 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/built/screen.css
View File

File diff suppressed because one or more lines are too long

2
assets/built/screen.css.map
View File

File diff suppressed because one or more lines are too long

2
assets/built/source.js
View File

File diff suppressed because one or more lines are too long

2
assets/built/source.js.map
View File

File diff suppressed because one or more lines are too long

49
assets/css/screen.css
View File

@@ -2204,51 +2204,42 @@ unless a heading is the very first element in the post content */
border: 0;
}
.gh-content table:not(.gist table) {
display: inline-block;
width: auto;
max-width: 100%;
overflow-x: auto;
.gh-content .gh-table {
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
.gh-content .gh-table table {
width: 100%;
font-family: var(--font-sans);
font-size: 1.6rem;
font-size: 1.5rem;
white-space: nowrap;
vertical-align: top;
border-spacing: 0;
border-collapse: collapse;
-webkit-overflow-scrolling: touch;
background: radial-gradient(ellipse at left, rgb(0 0 0 / 0.2) 0%, rgb(0 0 0 / 0) 75%) 0 center, radial-gradient(ellipse at right, rgb(0 0 0 / 0.2) 0%, rgb(0 0 0 / 0) 75%) 100% center;
background-repeat: no-repeat;
background-attachment: scroll, scroll;
background-size: 10px 100%, 10px 100%;
}
.gh-content table:not(.gist table) td:first-child {
background-image: linear-gradient(to right, rgb(255 255 255 / 1) 50%, rgb(255 255 255 / 0) 100%);
background-repeat: no-repeat;
background-size: 20px 100%;
}
.gh-content table:not(.gist table) td:last-child {
background-image: linear-gradient(to left, rgb(255 255 255 / 1) 50%, rgb(255 255 255 / 0) 100%);
background-repeat: no-repeat;
background-position: 100% 0;
background-size: 20px 100%;
}
.gh-content table:not(.gist table) th {
.gh-content .gh-table table th {
font-size: 1.2rem;
font-weight: 700;
color: var(--color-darkgrey);
text-align: left;
text-transform: uppercase;
letter-spacing: 0.2px;
background-color: var(--color-white);
}
.gh-content table:not(.gist table) th,
.gh-content table:not(.gist table) td {
.gh-content .gh-table table :is(th, td),
.gh-content .gh-table table td {
padding: 6px 12px;
border: 1px solid var(--color-light-gray);
border-bottom: 1px solid var(--color-border);
}
.gh-content .gh-table table :is(th, td):first-child {
padding-left: 0;
}
.gh-content .gh-table table :is(th, td):last-child {
padding-right: 0;
}
/* 16. Cards

12
assets/js/main.js
View File

@@ -45,4 +45,16 @@
if (!document.body.classList.contains('home-template') && !document.body.classList.contains('post-template')) {
pagination();
}
})();
/* Responsive HTML table */
(function () {
const tables = document.querySelectorAll('.gh-content > table:not(.gist table)');
const wrapper = document.createElement('div');
wrapper.className = 'gh-table';
tables.forEach(function (table) {
table.parentNode.insertBefore(wrapper, table);
wrapper.appendChild(table);
});
})();