Skip to content

Commit ebfc3b3

Browse files
sydney-s-leighsydney-s-leigh
committed
Changed several elements to fit my own theme on jekyll-theme.chirpy.scss, and also edited the main page by pulling it out of the ruby container and putting it into _layouts under home.html.
1 parent 600f386 commit ebfc3b3

File tree

13 files changed

+368
-3
lines changed

13 files changed

+368
-3
lines changed

‎_config.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ theme_mode: # [light | dark]
9898
cdn:
9999

100100
# the avatar on sidebar, support local or CORS resources
101-
avatar:
101+
avatar: assets/img/favicons/web-app-manifest-512x512.png
102102

103103
# The URL of the site-wide social preview image used in SEO `og:image` meta tag.
104104
# It can be overridden by a customized `page.image` in front matter.

‎_layouts/home.html‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
---
2+
layout: default
3+
refactor: true
4+
---
5+
</br>
6+
</br>
7+
</br>
8+
<div align="center">
9+
<iframe width="500" height="500" src="https://www.youtube.com/embed/Yb6dZ1IFlKc?autoplay=1"> </iframe>
10+
</div>
11+
12+
{% include lang.html %}
13+
14+
{% assign all_pinned = site.posts | where: 'pin', 'true' %}
15+
{% assign all_normal = site.posts | where_exp: 'item', 'item.pin != true and item.hidden != true' %}
16+
17+
{% assign posts = '' | split: '' %}
18+
19+
<!-- Get pinned posts on current page -->
20+
21+
{% assign visible_start = paginator.page | minus: 1 | times: paginator.per_page %}
22+
{% assign visible_end = visible_start | plus: paginator.per_page %}
23+
24+
{% if all_pinned.size > visible_start %}
25+
{% if all_pinned.size > visible_end %}
26+
{% assign pinned_size = paginator.per_page %}
27+
{% else %}
28+
{% assign pinned_size = all_pinned.size | minus: visible_start %}
29+
{% endif %}
30+
31+
{% for i in (visible_start..all_pinned.size) limit: pinned_size %}
32+
{% assign posts = posts | push: all_pinned[i] %}
33+
{% endfor %}
34+
{% else %}
35+
{% assign pinned_size = 0 %}
36+
{% endif %}
37+
38+
<!-- Get normal posts on current page -->
39+
40+
{% assign normal_size = paginator.posts | size | minus: pinned_size %}
41+
42+
{% if normal_size > 0 %}
43+
{% if pinned_size > 0 %}
44+
{% assign normal_start = 0 %}
45+
{% else %}
46+
{% assign normal_start = visible_start | minus: all_pinned.size %}
47+
{% endif %}
48+
49+
{% assign normal_end = normal_start | plus: normal_size | minus: 1 %}
50+
51+
{% for i in (normal_start..normal_end) %}
52+
{% assign posts = posts | push: all_normal[i] %}
53+
{% endfor %}
54+
{% endif %}
55+
56+
<div id="post-list" class="flex-grow-1 px-xl-1">
57+
{% for post in posts %}
58+
<article class="card-wrapper card">
59+
<a href="{{ post.url | relative_url }}" class="post-preview row g-0 flex-md-row-reverse">
60+
{% assign card_body_col = '12' %}
61+
62+
{% if post.image %}
63+
{% assign src = post.image.path | default: post.image %}
64+
{% unless src contains '//' %}
65+
{% assign src = post.media_subpath | append: '/' | append: src | replace: '//', '/' %}
66+
{% endunless %}
67+
68+
{% assign alt = post.image.alt | xml_escape | default: 'Preview Image' %}
69+
70+
{% assign lqip = null %}
71+
72+
{% if post.image.lqip %}
73+
{% capture lqip %}lqip="{{ post.image.lqip }}"{% endcapture %}
74+
{% endif %}
75+
76+
<div class="col-md-5">
77+
<img src="{{ src }}" alt="{{ alt }}" {{ lqip }}>
78+
</div>
79+
80+
{% assign card_body_col = '7' %}
81+
{% endif %}
82+
83+
<div class="col-md-{{ card_body_col }}">
84+
<div class="card-body d-flex flex-column">
85+
<h1 class="card-title my-2 mt-md-0">{{ post.title }}</h1>
86+
87+
<div class="card-text content mt-0 mb-3">
88+
<p>{% include post-description.html %}</p>
89+
</div>
90+
91+
<div class="post-meta flex-grow-1 d-flex align-items-end">
92+
<div class="me-auto">
93+
<!-- posted date -->
94+
<i class="far fa-calendar fa-fw me-1"></i>
95+
{% include datetime.html date=post.date lang=lang %}
96+
97+
<!-- categories -->
98+
{% if post.categories.size > 0 %}
99+
<i class="far fa-folder-open fa-fw me-1"></i>
100+
<span class="categories">
101+
{% for category in post.categories %}
102+
{{ category }}
103+
{%- unless forloop.last -%},{%- endunless -%}
104+
{% endfor %}
105+
</span>
106+
{% endif %}
107+
</div>
108+
109+
{% if post.pin %}
110+
<div class="pin ms-1">
111+
<i class="fas fa-thumbtack fa-fw"></i>
112+
<span>{{ site.data.locales[lang].post.pin_prompt }}</span>
113+
</div>
114+
{% endif %}
115+
</div>
116+
<!-- .post-meta -->
117+
</div>
118+
<!-- .card-body -->
119+
</div>
120+
</a>
121+
</article>
122+
{% endfor %}
123+
</div>
124+
<!-- #post-list -->
125+
126+
{% if paginator.total_pages > 1 %}
127+
{% include post-paginator.html %}
128+
{% endif %}

