├── .github └── FUNDING.yml ├── .gitignore ├── .prettierrc ├── .vscode └── settings.json ├── 404.md ├── Gemfile ├── Gemfile.lock ├── LICENSE ├── README.md ├── _config.yml ├── _data └── author.yml ├── _includes ├── bio.html ├── category-modal.html ├── footer.html ├── head.html └── header.html ├── _layouts ├── blog.html └── post.html ├── all_collections └── _posts │ ├── 1948-12-12-the-purpose-of-education.md │ ├── 2021-11-04-jekyll-markdown.md │ └── 2025-03-18-math-examples.md ├── assets ├── css │ ├── blog.css │ ├── common.css │ ├── post.css │ └── syntax.css ├── icons │ ├── dev.png │ ├── email.png │ ├── github.png │ ├── instagram.png │ ├── linkedin.png │ ├── telegram.png │ └── twitter.png └── js │ ├── categories.js │ ├── copy-code.js │ ├── lbox.js │ └── mode.js ├── index.md └── screenshots ├── mobile_blog.png ├── mobile_post.png ├── pc_blog_dm.png ├── pc_blog_lm.png └── pc_post.png /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: sharadcodes 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | _site/ 2 | .sass-cache/ 3 | .jekyll-cache/ 4 | .jekyll-metadata 5 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "tabWidth": 2, 3 | "printWidth": 80, 4 | "singleQuote": false 5 | } 6 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.defaultFormatter": "esbenp.prettier-vscode", 3 | "editor.formatOnSave": true 4 | } 5 | -------------------------------------------------------------------------------- /404.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 404 Page not found 3 | layout: post 4 | --- 5 | 6 | Oops! this page dosen't exists, head back to [Homepage]({{site.baseurl}}) 7 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | # frozen_string_literal: true 2 | source "https://rubygems.org" 3 | 4 | gem "jemoji" 5 | gem "jekyll-seo-tag" 6 | gem "jekyll-sitemap" 7 | gem "jekyll-feed" -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | activesupport (7.0.2.3) 5 | concurrent-ruby (~> 1.0, >= 1.0.2) 6 | i18n (>= 1.6, < 2) 7 | minitest (>= 5.1) 8 | tzinfo (~> 2.0) 9 | addressable (2.8.0) 10 | public_suffix (>= 2.0.2, < 5.0) 11 | colorator (1.1.0) 12 | concurrent-ruby (1.1.10) 13 | em-websocket (0.5.3) 14 | eventmachine (>= 0.12.9) 15 | http_parser.rb (~> 0) 16 | eventmachine (1.2.7) 17 | ffi (1.15.5) 18 | forwardable-extended (2.6.0) 19 | gemoji (3.0.1) 20 | html-pipeline (2.14.1) 21 | activesupport (>= 2) 22 | nokogiri (>= 1.4) 23 | http_parser.rb (0.8.0) 24 | i18n (1.10.0) 25 | concurrent-ruby (~> 1.0) 26 | jekyll (4.2.2) 27 | addressable (~> 2.4) 28 | colorator (~> 1.0) 29 | em-websocket (~> 0.5) 30 | i18n (~> 1.0) 31 | jekyll-sass-converter (~> 2.0) 32 | jekyll-watch (~> 2.0) 33 | kramdown (~> 2.3) 34 | kramdown-parser-gfm (~> 1.0) 35 | liquid (~> 4.0) 36 | mercenary (~> 0.4.0) 37 | pathutil (~> 0.9) 38 | rouge (~> 3.0) 39 | safe_yaml (~> 1.0) 40 | terminal-table (~> 2.0) 41 | jekyll-feed (0.16.0) 42 | jekyll (>= 3.7, < 5.0) 43 | jekyll-sass-converter (2.2.0) 44 | sassc (> 2.0.1, < 3.0) 45 | jekyll-seo-tag (2.8.0) 46 | jekyll (>= 3.8, < 5.0) 47 | jekyll-sitemap (1.4.0) 48 | jekyll (>= 3.7, < 5.0) 49 | jekyll-watch (2.2.1) 50 | listen (~> 3.0) 51 | jemoji (0.12.0) 52 | gemoji (~> 3.0) 53 | html-pipeline (~> 2.2) 54 | jekyll (>= 3.0, < 5.0) 55 | kramdown (2.3.2) 56 | rexml 57 | kramdown-parser-gfm (1.1.0) 58 | kramdown (~> 2.0) 59 | liquid (4.0.3) 60 | listen (3.7.1) 61 | rb-fsevent (~> 0.10, >= 0.10.3) 62 | rb-inotify (~> 0.9, >= 0.9.10) 63 | mercenary (0.4.0) 64 | minitest (5.15.0) 65 | nokogiri (1.18.4-x86_64-linux-gnu) 66 | racc (~> 1.4) 67 | pathutil (0.16.2) 68 | forwardable-extended (~> 2.6) 69 | public_suffix (4.0.7) 70 | racc (1.8.1) 71 | rb-fsevent (0.11.1) 72 | rb-inotify (0.10.1) 73 | ffi (~> 1.0) 74 | rexml (3.3.9) 75 | rouge (3.28.0) 76 | safe_yaml (1.0.5) 77 | sassc (2.4.0) 78 | ffi (~> 1.9) 79 | terminal-table (2.0.0) 80 | unicode-display_width (~> 1.1, >= 1.1.1) 81 | tzinfo (2.0.4) 82 | concurrent-ruby (~> 1.0) 83 | unicode-display_width (1.8.0) 84 | 85 | PLATFORMS 86 | x86_64-linux 87 | 88 | DEPENDENCIES 89 | jekyll-feed 90 | jekyll-seo-tag 91 | jekyll-sitemap 92 | jemoji 93 | 94 | BUNDLED WITH 95 | 2.3.5 96 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Sharad Raj Singh Maurya 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Jekyll Theme Serial Programmer 2 | 3 | > A Jekyll theme for serial programmers (-.-) 4 | 5 | [Live Demo](https://sharadcodes.github.io/jekyll-theme-serial-programmer/) 6 | 7 | ## Latest Updates 🎉 8 | 9 | ### New Features 10 | 11 | - **Math Support**: Write beautiful mathematical equations using LaTeX syntax 12 | - Inline math: `$E = mc^2$` 13 | - Display math: `$$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$` 14 | - **Code Copy Button**: One-click copy code blocks with visual feedback 15 | - Appears on hover at the bottom right of code blocks 16 | - Shows "Copied!" feedback when clicked 17 | - Works with both light and dark themes 18 | 19 | ## Features 20 | 21 | - Responsive 22 | - Dark mode/Light mode 23 | - Syntax highlighting 24 | - Feed 25 | - Sitemap 26 | - and more... 27 | 28 | ## How to install 29 | 30 | 1. Download or clone the repo 31 | `git clone https://github.com/sharadcodes/jekyll-theme-serial-programmer.git` 32 | 2. Enter the folder 33 | `cd jekyll-theme-serial-programmer` 34 | 3. Run 35 | `bundle install` 36 | 4. Start Jekyll server 37 | `bundle exec jekyll serve` 38 | 5. Access via 39 | - localhost or according to your pc configurations. 40 | 6. Change the `_config.yml` & `_data/author.yml` files as you like. 41 | 7. Upload the files on your repository and :sunglasses: enjoy. 42 | 43 | > NOTE: You have to remove `url` and `baseurl` from `_config.yml` to use this theme for `.github.io` 44 | 45 | ## Alert! 46 | 47 | - Don't touch `categories.js` inside `assets/js` folder unless you know what you're doing, it is used for generating links for the particular category pill you click on. 48 | - You should use github [discussions](https://github.com/sharadcodes/jekyll-theme-serial-programmer/discussions) to ask any question. 49 | - Don't use issues to ask any question unless you are facing issue related to the theme, jekyll or any file. 50 | 51 | ## Asking for support! 52 | 53 | Hello everyone, If you have used this theme and if it has helped you in any way or if you just want to support me for my open source work, you can support me by donating any amount. 54 | 55 | You can use the sponsor button at the top or on the right. 56 | 57 | ### [Github Sponsor Page](https://github.com/sponsors/sharadcodes) 58 | 59 | # Screenshots 60 | 61 | ## PC BLOG PAGE 62 | 63 | ![Blog page](https://raw.githubusercontent.com/sharadcodes/jekyll-theme-serial-programmer/main/screenshots/pc_blog_dm.png) 64 | 65 | ![Blog page light mode](https://raw.githubusercontent.com/sharadcodes/jekyll-theme-serial-programmer/main/screenshots/pc_blog_lm.png) 66 | 67 | ## PC POST EXAMPLE 68 | 69 | ![Post page](https://raw.githubusercontent.com/sharadcodes/jekyll-theme-serial-programmer/main/screenshots/pc_post.png) 70 | 71 | ## PHONE BLOG PAGE 72 | 73 | ![Blog page](https://raw.githubusercontent.com/sharadcodes/jekyll-theme-serial-programmer/main/screenshots/mobile_blog.png) 74 | 75 | ## PHONE POST EXAMPLE 76 | 77 | ![Post page](https://raw.githubusercontent.com/sharadcodes/jekyll-theme-serial-programmer/main/screenshots/mobile_post.png) 78 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | title: Jekyll Serial Programmer 2 | markdown: kramdown 3 | 4 | # for atom feed 5 | author: 6 | name: Sharad Raj Singh Maurya 7 | email: dev_sharad@outlook.com 8 | 9 | plugins: 10 | - jemoji 11 | - jekyll-seo-tag 12 | - jekyll-sitemap 13 | - jekyll-feed 14 | 15 | collections_dir: all_collections 16 | collections: 17 | posts: 18 | output: true 19 | 20 | defaults: 21 | - scope: 22 | path: "_posts" 23 | values: 24 | layout: "post" 25 | permalink: /posts/:title/ 26 | exclude: ["sitemap.xml", "feed.xml", "LICENSE", "README.md"] 27 | -------------------------------------------------------------------------------- /_data/author.yml: -------------------------------------------------------------------------------- 1 | name: Sharad Raj 2 | dp: https://avatars2.githubusercontent.com/u/36638057?s=460&u=0cbe4fd6b5a3655d91b3eb86db834d0829a0c086&v=4 3 | description: " 4 |

