simple template with good footnotes
tlienart opened this issue · comments
I really like this theme. Are you planning on making a template from it?
Eventually yes. It's always faster if someone else than me picks it up and I help out on the details though :)
I might have some time on the weekend to make a start. Will let you know.
I've started porting this template, I think it looks pretty good already, but there's still a few things to do. Mainly to fix the nav, currently it's not responsive, the hamburger menu is always shown. Also for some reason a.visited is applied although I think the css is not different from the original there. Finally, I'm not sure what to do with the footnotes, as they are currently in a table (not sure if that's because I started off the "basic" template, or if that's always the case) and in the original they are in simple div. I kind of like the table better though.
I made you a collaborator in my fork, would be cool if you could take a look. There is also the question about the post title - the original has a header for the post title which also contains the creation date, whereas in all the Franklin templates I believe the post title is just an h1. The way I've implemented this is that you can specify a variable posttitle, in that case the header with date will be added and in the body you should then probably only use heading starting from h2. If you want the old layout, you just use h1 and don't define the posttitle var. Let me know what you think about this approach. Also is there a variable for creation time rather than last modified?
Thanks for taking this on @iuvbio ! I'll take a look and maybe we can use your repo and open an issue there for each specific points/issue you raised?
- date: yes you can use
fd_ctime, though I would recommend letting the user specifypubdate = ...and use that in the title as then they're sure of what they'll get and can update it posttitle, I would suggest a small alternative but I'm happy for you to keep things exactly as they are
<header class="post-header">
<h1 class="post-title" itemprop="name headline">{{ fill title }}</h1>
{{isdef pubdate}}
<p class="post-meta"><time datetime="{{ fill pubdate }}" itemprop="datePublished">{{ fill pubdate }}</time></p>
{{end}}
{{isndef pubdate}}
<p class="post-meta"><time datetime="{{ fill fd_ctime }}" itemprop="datePublished">{{ fill fd_ctime }}</time></p>
{{end}}
</header>I'm looking at the CSS now. Will comment when I've figured it out.
Note: one thing you need to do is extend src/FranklinTemplates.jl to add nomplex in there. It will also need to be added to the gallery (see the README for this).
The CSS for the nav-bar should be refactored. Here are a few changes that seem to work and help. You might want to grab the full code from an example demo that fully works though in order to reproduce a specific effect. (In the case below, the menu is always hidden unless you hover, you might want to add a smoothing effect or a delay in the hiding behaviour for it to look better, or you might want to only make the hamburger visible below 600px etc).
A few hamburger menus that can be looked at
- https://codepen.io/erikterwan/pen/EVzeRP
- https://dev.to/devggaurav/let-s-build-a-responsive-navbar-and-hamburger-menu-using-html-css-and-javascript-4gci
- https://codepen.io/markcaron/pen/pPZVWO (probably close to what you had in mind) comes from https://medium.com/@heyoka/responsive-pure-css-off-canvas-hamburger-menu-aebc8d11d793
- this one is also pretty good: https://codepen.io/mutedblues/pen/MmPNPG
header.html
<header class="site-header">
<div class="wrapper">
<a class="site-title" href="/">
Nomplex Template
</a>
<nav class="site-nav">
<div class="trigger">
<a href="/">Home</a>
<a href="/menu1/">Code blocks</a>
<a href="/menu2/">More goodies</a>
<a href="/menu3/">Tags</a>
</div>
<img src="/assets/hamburger.svg" id="menu-icon">
</nav>
</div>
</header>in complex.css
@media screen and (max-width: 600px) {
.site-nav {
/* position: absolute; */
top: 9px;
right: 15px;
/* background-color: #fdfdfd; */
/* border: 1px solid #e8e8e8; */
/* border-radius: 5px; */
text-align: right;
}
/* .site-nav .menu-icon {
/* display: block; */
/* float: right; */
/* width: 36px; */
/* height: 26px; */
/* line-height: 0; */
/* padding-top: 0px; */
/* text-align: center; */
}
.site-nav .menu-icon > svg {
/* width: 18px; */
/* height: 15px; */
}
.site-nav .menu-icon > svg path {
/* fill: #424242; */
}
/* ... rest of the css ... */