Merge pull request #3 from wblondel/TryGhost-main

Update from TryGhost/Source

assets/css/screen.css

@@ -515,6 +515,7 @@ button.gh-form-input {
  gap: 24px;
  align-items: center;
  justify-content: flex-end;
+ background-color: var(--background-color);
 }
 
 .gh-navigation-members {
@@ -2143,6 +2144,11 @@ unless a heading is the very first element in the post content */
 }
 
 /* Now the content typography styles */
+.gh-content h1 {
+ font-size: calc(2.2em * var(--factor, 1));
+ letter-spacing: -0.02em;
+}
+
 .gh-content h2 {
  font-size: calc(1.6em * var(--factor, 1));
  letter-spacing: -0.02em;
@@ -2198,51 +2204,63 @@ 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;
+}
+
+.gh-content pre {
+ overflow: auto;
+ padding: 16px;
+ font-size: 1.5rem;
+ line-height: 1.5em;
+ background: var(--color-lighter-gray);
+ border-radius: 6px;
+ font-family: var(--font-mono);
+}
+
+.gh-content :not(pre) > code {
+ vertical-align: baseline;
+ padding: 0.15em 0.4em;
+ font-weight: 400;
+ font-size: 0.95em;
+ line-height: 1em;
+ background: var(--color-lighter-gray);
+ border-radius: 0.25em;
+ font-family: var(--font-mono);
 }
 
 /* 16. Cards

assets/js/casper.js → assets/js/main.js

@@ -7,8 +7,10 @@
  burger.addEventListener('click', function () {
  if (!navigation.classList.contains('is-open')) {
  navigation.classList.add('is-open');
+ document.documentElement.style.overflowY = 'hidden';
  } else {
  navigation.classList.remove('is-open');
+ document.documentElement.style.overflowY = null;
  }
  });
 })();
@@ -43,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);
+ });
 })();

partials/components/navigation.hbs

@@ -10,7 +10,7 @@
  {{/if}}
  </a>
  {{> "search-toggle"}}
- <button class="gh-burger gh-icon-button">
+ <button class="gh-burger gh-icon-button" aria-label="Menu">
  {{> "icons/burger"}}
  {{> "icons/close"}}
  </button>

partials/email-subscription.hbs

@@ -1,6 +1,6 @@
 <form class="gh-form" data-members-form>
  <input class="gh-form-input" type="email" placeholder="[email protected]" required data-members-email>
- <button class="gh-button" type="submit">
+ <button class="gh-button" type="submit" aria-label="Subscribe">
  <span><span>{{t "Subscribe"}}</span> {{> "icons/arrow"}}</span>
  {{> "icons/loader"}}
  {{> "icons/checkmark"}}