‎_posts/2025-04-13-test.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
layout: default
3+
title: My First Page in Jekyll's Chripy Theme
4+
date: 2025-04-13 00:00:00 -500
5+
categories: [justanotherpost]
6+
tags: [update]
7+
---
8+
9+
# My First Page in Jekyll's Chripy Theme!
10+
This is a test.

‎_posts/2025-04-13-test2.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
layout: default
3+
title: My Second Page in Jekyll's Chripy Theme
4+
date: 2025-04-13 00:00:00 -500
5+
categories: [justanotherpost]
6+
tags: [update]
7+
---
8+
9+
# My Second Page in Jekyll's Chripy Theme!
10+
This is a test.

‎_tabs/about.md‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,8 @@ icon: fas fa-info-circle
44
order: 4
55
---
66

7-
> Add Markdown syntax content to file `_tabs/about.md`{: .filepath } and it will show up on this page.
8-
{: .prompt-tip }
7+
<!-- > Add Markdown syntax content to file `_tabs/about.md`{: .filepath } and it will show up on this page.
8+
#{: .prompt-tip }
9+
-->
10+
11+
> In over 15 years in various different industries, mainly government, I've been a jack of all trades sort. Over my career, I've touched on most aspects of small business, academia, corporate business, critical infrastructure & embedded devices (SCADA), the healthcare industry, and federal government of the United States. I've been everything from a code monkey to an auditor to a pen tester and had leadership roles in several positions, including helping hire people. My dream job is being a shareholder for a living, but until I get the capital to do that cybersecurity is the next best thing. I'm particularly interested in roles that will allow me to be a lead auditor or transition into a CSO/CISO.

‎assets/css/.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
#css
2+
cssunwind.css

