Skip to content

Commit d6950df

Browse files
smartnodesmartnode
committed
Modernize site theme to Dark Material Design
- Upgrade Bootstrap to v5.3.3 - Implement modern dark theme with neutral palette - Update icons to Bootstrap Icons - Refine syntax highlighting to GitHub Dark style - Simplify UI by removing unused elements and plugins - Add stylized profile image interaction on About page Signed-off-by: Elmurod Talipov <elmurod.talipov@gmail.com>
1 parent 4f1a299 commit d6950df

243 files changed

Lines changed: 7700 additions & 49911 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
11
.DS_Store
22
_site/
33
.sass-cache/
4+
.bundle/
5+
.jekyll-cache/
6+
vendor/
7+
Gemfile.lock

‎README.md‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,12 @@
11
## smartnode.github.io
22

3-
This is my personal blog repository, and I will update from time to time. Some content
3+
This is my personal blog repository, and I will update from time to time. Some content
44
maybe useful to you, though nothing to steal here. Enjoy!
5+
6+
### How to test locally
7+
8+
```sh
9+
bundle config set --local path 'vendor/bundle'
10+
bundle install
11+
bundle exec jekyll serve
12+
```

‎_config.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,10 @@ paginate: 5
2626
navigation:
2727
- title: Home
2828
url: /index.html
29-
icon: fa-home
29+
icon: bi-house
3030
- title: About
3131
url: /about
32-
icon: fa-user
32+
icon: bi-person
3333
# - title: Blog
3434
# url: /posts
3535
# icon: fa-bookmark

‎_includes/header.html‎

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,16 @@
1515
{% endif %}
1616
</title>
1717

18+
<!-- Google Fonts -->
19+
<link rel="preconnect" href="https://fonts.googleapis.com">
20+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
21+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
22+
23+
<!-- Bootstrap Icons -->
24+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
25+
1826
<!-- CSS -->
19-
<link id="theme-style" rel="stylesheet" href="{{ "/assets/css/theme-2.css" | prepend: site.baseurl }}">
27+
<link id="theme-style" rel="stylesheet" href="{{ "/assets/scss/main.css" | prepend: site.baseurl }}">
2028

2129
<!-- Icons -->
2230
<link rel="shortcut icon" href="{{ "/assets/favicon.ico" | prepend: site.baseurl }}">
@@ -27,31 +35,31 @@
2735
{% if site.google_analytics %} {% include google_analytics.html %} {% endif %}
2836
</head>
2937

