kbendick commented on a change in pull request #63:
URL: https://github.com/apache/iceberg-docs/pull/63#discussion_r826485656
##########
File path: landing-page/static/css/landing-page.css
##########
@@ -225,3 +227,43 @@ a.page-scroll {
.termynal-container {
padding-top: 3rem;
}
+
+/* Anchor tags for headers */
+.anchortag { font-size: 80%; visibility: hidden;}
+
+h1:hover a { visibility: visible}
+h2:hover a { visibility: visible}
+h3:hover a { visibility: visible}
+h4:hover a { visibility: visible}
+
+/* Fixed table of contents */
+.grid-container {
+ display: grid;
+ grid-template-columns: 5fr 1fr;
+ grid-gap: 10px;
+}
+
+
+#toc {
+ position: fixed;
+ right: 0;
+ top: 0;
+ background-color:#FFF;
+ display: block;
+ flex: 0 0 20rem;
+ font-size: 0.6rem;
+ width: 20rem;
+ min-width: 0;
+ padding: 30px;
+ padding-right: 50px;
+ margin-top: 2rem;
+ list-style-type: none;
+}
+
+#toc ul {
+ list-style: none;
+}
+
+@media screen and (min-width: 401px) and (max-width: 1280px) {
+ #toc { display: none; } /* hide it elsewhere */
+ }
Review comment:
I am and always will be _horrible_ at CSS, but for my own understanding,
this is hiding the TOC if the users screen isn’t between the two sizes?
##########
File path: landing-page/layouts/_default/single.html
##########
@@ -2,11 +2,25 @@
<head>
<link href="{{ .Site.BaseURL }}/css/markdown.css" rel="stylesheet">
<link href="{{ .Site.BaseURL }}/css/katex.min.css" rel="stylesheet">
+ <script>
+ function addAnchor(element) {
+ element.insertAdjacentHTML('beforeend', `<a href="#${element.id}"
class="anchortag" ariaLabel="Anchor"> 🔗 </a>` )
+ }
+ document.addEventListener('DOMContentLoaded', function () {
+ var headers = document.querySelectorAll('h1[id], h2[id], h3[id],
h4[id]')
+ if (headers) {
+ headers.forEach(addAnchor)
+ }
+ });
Review comment:
Should we maybe throw a comment on here to remind us what this does? The
code is relatively clear, but the querySelectorAll has that hard coded `h1[id]
… h4[id]`. Also, will we need to update this if / when we add another header
level?
##########
File path: landing-page/static/css/landing-page.css
##########
@@ -225,3 +227,43 @@ a.page-scroll {
.termynal-container {
padding-top: 3rem;
}
+
+/* Anchor tags for headers */
+.anchortag { font-size: 80%; visibility: hidden;}
+
+h1:hover a { visibility: visible}
+h2:hover a { visibility: visible}
+h3:hover a { visibility: visible}
+h4:hover a { visibility: visible}
+
+/* Fixed table of contents */
+.grid-container {
+ display: grid;
+ grid-template-columns: 5fr 1fr;
+ grid-gap: 10px;
+}
+
+
+#toc {
+ position: fixed;
+ right: 0;
+ top: 0;
+ background-color:#FFF;
+ display: block;
+ flex: 0 0 20rem;
+ font-size: 0.6rem;
+ width: 20rem;
+ min-width: 0;
+ padding: 30px;
+ padding-right: 50px;
Review comment:
Why use px on padding?
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
