Skip to content

Commit 2aa2886

Browse files
author
fabianmoronzirfas
committed
fix(reference index): Fixing the index and cleaning some unused things
Fixied also lag in loading due to wrapping the main into an element using jquery. All things that jQ did for all pages are now part ofthe markup close #60 re #79
1 parent 79c6336 commit 2aa2886

File tree

9 files changed

+119
-630
lines changed

9 files changed

+119
-630
lines changed

‎_includes/aside-left.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<aside>
22
<a href="/"><div class="logo" id="logo"></div></a>
3-
<div class="nav-o-meter"></div>
3+
<div class="nav-o-meter"><ul class="bars"><li></li><li></li><li></li></ul></div>
44
<nav class="main-menu">
55
<ul>
66
<!--

‎_layouts/default.html

Lines changed: 34 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
3+
4+
<head>
45
<meta charset="utf-8">
56
<meta http-equiv="x-ua-compatible" content="ie=edge">
67
<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -12,37 +13,43 @@
1213
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
1314
<![endif]-->
1415
<link rel="stylesheet" href="/assets/css/styles.css">
15-
<script src="/assets/js/jquery.min.js" type="text/javascript"></script>
16-
<script src="/assets/js/jquery.columnizer.min.js" type="text/javascript"></script>
17-
<script src="/assets/js/tweets.js" type="text/javascript" async></script>
18-
<script src="/assets/js/highlight.js" type="text/javascript"></script>
19-
<script src="/assets/js/basiljs.js" type="text/javascript"></script>
20-
<script src="/assets/js/p5.min.js" type="text/javascript"></script>
21-
<script src="/assets/js/sketch.js" type="text/javascript"></script>
22-
</head>
23-
<!--
16+
</head>
17+
<!--
2418
the filtering of the titles for a body class is a little cumbersome.
2519
If we have some special characters in the tile we will have to filter it here
2620
-->
27-
<body class="{{
21+
22+
<body class="{{
2823
page.title | replace: '.', '' | replace: ' ', '' | downcase
2924
}}">
30-
{% include aside-left.html %}
31-
<div class="main">
32-
<h1>{{page.title}}</h1>
33-
<div id="content" class="wrapppper">
34-
{{content}}
35-
</div>
36-
<div class="line"></div>
37-
<div class="line"></div>
38-
<div class="line"></div>
25+
<div class="wrapper">
26+
27+
{% include aside-left.html %}
28+
<div class="main">
29+
<div id="content" class="wrapppper">
30+
{{content}}
31+
</div>
32+
<div class="line"></div>
33+
<div class="line"></div>
34+
<div class="line"></div>
35+
</div>
36+
<div class="guidelines"></div>
37+
{% include footer.html %}
38+
<script src="/assets/js/jquery.min.js" type="text/javascript"></script>
39+
<script src="/assets/js/basiljs.js" type="text/javascript"></script>
40+
<script src="/assets/js/tweets.js" type="text/javascript" async></script>
41+
<script src="/assets/js/p5.min.js" type="text/javascript" defer></script>
42+
<script src="/assets/js/sketch.js" type="text/javascript" defer></script>
43+
<script type="text/javascript">
44+
window.onblur = function() {
45+
noLoop();
46+
}
47+
window.onfocus = function() {
48+
loop();
49+
}
50+
</script>
51+
3952
</div>
40-
<div class="guidelines"></div>
41-
{% include footer.html %}
42-
<script type="text/javascript">
43-
window.onblur = function() { noLoop(); }
44-
window.onfocus = function() { loop(); }
45-
</script>
53+
</body>
4654

47-
</body>
4855
</html>

‎_sass/_reference-index.scss

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.index{
2+
column-width: 250px;
3+
}
4+
.category{
5+
break-inside: avoid;
6+
}
7+
.reference-category{
8+
font-size: 1.3em !important;
9+
}
10+
.reference-subcategory{
11+
font-size: 1.1em !important;
12+
margin-left: 0.6em;
13+
14+
}
15+
.reference-lists {
16+
margin-left: 1.2em;
17+
}

‎assets/css/styles.sass

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -99,8 +99,8 @@ body
9999
margin: 0 auto 50px
100100
h1
101101

102-
&:first-child
103-
display: none
102+
// &:first-child
103+
// display: none
104104
h3
105105
font-size: 1em
106106
font-weight: bold
@@ -344,8 +344,8 @@ $right-lines: 3
344344
// @Son Please merge this so we don't have
345345
// double definitions
346346
.tweet
347-
padding-left: 25px
348347
a.stepped-link
348+
padding-left: 25px
349349
border: none
350350
height: auto
351351
display: inline-block
@@ -355,6 +355,8 @@ a.stepped-link
355355
font-size: 30px
356356
border-bottom: 1px solid $textColor
357357

358+
@import 'reference-index'
359+
358360
// ------------------------
359361
// old basil css. Overwrite new settings
360362
//@import 'basil', 'gridlines'

‎assets/js/basiljs.js

