Changed to add side nav bar

This commit is contained in:
Eduardo Cueto Mendoza 2020-06-13 20:27:53 -06:00
parent a1127ce679
commit b35ce9146b
15 changed files with 2775 additions and 196 deletions

View File

@ -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;
}

2623
_css/vela.css Normal file

File diff suppressed because it is too large Load Diff

View File

@ -1,9 +1,12 @@
<!-- CONTENT ENDS HERE --> <!-- CONTENT ENDS HERE -->
{{ if hasmath }} </main> <!-- end of id=main -->
{{ insert foot_katex.html }} <script src="/libs/vela/metisMenu.min.js"></script>
{{ end }} <script src="/libs/vela/slideout.min.js"></script>
{{ if hascode }} {{ if hasmath }}
{{ insert foot_highlight.html }} {{ insert foot_katex.html }}
{{ end }} {{ end }}
</body> {{ if hascode }}
{{ insert foot_highlight.html }}
{{ end }}
</body>
</html> </html>

View File

@ -3,14 +3,14 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <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}} {{if hascode}} {{insert head_highlight.html }} {{end}}
<link rel="stylesheet" href="/css/franklin.css">
<link rel="stylesheet" href="/css/jemdoc.css"> {{insert style.html}}
<link rel="icon" href="/assets/favicon.png"> <title>Eddie's Blog</title>
{{isdef title}} <title>{{fill title}}</title> {{end}}
</head> </head>
<body> <body>
{{insert header.html}} {{insert nav.html}}
<!-- Content appended here --> <!-- Content appended here -->

View File

@ -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>

30
_layout/nav.html Normal file
View File

@ -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>

5
_layout/style.html Normal file
View File

@ -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">

View File

@ -3,16 +3,19 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/franklin.css"> {{insert style.html}}
<link rel="stylesheet" href="/css/basic.css">
<title>Tag: {{fill fd_tag}}</title> <title>Tag: {{fill fd_tag}}</title>
</head> </head>
<body> <body>
{{insert header.html}} {{insert nav.html}}
<div class="{{div_content}}"> <div class="{{div_content}}">
<h1>Tag: {{fill fd_tag}}</h1> <h1>Tag: {{fill fd_tag}}</h1>
{{taglist}} {{taglist}}
{{insert page_foot.html}} {{insert page_foot.html}}
</div> </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> </body>
</html> </html>

View File

@ -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}

View File

@ -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();
});

4
_libs/vela/jquery.min.js vendored Normal file

File diff suppressed because one or more lines are too long

9
_libs/vela/metisMenu.min.js vendored Normal file
View File

@ -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});

7
_libs/vela/slideout.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -7,7 +7,7 @@ The website_* must be defined for the RSS to work
@def website_descr = "Example website using Franklin" @def website_descr = "Example website using Franklin"
@def website_url = "https://tlienart.github.io/FranklinTemplates.jl/" @def website_url = "https://tlienart.github.io/FranklinTemplates.jl/"
@def author = "Eduardo Cueto Mendoza" @def author = "Septimia Zenobia"
@def mintoclevel = 2 @def mintoclevel = 2

View File

@ -1,10 +1,45 @@
@def title = "Eddie's Home" @def title = "A Neural Network Developer"
@def tags = ["syntax", "code"] @def tags = ["syntax", "code"]
@def hascode = true
# Welcome to my development blog # Welcome to my blog
<!-- \tableofcontents you can use \toc as well --> <!-- \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. 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`). 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! 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. **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}. 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. 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. 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.
-->