HugoBlox / hugo-blox-builder

🚨 GROW YOUR AUDIENCE WITH HUGOBLOX! 🚀 HugoBlox is an easy, fast no-code website builder for researchers, entrepreneurs, data scientists, and developers. Build stunning sites in minutes. 适合研究人员、企业家、数据科学家和开发者的简单快速无代码网站构建器。用拖放功能、可定制模板和内置SEO工具快速创建精美网站!
https://hugoblox.com/templates/
MIT License
8.2k stars 2.9k forks source link

Suggests for table width and foreground color of tables in dark mode #1828

Closed presnell closed 4 years ago

presnell commented 4 years ago

I have run up against two issues, either of which might be considered bugs, although the second is arguably just a consequence of doing things in a nonstandard way . I have achieved the behavior I want by inserting the necessary code into my assets/scss/custom.scss file, but I wonder if these should not be the defaults, or at least a more easily configurable option.

The first issue has been mentioned here before: although the code in themes/academic/assets/scss/academic/_root.scss suggest that tables will expand to 100% of the page width, in fact they are only as wide as they need to be to comfortably fit their content. If you change "block" to "table" in the following section of code from that file, then you actually do get full width tables which, as far I can tell, behave the same in every other way:

table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1rem;
  font-size: 0.8rem;
}

The second issue occurs when hugo uses the pandoc helper to process a pandoc-markdown (pdc) file (produced by rmarkdown::render) which happens to have a literal html table imbedded in it. In this situation at least, the table font in dark mode is black, i.e., the color of the main body font is not inherited. I'm not exactly sure where this is being blocked (perhaps by the <div class = universal-wrapper ...> that is inserted?), but it is easily fixed by adding the 6th line below to themes/academic/assets/scss/academic/_dark.scss. Again, I have not seen any negative consequences of this change in my (limited) experimentation.

body.dark,
.dark .docs-toc-link,
.dark .docs-sidebar .nav > li:not(.active) > a,
.dark .modal button.close,
.dark input,
.dark table,
.dark .form-control,
.dark .form-control:focus {
  color: rgb(248, 248, 242);
  background: $sta-dark-background;
}

P.S. Thanks so much for the academic theme. It's really great.

stale[bot] commented 4 years ago

This issue has been automatically marked as stale because it has not had any recent activity. The resources of the Academic team are limited, and so we are asking for your help. If this is a bug and you can still reproduce this error on the master branch, please reply with all of the information you have about it in order to keep the issue open. If this is a feature request, and you feel that it is still relevant and valuable, please tell us why. This issue will automatically close soon if no further activity occurs. Thank you for your contributions.