Lines changed: 38 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,43 @@
1-
/* globals jQuery */
2-
/* Author:
3-
Philipp C. Adrian
4-
*/
5-
(function($, window, undefined) {
6-
////////////////////////////////////////////////////////////////////////////////
7-
const bjs = {
8-
////////////////////////////////////////////////////////////////////////////////
9-
init : function (){
10-
//$("html").removeClass("no-js");
11-
12-
//bjs.activateReferenceItem(location.hash);
13-
$('pre.code').highlight({source:1, zebra:1, indent:'space', list:'ol'});
14-
15-
//bjs.behaviour($("body"));
16-
},
17-
////////////////////////////////////////////////////////////////////////////////
18-
behaviour: function (context) {
19-
$('.referenceLink', context).bind('click',function(e){
20-
e.preventDefault();
21-
bjs.activateReferenceItem($(this).attr('href'));
22-
});
23-
24-
bjs.iScroll = new iScroll('iScroll', {
25-
hideScrollbar:false,
26-
hScroll:false
27-
});
28-
},
29-
////////////////////////////////////////////////////////////////////////////////
30-
iScroll : false,
31-
activateReferenceItem : function(id) {
32-
var content = $(id);
33-
if (!content.length) return;
34-
window.location=id;
35-
$('.referenceLink').removeClass('active');
36-
$('[href="'+id+'"]').addClass('active');
37-
content.siblings().removeClass('.active').fadeOut(100,function(){
38-
content.addClass('.active').css({display:'none',opacity:1}).fadeIn(100);
39-
});
40-
}
41-
};
42-
////////////////////////////////////////////////////////////////////////////////
43-
$(document).ready(function() {
44-
bjs.init();
45-
$( 'body > *' ).wrapAll( '<div class=\'wrapper\'></div>' );
46-
specialChars();
47-
createGuideLines();
48-
49-
$('.nav-o-meter').append('<ul class="bars"><li></li><li></li><li></li></ul>');
50-
// MOBILE NAVIGATION
51-
$('.nav-o-meter').on('click', function() {
52-
$(this).toggleClass('opened');
53-
$(' .main-menu').toggle();
54-
55-
$('.main-menu').find('li a').bind('click', function(){
56-
if ($('.nav-o-meter').hasClass('opened')) {
57-
$('.nav-o-meter').toggleClass('opened');
58-
$(' .main_menu').toggle();
59-
}
60-
});
1+
$(document).ready(function() {
2+
specialChars();
3+
createGuideLines();
4+
// MOBILE NAVIGATION
5+
$('.nav-o-meter').on('click', function() {
6+
$(this).toggleClass('opened');
7+
$('.main-menu').toggle();
8+
$('.main-menu').find('li a').bind('click', function() {
9+
if ($('.nav-o-meter').hasClass('opened')) {
10+
$('.nav-o-meter').toggleClass('opened');
11+
$('.main_menu').toggle();
12+
}
6113
});
6214
});
63-
64-
65-
function specialChars() {
66-
$('a.stepped-link').each( function() {
67-
const chars = $(this).text().split('');
68-
const that = $(this);
69-
that.empty();
70-
$.each(chars, function (i, char) {
71-
const fontSize = 30 - (2*i);
72-
const style = `border-bottom-width: ${ (i+1) }px; font-size: ${fontSize }px; top: -${(i+(2*i))}px;`;
73-
74-
// var style = 'style="border-bottom-width: ' + (i+1) + 'px; ';
75-
// style += 'font-size: '+fontSize+'px; ';
76-
// style += 'top: -' + (i+(2*i)) + 'px;"';
77-
that.append('<span style="' +style+ '">' + char + '</span>');
78-
});
79-
// for(var i = 0; i < chars.length; i++) {
80-
// chars[i] = '<span>'+chars[i]+'</span>';
81-
// console.log(chars[i]);
82-
// }
15+
});
16+
17+
function specialChars() {
18+
$('a.stepped-link').each(function() {
19+
const chars = $(this).text().split('');
20+
const that = $(this);
21+
that.empty();
22+
$.each(chars, function(i, char) {
23+
const fontSize = 30 - (2 * i);
24+
const style = `border-bottom-width: ${ (i+1) }px; font-size: ${fontSize }px; top: -${(i+(2*i))}px;`;
25+
that.append('<span style="' + style + '">' + char + '</span>');
8326
});
84-
}
85-
27+
});
28+
}
8629

87-
function createGuideLines() {
88-
$('.guidelines').append('<div class="bottom_lines">');
89-
for (var b=0; b<5; b++) {
90-
$('.bottom_lines').append('<div class="bottomLine line_'+(b+1)+'">');
91-
}
92-
$('.guidelines').append('<div class="right_lines">');
93-
for (var r=0; r<3; r++) {
94-
$('.right_lines').append('<div class="right_line line_'+(r+1)+'">');
95-
}
96-
$('.guidelines').append('<div class="page_lines">');
97-
for (var i=0; i<4; i++) {
98-
$('.page_lines').append('<div class="line line_'+(i+1)+'">');
99-
}
30+
function createGuideLines() {
31+
$('.guidelines').append('<div class="bottom_lines">');
32+
for (var b = 0; b < 5; b++) {
33+
$('.bottom_lines').append('<div class="bottomLine line_' + (b + 1) + '">');
10034
}
101-
102-
////////////////////////////////////////////////////////////////////////////////
103-
})(jQuery, window, undefined);
35+
$('.guidelines').append('<div class="right_lines">');
36+
for (var r = 0; r < 3; r++) {
37+
$('.right_lines').append('<div class="right_line line_' + (r + 1) + '">');
38+
}
39+
$('.guidelines').append('<div class="page_lines">');
40+
for (var i = 0; i < 4; i++) {
41+
$('.page_lines').append('<div class="line line_' + (i + 1) + '">');
42+
}
43+
}

‎assets/js/gridline.js

Lines changed: 0 additions & 93 deletions
This file was deleted.

0 commit comments

Comments
 (0)