Skip to content

Commit 162102d

Browse files
author
fabianmoronzirfas
committed
feat(twitter link and indent): added css and markup and js for twitter link
also did some refactoring on the js
1 parent 847f6a2 commit 162102d

File tree

4 files changed

+108
-88
lines changed

4 files changed

+108
-88
lines changed

‎_includes/aside-left.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,15 @@
1111
-->
1212
{% assign pages = site.pages | sort: 'order' %}
1313
{% for item in pages %}{% if item.layout != 'entry' %}{%if item.layout == 'default' or item.layout == 'reference' %}{% if item.url != '/' %}
14-
<li class="menu-item {% if item.title == page.title %}active{% endif %}"><a href="{{item.url}}">{{item.title}}</a></li>
14+
<li class="menu-item {% if item.title == page.title %}active{% endif %}"><a href="{{item.url}}" class="stepped-link">{{item.title}}</a></li>
1515
{% endif %}{% endif %}{% endif %}{% endfor %}
16-
16+
1717
</ul>
1818
</nav>
1919
<div class="tweet">
2020
<div class="message"></div>
2121
<div class="tweettime"></div>
22+
<div class="twitter-link"><a href="https://twitter.com/basil_js" class="stepped-link">@basil_js</a></div>
2223
</div>
2324
<div class="fhnw-logo">
2425
<a href="http://www.fhnw.ch/hgk/ivk"><img src="/assets/images/fhnwlogo.png" alt="FHNW logo and link"></a>

‎_layouts/default.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
<meta http-equiv="x-ua-compatible" content="ie=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
8-
<title>Basil.js</title>
9-
<meta name="description" content="basil.js docs">
8+
<title>basil.js // </title>
9+
<meta name="description" content="basil.js website">
1010
<meta name="author" content="Fabian Morón Zirfas">
1111
<!--[if lt IE 9]>
1212
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

‎assets/css/styles.sass

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ body
121121
// //////////////// edits fabian moron zirfas
122122
123123
.fhnw-logo
124-
124+
125125
a
126126
img
127127
width: 125px
@@ -339,6 +339,22 @@ $right-lines: 3
339339
.yesscript
340340
display: none
341341

342+
343+
// Edits fabianmoronzirfas twitterlink
344+
// @Son Please merge this so we don't have
345+
// double definitions
346+
.tweet
347+
padding-left: 25px
348+
a.stepped-link
349+
border: none
350+
height: auto
351+
display: inline-block
352+
span
353+
position: relative
354+
padding: 0px 4px
355+
font-size: 30px
356+
border-bottom: 1px solid $textColor
357+
342358
// ------------------------
343359
// old basil css. Overwrite new settings
344360
//@import 'basil', 'gridlines'

‎assets/js/basiljs.js

Lines changed: 86 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,100 +1,103 @@
1+
/* globals jQuery */
12
/* Author:
23
Philipp C. Adrian
34
*/
45
(function($, window, undefined) {
56
////////////////////////////////////////////////////////////////////////////////
6-
bjs = {
7-
////////////////////////////////////////////////////////////////////////////////
8-
init : function (){
9-
//$("html").removeClass("no-js");
7+
const bjs = {
8+
////////////////////////////////////////////////////////////////////////////////
9+
init : function (){
10+
//$("html").removeClass("no-js");
1011

11-
//bjs.activateReferenceItem(location.hash);
12-
$('pre.code').highlight({source:1, zebra:1, indent:'space', list:'ol'});
12+
//bjs.activateReferenceItem(location.hash);
13+
$('pre.code').highlight({source:1, zebra:1, indent:'space', list:'ol'});
1314

14-
//bjs.behaviour($("body"));
15-
},
16-
////////////////////////////////////////////////////////////////////////////////
17-
behaviour: function (context) {
18-
$(".referenceLink", context).bind("click",function(e){
19-
e.preventDefault();
20-
bjs.activateReferenceItem($(this).attr("href"));
21-
});
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+
});
2223

23-
bjs.iScroll = new iScroll("iScroll", {
24-
hideScrollbar:false,
25-
hScroll:false
26-
});
27-
},
28-
////////////////////////////////////////////////////////////////////////////////
29-
iScroll : false,
30-
activateReferenceItem : function(id) {
31-
var content = $(id);
32-
if(!content.length) return;
33-
window.location=id;
34-
$(".referenceLink").removeClass("active");
35-
$('[href="'+id+'"]').addClass("active");
36-
content.siblings().removeClass(".active").fadeOut(100,function(){
37-
content.addClass(".active").css({display:"none",opacity:1}).fadeIn(100);
38-
});
39-
}
40-
}
41-
////////////////////////////////////////////////////////////////////////////////
42-
$(document).ready(function() {
43-
bjs.init();
44-
$( "body > *" ).wrapAll( "<div class='wrapper'></div>" );
45-
specialChars();
46-
createGuideLines();
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();
4754

48-
$('.nav-o-meter').append('<ul class="bars"><li></li><li></li><li></li></ul>');
49-
// MOBILE NAVIGATION
50-
$('.nav-o-meter').on('click', function() {
51-
$(this).toggleClass('opened');
52-
$(' .main-menu').toggle();
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+
});
61+
});
62+
});
5363

54-
$('.main-menu').find('li a').bind('click', function(){
55-
if($('.nav-o-meter').hasClass('opened')) {
56-
$('.nav-o-meter').toggleClass('opened');
57-
$(' .main_menu').toggle();
58-
}
59-
});
60-
});
61-
});
6264

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;`;
6373

64-
function specialChars() {
65-
$('.main-menu a').each( function() {
66-
var chars = $(this).text().split("");
67-
$this = $(this);
68-
$this.empty();
69-
$.each(chars, function (i, el) {
70-
var fontSize = 30-(2*i);
71-
var style = "style='border-bottom-width: " + (i+1) + "px; ";
72-
style += "font-size: "+fontSize+"px; ";
73-
style += "top: -" + (i+(2*i)) + "px;''";
74-
$this.append("<span "+style+">" + el + "</span");
75-
});
76-
// for(var i = 0; i < chars.length; i++) {
77-
// chars[i] = '<span>'+chars[i]+'</span>';
78-
// console.log(chars[i]);
79-
// }
80-
});
81-
}
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+
// }
83+
});
84+
}
8285

8386

84-
function createGuideLines() {
85-
$('.guidelines').append('<div class="bottom_lines">');
86-
for(var b=0; b<5; b++) {
87-
$('.bottom_lines').append('<div class="bottomLine line_'+(b+1)+'">');
88-
}
89-
$('.guidelines').append('<div class="right_lines">');
90-
for(var r=0; r<3; r++) {
91-
$('.right_lines').append('<div class="right_line line_'+(r+1)+'">');
92-
}
93-
$('.guidelines').append('<div class="page_lines">');
94-
for(var i=0; i<4; i++) {
95-
$('.page_lines').append('<div class="line line_'+(i+1)+'">');
96-
}
97-
}
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+
}
100+
}
98101

99102
////////////////////////////////////////////////////////////////////////////////
100103
})(jQuery, window, undefined);

0 commit comments

Comments
 (0)