Changed to add side nav bar
This commit is contained in:
Eduardo Cueto Mendoza
parent
a1127ce679
commit
b35ce9146b
163
_css/jemdoc.css
163
_css/jemdoc.css
|
|
@ -1,163 +0,0 @@
|
|||
/* ==================================================================
|
||||
Header and Nav
|
||||
================================================================== */
|
||||
|
||||
nav {
|
||||
width: 64%;
|
||||
display: inline-block; }
|
||||
|
||||
nav ul {
|
||||
padding-left: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0; }
|
||||
|
||||
nav li {
|
||||
display: inline-block; }
|
||||
|
||||
nav li a {
|
||||
color: #004de6;
|
||||
text-decoration: none;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
float: center;
|
||||
padding-top: 10px;
|
||||
padding-right:2px;
|
||||
padding-left:2px;
|
||||
padding-bottom:5px;
|
||||
margin-left:7px;
|
||||
margin-right:7px;
|
||||
border-bottom: 2px solid #4C9CF1;
|
||||
transition: color 0.3s ease; }
|
||||
|
||||
header {
|
||||
text-align: right;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 50px;
|
||||
display: flex;
|
||||
align-items: center; }
|
||||
|
||||
header .blog-name {
|
||||
width: 35%;
|
||||
display: inline-block;
|
||||
text-align: left;
|
||||
font-size: 18px;
|
||||
font-family: "Lucida Console", Monaco, monospace;
|
||||
padding-top: 10px;}
|
||||
|
||||
header .blog-name a {
|
||||
color: #a6a2a0;
|
||||
text-decoration: none; }
|
||||
|
||||
header li a:hover {
|
||||
color: black;
|
||||
border-bottom: 2px solid black; }
|
||||
|
||||
|
||||
#menu-icon {
|
||||
display: none; }
|
||||
|
||||
@media (max-width: 480px) {
|
||||
header {
|
||||
padding-left: 6%;
|
||||
padding-right:6%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 481px) {
|
||||
header {
|
||||
padding-left: 12.5%;
|
||||
padding-right: 12.5%; }
|
||||
}
|
||||
|
||||
/* wide display: enforce maximum width of header to match content */
|
||||
@media (min-width: 940px) {
|
||||
header {
|
||||
width: 705px;
|
||||
margin-left: auto;
|
||||
margin-right: auto; }
|
||||
}
|
||||
|
||||
/*
|
||||
medium display: nav goes under name
|
||||
*/
|
||||
@media (max-width: 760px) {
|
||||
header { display: block; }
|
||||
header .blog-name {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding-bottom: 10px; }
|
||||
nav {
|
||||
width: 100%; }
|
||||
}
|
||||
|
||||
/*
|
||||
narrow display: collapse the header (don't show the menu items)
|
||||
instead, display a burger menu.
|
||||
*/
|
||||
@media (max-width: 500px) {
|
||||
header {
|
||||
height: 35px;
|
||||
display: flex;
|
||||
align-items: center; }
|
||||
header .blog-name {
|
||||
display: inline-block;
|
||||
width: 70%; }
|
||||
nav {
|
||||
display: inline-block;
|
||||
width: 27%; }
|
||||
nav ul, nav:active ul {
|
||||
display: none;
|
||||
position: absolute;
|
||||
/* padding: 20px; */
|
||||
background: #fff;
|
||||
border: 1px solid #444;
|
||||
right: 50px;
|
||||
top: 60px;
|
||||
width: 30%;
|
||||
border-radius: 4px 0 4px 4px;
|
||||
z-index: 1;}
|
||||
nav li {
|
||||
text-align: left;
|
||||
display: block;
|
||||
padding: 0;
|
||||
margin: 0; }
|
||||
header li a { border-bottom: none; }
|
||||
header li a:hover { border-bottom: none; }
|
||||
nav:hover ul{
|
||||
display: block; }
|
||||
#menu-icon {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
margin-top: 5px; }
|
||||
}
|
||||
|
||||
table {
|
||||
line-height:1em;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
border-collapse:collapse;
|
||||
text-align:center;
|
||||
margin-bottom:1.5em
|
||||
}
|
||||
tr:first-of-type {
|
||||
background:#eae9f4
|
||||
}
|
||||
tr:first-of-type>th {
|
||||
text-align:center
|
||||
}
|
||||
tr,
|
||||
th,
|
||||
td {
|
||||
padding:10px;
|
||||
border:1px solid lightgray
|
||||
}
|
||||
table tbody tr td {
|
||||
border:1px solid lightgray
|
||||
}
|
||||
|
||||
/* Ed's styles */
|
||||
|
||||
.start-img {
|
||||
height: 5em;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,9 +1,12 @@
|
|||
<!-- CONTENT ENDS HERE -->
|
||||
{{ if hasmath }}
|
||||
{{ insert foot_katex.html }}
|
||||
{{ end }}
|
||||
{{ if hascode }}
|
||||
{{ insert foot_highlight.html }}
|
||||
{{ end }}
|
||||
</body>
|
||||
</main> <!-- end of id=main -->
|
||||
<script src="/libs/vela/metisMenu.min.js"></script>
|
||||
<script src="/libs/vela/slideout.min.js"></script>
|
||||
{{ if hasmath }}
|
||||
{{ insert foot_katex.html }}
|
||||
{{ end }}
|
||||
{{ if hascode }}
|
||||
{{ insert foot_highlight.html }}
|
||||
{{ end }}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -3,14 +3,14 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
{{if hasmath}} {{insert head_katex.html }} {{end}}
|
||||
{{if hasmath}} {{insert head_katex.html }} {{end}}
|
||||
{{if hascode}} {{insert head_highlight.html }} {{end}}
|
||||
<link rel="stylesheet" href="/css/franklin.css">
|
||||
<link rel="stylesheet" href="/css/jemdoc.css">
|
||||
<link rel="icon" href="/assets/favicon.png">
|
||||
{{isdef title}} <title>{{fill title}}</title> {{end}}
|
||||
|
||||
{{insert style.html}}
|
||||
<title>Eddie's Blog</title>
|
||||
</head>
|
||||
<body>
|
||||
{{insert header.html}}
|
||||
{{insert nav.html}}
|
||||
|
||||
|
||||
<!-- Content appended here -->
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
<header>
|
||||
<div class="blog-name"><img src="/assets/cv_photo.jpg" class="start-img"></div>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/menu1/">Code blocks</a></li>
|
||||
<li><a href="/menu2/">More goodies</a></li>
|
||||
<li><a href="/menu3/">Tags</a></li>
|
||||
</ul>
|
||||
<img src="/assets/hamburger.svg" id="menu-icon">
|
||||
</nav>
|
||||
</header>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<div class="main-nav" id="menu">
|
||||
<div class="flex-container">
|
||||
<span class="sidebar-brand">
|
||||
<h3 style='font-size: 25px'>Vela Template</h3>
|
||||
</span>
|
||||
</div> <!-- class="flex-container" -->
|
||||
|
||||
<nav class="sidebar-nav">
|
||||
<ul class="metismenu" id="metismenu" >
|
||||
<li><a href="/index.html">Home</a></li>
|
||||
<li><a href="/menu1/">Code blocks</a></li>
|
||||
<li><a href="" class="has-arrow">Topic</a>
|
||||
<ul>
|
||||
<li><a href="/menu2/">More goodies</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="/menu3/">Tags</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div> <!-- main nav menu -->
|
||||
|
||||
<main id="panel">
|
||||
<div class="toggle-button hamburger hamburger--spin">
|
||||
<div class="hamburger-box">
|
||||
<div class="hamburger-inner"></div>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="page title"><img src="/assets/cv_photo.jpg" class="start-img"> {{isdef title}}{{fill title}}{{end}}</h1>
|
||||
|
||||
<hr>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<link href="/css/franklin.css" rel="stylesheet">
|
||||
<link href="/css/vela.css" rel="stylesheet">
|
||||
<script src="/libs/vela/jquery.min.js"></script>
|
||||
|
||||
<link rel="icon" href="/assets/favicon.png">
|
||||
|
|
@ -3,16 +3,19 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="/css/franklin.css">
|
||||
<link rel="stylesheet" href="/css/basic.css">
|
||||
{{insert style.html}}
|
||||
<title>Tag: {{fill fd_tag}}</title>
|
||||
</head>
|
||||
<body>
|
||||
{{insert header.html}}
|
||||
{{insert nav.html}}
|
||||
<div class="{{div_content}}">
|
||||
<h1>Tag: {{fill fd_tag}}</h1>
|
||||
{{taglist}}
|
||||
{{insert page_foot.html}}
|
||||
</div>
|
||||
<!-- close what is opened in nav.html -->
|
||||
</main> <!-- end of id=main -->
|
||||
<script src="/libs/vela/metisMenu.min.js"></script>
|
||||
<script src="/libs/vela/slideout.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
.hljs{display:block;overflow-x:auto;padding:0.5em;color:#333;background:#f8f8f8}.hljs-comment,.hljs-quote{color:#998;font-style:italic}.hljs-keyword,.hljs-selector-tag,.hljs-subst{color:#333;font-weight:bold}.hljs-literal,.hljs-number,.hljs-tag .hljs-attr,.hljs-template-variable,.hljs-variable{color:#008080}.hljs-doctag,.hljs-string{color:#d14}.hljs-section,.hljs-selector-id,.hljs-title{color:#900;font-weight:bold}.hljs-subst{font-weight:normal}.hljs-class .hljs-title,.hljs-type{color:#458;font-weight:bold}.hljs-attribute,.hljs-name,.hljs-tag{color:#000080;font-weight:normal}.hljs-link,.hljs-regexp{color:#009926}.hljs-bullet,.hljs-symbol{color:#990073}.hljs-built_in,.hljs-builtin-name{color:#0086b3}.hljs-meta{color:#999;font-weight:bold}.hljs-deletion{background:#fdd}.hljs-addition{background:#dfd}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}
|
||||
.hljs{display:block;overflow-x:auto;padding:0.5em;color:#000000;background:#f8f8f8}.hljs-comment,.hljs-quote{color:#998;font-style:italic}.hljs-keyword,.hljs-selector-tag,.hljs-subst{color:#569bd5;font-weight:bold}.hljs-literal,.hljs-number,.hljs-tag .hljs-attr,.hljs-template-variable,.hljs-variable{color:#000000}.hljs-doctag,.hljs-string{color:#d14}.hljs-section,.hljs-selector-id,.hljs-title{color:#900;font-weight:bold}.hljs-subst{font-weight:normal}.hljs-class .hljs-title,.hljs-type{color:#458;font-weight:bold}.hljs-attribute,.hljs-name,.hljs-tag{color:#000080;font-weight:normal}.hljs-link,.hljs-regexp{color:#009926}.hljs-bullet,.hljs-symbol{color:#990073}.hljs-built_in,.hljs-builtin-name{color:#4ec9b0}.hljs-meta{color:#999;font-weight:bold}.hljs-deletion{background:#fdd}.hljs-addition{background:#dfd}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,34 @@
|
|||
//initialize metismenu
|
||||
$("#metismenu").metisMenu();
|
||||
//initialize slideout
|
||||
var slideout = new Slideout({
|
||||
'panel': document.getElementById('panel'),
|
||||
'menu': document.getElementById('menu'),
|
||||
'padding': 300,
|
||||
'tolerance': 70
|
||||
});
|
||||
//for closing menu on page click
|
||||
function close(eve) {
|
||||
eve.preventDefault();
|
||||
slideout.close();
|
||||
}
|
||||
//make the hamburger animation correct when using touch events
|
||||
slideout
|
||||
.on('beforeopen', function() {
|
||||
this.panel.classList.add('panel-open');
|
||||
$(".hamburger").toggleClass("is-active");
|
||||
$(".header-hamburger").toggleClass("fixed-open");
|
||||
})
|
||||
.on('open', function() {
|
||||
this.panel.addEventListener('click', close);
|
||||
})
|
||||
.on('beforeclose', function() {
|
||||
this.panel.classList.remove('panel-open');
|
||||
this.panel.removeEventListener('click', close);
|
||||
$(".hamburger").removeClass("is-active");
|
||||
$(".header-hamburger").removeClass("fixed-open");
|
||||
});
|
||||
// Toggle button
|
||||
$('.toggle-button').on('click', function() {
|
||||
slideout.toggle();
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,9 @@
|
|||
/*!
|
||||
* metismenu - v2.7.9
|
||||
* A jQuery menu plugin
|
||||
* https://github.com/onokumus/metismenu#readme
|
||||
*
|
||||
* Made by Osman Nuri Okumus <onokumus@gmail.com> (https://github.com/onokumus)
|
||||
* Under MIT License
|
||||
*/
|
||||
!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e(require("jquery")):"function"==typeof define&&define.amd?define(["jquery"],e):n.metisMenu=e(n.jQuery)}(this,function(n){"use strict";function a(s){for(var n=1;n<arguments.length;n++){var a=null!=arguments[n]?arguments[n]:{},e=Object.keys(a);"function"==typeof Object.getOwnPropertySymbols&&(e=e.concat(Object.getOwnPropertySymbols(a).filter(function(n){return Object.getOwnPropertyDescriptor(a,n).enumerable}))),e.forEach(function(n){var e,i,t;e=s,t=a[i=n],i in e?Object.defineProperty(e,i,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[i]=t})}return s}var o,e,r,i,t,l,c,s,g=function(t){var e="transitionend",s={TRANSITION_END:"mmTransitionEnd",triggerTransitionEnd:function(n){t(n).trigger(e)},supportsTransitionEnd:function(){return Boolean(e)}};function n(n){var e=this,i=!1;return t(this).one(s.TRANSITION_END,function(){i=!0}),setTimeout(function(){i||s.triggerTransitionEnd(e)},n),this}return t.fn.mmEmulateTransitionEnd=n,t.event.special[s.TRANSITION_END]={bindType:e,delegateType:e,handle:function(n){if(t(n.target).is(this))return n.handleObj.handler.apply(this,arguments)}},s}(n=n&&n.hasOwnProperty("default")?n.default:n);return i="."+(r=e="metisMenu"),t=(o=n).fn[e],l={toggle:!0,preventDefault:!0,activeClass:"active",collapseClass:"collapse",collapseInClass:"in",collapsingClass:"collapsing",triggerElement:"a",parentTrigger:"li",subMenu:"ul"},c={SHOW:"show"+i,SHOWN:"shown"+i,HIDE:"hide"+i,HIDDEN:"hidden"+i,CLICK_DATA_API:"click"+i+".data-api"},s=function(){function s(n,e){this.element=n,this.config=a({},l,e),this.transitioning=null,this.init()}var n=s.prototype;return n.init=function(){var a=this,r=this.config;o(this.element).find(r.parentTrigger+"."+r.activeClass).has(r.subMenu).children(r.subMenu).addClass(r.collapseClass+" "+r.collapseInClass),o(this.element).find(r.parentTrigger).not("."+r.activeClass).has(r.subMenu).children(r.subMenu).addClass(r.collapseClass),o(this.element).find(r.parentTrigger).has(r.subMenu).children(r.triggerElement).on(c.CLICK_DATA_API,function(n){var e=o(this),i=e.parent(r.parentTrigger),t=i.siblings(r.parentTrigger).children(r.triggerElement),s=i.children(r.subMenu);r.preventDefault&&n.preventDefault(),"true"!==e.attr("aria-disabled")&&(i.hasClass(r.activeClass)?(e.attr("aria-expanded",!1),a.hide(s)):(a.show(s),e.attr("aria-expanded",!0),r.toggle&&t.attr("aria-expanded",!1)),r.onTransitionStart&&r.onTransitionStart(n))})},n.show=function(n){var e=this;if(!this.transitioning&&!o(n).hasClass(this.config.collapsingClass)){var i=o(n),t=o.Event(c.SHOW);if(i.trigger(t),!t.isDefaultPrevented()){i.parent(this.config.parentTrigger).addClass(this.config.activeClass),this.config.toggle&&this.hide(i.parent(this.config.parentTrigger).siblings().children(this.config.subMenu+"."+this.config.collapseInClass)),i.removeClass(this.config.collapseClass).addClass(this.config.collapsingClass).height(0),this.setTransitioning(!0);i.height(n[0].scrollHeight).one(g.TRANSITION_END,function(){e.config&&e.element&&(i.removeClass(e.config.collapsingClass).addClass(e.config.collapseClass+" "+e.config.collapseInClass).height(""),e.setTransitioning(!1),i.trigger(c.SHOWN))}).mmEmulateTransitionEnd(350)}}},n.hide=function(n){var e=this;if(!this.transitioning&&o(n).hasClass(this.config.collapseInClass)){var i=o(n),t=o.Event(c.HIDE);if(i.trigger(t),!t.isDefaultPrevented()){i.parent(this.config.parentTrigger).removeClass(this.config.activeClass),i.height(i.height())[0].offsetHeight,i.addClass(this.config.collapsingClass).removeClass(this.config.collapseClass).removeClass(this.config.collapseInClass),this.setTransitioning(!0);var s=function(){e.config&&e.element&&(e.transitioning&&e.config.onTransitionEnd&&e.config.onTransitionEnd(),e.setTransitioning(!1),i.trigger(c.HIDDEN),i.removeClass(e.config.collapsingClass).addClass(e.config.collapseClass))};0===i.height()||"none"===i.css("display")?s():i.height(0).one(g.TRANSITION_END,s).mmEmulateTransitionEnd(350)}}},n.setTransitioning=function(n){this.transitioning=n},n.dispose=function(){o.removeData(this.element,r),o(this.element).find(this.config.parentTrigger).has(this.config.subMenu).children(this.config.triggerElement).off("click"),this.transitioning=null,this.config=null,this.element=null},s.jQueryInterface=function(t){return this.each(function(){var n=o(this),e=n.data(r),i=a({},l,n.data(),"object"==typeof t&&t?t:{});if(!e&&/dispose/.test(t)&&this.dispose(),e||(e=new s(this,i),n.data(r,e)),"string"==typeof t){if(void 0===e[t])throw new Error('No method named "'+t+'"');e[t]()}})},s}(),o.fn[e]=s.jQueryInterface,o.fn[e].Constructor=s,o.fn[e].noConflict=function(){return o.fn[e]=t,s.jQueryInterface},s});
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -7,7 +7,7 @@ The website_* must be defined for the RSS to work
|
|||
@def website_descr = "Example website using Franklin"
|
||||
@def website_url = "https://tlienart.github.io/FranklinTemplates.jl/"
|
||||
|
||||
@def author = "Eduardo Cueto Mendoza"
|
||||
@def author = "Septimia Zenobia"
|
||||
|
||||
@def mintoclevel = 2
|
||||
|
||||
|
|
|
|||
42
index.md
42
index.md
|
|
@ -1,10 +1,45 @@
|
|||
@def title = "Eddie's Home"
|
||||
@def title = "A Neural Network Developer"
|
||||
@def tags = ["syntax", "code"]
|
||||
@def hascode = true
|
||||
|
||||
# Welcome to my development blog
|
||||
# Welcome to my blog
|
||||
|
||||
<!-- \tableofcontents you can use \toc as well -->
|
||||
|
||||
This blog is where I intent to update my projects as well as my research. I am doing this right now due to COVID-19 and the fact that the epidemic started when I was about to start a PhD position in TU Dublin.
|
||||
Currently I've been working in two "big" projects:
|
||||
* `Setting up this blog` and
|
||||
* `Create complexity measures for Deep Neural Networks (DNN)`.
|
||||
|
||||
Both of this projects are being developed with [Julia](https://julialang.org/), language which was introduced to my during my time at Instituto Politécnico Nacional [IPN](https://www.ipn.mx/). The Julia packages that I am either using or extending are [Flux.jl](https://fluxml.ai/) and [Franklin.jl](https://franklinjl.org/).
|
||||
|
||||
A small snippet of Julia:
|
||||
```julia
|
||||
abstract type Point end
|
||||
struct PointR2{T<:Real} <: Point
|
||||
x::T
|
||||
y::T
|
||||
end
|
||||
struct PointR3{T<:Real} <: Point
|
||||
x::T
|
||||
y::T
|
||||
z::T
|
||||
end
|
||||
function len(p::T) where T<:Point
|
||||
sqrt(sum(getfield(p, η)^2 for η ∈ fieldnames(T)))
|
||||
end
|
||||
```
|
||||
|
||||
## A bit about myself
|
||||
|
||||
My interest in science started from a very early age I was in love with physics because a teacher in elementary school had a copy of the book `COSMOS` which he lend me and I was marveled by the words of [Carl Sagan](https://en.wikipedia.org/wiki/Carl_Sagan)
|
||||
|
||||
|
||||
<!--
|
||||
# How to use Franklin
|
||||
|
||||
\tableofcontents (comment here) you can use \toc as well (comment here)
|
||||
|
||||
This section is meant as a refresher if you're new to Franklin.
|
||||
Have a look at both how the website renders and the corresponding markdown (`index.md`).
|
||||
Modify at will to get a feeling for how things work!
|
||||
|
|
@ -100,7 +135,7 @@ In a similar vein you can cite references that would be at the bottom of the pag
|
|||
|
||||
**Note**: the LaTeX commands you define can also incorporate standard markdown (though not in a math environment) so for instance let's define a silly `\bolditalic` command.
|
||||
|
||||
\newcommand{\bolditalic}[1]{_**!#1**_} <!--_ ignore this comment, it helps atom to not get confused by the trailing underscore when highlighting the code but is not necessary.-->
|
||||
\newcommand{\bolditalic}[1]{_**!#1**_} (comment here)_ ignore this comment, it helps atom to not get confused by the trailing underscore when highlighting the code but is not necessary.(comment here)
|
||||
|
||||
and use it \bolditalic{here for example}.
|
||||
|
||||
|
|
@ -185,3 +220,4 @@ Last modified: {{ fill fd_mtime }}.
|
|||
This dictionary of variables is accessed locally by pages through `@def varname = value` and globally through the `config.md` page via the same syntax.
|
||||
|
||||
There's a few other such functions of the form `{{fname p₁ p₂}}` as well as support for conditional blocks. If you wander through the `src/_html_parts/` folder and its content, you should be able to see those in action.
|
||||
-->
|
||||
Loading…
Reference in New Issue