30-
<body>
38+
<body data-bs-theme="dark">
3139
<header class="header text-center">
3240
<h1 class="blog-name pt-lg-4 mb-0"><a href="{{ site.baseurl }}/">{{ site.title }}</a></h1>
3341
<nav class="navbar navbar-expand-lg navbar-dark">
34-
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation"
42+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navigation"
3543
aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
3644
<span class="navbar-toggler-icon"></span>
3745
</button>
3846
<div id="navigation" class="collapse navbar-collapse flex-column">
3947
<div class="profile-section pt-3 pt-lg-0">
4048
<img class="profile-image mb-3 rounded-circle mx-auto"
4149
src="{{ "/assets/images/profile.png" | prepend: site.baseurl }}" alt="image">
42-
<div class="bio mb-3">I am Elmurod Talipov, a system software engineer.<br><a href="/about">Find out more
50+
<div class="bio mb-3 text-secondary">I am Elmurod Talipov, a system software engineer.<br><a href="/about" class="text-primary">Find out more
4351
about me</a></div>
4452
<!--//bio-->
4553
<ul class="social-list list-inline py-3 mx-auto">
46-
<li class="list-inline-item"><a href="https://twitter.com/{{ site.social.twitter }}"><i
47-
class="fab fa-twitter fa-fw"></i></a></li>
48-
<li class="list-inline-item"><a href="https://www.linkedin.com/in/{{ site.social.linkedin }}"><i
49-
class="fab fa-linkedin-in fa-fw"></i></a></li>
50-
<li class="list-inline-item"><a href="https://github.com/{{ site.social.github }}"><i
51-
class="fab fa-github-alt fa-fw"></i></a></li>
54+
<li class="list-inline-item"><a href="https://twitter.com/{{ site.social.twitter }}" class="text-secondary"><i
55+
class="bi bi-twitter-x"></i></a></li>
56+
<li class="list-inline-item"><a href="https://www.linkedin.com/in/{{ site.social.linkedin }}" class="text-secondary"><i
57+
class="bi bi-linkedin"></i></a></li>
58+
<li class="list-inline-item"><a href="https://github.com/{{ site.social.github }}" class="text-secondary"><i
59+
class="bi bi-github"></i></a></li>
5260
</ul>
5361
<!--//social-list-->
54-
<hr>
62+
<hr class="border-secondary opacity-25">
5563
</div>
5664
<!--//profile-section-->
5765
<ul class="navbar-nav flex-column text-left">
@@ -64,16 +72,13 @@ <h1 class="blog-name pt-lg-4 mb-0"><a href="{{ site.baseurl }}/">{{ site.title }
6472
{% endif %}
6573
<li class="nav-item {% if forloop.first %}first{% endif %} {{ active }} {% if forloop.last %}last{% endif %}">
6674
<a class="nav-link" href="{{ link.url | prepend: site.baseurl }}">
67-
<i class="fas {{ link.icon }} fa-fw mr-2"></i>{{ link.title }}{% if current %}
68-
<span class="sr-only">({{ current }})</span>{% endif %}
75+
<i class="{{ link.icon }} me-2"></i>{{ link.title }}{% if current %}
76+
<span class="visually-hidden">({{ current }})</span>{% endif %}
6977
</a>
7078
</li>
7179
{% endfor %}
7280
</ul>
7381

74-
<div class="my-2 my-md-3">
75-
<a class="btn btn-primary" href="mailto:{{ site.social.email }}" target="_blank">Get in Touch</a>
76-
</div>
7782
</div>
7883
</nav>
79-
</header>
84+
</header>

‎_includes/scripts.html‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,2 @@
1-
<!-- FontAwesome JS-->
2-
<script defer src="https://use.fontawesome.com/releases/v5.7.1/js/all.js"
3-
integrity="sha384-eVEQC9zshBn0rFj4+TU78eNA19HMNigMviK/PU/FFjLXqa/GKPgX58rvt5Z8PLs7" crossorigin="anonymous">
4-
</script>
5-
6-
<!-- Javascript -->
7-
<script src="{{ "/assets/plugins/jquery-3.3.1.min.js" | prepend: site.baseurl }}"></script>
8-
<script src="{{ "/assets/plugins/popper.min.js" | prepend: site.baseurl }}"></script>
9-
<script src="{{ "/assets/plugins/bootstrap/js/bootstrap.min.js" | prepend: site.baseurl }}"></script>
1+
<!-- Bootstrap Bundle with Popper -->
2+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

‎_layouts/post.html‎

Lines changed: 13 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,49 +3,36 @@
33
---
44

55
<!-- Plugin CSS -->
6-
<!--link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/styles/monokai-sublime.min.css"-->
76
<link id="code-style" rel="stylesheet" href="{{ "/assets/css/syntax.css" | prepend: site.baseurl }}">
87

98
<article class="blog-post px-3 py-5 p-md-5">
10-
<div class="container">
11-
<header class="blog-post-header">
12-
<h1 class="title mb-2">{{ page.title }}</h1>
13-
<div class="meta mb-3"><span class="date">{{ page.date | date: '%B %d, %Y' }}</span><span
14-
class="time">{{ page.content | number_of_words | divided_by:180 }} min
15-
read</span></div>
9+
<div class="container card p-4 p-md-5 shadow-sm border-0">
10+
<header class="blog-post-header mb-4">
11+
<h1 class="title mb-2 text-primary">{{ page.title }}</h1>
12+
<div class="meta mb-3 text-secondary">
13+
<span class="date me-3"><i class="bi bi-calendar3 me-1"></i>{{ page.date | date: '%B %d, %Y' }}</span>
14+
<span class="time"><i class="bi bi-clock me-1"></i>{{ page.content | number_of_words | divided_by:180 }} min read</span>
15+
</div>
1616
</header>
17-
<div class="blog-post-body" style="text-align: justify;">
17+
<div class="blog-post-body text-secondary" style="text-align: justify; line-height: 1.8;">
1818
{{ content }}
1919
</div>
2020

2121
<nav class="blog-nav nav nav-justified my-5">
2222
{% if page.previous %}
2323
{% assign previous = page.previous %}
24-
{% else %}
25-
{% assign previous = site.posts[0] %}
24+
<a class="nav-link-prev nav-item nav-link btn btn-outline-secondary rounded-pill me-2" href="{{site.baseurl}}{{previous.url}}"
25+
title="Previous Post: {{previous.title}}"><i class="bi bi-arrow-left me-2"></i>Previous</a>
2626
{% endif %}
27-
<a class="nav-link-prev nav-item nav-link rounded-left" href="{{site.baseurl}}{{previous.url}}"
28-
title="Previous Post: {{previous.title}}">Previous<i class="arrow-prev fas fa-long-arrow-alt-left"></i></a>
2927

3028
{% if page.next %}
3129
{% assign next = page.next %}
32-
{% else %}
33-
{%comment%}
34-
As the array index start at zero we substract 1 to the total count,
35-
we then get the last post index in the site.posts array
36-
{%endcomment%}
37-
{% assign last lastPostIndex = site.posts | size | minus: 1 %}
38-
{% assign next = site.posts[lastPostIndex] %}
30+
<a class="nav-link-next nav-item nav-link btn btn-outline-secondary rounded-pill ms-2" href="{{site.baseurl}}{{next.url}}"
31+
title="Next Post: {{next.title}}">Next<i class="bi bi-arrow-right ms-2"></i></a>
3932
{% endif %}
40-
<a class="nav-link-next nav-item nav-link rounded-right" href="{{site.baseurl}}{{next.url}}"
41-
title="next Post: {{next.title}}">Next<i class="arrow-next fas fa-long-arrow-alt-right"></i></a>
4233
</nav>
43-
4434
</div>
4535
</article>
4636

47-
<!-- Page Specific JS -->
48-
<!--script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.14.2/highlight.min.js"></script-->
49-
5037
<!-- Custom JS -->
51-
<script src="{{ "/assets/js/blog.js" | prepend: site.baseurl }}"></script>
38+
<script src="{{ "/assets/js/blog.js" | prepend: site.baseurl }}"></script>

‎about.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,11 @@ title: About Me
44
---
55

66
<p class="message">I am a software engineer with long-term experience on embedded linux systems and applications development. I write code for bootloaders, Linux Kernel, modules, system tools, boot scripts, offline and online software update.</p>
7-
<figure><img class="rounded img-fluid" src="{{ "/assets/images/at-work.jpg" | prepend: site.baseurl }}" alt="Working"></figure>
7+
<div class="stylized-image-container">
8+
<div class="image-wrapper">
9+
<img src="{{ "/assets/images/swiss.jpg" | prepend: site.baseurl }}" alt="Switzerland">
10+
</div>
11+
</div>
812
<h4>Research Work</h4>
913
<ul>
1014
<li>E. Talipov, Y. Chon, H. Cha, User Context-based Data Delivery in Spontaneous Smartphone Networks, Pervasive and Mobile Computing, Volume 17, pp. 122-138, 2015.</li>

‎assets/css/syntax.css‎

Lines changed: 89 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,76 +1,90 @@
1-
.highlight pre { background-color: #222222 }
2-
.highlight .hll { background-color: #222222 }
3-
.highlight .c { color: #000080 } /* Comment */
4-
.highlight .err { color: #cccccc; border: 1px solid #FF0000 } /* Error */
5-
.highlight .g { color: #cccccc } /* Generic */
6-
.highlight .k { color: #cdcd00 } /* Keyword */
7-
.highlight .l { color: #cccccc } /* Literal */
8-
.highlight .n { color: #cccccc } /* Name */
9-
.highlight .o { color: #3399cc } /* Operator */
10-
.highlight .x { color: #cccccc } /* Other */
11-
.highlight .p { color: #cccccc } /* Punctuation */
12-
.highlight .cm { color: #000080 } /* Comment.Multiline */
13-
.highlight .cp { color: #000080 } /* Comment.Preproc */
14-
.highlight .c1 { color: #000080 } /* Comment.Single */
15-
.highlight .cs { color: #cd0000; font-weight: bold } /* Comment.Special */
16-
.highlight .gd { color: #cd0000 } /* Generic.Deleted */
17-
.highlight .ge { color: #cccccc; font-style: italic } /* Generic.Emph */
18-
.highlight .gr { color: #FF0000 } /* Generic.Error */
19-
.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */
20-
.highlight .gi { color: #00cd00 } /* Generic.Inserted */
21-
.highlight .go { color: #808080 } /* Generic.Output */
22-
.highlight .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
23-
.highlight .gs { color: #cccccc; font-weight: bold } /* Generic.Strong */
24-
.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
25-
.highlight .gt { color: #0040D0 } /* Generic.Traceback */
26-
.highlight .kc { color: #cdcd00 } /* Keyword.Constant */
27-
.highlight .kd { color: #00cd00 } /* Keyword.Declaration */
28-
.highlight .kn { color: #cd00cd } /* Keyword.Namespace */
29-
.highlight .kp { color: #cdcd00 } /* Keyword.Pseudo */
30-
.highlight .kr { color: #cdcd00 } /* Keyword.Reserved */
31-
.highlight .kt { color: #00cd00 } /* Keyword.Type */
32-
.highlight .ld { color: #cccccc } /* Literal.Date */
33-
.highlight .m { color: #cd00cd } /* Literal.Number */
34-
.highlight .s { color: #cd0000 } /* Literal.String */
35-
.highlight .na { color: #cccccc } /* Name.Attribute */
36-
.highlight .nb { color: #cd00cd } /* Name.Builtin */
37-
.highlight .nc { color: #00cdcd } /* Name.Class */
38-
.highlight .no { color: #cccccc } /* Name.Constant */
39-
.highlight .nd { color: #cccccc } /* Name.Decorator */
40-
.highlight .ni { color: #cccccc } /* Name.Entity */
41-
.highlight .ne { color: #666699; font-weight: bold } /* Name.Exception */
42-
.highlight .nf { color: #cccccc } /* Name.Function */
43-
.highlight .nl { color: #cccccc } /* Name.Label */
44-
.highlight .nn { color: #cccccc } /* Name.Namespace */
45-
.highlight .nx { color: #cccccc } /* Name.Other */
46-
.highlight .py { color: #cccccc } /* Name.Property */
47-
.highlight .nt { color: #cccccc } /* Name.Tag */
48-
.highlight .nv { color: #00cdcd } /* Name.Variable */
49-
.highlight .ow { color: #cdcd00 } /* Operator.Word */
50-
.highlight .w { color: #cccccc } /* Text.Whitespace */
51-
.highlight .mf { color: #cd00cd } /* Literal.Number.Float */
52-
.highlight .mh { color: #cd00cd } /* Literal.Number.Hex */
53-
.highlight .mi { color: #cd00cd } /* Literal.Number.Integer */
54-
.highlight .mo { color: #cd00cd } /* Literal.Number.Oct */
55-
.highlight .sb { color: #cd0000 } /* Literal.String.Backtick */
56-
.highlight .sc { color: #cd0000 } /* Literal.String.Char */
57-
.highlight .sd { color: #cd0000 } /* Literal.String.Doc */
58-
.highlight .s2 { color: #cd0000 } /* Literal.String.Double */
59-
.highlight .se { color: #cd0000 } /* Literal.String.Escape */
60-
.highlight .sh { color: #cd0000 } /* Literal.String.Heredoc */
61-
.highlight .si { color: #cd0000 } /* Literal.String.Interpol */
62-
.highlight .sx { color: #cd0000 } /* Literal.String.Other */
63-
.highlight .sr { color: #cd0000 } /* Literal.String.Regex */
64-
.highlight .s1 { color: #cd0000 } /* Literal.String.Single */
65-
.highlight .ss { color: #cd0000 } /* Literal.String.Symbol */
66-
.highlight .bp { color: #cd00cd } /* Name.Builtin.Pseudo */
67-
.highlight .vc { color: #00cdcd } /* Name.Variable.Class */
68-
.highlight .vg { color: #00cdcd } /* Name.Variable.Global */
69-
.highlight .vi { color: #00cdcd } /* Name.Variable.Instance */
70-
.highlight .il { color: #cd00cd } /* Literal.Number.Integer.Long */
1+
/* GitHub Dark Syntax Highlighting */
2+
/* Remove extraneous backgrounds from individual tokens */
3+
.highlight pre { background: transparent !important; margin: 0; padding: 0; }
4+
.highlight table { border: none; margin: 0; padding: 0; }
5+
.highlight td { padding: 0; }
6+
.highlight .hll { background-color: #2b303b }
7+
.highlight .c { color: #65737e } /* Comment */
8+
.highlight .err { color: #bf616a } /* Error */
9+
.highlight .k { color: #b48ead } /* Keyword */
10+
.highlight .l { color: #d08770 } /* Literal */
11+
.highlight .n { color: #a3be8c } /* Name */
12+
.highlight .o { color: #96b5b4 } /* Operator */
13+
.highlight .p { color: #c0c5ce } /* Punctuation */
14+
.highlight .cm { color: #65737e } /* Comment.Multiline */
15+
.highlight .cp { color: #65737e } /* Comment.Preproc */
16+
.highlight .c1 { color: #65737e } /* Comment.Single */
17+
.highlight .cs { color: #65737e } /* Comment.Special */
18+
.highlight .gd { color: #bf616a } /* Generic.Deleted */
19+
.highlight .ge { font-style: italic } /* Generic.Emph */
20+
.highlight .gh { color: #ebcb8b; font-weight: bold } /* Generic.Heading */
21+
.highlight .gi { color: #a3be8c } /* Generic.Inserted */
22+
.highlight .gp { color: #65737e; font-weight: bold } /* Generic.Prompt */
23+
.highlight .gs { font-weight: bold } /* Generic.Strong */
24+
.highlight .gu { color: #96b5b4; font-weight: bold } /* Generic.Subheading */
25+
.highlight .kc { color: #b48ead } /* Keyword.Constant */
26+
.highlight .kd { color: #b48ead } /* Keyword.Declaration */
27+
.highlight .kn { color: #b48ead } /* Keyword.Namespace */
28+
.highlight .kp { color: #b48ead } /* Keyword.Pseudo */
29+
.highlight .kr { color: #b48ead } /* Keyword.Reserved */
30+
.highlight .kt { color: #b48ead } /* Keyword.Type */
31+
.highlight .ld { color: #a3be8c } /* Literal.Date */
32+
.highlight .m { color: #d08770 } /* Literal.Number */
33+
.highlight .s { color: #a3be8c } /* Literal.String */
34+
.highlight .na { color: #8fa1b3 } /* Name.Attribute */
35+
.highlight .nb { color: #a3be8c } /* Name.Builtin */
36+
.highlight .nc { color: #ebcb8b } /* Name.Class */
37+
.highlight .no { color: #bf616a } /* Name.Constant */
38+
.highlight .nd { color: #96b5b4 } /* Name.Decorator */
39+
.highlight .ni { color: #a3be8c } /* Name.Entity */
40+
.highlight .ne { color: #bf616a } /* Name.Exception */
41+
.highlight .nf { color: #8fa1b3 } /* Name.Function */
42+
.highlight .nl { color: #a3be8c } /* Name.Label */
43+
.highlight .nn { color: #ebcb8b } /* Name.Namespace */
44+
.highlight .nx { color: #a3be8c } /* Name.Other */
45+
.highlight .py { color: #a3be8c } /* Name.Property */
46+
.highlight .nt { color: #96b5b4 } /* Name.Tag */
47+
.highlight .nv { color: #bf616a } /* Name.Variable */
48+
.highlight .ow { color: #96b5b4 } /* Operator.Word */
49+
.highlight .w { color: #c0c5ce } /* Text.Whitespace */
50+
.highlight .mf { color: #d08770 } /* Literal.Number.Float */
51+
.highlight .mh { color: #d08770 } /* Literal.Number.Hex */
52+
.highlight .mi { color: #d08770 } /* Literal.Number.Integer */
53+
.highlight .mo { color: #d08770 } /* Literal.Number.Oct */
54+
.highlight .sb { color: #a3be8c } /* Literal.String.Backtick */
55+
.highlight .sc { color: #a3be8c } /* Literal.String.Char */
56+
.highlight .sd { color: #65737e } /* Literal.String.Doc */
57+
.highlight .s2 { color: #a3be8c } /* Literal.String.Double */
58+
.highlight .se { color: #d08770 } /* Literal.String.Escape */
59+
.highlight .sh { color: #a3be8c } /* Literal.String.Heredoc */
60+
.highlight .si { color: #d08770 } /* Literal.String.Interpol */
61+
.highlight .sx { color: #a3be8c } /* Literal.String.Other */
62+
.highlight .sr { color: #a3be8c } /* Literal.String.Regex */
63+
.highlight .s1 { color: #a3be8c } /* Literal.String.Single */
64+
.highlight .ss { color: #a3be8c } /* Literal.String.Symbol */
65+
.highlight .bp { color: #a3be8c } /* Name.Builtin.Pseudo */
66+
.highlight .vc { color: #bf616a } /* Name.Variable.Class */
67+
.highlight .vg { color: #bf616a } /* Name.Variable.Global */
68+
.highlight .vi { color: #bf616a } /* Name.Variable.Instance */
69+
.highlight .il { color: #d08770 } /* Literal.Number.Integer.Long */
7170

72-
pre.highlight {
73-
color: #eee;
74-
font-size: 12px;
75-
padding: 1em;
76-
}
71+
/* Add background and padding to code blocks */
72+
.highlight {
73+
background-color: #0d1117 !important; /* Darker than normal background */
74+
color: #e3e3e3;
75+
padding: 1.25rem !important;
76+
border-radius: 0.5rem;
77+
overflow: auto;
78+
font-size: 0.9rem;
79+
line-height: 1.5;
80+
border: 1px solid rgba(255, 255, 255, 0.05) !important;
81+
margin-bottom: 2rem;
82+
}
83+
84+
/* Ensure no extra padding inside pre/code */
85+
pre.highlight, .highlight pre, .highlight code {
86+
background: transparent !important;
87+
padding: 0 !important;
88+
margin: 0 !important;
89+
border: none !important;
90+
}

‎assets/css/theme-1.css‎

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

‎assets/css/theme-2.css‎

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

0 commit comments

Comments
 (0)