Themed post content (tables, images, figures, code)
Added theming for tables, inline images, and figures. Inline images are specified using the markdown syntax "![link text](link_href)" somewhere within a paragraph. When a link is specified with the same syntax given previously, Pandoc will generate it as a figure. Figures are displayed across the whole width of the post and inline-images floated to the right. Some javascript was added to js/default.js to enable the ability to click to toggle fullscreen on images and figures. Code blocks were previously themed but the styling needed to be updated due to how an update to how pandoc generates code blocks. Signed-off-by: Collin J. Doering <collin.doering@rekahsoft.ca>
This commit is contained in:
parent
283e4ce8e5
commit
072e3d9870
|
@ -38,6 +38,10 @@ pageComponents = do
|
||||||
businessCard
|
businessCard
|
||||||
tagPageHeading
|
tagPageHeading
|
||||||
srcCodeBlock
|
srcCodeBlock
|
||||||
|
postFigures
|
||||||
|
inlinePostImages
|
||||||
|
postTables
|
||||||
|
statusMessages
|
||||||
|
|
||||||
aPost :: Css
|
aPost :: Css
|
||||||
aPost = do
|
aPost = do
|
||||||
|
@ -159,25 +163,24 @@ tagPageHeading = do
|
||||||
|
|
||||||
srcCodeBlock :: Css
|
srcCodeBlock :: Css
|
||||||
srcCodeBlock = do
|
srcCodeBlock = do
|
||||||
".code-term" # ".sourceCode" ? do
|
div # ".sourceCode" |> (pre <> table) # ".sourceCode" # ".code-term" ? do
|
||||||
display block
|
display block
|
||||||
backgroundColor "#111"
|
backgroundColor "#111"
|
||||||
color white
|
color white
|
||||||
sym borderRadius (px 3)
|
sym borderRadius (px 3)
|
||||||
sym2 padding (em 0.5) nil
|
sym padding (em 0.5)
|
||||||
marginBottom (em 0.75)
|
marginBottom (em 0.75)
|
||||||
overflow auto
|
overflow auto
|
||||||
maxHeight (em 50)
|
maxHeight (em 50)
|
||||||
|
|
||||||
".code-term" ** pre |> code # ".sourceCode" ? do
|
div # ".sourceCode" ** pre # ".code-term" |> code <>
|
||||||
|
div # ".sourceCode" |> table # ".code-term" ** code ? do
|
||||||
backgroundColor inherit
|
backgroundColor inherit
|
||||||
borderStyle none
|
borderStyle none
|
||||||
|
sym padding nil
|
||||||
|
|
||||||
(table # ".sourceCode") <>
|
(table <> tr <> td) # ".sourceCode"
|
||||||
(tr # ".sourceCode") <>
|
<> table # ".sourceCode" ** pre ? do
|
||||||
(td # ".lineNumbers") <>
|
|
||||||
(td # ".sourceCode") <>
|
|
||||||
(table # ".sourceCode" ** pre) ? do
|
|
||||||
sym margin nil
|
sym margin nil
|
||||||
sym padding nil
|
sym padding nil
|
||||||
border none nil black
|
border none nil black
|
||||||
|
@ -193,41 +196,86 @@ srcCodeBlock = do
|
||||||
td # ".sourceCode" ?
|
td # ".sourceCode" ?
|
||||||
paddingLeft (px 5)
|
paddingLeft (px 5)
|
||||||
|
|
||||||
(pre <> code) # ".sourceCode" ** span # ".kw" ? do
|
(pre <> code) # ".sourceCode" ? do
|
||||||
color "#007020"
|
span # ".kw" ? do
|
||||||
fontWeight bold
|
color "#007020"
|
||||||
|
fontWeight bold
|
||||||
|
span # ".dt" ? color "#902000"
|
||||||
|
span # ".dv" ? color "#40a070"
|
||||||
|
span # ".bn" ? color "#40a070"
|
||||||
|
span # ".fl" ? color "#40a070"
|
||||||
|
span # ".ch" ? color "#4070a0"
|
||||||
|
span # ".st" ? color "#4070a0"
|
||||||
|
span # ".co" ? do
|
||||||
|
color "#60a0b0"
|
||||||
|
fontStyle italic
|
||||||
|
span # ".al" ? do
|
||||||
|
color red
|
||||||
|
fontWeight bold
|
||||||
|
span # ".fu" ? color "#06287e"
|
||||||
|
span # ".er" ? do
|
||||||
|
color red
|
||||||
|
fontWeight bold
|
||||||
|
|
||||||
(pre <> code) # ".sourceCode" ** span # ".dt" ?
|
postFigures :: Css
|
||||||
color "#902000"
|
postFigures = do
|
||||||
|
figure ? do
|
||||||
|
border solid (px 1) black
|
||||||
|
sym borderRadius (px 3)
|
||||||
|
clear both
|
||||||
|
|
||||||
(pre <> code) # ".sourceCode" ** span # ".dv" ?
|
figure ? do
|
||||||
color "#40a070"
|
img <? do
|
||||||
|
display block
|
||||||
|
width (pct 100)
|
||||||
|
borderBottom solid (px 1) black
|
||||||
|
cursor pointer
|
||||||
|
|
||||||
(pre <> code) # ".sourceCode" ** span # ".bn" ?
|
figcaption # ":before" <? do
|
||||||
color "#40a070"
|
display inlineBlock
|
||||||
|
content $ stringContent "Fig:"
|
||||||
|
paddingRight (em 1)
|
||||||
|
fontWeight bold
|
||||||
|
|
||||||
(pre <> code) # ".sourceCode" ** span # ".fl" ?
|
figcaption <? do
|
||||||
color "#40a070"
|
sym2 padding nil (em 1)
|
||||||
|
backgroundColor "#B4D1EF"
|
||||||
|
|
||||||
(pre <> code) # ".sourceCode" ** span # ".ch" ?
|
inlinePostImages :: Css
|
||||||
color "#4070a0"
|
inlinePostImages = article # ".post" ? do
|
||||||
|
p |> img <? do
|
||||||
|
clear clearRight
|
||||||
|
float floatRight
|
||||||
|
width (pct 30)
|
||||||
|
border solid (px 1) black
|
||||||
|
sym borderRadius (px 3)
|
||||||
|
sym margin (em 1)
|
||||||
|
cursor pointer
|
||||||
|
|
||||||
(pre <> code) # ".sourceCode" ** span # ".st" ?
|
let fullCss = do
|
||||||
color "#4070a0"
|
width (pct 100)
|
||||||
|
float none
|
||||||
|
p |> img # ":-webkit-full-screen" <? fullCss
|
||||||
|
p |> img # ":-moz-full-screen" <? fullCss
|
||||||
|
p |> img # ":-ms-full-screen" <? fullCss
|
||||||
|
p |> img # ":fullscreen" <? fullCss
|
||||||
|
|
||||||
(pre <> code) # ".sourceCode" ** span # ".co" ? do
|
postTables :: Css
|
||||||
color "#60a0b0"
|
postTables = article # ".post" ? do
|
||||||
fontStyle italic
|
table <? do
|
||||||
|
margin nil auto (em 1) auto
|
||||||
|
thead ? do
|
||||||
|
backgroundColor "#ACBDEA"
|
||||||
|
tbody <? do
|
||||||
|
tr # ".odd" ? backgroundColor "#DFEAFF"
|
||||||
|
tr # ".even" ? backgroundColor "#E3E3F0"
|
||||||
|
caption ? backgroundColor "#f5f5f5"
|
||||||
|
|
||||||
(pre <> code) # ".sourceCode" ** span # ".al" ? do
|
table <? do
|
||||||
color red
|
(th <> td) # ":first-child" ? paddingLeft (px 14)
|
||||||
fontWeight bold
|
(th <> td) # ":last-child" ? paddingRight (px 14)
|
||||||
|
|
||||||
(pre <> code) # ".sourceCode" ** span # ".fu" ?
|
statusMessages :: Css
|
||||||
color "#06287e"
|
statusMessages = "#status" ? do
|
||||||
|
".close-button" <? float floatRight
|
||||||
-- (pre <> code) # ".sourceCode" ** span # ".re"
|
".message" <? marginBottom nil
|
||||||
|
|
||||||
(pre <> code) # ".sourceCode" ** span # ".er" ? do
|
|
||||||
color red
|
|
||||||
fontWeight bold
|
|
||||||
|
|
|
@ -216,6 +216,14 @@
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Add fullscreen functionality to inline-images and figures
|
||||||
|
$('article.post p > img').click(function () {
|
||||||
|
$(this).get(0).toggleFullScreen();
|
||||||
|
});
|
||||||
|
$('figure').click(function () {
|
||||||
|
$(this).children('img').get(0).toggleFullScreen();
|
||||||
|
});
|
||||||
|
|
||||||
// Run current handles onSuccess callback (if it exists)
|
// Run current handles onSuccess callback (if it exists)
|
||||||
if (handlerCallback.hasOwnProperty('onSuccess') && typeof handlerCallback.onSuccess === 'function') {
|
if (handlerCallback.hasOwnProperty('onSuccess') && typeof handlerCallback.onSuccess === 'function') {
|
||||||
handlerCallback.onSuccess();
|
handlerCallback.onSuccess();
|
||||||
|
@ -281,3 +289,31 @@
|
||||||
|
|
||||||
page.init(router);
|
page.init(router);
|
||||||
}(jQuery, MathJax));
|
}(jQuery, MathJax));
|
||||||
|
|
||||||
|
// Modified from: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
|
||||||
|
function toggleFullScreen() {
|
||||||
|
if (!document.fullscreenElement && // alternative standard method
|
||||||
|
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods
|
||||||
|
if (document.documentElement.requestFullscreen) {
|
||||||
|
this.requestFullscreen();
|
||||||
|
} else if (document.documentElement.msRequestFullscreen) {
|
||||||
|
this.msRequestFullscreen();
|
||||||
|
} else if (document.documentElement.mozRequestFullScreen) {
|
||||||
|
this.mozRequestFullScreen();
|
||||||
|
} else if (document.documentElement.webkitRequestFullscreen) {
|
||||||
|
this.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (document.exitFullscreen) {
|
||||||
|
document.exitFullscreen();
|
||||||
|
} else if (document.msExitFullscreen) {
|
||||||
|
document.msExitFullscreen();
|
||||||
|
} else if (document.mozCancelFullScreen) {
|
||||||
|
document.mozCancelFullScreen();
|
||||||
|
} else if (document.webkitExitFullscreen) {
|
||||||
|
document.webkitExitFullscreen();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Element.prototype.toggleFullScreen = toggleFullScreen;
|
||||||
|
|
Loading…
Reference in New Issue