5 | Developed by Sharad Raj who lives in India building useful things for the world. 6 |

7 |
8 |

9 | You should follow him on Github 10 |

11 | " 12 | email: dev_sharad@outlook.com 13 | contact: 14 | - title: linkedin 15 | url: https://www.linkedin.com/in/srsmaurya 16 | - title: github 17 | url: https://github.com/sharadcodes 18 | - title: twitter 19 | url: https://twitter.com/iamsharadraj 20 | - title: dev 21 | url: https://dev.to/sharadcodes 22 | - title: email 23 | url: mailto:dev_sharad@outlook.com 24 | -------------------------------------------------------------------------------- /_includes/bio.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 |
6 |
{{site.data.author.description}}
7 |
8 | {% for i in site.data.author.contact %} 9 | 10 | 11 | 12 | {%endfor%} 13 |
14 |
15 |
16 | -------------------------------------------------------------------------------- /_includes/category-modal.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

4 |
5 |
6 | -------------------------------------------------------------------------------- /_includes/footer.html: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /_includes/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {{site.title}} | {{page.title}} 6 | {% if page.layout == "post" %} 7 | 8 | 9 | {% else %} 10 | 11 | {%endif%} 12 | 13 | 14 | 15 | 24 | {% if page.layout == "post" %} 25 | 26 | {% endif %} 27 | 28 | 29 | 47 | 53 | 54 | -------------------------------------------------------------------------------- /_includes/header.html: -------------------------------------------------------------------------------- 1 |
2 | {{site.title}} 3 | 4 | 5 | 14 | 17 | 18 | 19 |
20 | -------------------------------------------------------------------------------- /_layouts/blog.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {% include head.html %} 4 | 5 |
6 | {% include header.html %} {% include bio.html %} 7 |
8 | {% for post in site.posts %} 9 |
10 |

11 | {{post.title}} 12 |

13 | {{post.date | date_to_string}} 14 |
15 | {% for c in post.categories %} 16 | {{c}} 19 | {% endfor %} 20 |
21 |
22 | {%endfor%} 23 |
24 | {% include footer.html %} 25 |
26 | {% include category-modal.html%} 27 | 28 | 29 | -------------------------------------------------------------------------------- /_layouts/post.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {% include head.html %} 4 | 5 |
6 | {% include header.html %} 7 |
8 |
9 |

{{page.title}}

