Skip to content

Commit 3f93e84

Browse files
MDJAVEED7MDJAVEED7
committed
Added theme-dark and theme-light CSS files
1 parent 54a991d commit 3f93e84

File tree

2 files changed

+130
-138
lines changed

2 files changed

+130
-138
lines changed

‎_includes/topnav.html‎

Lines changed: 63 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,69 @@
11
<!-- Navigation -->
22
<nav class="navbar navbar-inverse navbar-static-top">
33
<div class="container topnavlinks">
4-
<div class="navbar-header">
5-
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
6-
<span class="sr-only">Toggle navigation</span>
7-
<span class="icon-bar"></span>
8-
<span class="icon-bar"></span>
9-
<span class="icon-bar"></span>
10-
</button>
11-
<a class="navbar-brand" href="{{site.baseurl}}/"><img src="{{site.baseurl}}/images/sun-small.png" alt="Google Summer of Code Logo"><span class="projectTitle"> {{site.topnav_title}}</span></a>
12-
</div>
13-
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
14-
<ul class="nav navbar-nav navbar-right">
15-
<!-- toggle sidebar button -->
16-
<li><a id="tg-sb-link" href="#"><i id="tg-sb-icon" class="fa fa-toggle-on"></i> Nav</a></li>
17-
<!-- entries without drop-downs appear here -->
18-
19-
{% assign topnav = site.data[page.topnav] %}
20-
{% assign topnav_dropdowns = site.data[page.topnav].topnav_dropdowns %}
21-
22-
{% for entry in topnav.topnav %}
23-
{% for item in entry.items %}
24-
{% if item.external_url %}
4+
<div class="navbar-header">
5+
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
6+
<span class="sr-only">Toggle navigation</span>
7+
<span class="icon-bar"></span>
8+
<span class="icon-bar"></span>
9+
<span class="icon-bar"></span>
10+
</button>
11+
<a class="navbar-brand" href="{{site.baseurl}}/">
12+
<img src="{{site.baseurl}}/images/sun-small.png" alt="Google Summer of Code Logo">
13+
<span class="projectTitle">{{site.topnav_title}}</span>
14+
</a>
15+
</div>
16+
17+
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
18+
<ul class="nav navbar-nav navbar-right">
19+
<li><a id="tg-sb-link" href="#"><i id="tg-sb-icon" class="fa fa-toggle-on"></i> Nav</a></li>
20+
21+
<!-- Theme Toggle Button -->
22+
<li>
23+
<a href="#" id="theme-toggle">
24+
<i class="fa fa-adjust"></i> Theme
25+
</a>
26+
</li>
27+
28+
{% assign topnav = site.data[page.topnav] %}
29+
{% assign topnav_dropdowns = site.data[page.topnav].topnav_dropdowns %}
30+
31+
{% for entry in topnav.topnav %}
32+
{% for item in entry.items %}
33+
{% if item.external_url %}
2534
<li><a href="{{item.external_url}}" target="_blank">{{item.title}}</a></li>
26-
{% elsif page.url contains item.url %}
35+
{% elsif page.url contains item.url %}
2736
<li class="active"><a href="{{item.url | remove: "/"}}">{{item.title}}</a></li>
28-
{% else %}
37+
{% else %}
2938
<li><a href="{{item.url | remove: "/"}}">{{item.title}}</a></li>
30-
{% endif %}
31-
{% endfor %}
32-
{% endfor %}
33-
<!-- entries with drop-downs appear here -->
34-
<!-- conditional logic to control which topnav appears for the audience defined in the configuration file.-->
35-
{% for entry in topnav_dropdowns %}
36-
{% for folder in entry.folders %}
37-
<li class="dropdown">
38-
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ folder.title }}<b class="caret"></b></a>
39-
<ul class="dropdown-menu">
40-
{% for folderitem in folder.folderitems %}
41-
{% if folderitem.external_url %}
42-
<li><a href="{{folderitem.external_url}}" target="_blank">{{folderitem.title}}</a></li>
43-
{% elsif page.url contains folderitem.url %}
44-
<li class="dropdownActive"><a href="{{folderitem.url | remove: "/"}}">{{folderitem.title}}</a></li>
45-
{% else %}
46-
<li><a href="{{folderitem.url | remove: "/"}}">{{folderitem.title}}</a></li>
47-
{% endif %}
48-
{% endfor %}
49-
</ul>
50-
</li>
51-
{% endfor %}
52-
{% endfor %}
53-
{% if site.feedback_disable == null or site.feedback_disable == false %}
54-
{% include feedback.html %}
55-
{% endif %}
56-
<!--comment out this block if you want to hide search-->
57-
<!--
58-
<li>
59-
<div id="search-demo-container">
60-
<input type="text" id="search-input" placeholder="{{site.data.strings.search_placeholder_text}}">
61-
<ul id="results-container"></ul>
62-
</div>
63-
<script src="{{ "/third_party/js/jekyll-search.js"}}" type="text/javascript"></script>
64-
<script type="text/javascript">
65-
SimpleJekyllSearch.init({
66-
searchInput: document.getElementById('search-input'),
67-
resultsContainer: document.getElementById('results-container'),
68-
dataSource: '{{ "/search.json" }}',
69-
searchResultTemplate: '<li><a href="{url}" title="{{page.title | replace: "\'", "\"}}">{title}</a></li>',
70-
noResultsText: '{{site.data.strings.search_no_results_text}}',
71-
limit: 10,
72-
fuzzy: true,
73-
})
74-
</script>
75-
</li>
76-
-->
77-
</ul>
78-
</div>
79-
</div>
80-
<!-- /.container -->
81-
</nav>
39+
{% endif %}
40+
{% endfor %}
41+
{% endfor %}
42+
43+
{% for entry in topnav_dropdowns %}
44+
{% for folder in entry.folders %}
45+
<li class="dropdown">
46+
<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ folder.title }}<b class="caret"></b></a>
47+
<ul class="dropdown-menu">
48+
{% for folderitem in folder.folderitems %}
49+
{% if folderitem.external_url %}
50+
<li><a href="{{folderitem.external_url}}" target="_blank">{{folderitem.title}}</a></li>
51+
{% elsif page.url contains folderitem.url %}
52+
<li class="dropdownActive"><a href="{{folderitem.url | remove: "/"}}">{{folderitem.title}}</a></li>
53+
{% else %}
54+
<li><a href="{{folderitem.url | remove: "/"}}">{{folderitem.title}}</a></li>
55+
{% endif %}
56+
{% endfor %}
57+
</ul>
58+
</li>
59+
{% endfor %}
60+
{% endfor %}
61+
62+
{% if site.feedback_disable == null or site.feedback_disable == false %}
63+
{% include feedback.html %}
64+
{% endif %}
65+
</ul>
66+
</div>
67+
</div>
68+
</nav>
69+

