head.html is injected with a wrapping <div> within <head>
applejag opened this issue · 3 comments
applejag commented
I tried adding head.html to have some custom styling.
Worked fine in v1.9.9.1, and then I updated to 1.9.22.2 and now it does not work. Sorry that it's kind of a big version gap.
Expected
<html>
<head>
<title>My neuron page</title>
<!-- my head.html is embedded here -->
</head>
</html>Actual
<html>
<head>
<title>My neuron page</title>
<div class="pandoc-raw-html-block">
<!-- my head.html is embedded here -->
</div>
</head>
</html>There some extra <div> there, inside the <head> tag.
I'm also getting a new <style> tag that is overriding my custom CSS, something that did not interfere with my styling in 1.9.9.1.
The whole newly added `<style>` tag
The CSS was minified, but I've "beautified" it here just for readability.
<style type="text/css">
body {
background-color: #eeeeee !important;
font-family: "Libre Franklin", serif !important
}
body .ui.container {
font-family: "Libre Franklin", serif !important
}
body h1,
h2,
h3,
h4,
h5,
h6,
.ui.header,
.headerFont {
font-family: "Merriweather", sans-serif !important
}
body code,
pre,
tt,
.monoFont {
font-family: "Roboto Mono", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace !important
}
body div.z-index p.info {
color: #808080
}
body div.z-index ul {
list-style-type: square;
padding-left: 1.5em
}
body div.z-index .uplinks {
margin-left: 0.29999em
}
body .zettel-content h1#title-h1 {
background-color: rgba(0, 181, 173, 0.1)
}
body nav.bottomPane {
background-color: rgba(0, 181, 173, 2.0e-2)
}
body div#footnotes {
border-top-color: #00b5ad
}
body p {
line-height: 150%
}
body img {
max-width: 100%
}
body .deemphasized {
font-size: 0.94999em
}
body .deemphasized:hover {
opacity: 1
}
body .deemphasized:not(:hover) {
opacity: 0.69999
}
body .deemphasized:not(:hover) a {
color: #808080 !important
}
body div.container.universe {
padding-top: 1em
}
body div.zettel-view ul {
padding-left: 1.5em;
list-style-type: square
}
body div.zettel-view .pandoc .highlight {
background-color: #ffff00
}
body div.zettel-view .pandoc .ui.disabled.fitted.checkbox {
margin-right: 0.29999em;
vertical-align: middle
}
body div.zettel-view .zettel-content .metadata {
margin-top: 1em
}
body div.zettel-view .zettel-content .metadata div.date {
text-align: center;
color: #808080
}
body div.zettel-view .zettel-content h1 {
padding-top: 0.2em;
padding-bottom: 0.2em;
text-align: center
}
body div.zettel-view .zettel-content h2 {
border-bottom: solid 1px #4682b4;
margin-bottom: 0.5em
}
body div.zettel-view .zettel-content h3 {
margin: 0px 0px 0.4em 0px
}
body div.zettel-view .zettel-content h4 {
opacity: 0.8
}
body div.zettel-view .zettel-content div#footnotes {
margin-top: 4em;
border-top-style: groove;
border-top-width: 2px;
font-size: 0.9em
}
body div.zettel-view .zettel-content div#footnotes ol>li>p:only-of-type {
display: inline;
margin-right: 0.5em
}
body div.zettel-view .zettel-content aside.footnote-inline {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
background-color: #d3d3d3
}
body div.zettel-view .zettel-content .overflows {
overflow: auto
}
body div.zettel-view .zettel-content code {
margin: auto auto auto auto;
font-size: 100%
}
body div.zettel-view .zettel-content p code,
li code,
ol code {
padding: 0.2em 0.2em 0.2em 0.2em;
background-color: #f5f2f0
}
body div.zettel-view .zettel-content pre {
overflow: auto
}
body div.zettel-view .zettel-content dl dt {
font-weight: bold
}
body div.zettel-view .zettel-content blockquote {
background-color: #f9f9f9;
border-left: solid 10px #cccccc;
margin: 1.5em 0px 1.5em 0px;
padding: 0.5em 10px 0.5em 10px
}
body div.zettel-view .zettel-content.raw {
background-color: #dddddd
}
body .ui.label.zettel-tag {
color: #000000
}
body .ui.label.zettel-tag a {
color: #000000
}
body nav.bottomPane ul.backlinks>li {
padding-bottom: 0.4em;
list-style-type: disc
}
body nav.bottomPane ul.context-list>li {
list-style-type: lower-roman
}
body .footer-version img {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%)
}
body .footer-version img:hover {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: grayscale(0%)
}
body .footer-version,
.footer-version a,
.footer-version a:visited {
color: #808080
}
body .footer-version a {
font-weight: bold
}
body .footer-version {
margin-top: 1em !important;
font-size: 0.69999em
}
@media only screen and (max-width: 768px) {
body div#zettel-container {
margin-left: 0.4em !important;
margin-right: 0.4em !important
}
}
body span.zettel-link-container span.zettel-link a {
color: #00b5ad;
font-weight: bold;
text-decoration: none
}
body span.zettel-link-container span.zettel-link a:hover {
background-color: rgba(0, 181, 173, 0.1)
}
body span.zettel-link-container span.extra {
color: auto
}
body span.zettel-link-container.errors {
border: solid 1px #ff0000
}
body span.zettel-link-container.errors span.zettel-link a:hover {
text-decoration: none !important;
cursor: not-allowed
}
body [data-tooltip]:after {
font-size: 0.69999em
}
body div.tag-tree div.node {
font-weight: bold
}
body div.tag-tree div.node a.inactive {
color: #555555
}
body .tree.flipped {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg)
}
body .tree {
overflow: auto
}
body .tree ul.root {
padding-top: 0px;
margin-top: 0px
}
body .tree ul {
position: relative;
padding: 1em 0px 0px 0px;
white-space: nowrap;
margin: 0px auto 0px auto;
text-align: center
}
body .tree ul::after {
content: "";
display: table;
clear: both
}
body .tree ul:last-child {
padding-bottom: 0.1em
}
body .tree li {
display: inline-block;
vertical-align: top;
text-align: center;
list-style-type: none;
position: relative;
padding: 1em 0.5em 0em 0.5em
}
body .tree li::before {
content: "";
position: absolute;
top: 0px;
right: 50%;
border-top: solid 2px #cccccc;
width: 50%;
height: 1.19999em
}
body .tree li::after {
content: "";
position: absolute;
top: 0px;
right: 50%;
border-top: solid 2px #cccccc;
width: 50%;
height: 1.19999em
}
body .tree li::after {
right: auto;
left: 50%;
border-left: solid 2px #cccccc
}
body .tree li:only-child {
padding-top: 0em
}
body .tree li:only-child::after {
display: none
}
body .tree li:only-child::before {
display: none
}
body .tree li:first-child::before {
border-style: none;
border-width: 0px
}
body .tree li:first-child::after {
border-radius: 5px 0px 0px 0px
}
body .tree li:last-child::after {
border-style: none;
border-width: 0px
}
body .tree li:last-child::before {
border-right: solid 2px #cccccc;
border-radius: 0px 5px 0px 0px
}
body .tree ul ul::before {
content: "";
position: absolute;
top: 0px;
left: 50%;
border-left: solid 2px #cccccc;
width: 0px;
height: 1.19999em
}
body .tree li div.forest-link {
border: solid 2px #cccccc;
padding: 0.2em 0.29999em 0.2em 0.29999em;
text-decoration: none;
display: inline-block;
border-radius: 5px 5px 5px 5px;
color: #333333;
position: relative;
top: 2px
}
body .tree.flipped li div.forest-link {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg)
}
</style>This "hardcoded" CSS is overriding my custom CSS. Can I disable it somehow?
Thanks in advance!
Edit: Removing my head.html file and letting neuron specify the default head elements, then they are not embedded within a <div> within <head>. This only happens when I have a head.html file.
The "hardcoded" CSS is always there though, no matter if I add a head.html or not.
Edit again: I was able to override everything from the CSS I mentioned. I kind of guess now that it was the theme implied by neuron. It was not that much that conflicted with my styling so I was able to find all the conflicts and override them in my custom CSS.
The <head> <div> problem still lives though, but nothing that obstructs me. My browser at least handles it and renders everything as if it was fine, even though it's probably very much outside the HTML spec.
srid commented
The `div` wrapper should be removed, but the style element has always existed (it was not newly added); you can override the styles individually using `!important` ... or are you asking for a way to tell neuron not to generate its CSS (if so, why not remove the style element using JS?)?
**Edit**: Okay, yes - the div wrapper doesn't make things less functional, but nevertheless should be removed owing to violating the spec.