10 | {{page.date | date_to_string}} 11 |
12 | {% for c in page.categories %} 13 | {{c}} 14 | {% endfor %} 15 |
16 |
17 |
{{content}}
18 |
19 | {% include footer.html %} 20 |
21 | {% include category-modal.html%} 22 | 23 | 24 | -------------------------------------------------------------------------------- /all_collections/_posts/1948-12-12-the-purpose-of-education.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: The Purpose of Education 4 | date: 1948-12-12 10:18:00 5 | categories: [fiction, jekyll] 6 | --- 7 | 8 | As I engage in the so-called "bull sessions" around and about the school, I too often find that most college men have a misconception of the purpose of education. Most of the "brethren" think that education should equip them with the proper instruments of exploitation so that they can forever trample over the masses. Still others think that education should furnish them with noble ends rather than means to an end. 9 | 10 | ![alt](https://picsum.photos/800/300) 11 | 12 | It seems to me that education has a two-fold function to perform in the life of man and in society: the one is utility and the other is culture. Education must enable a man to become more efficient, to achieve with increasing facility the ligitimate goals of his life. 13 | 14 | Education must also train one for quick, resolute and effective thinking. To think incisively and to think for one's self is very difficult. We are prone to let our mental life become invaded by legions of half truths, prejudices, and propaganda. At this point, I often wonder whether or not education is fulfilling its purpose. A great majority of the so-called educated people do not think logically and scientifically. Even the press, the classroom, the platform, and the pulpit in many instances do not give us objective and unbiased truths. To save man from the morass of propaganda, in my opinion, is one of the chief aims of education. Education must enable one to sift and weigh evidence, to discern the true from the false, the real from the unreal, and the facts from the fiction. 15 | 16 | The function of education, therefore, is to teach one to think intensively and to think critically. But education which stops with efficiency may prove the greatest menace to society. The most dangerous criminal may be the man gifted with reason, but with no morals. 17 | 18 | The late Eugene Talmadge, in my opinion, possessed one of the better minds of Georgia, or even America. Moreover, he wore the Phi Beta Kappa key. By all measuring rods, Mr. Talmadge could think critically and intensively; yet he contends that I am an inferior being. Are those the types of men we call educated? 19 | 20 | We must remember that intelligence is not enough. Intelligence plus character--that is the goal of true education. The complete education gives one not only power of concentration, but worthy objectives upon which to concentrate. The broad education will, therefore, transmit to one not only the accumulated knowledge of the race but also the accumulated experience of social living. 21 | 22 | If we are not careful, our colleges will produce a group of close-minded, unscientific, illogical propagandists, consumed with immoral acts. Be careful, "brethren!" Be careful, teachers! 23 | -------------------------------------------------------------------------------- /all_collections/_posts/2021-11-04-jekyll-markdown.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Jekyll Markdown 4 | date: 2021-11-04 5 | categories: ["jekyll", "Test Post", "first post"] 6 | --- 7 | 8 | Text can be **bold**, _italic_, ~~strikethrough~~ or `keyword` 9 | 10 | [Link to another page](./another-page.html). 11 | 12 | There should be whitespace between paragraphs. 13 | 14 | There should be whitespace between paragraphs. We recommend including a README, or a file with information about your project. 15 | 16 | #### Image 17 | 18 | Images can be clicked to enlarge :) 19 | 20 | ![Dummy Image 1](https://picsum.photos/1366/768) 21 | ![Dummy Image 2](https://picsum.photos/1200/400) 22 | 23 | # Header 1 24 | 25 | This is a normal paragraph following a header. GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere. 26 | 27 | ## Header 2 28 | 29 | > This is a blockquote following a header. 30 | > 31 | > When something is important enough, you do it even if the odds are not in your favor. 32 | 33 | ### Header 3 34 | 35 | > This is another blockquote following header 3 36 | 37 | ```js 38 | // Javascript code with syntax highlighting. 39 | var fun = function lang(l) { 40 | dateformat.i18n = require("./lang/" + l); 41 | return true; 42 | }; 43 | ``` 44 | 45 | ```ruby 46 | # Ruby code with syntax highlighting 47 | GitHubPages::Dependencies.gems.each do |gem, version| 48 | s.add_dependency(gem, "= #{version}") 49 | end 50 | ``` 51 | 52 | #### Header 4 53 | 54 | - This is an unordered list following a header. 55 | - This is an unordered list following a header. 56 | - This is an unordered list following a header. 57 | 58 | ##### Header 5 59 | 60 | 1. This is an ordered list following a header. 61 | 2. This is an ordered list following a header. 62 | 3. This is an ordered list following a header. 63 | 64 | ###### Header 6 65 | 66 | | head1 | head two | three | 67 | | :----------- | :---------------- | :---- | 68 | | ok | good swedish fish | nice | 69 | | out of stock | good and plenty | nice | 70 | | ok | good `oreos` | hmm | 71 | | ok | good `zoute` drop | yumm | 72 | 73 | ### There's a horizontal rule below this. 74 | 75 | --- 76 | 77 | ### Here is an unordered list: 78 | 79 | - Item foo 80 | - Item bar 81 | - Item baz 82 | - Item zip 83 | 84 | ### And an ordered list: 85 | 86 | 1. Item one 87 | 1. Item one 88 | 1. Item two 89 | 1. Item one 90 | 1. Item two 91 | 1. Item three 92 | 1. Item three 93 | 1. Item four 94 | 1. Item two 95 | 1. Item three 96 | 1. Item four 97 | 98 | ### And a nested list: 99 | 100 | - level 1 item 101 | - level 2 item 102 | - level 2 item 103 | - level 3 item 104 | - level 3 item 105 | - level 1 item 106 | - level 2 item 107 | - level 2 item 108 | - level 2 item 109 | - level 1 item 110 | - level 2 item 111 | - level 2 item 112 | - level 1 item 113 | 114 | ``` 115 | Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. 116 | ``` 117 | 118 | ``` 119 | The final element. 120 | ``` 121 | -------------------------------------------------------------------------------- /all_collections/_posts/2025-03-18-math-examples.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Math Examples 4 | date: 2025-03-18 5 | categories: [tutorial, math] 6 | --- 7 | 8 | # Math Support in Markdown 9 | 10 | This page demonstrates how to use math expressions in Markdown. 11 | 12 | ## Inline Math 13 | 14 | - Einstein's famous equation: $E = mc^2$ 15 | - The Pythagorean theorem: $a^2 + b^2 = c^2$ 16 | - A simple fraction: $\frac{1}{2}$ 17 | 18 | ## Display Math 19 | 20 | The quadratic formula: 21 | 22 | $$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$ 23 | 24 | Maxwell's Equations: 25 | 26 | $$ 27 | \begin{align} 28 | \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\ 29 | \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ 30 | \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ 31 | \nabla \cdot \vec{\mathbf{B}} & = 0 32 | \end{align} 33 | $$ 34 | 35 | A matrix: 36 | 37 | $$ 38 | \begin{pmatrix} 39 | a & b & c \\ 40 | d & e & f \\ 41 | g & h & i 42 | \end{pmatrix} 43 | $$ 44 | 45 | ## Usage Instructions 46 | 47 | You can write math expressions in your Markdown files using: 48 | 49 | 1. Inline math: `$...$` or `\(...\)` 50 | 2. Display math: `$$...$$` or `\[...\]` 51 | 52 | For example, to write Einstein's equation inline, type `$E = mc^2$`. 53 | 54 | For a block equation like the quadratic formula, use: 55 | 56 | ``` 57 | $$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$ 58 | ``` 59 | -------------------------------------------------------------------------------- /assets/css/blog.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,300;0,400;0,800;1,100;1,300;1,400;1,800&display=swap"); 2 | 3 | * { 4 | font-family: inherit; 5 | text-decoration: none; 6 | margin: 0; 7 | padding: 0; 8 | -webkit-user-drag: none; 9 | -moz-window-dragging: none; 10 | -webkit-tap-highlight-color: transparent; 11 | } 12 | * img { 13 | max-width: 100%; 14 | } 15 | html, 16 | body { 17 | color: var(--white-2); 18 | background-color: var(--gray-6); 19 | font-family: "JetBrains Mono", monospace; 20 | line-height: 2rem; 21 | background-color: var(--gray-5); 22 | } 23 | header { 24 | padding: 2rem 0 4rem 0; 25 | display: flex; 26 | flex-direction: row; 27 | align-items: flex-start; 28 | justify-content: space-between; 29 | gap: 1rem; 30 | } 31 | header .site-title { 32 | font-size: 4rem; 33 | font-weight: bolder; 34 | line-height: 110%; 35 | color: var(--white-1); 36 | } 37 | main { 38 | margin: 0 auto; 39 | max-width: 650px; 40 | padding: 3rem 0; 41 | } 42 | 43 | /* header */ 44 | 45 | #bio { 46 | display: flex; 47 | justify-content: flex-start; 48 | align-items: center; 49 | } 50 | #img-wrapper img { 51 | border-radius: 50%; 52 | max-width: 100px; 53 | } 54 | #bio-wrapper { 55 | margin-left: 1rem; 56 | } 57 | #text-wrapper { 58 | line-height: 1.2rem; 59 | font-weight: 300; 60 | } 61 | #text-wrapper a { 62 | color: cyan; 63 | border-bottom: 1px solid cyan; 64 | } 65 | @media (prefers-color-scheme: light) { 66 | #text-wrapper a { 67 | color: #1ebaba; 68 | border-bottom: 1px solid #1ebaba; 69 | } 70 | } 71 | [data-theme="light"] { 72 | #text-wrapper a { 73 | color: #1ebaba; 74 | border-bottom: 1px solid #1ebaba; 75 | } 76 | } 77 | [data-theme="dark"] { 78 | #text-wrapper a { 79 | color: cyan; 80 | border-bottom: 1px solid cyan; 81 | } 82 | } 83 | #social-wrapper { 84 | margin-top: 1rem; 85 | } 86 | #social-wrapper img { 87 | filter: invert() !important; 88 | width: 25px; 89 | height: 25px; 90 | margin: 0 0 0.3rem 0; 91 | transition: all 0.2s ease-in-out; 92 | } 93 | @media (prefers-color-scheme: light) { 94 | #social-wrapper img { 95 | filter: none !important; 96 | } 97 | } 98 | [data-theme="light"] { 99 | #social-wrapper img { 100 | filter: none !important; 101 | } 102 | } 103 | [data-theme="dark"] { 104 | #social-wrapper img { 105 | filter: invert() !important; 106 | } 107 | } 108 | #social-wrapper img:hover { 109 | transform: scale(1.2); 110 | } 111 | 112 | /* article section */ 113 | 114 | .articles { 115 | display: grid; 116 | row-gap: 2rem; 117 | margin: 4rem 0 3rem 0; 118 | } 119 | .articles .article { 120 | padding: 2rem; 121 | background: var(--gray-3); 122 | border-radius: 15px; 123 | transition: all 0.2s ease-in-out; 124 | } 125 | .articles .article .article-title, 126 | .articles .article .article-title a { 127 | color: var(--white-2); 128 | font-weight: 100; 129 | font-style: italic; 130 | font-size: 1.4rem; 131 | line-height: 130%; 132 | } 133 | .articles .article:hover { 134 | transform: scale(1.05); 135 | } 136 | .articles .article .date { 137 | display: block; 138 | font-size: 0.8rem; 139 | } 140 | .articles .article .categories { 141 | display: flex; 142 | flex-direction: row; 143 | flex-wrap: wrap; 144 | justify-content: flex-start; 145 | } 146 | .articles .article .categories .category { 147 | margin: 0 0.5rem 0.3rem 0; 148 | display: block; 149 | color: var(--gray-4); 150 | background: var(--white-2); 151 | border-radius: 15px; 152 | font-size: 0.7rem; 153 | padding: 0 0.8rem; 154 | line-height: 1.3rem; 155 | cursor: pointer; 156 | } 157 | /* media query */ 158 | 159 | @media screen and (max-width: 750px) { 160 | body { 161 | padding: 1.5rem; 162 | } 163 | header { 164 | flex-direction: column; 165 | gap: 3rem; 166 | } 167 | header #dark-mode-toggle { 168 | display: flex; 169 | justify-content: flex-end; 170 | align-items: flex-end; 171 | align-self: flex-end; 172 | } 173 | header .site-title { 174 | font-size: 3rem; 175 | } 176 | } 177 | 178 | @media screen and (max-width: 550px) { 179 | header .site-title { 180 | font-size: 3rem; 181 | } 182 | .articles { 183 | row-gap: 1.2rem; 184 | } 185 | } 186 | 187 | @media screen and (max-width: 350px) { 188 | #img-wrapper img { 189 | max-width: 50px; 190 | } 191 | #bio { 192 | align-items: flex-start; 193 | } 194 | main, 195 | .articles { 196 | padding: 0; 197 | margin: 0; 198 | } 199 | main { 200 | padding-bottom: 1rem; 201 | } 202 | .articles { 203 | margin: 2rem 0 3rem 0; 204 | row-gap: 1.2rem; 205 | } 206 | header .site-title { 207 | font-size: 2.4rem; 208 | } 209 | .article { 210 | padding: 1.2rem; 211 | } 212 | .articles .article .article-title, 213 | .articles .article .article-title a { 214 | font-size: 1rem; 215 | } 216 | } 217 | -------------------------------------------------------------------------------- /assets/css/common.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --gray-1: #3f3f3f; 3 | --gray-2: #32353a; 4 | --gray-3: #25282c; 5 | --gray-4: #151618; 6 | --gray-5: #151618; 7 | --gray-6: #111111; 8 | --white-1: #eeeeee; 9 | --white-2: #a9abb3; 10 | } 11 | 12 | @media (prefers-color-scheme: light) { 13 | :root { 14 | --gray-1: #3f3f3f; 15 | --gray-2: #32353a; 16 | --gray-2_5: #242526; 17 | --gray-3: #e8e8e8; 18 | --gray-4: #eeeeee; 19 | --gray-5: #f5f5f5; 20 | --gray-6: #a9abb3; 21 | --white-1: #242526; 22 | --white-2: #242526; 23 | } 24 | } 25 | 26 | @media (prefers-color-scheme: dark) { 27 | :root { 28 | --gray-1: #3f3f3f; 29 | --gray-2: #32353a; 30 | --gray-3: #25282c; 31 | --gray-4: #151618; 32 | --gray-5: #151618; 33 | --gray-6: #111111; 34 | --white-1: #eeeeee; 35 | --white-2: #a9abb3; 36 | } 37 | } 38 | 39 | [data-theme="light"] { 40 | --gray-1: #3f3f3f; 41 | --gray-2: #32353a; 42 | --gray-2_5: #242526; 43 | --gray-3: #e8e8e8; 44 | --gray-4: #eeeeee; 45 | --gray-5: #f5f5f5; 46 | --gray-6: #a9abb3; 47 | --white-1: #242526; 48 | --white-2: #242526; 49 | } 50 | 51 | [data-theme="dark"] { 52 | --gray-1: #3f3f3f; 53 | --gray-2: #32353a; 54 | --gray-3: #25282c; 55 | --gray-4: #151618; 56 | --gray-5: #151618; 57 | --gray-6: #111111; 58 | --white-1: #eeeeee; 59 | --white-2: #a9abb3; 60 | } 61 | 62 | #category-modal-bg { 63 | position: fixed; 64 | top: 0; 65 | left: 0; 66 | bottom: 0; 67 | right: 0; 68 | background: rgba(0, 0, 0, 0.6); 69 | z-index: 10; 70 | display: none; 71 | visibility: hidden; 72 | } 73 | 74 | #category-modal { 75 | position: fixed; 76 | top: 0; 77 | bottom: 0; 78 | left: 1.5rem; 79 | right: 1.5rem; 80 | z-index: 100; 81 | max-width: 850px; 82 | max-height: 60vh; 83 | border-radius: 1rem; 84 | padding: 1rem; 85 | margin: auto; 86 | background: var(--gray-3); 87 | display: none; 88 | visibility: hidden; 89 | line-height: 140%; 90 | } 91 | 92 | #category-modal-content { 93 | display: relative; 94 | max-height: calc(100% - 5rem); 95 | overflow: auto; 96 | } 97 | 98 | #category-modal-title { 99 | margin-bottom: 1rem; 100 | font-size: 2rem; 101 | padding: 1rem; 102 | } 103 | 104 | #category-modal-bg.open, 105 | #category-modal.open { 106 | display: block; 107 | visibility: visible; 108 | } 109 | 110 | .modal-article, 111 | .modal-article-date { 112 | display: block; 113 | color: var(--white-2); 114 | } 115 | 116 | .modal-article { 117 | margin-bottom: 0.5rem; 118 | padding: 0.5rem 1rem; 119 | transition: all 0.2s ease-in-out; 120 | } 121 | 122 | .modal-article-date { 123 | font-size: 0.8rem; 124 | } 125 | 126 | .modal-article:hover { 127 | background: var(--gray-4); 128 | } 129 | 130 | hr { 131 | border-top: 2px dashed var(--white-2) !important; 132 | border-bottom: none !important; 133 | border-left: none !important; 134 | border-right: none !important; 135 | margin-bottom: 1.75rem !important; 136 | } 137 | 138 | /* Copy code button */ 139 | .copy-code-button { 140 | position: absolute; 141 | right: 0.25rem; 142 | bottom: 0.25rem; 143 | opacity: 0; 144 | padding: 0.25rem 0.5rem; 145 | font-size: 0.75rem; 146 | line-height: normal; 147 | border: none; 148 | border-radius: 0.25rem; 149 | cursor: pointer; 150 | background-color: var(--white-1); 151 | color: var(--gray-5); 152 | transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out; 153 | } 154 | 155 | pre:hover .copy-code-button { 156 | opacity: 1; 157 | } 158 | 159 | .copy-code-button:hover { 160 | background-color: var(--white-2); 161 | } 162 | 163 | [data-theme="light"] .copy-code-button { 164 | background-color: var(--gray-2); 165 | color: var(--white-1); 166 | } 167 | 168 | [data-theme="light"] .copy-code-button:hover { 169 | background-color: var(--gray-3); 170 | } 171 | 172 | @media (prefers-color-scheme: light) { 173 | .copy-code-button { 174 | background-color: var(--gray-2); 175 | color: var(--white-1); 176 | } 177 | 178 | .copy-code-button:hover { 179 | background-color: var(--gray-3); 180 | } 181 | } 182 | -------------------------------------------------------------------------------- /assets/css/post.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,300;0,400;0,800;1,100;1,300;1,400;1,800&display=swap"); 2 | 3 | * { 4 | font-family: inherit; 5 | text-decoration: none; 6 | margin: 0; 7 | padding: 0; 8 | -webkit-user-drag: none; 9 | -moz-window-dragging: none; 10 | -webkit-tap-highlight-color: transparent; 11 | } 12 | * img { 13 | max-width: 100%; 14 | } 15 | html, 16 | body { 17 | color: var(--white-2); 18 | background-color: var(--gray-6); 19 | font-family: "JetBrains Mono", monospace; 20 | line-height: 2rem; 21 | background-color: var(--gray-5); 22 | } 23 | .content a { 24 | color: cyan; 25 | border-bottom: 1px solid cyan; 26 | } 27 | @media (prefers-color-scheme: light) { 28 | .content a { 29 | color: #1ebaba; 30 | border-bottom: 1px solid #1ebaba; 31 | } 32 | } 33 | [data-theme="light"] { 34 | .content a { 35 | color: #1ebaba; 36 | border-bottom: 1px solid #1ebaba; 37 | } 38 | } 39 | [data-theme="dark"] { 40 | .content a { 41 | color: cyan; 42 | border-bottom: 1px solid cyan; 43 | } 44 | } 45 | header { 46 | padding: 2rem 0 4rem 0; 47 | display: flex; 48 | flex-direction: row; 49 | align-items: flex-start; 50 | justify-content: space-between; 51 | gap: 1rem; 52 | } 53 | .site-title { 54 | font-size: 1.4rem; 55 | font-weight: bolder; 56 | line-height: 110%; 57 | color: var(--white-1); 58 | } 59 | main { 60 | margin: 0 auto; 61 | max-width: 650px; 62 | padding: 3rem 0 4rem 0; 63 | } 64 | .article { 65 | margin-bottom: 3rem; 66 | } 67 | 68 | .article-header { 69 | margin-bottom: 4rem; 70 | } 71 | .article-title { 72 | font-size: 2.4rem; 73 | margin-bottom: 0.6rem; 74 | line-height: 140%; 75 | } 76 | 77 | .article .date { 78 | display: block; 79 | font-size: 0.8rem; 80 | } 81 | .categories { 82 | display: flex; 83 | flex-direction: row; 84 | flex-wrap: wrap; 85 | justify-content: flex-start; 86 | } 87 | .categories .category { 88 | margin: 0 0.5rem 0 0; 89 | display: block; 90 | color: var(--gray-4); 91 | background: var(--white-2); 92 | border-radius: 15px; 93 | font-size: 0.7rem; 94 | padding: 0 0.8rem; 95 | line-height: 1.3rem; 96 | cursor: pointer; 97 | } 98 | 99 | /* markdown content */ 100 | 101 | .content * { 102 | line-height: 180%; 103 | } 104 | .content p { 105 | margin: 0 0 1.75rem 0; 106 | padding: 0; 107 | } 108 | .content h1 { 109 | font-size: 2rem; 110 | } 111 | .content h2 { 112 | font-size: 1.8rem; 113 | } 114 | .content h3 { 115 | font-size: 1.6rem; 116 | } 117 | .content h4 { 118 | font-size: 1.4rem; 119 | } 120 | .content h5 { 121 | font-size: 1.2rem; 122 | } 123 | .content h6 { 124 | font-size: 1rem; 125 | } 126 | .content h1, 127 | .content h2, 128 | .content h3, 129 | .content h4, 130 | .content h5, 131 | .content h6 { 132 | margin: 1.75rem 0; 133 | } 134 | .content blockquote { 135 | padding-left: 1.42188rem; 136 | margin-bottom: 1.75rem; 137 | font-style: italic; 138 | font-weight: 100; 139 | border-left: 0.3rem solid var(--white-2); 140 | } 141 | .content strong { 142 | font-weight: bold; 143 | } 144 | .content ul { 145 | margin-left: 1rem; 146 | margin-bottom: 1.75rem; 147 | } 148 | .content ol { 149 | margin-left: 1.75rem; 150 | margin-bottom: 1.75rem; 151 | } 152 | .content ol * ol, 153 | .content ul * ul { 154 | margin-left: 1rem; 155 | margin-bottom: 0; 156 | } 157 | .content table { 158 | width: 100%; 159 | max-width: 100%; 160 | margin: 1rem 0; 161 | border-collapse: collapse; 162 | } 163 | .content table th { 164 | background-color: var(--gray-3); 165 | color: var(--white-2); 166 | border: 1px solid var(--gray-5); 167 | } 168 | .content table * { 169 | border: 1px solid var(--gray-3); 170 | padding: 0.2rem; 171 | } 172 | .content img { 173 | max-width: 100%; 174 | margin: 1rem 0; 175 | } 176 | .content img.emoji { 177 | margin: 0 !important; 178 | } 179 | 180 | /* pre , code */ 181 | .content, 182 | .content div, 183 | .content div pre, 184 | .content div pre code { 185 | overflow-x: auto !important; 186 | } 187 | 188 | .content pre { 189 | background: var(--gray-3); 190 | padding: 1rem 2rem; 191 | margin-bottom: 1.75rem; 192 | } 193 | 194 | .content code { 195 | padding: 3px 5px; 196 | color: var(--white-2); 197 | white-space: pre; 198 | background: var(--gray-3); 199 | } 200 | 201 | @media (prefers-color-scheme: light) { 202 | .content code, 203 | .content pre { 204 | color: var(--gray-5); 205 | background: var(--gray-2_5) !important; 206 | } 207 | } 208 | 209 | [data-theme="light"] { 210 | .content code, 211 | .content pre { 212 | color: var(--gray-5); 213 | background: var(--gray-2_5) !important; 214 | } 215 | } 216 | 217 | [data-theme="dark"] { 218 | .content code, 219 | .content pre { 220 | color: var(--white-2); 221 | background: var(--gray-3); 222 | } 223 | } 224 | 225 | /* lbox */ 226 | 227 | .content img { 228 | cursor: zoom-in; 229 | } 230 | 231 | #lightbox { 232 | position: fixed; 233 | z-index: 1000; 234 | top: 0; 235 | left: 0; 236 | right: 0; 237 | bottom: 0; 238 | background-color: rgba(0, 0, 0, 0.8); 239 | display: none; 240 | } 241 | 242 | #lightbox.active { 243 | display: flex; 244 | justify-content: center; 245 | align-items: center; 246 | } 247 | 248 | #lightbox img { 249 | max-width: 90%; 250 | max-height: 80%; 251 | padding: 4px; 252 | background-color: black; 253 | border: 2px solid white; 254 | } 255 | 256 | @media screen and (max-width: 750px) { 257 | body { 258 | padding: 1.5rem; 259 | } 260 | } 261 | -------------------------------------------------------------------------------- /assets/css/syntax.css: -------------------------------------------------------------------------------- 1 | /* syntax */ 2 | 3 | .highlight .hll { 4 | background-color: #333333; 5 | } 6 | .highlight { 7 | color: #ffffff; 8 | } 9 | .highlight .c { 10 | color: #008800; 11 | font-style: italic; 12 | /* background-color: #0f140f; */ 13 | } /* Comment */ 14 | .highlight .err { 15 | color: #ffffff; 16 | } /* Error */ 17 | .highlight .g { 18 | color: #ffffff; 19 | } /* Generic */ 20 | .highlight .k { 21 | color: #fb660a; 22 | font-weight: bold; 23 | } /* Keyword */ 24 | .highlight .l { 25 | color: #ffffff; 26 | } /* Literal */ 27 | .highlight .n { 28 | color: #ffffff; 29 | } /* Name */ 30 | .highlight .o { 31 | color: #ffffff; 32 | } /* Operator */ 33 | .highlight .x { 34 | color: #ffffff; 35 | } /* Other */ 36 | .highlight .p { 37 | color: #ffffff; 38 | } /* Punctuation */ 39 | .highlight .cm { 40 | color: #008800; 41 | font-style: italic; 42 | /* background-color: #0f140f; */ 43 | } /* Comment.Multiline */ 44 | .highlight .cp { 45 | color: #ff0007; 46 | font-weight: bold; 47 | font-style: italic; 48 | /* background-color: #0f140f; */ 49 | } /* Comment.Preproc */ 50 | .highlight .c1 { 51 | color: #008800; 52 | font-style: italic; 53 | /* background-color: #0f140f; */ 54 | } /* Comment.Single */ 55 | .highlight .cs { 56 | color: #008800; 57 | font-style: italic; 58 | /* background-color: #0f140f; */ 59 | } /* Comment.Special */ 60 | .highlight .gd { 61 | color: #ffffff; 62 | } /* Generic.Deleted */ 63 | .highlight .ge { 64 | color: #ffffff; 65 | } /* Generic.Emph */ 66 | .highlight .gr { 67 | color: #ffffff; 68 | } /* Generic.Error */ 69 | .highlight .gh { 70 | color: #ffffff; 71 | font-weight: bold; 72 | } /* Generic.Heading */ 73 | .highlight .gi { 74 | color: #ffffff; 75 | } /* Generic.Inserted */ 76 | .highlight .go { 77 | color: #444444; 78 | background-color: #222222; 79 | } /* Generic.Output */ 80 | .highlight .gp { 81 | color: #ffffff; 82 | } /* Generic.Prompt */ 83 | .highlight .gs { 84 | color: #ffffff; 85 | } /* Generic.Strong */ 86 | .highlight .gu { 87 | color: #ffffff; 88 | font-weight: bold; 89 | } /* Generic.Subheading */ 90 | .highlight .gt { 91 | color: #ffffff; 92 | } /* Generic.Traceback */ 93 | .highlight .kc { 94 | color: #fb660a; 95 | font-weight: bold; 96 | } /* Keyword.Constant */ 97 | .highlight .kd { 98 | color: #fb660a; 99 | font-weight: bold; 100 | } /* Keyword.Declaration */ 101 | .highlight .kn { 102 | color: #fb660a; 103 | font-weight: bold; 104 | } /* Keyword.Namespace */ 105 | .highlight .kp { 106 | color: #fb660a; 107 | } /* Keyword.Pseudo */ 108 | .highlight .kr { 109 | color: #fb660a; 110 | font-weight: bold; 111 | } /* Keyword.Reserved */ 112 | .highlight .kt { 113 | color: #cdcaa9; 114 | font-weight: bold; 115 | } /* Keyword.Type */ 116 | .highlight .ld { 117 | color: #ffffff; 118 | } /* Literal.Date */ 119 | .highlight .m { 120 | color: #0086f7; 121 | font-weight: bold; 122 | } /* Literal.Number */ 123 | .highlight .s { 124 | color: #0086d2; 125 | } /* Literal.String */ 126 | .highlight .na { 127 | color: #ff0086; 128 | font-weight: bold; 129 | } /* Name.Attribute */ 130 | .highlight .nb { 131 | color: #ffffff; 132 | } /* Name.Builtin */ 133 | .highlight .nc { 134 | color: #ffffff; 135 | } /* Name.Class */ 136 | .highlight .no { 137 | color: #0086d2; 138 | } /* Name.Constant */ 139 | .highlight .nd { 140 | color: #ffffff; 141 | } /* Name.Decorator */ 142 | .highlight .ni { 143 | color: #ffffff; 144 | } /* Name.Entity */ 145 | .highlight .ne { 146 | color: #ffffff; 147 | } /* Name.Exception */ 148 | .highlight .nf { 149 | color: #ff0086; 150 | font-weight: bold; 151 | } /* Name.Function */ 152 | .highlight .nl { 153 | color: #ffffff; 154 | } /* Name.Label */ 155 | .highlight .nn { 156 | color: #ffffff; 157 | } /* Name.Namespace */ 158 | .highlight .nx { 159 | color: #ffffff; 160 | } /* Name.Other */ 161 | .highlight .py { 162 | color: #ffffff; 163 | } /* Name.Property */ 164 | .highlight .nt { 165 | color: #fb660a; 166 | font-weight: bold; 167 | } /* Name.Tag */ 168 | .highlight .nv { 169 | color: #fb660a; 170 | } /* Name.Variable */ 171 | .highlight .ow { 172 | color: #ffffff; 173 | } /* Operator.Word */ 174 | .highlight .w { 175 | color: #888888; 176 | } /* Text.Whitespace */ 177 | .highlight .mf { 178 | color: #0086f7; 179 | font-weight: bold; 180 | } /* Literal.Number.Float */ 181 | .highlight .mh { 182 | color: #0086f7; 183 | font-weight: bold; 184 | } /* Literal.Number.Hex */ 185 | .highlight .mi { 186 | color: #0086f7; 187 | font-weight: bold; 188 | } /* Literal.Number.Integer */ 189 | .highlight .mo { 190 | color: #0086f7; 191 | font-weight: bold; 192 | } /* Literal.Number.Oct */ 193 | .highlight .sb { 194 | color: #0086d2; 195 | } /* Literal.String.Backtick */ 196 | .highlight .sc { 197 | color: #0086d2; 198 | } /* Literal.String.Char */ 199 | .highlight .sd { 200 | color: #0086d2; 201 | } /* Literal.String.Doc */ 202 | .highlight .s2 { 203 | color: #0086d2; 204 | } /* Literal.String.Double */ 205 | .highlight .se { 206 | color: #0086d2; 207 | } /* Literal.String.Escape */ 208 | .highlight .sh { 209 | color: #0086d2; 210 | } /* Literal.String.Heredoc */ 211 | .highlight .si { 212 | color: #0086d2; 213 | } /* Literal.String.Interpol */ 214 | .highlight .sx { 215 | color: #0086d2; 216 | } /* Literal.String.Other */ 217 | .highlight .sr { 218 | color: #0086d2; 219 | } /* Literal.String.Regex */ 220 | .highlight .s1 { 221 | color: #0086d2; 222 | } /* Literal.String.Single */ 223 | .highlight .ss { 224 | color: #0086d2; 225 | } /* Literal.String.Symbol */ 226 | .highlight .bp { 227 | color: #ffffff; 228 | } /* Name.Builtin.Pseudo */ 229 | .highlight .vc { 230 | color: #fb660a; 231 | } /* Name.Variable.Class */ 232 | .highlight .vg { 233 | color: #fb660a; 234 | } /* Name.Variable.Global */ 235 | .highlight .vi { 236 | color: #fb660a; 237 | } /* Name.Variable.Instance */ 238 | .highlight .il { 239 | color: #0086f7; 240 | font-weight: bold; 241 | } /* Literal.Number.Integer.Long */ 242 | -------------------------------------------------------------------------------- /assets/icons/dev.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sharadcodes/jekyll-theme-serial-programmer/59d79eddae54a283981895db2f7e87c8395a1e2c/assets/icons/dev.png -------------------------------------------------------------------------------- /assets/icons/email.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sharadcodes/jekyll-theme-serial-programmer/59d79eddae54a283981895db2f7e87c8395a1e2c/assets/icons/email.png -------------------------------------------------------------------------------- /assets/icons/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sharadcodes/jekyll-theme-serial-programmer/59d79eddae54a283981895db2f7e87c8395a1e2c/assets/icons/github.png -------------------------------------------------------------------------------- /assets/icons/instagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sharadcodes/jekyll-theme-serial-programmer/59d79eddae54a283981895db2f7e87c8395a1e2c/assets/icons/instagram.png -------------------------------------------------------------------------------- /assets/icons/linkedin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sharadcodes/jekyll-theme-serial-programmer/59d79eddae54a283981895db2f7e87c8395a1e2c/assets/icons/linkedin.png -------------------------------------------------------------------------------- /assets/icons/telegram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sharadcodes/jekyll-theme-serial-programmer/59d79eddae54a283981895db2f7e87c8395a1e2c/assets/icons/telegram.png -------------------------------------------------------------------------------- /assets/icons/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sharadcodes/jekyll-theme-serial-programmer/59d79eddae54a283981895db2f7e87c8395a1e2c/assets/icons/twitter.png -------------------------------------------------------------------------------- /assets/js/categories.js: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | 4 | const categories = { {% for category in site.categories %}{% capture category_name %}{{ category | first }}{% endcapture %}{{ category_name | replace: " ", "_" }}: [{% for post in site.categories[category_name] %}{ url: `{{ site.baseurl }}{{ post.url }}`, date: `{{post.date | date_to_string}}`, title: `{{post.title}}`},{% endfor %}],{% endfor %} } 5 | 6 | console.log(categories) 7 | 8 | window.onload = function () { 9 | document.querySelectorAll(".category").forEach((category) => { 10 | category.addEventListener("click", function (e) { 11 | const posts = categories[e.target.innerText.replace(" ","_")]; 12 | let html = `` 13 | posts.forEach(post=>{ 14 | html += ` 15 | 16 |

${post.title}

17 | ${post.date} 18 | 19 | ` 20 | }) 21 | document.querySelector("#category-modal-title").innerText = e.target.innerText; 22 | document.querySelector("#category-modal-content").innerHTML = html; 23 | document.querySelector("#category-modal-bg").classList.toggle("open"); 24 | document.querySelector("#category-modal").classList.toggle("open"); 25 | }); 26 | }); 27 | 28 | document.querySelector("#category-modal-bg").addEventListener("click", function(){ 29 | document.querySelector("#category-modal-title").innerText = ""; 30 | document.querySelector("#category-modal-content").innerHTML = ""; 31 | document.querySelector("#category-modal-bg").classList.toggle("open"); 32 | document.querySelector("#category-modal").classList.toggle("open"); 33 | }) 34 | }; -------------------------------------------------------------------------------- /assets/js/copy-code.js: -------------------------------------------------------------------------------- 1 | // Function to add copy buttons to code blocks 2 | document.addEventListener("DOMContentLoaded", function () { 3 | // Find all pre elements that contain code blocks 4 | const codeBlocks = document.querySelectorAll("pre"); 5 | 6 | codeBlocks.forEach((codeBlock) => { 7 | // Create the copy button 8 | const copyButton = document.createElement("button"); 9 | copyButton.className = "copy-code-button"; 10 | copyButton.type = "button"; 11 | copyButton.innerHTML = "Copy"; 12 | 13 | // Add the button to the code block 14 | codeBlock.appendChild(copyButton); 15 | 16 | // Add position relative to the pre element for absolute positioning of the button 17 | codeBlock.style.position = "relative"; 18 | 19 | // Add click event listener to the button 20 | copyButton.addEventListener("click", function () { 21 | // Get the text content from the code block 22 | const code = codeBlock.querySelector("code") || codeBlock; 23 | const text = code.textContent; 24 | 25 | // Copy the text to clipboard 26 | navigator.clipboard.writeText(text).then( 27 | function () { 28 | // Visual feedback - change button text temporarily 29 | copyButton.innerHTML = "Copied!"; 30 | setTimeout(function () { 31 | copyButton.innerHTML = "Copy"; 32 | }, 2000); 33 | }, 34 | function (err) { 35 | console.error("Could not copy text: ", err); 36 | copyButton.innerHTML = "Error"; 37 | setTimeout(function () { 38 | copyButton.innerHTML = "Copy"; 39 | }, 2000); 40 | } 41 | ); 42 | }); 43 | }); 44 | }); 45 | -------------------------------------------------------------------------------- /assets/js/lbox.js: -------------------------------------------------------------------------------- 1 | const lightbox = document.createElement("div"); 2 | lightbox.id = "lightbox"; 3 | document.body.appendChild(lightbox); 4 | 5 | const images = document.querySelectorAll(".article .content img"); 6 | images.forEach((image) => { 7 | image.addEventListener("click", (e) => { 8 | lightbox.classList.add("active"); 9 | const img = document.createElement("img"); 10 | img.src = image.src; 11 | while (lightbox.firstChild) { 12 | lightbox.removeChild(lightbox.firstChild); 13 | } 14 | img.style.setProperty("cursor", "not-allowed"); 15 | lightbox.appendChild(img); 16 | lightbox.style.setProperty("cursor", "zoom-out"); 17 | }); 18 | }); 19 | 20 | lightbox.addEventListener("click", (e) => { 21 | if (e.target !== e.currentTarget) return; 22 | lightbox.classList.remove("active"); 23 | }); 24 | -------------------------------------------------------------------------------- /assets/js/mode.js: -------------------------------------------------------------------------------- 1 | const toggleSwitch = document.querySelector("#dark-mode-toggle"); 2 | // const currentTheme = localStorage.getItem("theme"); 3 | 4 | if (currentTheme) { 5 | document.documentElement.setAttribute("data-theme", currentTheme); 6 | } 7 | 8 | function switchTheme() { 9 | const currentTheme = document.documentElement.getAttribute("data-theme"); 10 | if (currentTheme === "dark") { 11 | document.documentElement.setAttribute("data-theme", "light"); 12 | localStorage.setItem("theme", "light"); 13 | } else { 14 | document.documentElement.setAttribute("data-theme", "dark"); 15 | localStorage.setItem("theme", "dark"); 16 | } 17 | } 18 | 19 | toggleSwitch.addEventListener("click", switchTheme, false); 20 | -------------------------------------------------------------------------------- /index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Blog 3 | layout: blog 4 | --- -------------------------------------------------------------------------------- /screenshots/mobile_blog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sharadcodes/jekyll-theme-serial-programmer/59d79eddae54a283981895db2f7e87c8395a1e2c/screenshots/mobile_blog.png -------------------------------------------------------------------------------- /screenshots/mobile_post.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sharadcodes/jekyll-theme-serial-programmer/59d79eddae54a283981895db2f7e87c8395a1e2c/screenshots/mobile_post.png -------------------------------------------------------------------------------- /screenshots/pc_blog_dm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sharadcodes/jekyll-theme-serial-programmer/59d79eddae54a283981895db2f7e87c8395a1e2c/screenshots/pc_blog_dm.png -------------------------------------------------------------------------------- /screenshots/pc_blog_lm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sharadcodes/jekyll-theme-serial-programmer/59d79eddae54a283981895db2f7e87c8395a1e2c/screenshots/pc_blog_lm.png -------------------------------------------------------------------------------- /screenshots/pc_post.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sharadcodes/jekyll-theme-serial-programmer/59d79eddae54a283981895db2f7e87c8395a1e2c/screenshots/pc_post.png --------------------------------------------------------------------------------