‎_layouts/default.html‎

Lines changed: 67 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,37 @@
22
<html>
33
<head>
44
{% include head.html %}
5+
6+
<!-- Theme stylesheet -->
7+
<link id="theme-stylesheet" rel="stylesheet" href="{{ '/css/theme-dark.css' | relative_url }}">
8+
9+
<script>
10+
// Load saved theme from localStorage
11+
document.addEventListener("DOMContentLoaded", function () {
12+
const themeLink = document.getElementById("theme-stylesheet");
13+
const savedTheme = localStorage.getItem("theme") || "dark";
14+
themeLink.href = "/css/theme-" + savedTheme + ".css";
15+
});
16+
</script>
17+
518
<script>
6-
$(document).ready(function() {
19+
$(document).ready(function () {
20+
// Theme toggle logic
21+
$("#theme-toggle").click(function (e) {
22+
e.preventDefault();
23+
const themeLink = $("#theme-stylesheet");
24+
const currentHref = themeLink.attr("href");
25+
const newTheme = currentHref.includes("dark") ? "light" : "dark";
26+
themeLink.attr("href", "/css/theme-" + newTheme + ".css");
27+
localStorage.setItem("theme", newTheme);
28+
});
29+
730
// Initialize navgoco with default options
831
$("#mysidebar").navgoco({
932
caretHtml: '',
1033
accordion: true,
11-
openClass: 'active', // open
12-
save: false, // leave false or nav highlighting doesn't work right
34+
openClass: 'active',
35+
save: false,
1336
cookie: {
1437
name: 'navgoco',
1538
expires: false,
@@ -21,86 +44,67 @@
2144
}
2245
});
2346

24-
$("#collapseAll").click(function(e) {
47+
$("#collapseAll").click(function (e) {
2548
e.preventDefault();
2649
$("#mysidebar").navgoco('toggle', false);
2750
});
2851

29-
$("#expandAll").click(function(e) {
52+
$("#expandAll").click(function (e) {
3053
e.preventDefault();
3154
$("#mysidebar").navgoco('toggle', true);
3255
});
3356

34-
});
57+
$('[data-toggle="tooltip"]').tooltip();
3558

36-
</script>
37-
<script>
38-
$(function () {
39-
$('[data-toggle="tooltip"]').tooltip()
40-
})
41-
</script>
42-
<script>
43-
$(document).ready(function() {
44-
$("#tg-sb-link").click(function() {
59+
$("#tg-sb-link").click(function () {
4560
$("#tg-sb-sidebar").toggle();
46-
$("#tg-sb-content").toggleClass('col-md-9');
47-
$("#tg-sb-content").toggleClass('col-md-12');
48-
$("#tg-sb-icon").toggleClass('fa-toggle-on');
49-
$("#tg-sb-icon").toggleClass('fa-toggle-off');
61+
$("#tg-sb-content").toggleClass('col-md-9 col-md-12');
62+
$("#tg-sb-icon").toggleClass('fa-toggle-on fa-toggle-off');
5063
});
5164
});
5265
</script>
66+
5367
{% if page.datatable == true %}
54-
<!-- Include the standard DataTables bits -->
55-
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.css">
56-
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>
57-
<!-- First, this walks through the tables that occur between ...-begin
58-
and ...-end and add the "datatable" class to them.
59-
Then it invokes DataTable's standard initializer
60-
Credit here: http://www.beardedhacker.com/blog/2015/08/28/add-class-attribute-to-markdown-table/
61-
-->
62-
<script>
63-
$(document).ready(function(){
64-
$('div.datatable-begin').nextUntil('div.datatable-end', 'table').addClass('display');
65-
$('table.display').DataTable( {
66-
paging: true,
67-
stateSave: true,
68-
searching: true
69-
});
70-
});
71-
</script>
68+
<!-- DataTables setup -->
69+
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.css">
70+
<script type="text/javascript" src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>
71+
<script>
72+
$(document).ready(function () {
73+
$('div.datatable-begin').nextUntil('div.datatable-end', 'table').addClass('display');
74+
$('table.display').DataTable({
75+
paging: true,
76+
stateSave: true,
77+
searching: true
78+
});
79+
});
80+
</script>
7281
{% endif %}
73-
7482
</head>
7583
<body>
76-
{% include topnav.html %}
77-
<!-- Page Content -->
78-
<div class="container">
79-
<div id="main">
80-
<!-- Content Row -->
81-
<div class="row">
82-
{% assign content_col_size = "col-md-12" %}
83-
{% unless page.hide_sidebar %}
84-
<!-- Sidebar Column -->
85-
<div class="col-md-3" id="tg-sb-sidebar">
86-
{% include sidebar.html %}
87-
</div>
88-
{% assign content_col_size = "col-md-9" %}
89-
{% endunless %}
9084

91-
<!-- Content Column -->
92-
<div class="{{content_col_size}}" id="tg-sb-content">
93-
{{content}}
85+
{% include topnav.html %}
86+
87+
<!-- Page Content -->
88+
<div class="container">
89+
<div id="main">
90+
<div class="row">
91+
{% assign content_col_size = "col-md-12" %}
92+
{% unless page.hide_sidebar %}
93+
<div class="col-md-3" id="tg-sb-sidebar">
94+
{% include sidebar.html %}
95+
</div>
96+
{% assign content_col_size = "col-md-9" %}
97+
{% endunless %}
98+
99+
<div class="{{ content_col_size }}" id="tg-sb-content">
100+
{{ content }}
101+
</div>
102+
</div>
94103
</div>
95-
<!-- /.row -->
96-
</div>
97-
<!-- /.container -->
98-
</div>
99-
<!-- /#main -->
100104
</div>
101105

106+
{% if site.google_analytics %}
107+
{% include google_analytics.html %}
108+
{% endif %}
102109
</body>
103-
{% if site.google_analytics %}
104-
{% include google_analytics.html %}
105-
{% endif %}
106110
</html>

0 commit comments

Comments
 (0)