‎assets/css/jekyll-theme-chirpy.scss‎

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
---
2+
---
3+
4+
@use 'main
5+
{%- if jekyll.environment == ' production ' -%}
6+
.bundle
7+
{%- endif -%}
8+
';
9+
10+
/* append your custom style below */
11+
@media (prefers-color-scheme: light) {
12+
html:not([data-mode]),
13+
html[data-mode='light'] {
14+
/* --main-bg: #e7e7e7; */
15+
/* Main background of the content generated windows */
16+
--main-bg: #e0e0e0;
17+
--mask-bg: #c1c3c5;
18+
/* Border color of the main content on the right and bottom */
19+
--main-border-color: #27272b;
20+
/* --main-border-color: #f3f3f3; */
21+
/*--text-color: #34343c;
22+
--text-muted-color: #757575;*/
23+
/* This is for the text color on blog posts */
24+
--text-color: #27272b;
25+
/* This is for Home button and link buttons on the main bar */
26+
--text-muted-color: #342b50;
27+
--text-muted-highlight-color: inherit;
28+
--heading-color: #2a2a2a;
29+
--label-color: #585858;
30+
/* --blockquote-border-color: #eeeeee; apple*/
31+
--blockquote-border-color: #eeeeee;
32+
--blockquote-text-color: #757575;
33+
/* Link color on the main tab? */
34+
/* --link-color: #0056b2; */
35+
--link-color: #1b8381;
36+
--link-underline-color: #dee2e6;
37+
--button-bg: #ffffff;
38+
/* --btn-border-color: #e9ecef; apple */
39+
--btn-border-color: #27272b;
40+
--btn-backtotop-color: #686868;
41+
/* --btn-backtotop-border-color: #f1f1f1; apple */
42+
--btn-backtotop-border-color: #f1f1f1;
43+
--checkbox-color: #c5c5c5;
44+
--checkbox-checked-color: #07a8f7;
45+
--img-bg: radial-gradient(
46+
circle,
47+
rgb(255, 255, 255) 0%,
48+
rgb(239, 239, 239) 100%
49+
);
50+
--shimmer-bg: linear-gradient(
51+
90deg,
52+
rgba(250, 250, 250, 0) 0%,
53+
rgba(232, 230, 230, 1) 50%,
54+
rgba(250, 250, 250, 0) 100%
55+
);
56+
/*
57+
--site-title-color: rgb(113, 113, 113);
58+
--site-subtitle-color: #717171;
59+
*/
60+
/* This is the color for the title under my favicon picture */
61+
--site-title-color: #1b8381;
62+
/* --site-title-color: #342b50; */
63+
/* This is the text under the description of my picture */
64+
--site-subtitle-color: #27272b;
65+
/* --sidebar-bg: #f6f8fa; */
66+
/* The background of the nav bar on the side */
67+
--sidebar-bg: #e7e7e7;
68+
--sidebar-border-color: #efefef;
69+
/* Link on nav bar color */
70+
/* --sidebar-muted-color: #545454; */
71+
/* Default color of the links on the nav bar */
72+
--sidebar-muted-color: #27272b;
73+
/* Color when a link is selected */
74+
--sidebar-active-color: #eb9c5c;
75+
/* Hover over link color on nav bar */
76+
/* --sidebar-hover-bg: rgb(223, 233, 241, 0.64); */
77+
--sidebar-hover-bg: #125957;
78+
--sidebar-btn-bg: white;
79+
--sidebar-btn-color: #8e8e8e;
80+
/* Avatar border color around picture */
81+
--avatar-border-color: #27272b;
82+
/* --topbar-bg: rgb(255, 255, 255, 0.7); */
83+
--topbar-bg: #d4d4d4;
84+
--topbar-text-color: rgb(78, 78, 78);
85+
/* --search-border-color: rgb(240, 240, 240); apple */
86+
--search-border-color: #27272b;
87+
--search-icon-color: #c2c6cc;
88+
/* --input-focus-border-color: #b8b8b8; apple */
89+
--input-focus-border-color: #b8b8b8;
90+
--post-list-text-color: dimgray;
91+
--btn-patinator-text-color: #555555;
92+
--btn-paginator-hover-color: var(--sidebar-bg);
93+
--toc-highlight: #0550ae;
94+
/* --toc-popup-border-color: lightgray; apple */
95+
--toc-popup-border-color: lightgray;
96+
--btn-share-color: gray;
97+
/* Button hover color for tags ? Not. */
98+
/* --btn-share-hover-color: #0d6efd; */
99+
--btn-share-hover-color: #1b8381;
100+
--card-bg: white;
101+
--card-hovor-bg: #e2e2e2;
102+
--card-shadow: rgb(104, 104, 104, 0.05) 0 2px 6px 0,
103+
rgba(211, 209, 209, 0.15) 0 0 0 1px;
104+
--footnote-target-bg: lightcyan;
105+
--tb-odd-bg: #fbfcfd;
106+
/* --tb-border-color: #eaeaea; apple */
107+
--tb-border-color: #eaeaea;
108+
--dash-color: silver;
109+
--kbd-wrap-color: #bdbdbd;
110+
--kbd-text-color: var(--text-color);
111+
--kbd-bg-color: white;
112+
--prompt-text-color: rgb(46, 46, 46, 0.77);
113+
--prompt-tip-bg: rgb(123, 247, 144, 0.2);
114+
--prompt-tip-icon-color: #03b303;
115+
--prompt-info-bg: #e1f5fe;
116+
--prompt-info-icon-color: #0070cb;
117+
--prompt-warning-bg: rgb(255, 243, 205);
118+
/* Link highlight color maybe? Not. */
119+
/* --prompt-warning-icon-color: #ef9c03; */
120+
--prompt-warning-icon-color: #1b8381;
121+
--prompt-danger-bg: rgb(248, 215, 218, 0.56);
122+
--prompt-danger-icon-color: #df3c30;
123+
/* --tag-border: #dee2e6; apple */
124+
--tag-border: #dee2e6;
125+
--tag-shadow: var(--btn-border-color);
126+
--tag-hover: rgb(222, 226, 230);
127+
--search-tag-bg: #f8f9fa;
128+
/*--categories-border: rgba(0, 0, 0, 0.125); apple */
129+
--categories-border: rgba(47, 0, 255, 0.125);
130+
--categories-hover-bg: var(--btn-border-color);
131+
--categories-icon-hover-color: darkslategray;
132+
--timeline-color: rgba(0, 0, 0, 0.075);
133+
--timeline-node-bg: #c2c6cc;
134+
--timeline-year-dot-color: #ffffff;
135+
/* --language-border-color: #ececec; apple */
136+
--language-border-color: #ececec;
137+
--highlight-bg-color: #f6f8fa;
138+
--highlighter-rouge-color: #3f596f;
139+
--highlight-lineno-color: #9e9e9e;
140+
--inline-code-bg: rgba(25, 25, 28, 0.05);
141+
--code-color: #3a3a3a;
142+
--code-header-text-color: #a3a3a3;
143+
--code-header-muted-color: #e5e5e5;
144+
--code-header-icon-color: #c9c8c8;
145+
--clipboard-checked-color: #43c743;
146+
}
147+
}
148+
149+
/* Adjust the Side Bar Circle Size */
150+
#sidebar #avatar {
151+
display: block;
152+
width: 10rem;
153+
height: 10rem;
154+
overflow: hidden;
155+
box-shadow: var(--avatar-border-color) 0 0 0 2px;
156+
transform: translateZ(0);
157+
}
158+
159+
/* Override the Avatar Image to be 225 instead of 112 */
160+
#avatar img {
161+
width: 250px;
162+
height: 175px;
163+
}
164+
165+
/* This adjust where the circle is located */
166+
/*
167+
@media all and (min-width: 576px) {
168+
#sidebar #avatar {
169+
width: 15rem;
170+
height: 15rem;
171+
}
172+
}
173+
*/
174+
175+
/* Modify Breadcrumb color */
176+
#topbar #breadcrumb a:hover,
177+
.post-meta a:not([class]):hover,
178+
.content a:not(.img-link):hover {
179+
color: #1b8381 !important;
180+
border-bottom: 1px solid #1b8381;
181+
text-decoration: none;
182+
}
183+
184+
/* For the button background highlight color on the side / tags */
185+
.btn.btn-outline-primary:not(.disabled):hover {
186+
border-color: #eb9c5c !important;
187+
background-color: #eb9c5c;
188+
}
189+
190+
/* Give rounded borders to the search bar */
191+
#topbar-wrapper {
192+
border-radius: 10px;
193+
}
194+
195+
/* Pad the top so the search bar doesn't touch the top of the website */
196+
#main-wrapper {
197+
padding-top: 15px;
198+
}
199+
200+
/* This is the background for the container that the post populate in, but not the post themselves */
201+
/*
202+
#post-list {
203+
background-color: #d4d4d4;
204+
} */
205+
206+
/* Change the background color of posts */
207+
#post-list .card-body {
208+
background-color: #d4d4d4;
209+
}

‎assets/img/favicons/apple-touch-icon.png‎

74.7 KB
Loading

‎assets/img/favicons/favicon-96x96.png‎

23.2 KB
Loading

‎assets/img/favicons/favicon.ico‎

14.7 KB
Binary file not shown.

0 commit comments

Comments
 (0)
⚡