bilingual-jekyll-resume-theme 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +85 -0
- data/_layouts/resume-ar.html +132 -1
- data/_layouts/resume-en.html +132 -1
- data/docs/CONFIG_GUIDE.md +316 -0
- data/docs/DATA_GUIDE.md +559 -0
- data/docs/INCLUDES_GUIDE.md +482 -0
- data/docs/LAYOUTS_GUIDE.md +312 -0
- data/docs/SASS_GUIDE.md +290 -0
- data/docs/_config.sample.yml +167 -0
- metadata +9 -2
|
@@ -0,0 +1,312 @@
|
|
|
1
|
+
# _layouts Guide
|
|
2
|
+
|
|
3
|
+
A comprehensive, contributor-friendly overview of `_layouts/` in this theme: what each layout is for, how data flows through them, how sections render, and how to extend or create new layouts safely.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Table of Contents
|
|
8
|
+
|
|
9
|
+
- [What are Jekyll layouts?](#what-are-jekyll-layouts)
|
|
10
|
+
- [Layout inventory and responsibilities](#layout-inventory-and-responsibilities)
|
|
11
|
+
- [default.html](#1-_layoutsdefaulthtml)
|
|
12
|
+
- [profile.html](#2-_layoutsprofilehtml)
|
|
13
|
+
- [resume-en.html](#3-_layoutsresume-enhtml)
|
|
14
|
+
- [resume-ar.html](#4-_layoutsresume-arhtml)
|
|
15
|
+
- [Resume data loading (the `resume_data` object)](#resume-data-loading-the-resume_data-object)
|
|
16
|
+
- [Configuring `active_resume_path`](#configuring-active_resume_path)
|
|
17
|
+
- [Dot-path traversal and bracket-notation](#dot-path-traversal-and-bracket-notation)
|
|
18
|
+
- [Examples](#examples)
|
|
19
|
+
- [Rendering flow inside resume layouts](#rendering-flow-inside-resume-layouts)
|
|
20
|
+
- [Head, SEO, analytics](#1-head-seo-analytics)
|
|
21
|
+
- [Header (name, avatar, contact, social)](#2-header)
|
|
22
|
+
- [Dynamic section rendering](#3-dynamic-section-rendering)
|
|
23
|
+
- [Print-only blocks and footers](#4-print-only-blocks-and-footers)
|
|
24
|
+
- [Arabic (RTL) layout specifics](#arabic-rtl-layout-specifics)
|
|
25
|
+
- [Configuration keys consumed by layouts](#configuration-keys-consumed-by-layouts)
|
|
26
|
+
- [Creating a new layout](#creating-a-new-layout)
|
|
27
|
+
- [Creating a new resume-like layout (another language or variant)](#creating-a-new-resume-like-layout-another-language-or-variant)
|
|
28
|
+
- [Common pitfalls and troubleshooting](#common-pitfalls-and-troubleshooting)
|
|
29
|
+
|
|
30
|
+
---
|
|
31
|
+
|
|
32
|
+
## What are Jekyll layouts?
|
|
33
|
+
|
|
34
|
+
Layouts wrap pages. A page chooses a layout via its front matter (e.g., `layout: resume-en`). The layout defines the overall HTML structure and where page content or reusable includes appear. This theme ships with specialized layouts for the resume (EN/AR) and a general-purpose base layout.
|
|
35
|
+
|
|
36
|
+
---
|
|
37
|
+
|
|
38
|
+
## Layout inventory and responsibilities
|
|
39
|
+
|
|
40
|
+
### 1) `_layouts/default.html`
|
|
41
|
+
|
|
42
|
+
Purpose: Base wrapper used by most non-resume pages.
|
|
43
|
+
|
|
44
|
+
Key responsibilities:
|
|
45
|
+
- Pulls shared `<head>` tags via `{% include shared-head.html %}`
|
|
46
|
+
- Loads site-wide CSS for non-resume pages via `{% include main-head.html %}` (which brings in `assets/css/main.css`)
|
|
47
|
+
- Emits SEO tags via `{% seo %}`
|
|
48
|
+
- Injects analytics into the head (`analytics-head.html`) and adds the body `<noscript>` fallback (`analytics-body.html`)
|
|
49
|
+
- Renders page content via `{{ content }}`
|
|
50
|
+
- Simple footer with copyright
|
|
51
|
+
- Adds `<link rel="me">` using `site.social_links.mastodon` when present
|
|
52
|
+
|
|
53
|
+
When to use: general pages (docs, landing, etc.).
|
|
54
|
+
|
|
55
|
+
---
|
|
56
|
+
|
|
57
|
+
### 2) `_layouts/profile.html`
|
|
58
|
+
|
|
59
|
+
Purpose: Thin wrapper that extends `default.html` and renders `{{ content }}`. Use it for the profile/landing page when you don’t need resume-specific scaffolding.
|
|
60
|
+
|
|
61
|
+
---
|
|
62
|
+
|
|
63
|
+
### 3) `_layouts/resume-en.html`
|
|
64
|
+
|
|
65
|
+
Purpose: English (LTR) resume layout. It:
|
|
66
|
+
- Computes the `resume_data` object (see below)
|
|
67
|
+
- Includes head assets via `{% include resume-head-en.html %}` (Google Fonts, `assets/css/cv.css`, favicons, `hreflang.html`)
|
|
68
|
+
- Renders header (avatar, name, contact, social icons, executive summary, CTA)
|
|
69
|
+
- Renders all resume sections dynamically using `{% include resume-section-en.html section_name=... %}` in the order specified by `site.resume_section_order`
|
|
70
|
+
- Adds optional print-only social links
|
|
71
|
+
- Emits a footer with a generation timestamp
|
|
72
|
+
- Sets a theme body class: `class="theme-{{ site.resume_theme }}"` (use in CSS)
|
|
73
|
+
|
|
74
|
+
---
|
|
75
|
+
|
|
76
|
+
### 4) `_layouts/resume-ar.html`
|
|
77
|
+
|
|
78
|
+
Purpose: Arabic (RTL) resume layout. It mirrors `resume-en.html` with language-appropriate text and RTL direction.
|
|
79
|
+
- `<html lang="ar" dir="rtl">`
|
|
80
|
+
- Includes `{% include resume-head-ar.html %}` (Cairo font by default, `assets/css/cv-ar.css`, favicons, `hreflang.html`)
|
|
81
|
+
- Localized header labels and CTA text
|
|
82
|
+
- Renders sections via `{% include resume-section-ar.html section_name=... %}` with Arabic labels and date formatting (`ar-date.html`)
|
|
83
|
+
- Optional print-only social links and footer timestamp (localized text)
|
|
84
|
+
|
|
85
|
+
---
|
|
86
|
+
|
|
87
|
+
## Resume data loading (the `resume_data` object)
|
|
88
|
+
|
|
89
|
+
Both resume layouts compute a single variable, `resume_data`, which points to the active subtree under `_data/`. This allows switching datasets without touching templates.
|
|
90
|
+
|
|
91
|
+
### Configuring `active_resume_path`
|
|
92
|
+
|
|
93
|
+
Set a site-level key in `_config.yml`:
|
|
94
|
+
|
|
95
|
+
```yaml
|
|
96
|
+
# Choose which subtree of _data/ to use for the resume
|
|
97
|
+
# Examples below in the next section
|
|
98
|
+
active_resume_path: ""
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
- If `active_resume_path` is empty or nil → `resume_data = site.data`
|
|
102
|
+
- If `active_resume_path` is a single key (e.g., `en`) → `resume_data = site.data.en`
|
|
103
|
+
- If `active_resume_path` is a dotted path (e.g., `2025-06.20250621-PM`) → the layout walks down each segment safely
|
|
104
|
+
|
|
105
|
+
Note: The layouts read `site.active_resume_path`. If you maintain multiple variants (time-boxed, roles, locales) under `_data/`, this switch lets you pick the current one at build time.
|
|
106
|
+
|
|
107
|
+
### Dot-path traversal and bracket-notation
|
|
108
|
+
|
|
109
|
+
Implementation highlights inside the layouts:
|
|
110
|
+
- Split the string by `.` into parts: `path_parts = data_path_string | split: '.'`
|
|
111
|
+
- Start at `site.data` and iterate the parts, reassigning: `data_object = data_object[part]`
|
|
112
|
+
- Bracket notation is used intentionally so keys like `2025-06` (that begin with digits or contain dashes) are supported
|
|
113
|
+
- After the loop: `resume_data = data_object`
|
|
114
|
+
|
|
115
|
+
### Examples
|
|
116
|
+
|
|
117
|
+
```yaml
|
|
118
|
+
# 1) Use files directly under _data/
|
|
119
|
+
active_resume_path: ""
|
|
120
|
+
# resume_data.experience == site.data.experience
|
|
121
|
+
|
|
122
|
+
# 2) Use a language subtree
|
|
123
|
+
active_resume_path: en
|
|
124
|
+
# resume_data.experience == site.data.en.experience
|
|
125
|
+
|
|
126
|
+
# 3) Use nested subtrees for versioning
|
|
127
|
+
active_resume_path: 2025-06.20250621-PM
|
|
128
|
+
# resume_data.experience == site.data['2025-06']['20250621-PM'].experience
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
---
|
|
132
|
+
|
|
133
|
+
## Rendering flow inside resume layouts
|
|
134
|
+
|
|
135
|
+
### 1) Head, SEO, analytics
|
|
136
|
+
- Shared meta from `shared-head.html`
|
|
137
|
+
- Resume-specific head from `resume-head-*.html` (CSS, fonts, favicons)
|
|
138
|
+
- `{% seo %}` prints SEO meta and Open Graph/Twitter cards
|
|
139
|
+
- `analytics-head.html` adds GTM or GA4; `analytics-body.html` adds GTM `<noscript>` in the body
|
|
140
|
+
|
|
141
|
+
### 2) Header
|
|
142
|
+
- Optional avatar (toggle via `site.resume_avatar`)
|
|
143
|
+
- Name from `site.name.first|middle|last`
|
|
144
|
+
- Optional contact row (`site.display_header_contact_info`) showing phone/email/address and DoB
|
|
145
|
+
- When `site.enable_live` is true, uses `phone_live` and `email_live`; otherwise `phone` and `email`
|
|
146
|
+
- Small inline icons are included from `vendors/lineicons-v4.0/`
|
|
147
|
+
- Title bar with `site.resume_title` (or `resume_title_ar` for AR)
|
|
148
|
+
- Social icon list when `site.social_links` is configured (see `_includes/social-links.html`)
|
|
149
|
+
- Executive summary from `site.resume_header_intro`
|
|
150
|
+
- CTA button controlled by `site.resume_looking_for_work`
|
|
151
|
+
|
|
152
|
+
### 3) Dynamic section rendering
|
|
153
|
+
- The layouts loop over `site.resume_section_order` and, for each `section_name`, include either `resume-section-en.html` or `resume-section-ar.html`
|
|
154
|
+
- Each section is further gated by `site.resume_section.<name>` and by `active: true` flags in your data files
|
|
155
|
+
|
|
156
|
+
### 4) Print-only blocks and footers
|
|
157
|
+
- If `site.resume_print_social_links` is true, a print-only section renders text social links via `_includes/print-social-links.html`
|
|
158
|
+
- Footers include a generation timestamp and copyright
|
|
159
|
+
|
|
160
|
+
---
|
|
161
|
+
|
|
162
|
+
## Arabic (RTL) layout specifics
|
|
163
|
+
|
|
164
|
+
- `dir="rtl"` and appropriate Arabic `lang` attribute
|
|
165
|
+
- Labels, CTA, and some icon placement differ for better RTL legibility
|
|
166
|
+
- Dates use `ar-date.html` for Arabic month names and print “حتى الآن” for present roles
|
|
167
|
+
- Where address text is language-specific, `resume-ar.html` reads `site.contact_info.address_ar`
|
|
168
|
+
|
|
169
|
+
---
|
|
170
|
+
|
|
171
|
+
## Configuration keys consumed by layouts
|
|
172
|
+
|
|
173
|
+
Site/global keys used across the layouts (non-exhaustive, but most relevant):
|
|
174
|
+
|
|
175
|
+
```yaml
|
|
176
|
+
title: "Your Site Title"
|
|
177
|
+
name:
|
|
178
|
+
first: "First"
|
|
179
|
+
middle: "M."
|
|
180
|
+
last: "Last"
|
|
181
|
+
resume_title: "Job Title"
|
|
182
|
+
resume_title_ar: "المسمّى الوظيفي"
|
|
183
|
+
resume_header_intro: "Short executive summary paragraph."
|
|
184
|
+
resume_avatar: true
|
|
185
|
+
|
|
186
|
+
# Header contact toggles
|
|
187
|
+
enable_live: false
|
|
188
|
+
contact_info:
|
|
189
|
+
phone: "+1 555 555 5555"
|
|
190
|
+
email: "me@example.com"
|
|
191
|
+
address: "City, Country"
|
|
192
|
+
address_ar: "المدينة، الدولة"
|
|
193
|
+
dob: 1990-01-01
|
|
194
|
+
phone_live: "+1 555 555 0000"
|
|
195
|
+
email_live: "me@live.example.com"
|
|
196
|
+
|
|
197
|
+
display_header_contact_info: true
|
|
198
|
+
|
|
199
|
+
# Social links (icons rendered when set)
|
|
200
|
+
social_links:
|
|
201
|
+
github: https://github.com/you
|
|
202
|
+
linkedin: https://www.linkedin.com/in/you/
|
|
203
|
+
# ... (see includes guide for full list)
|
|
204
|
+
|
|
205
|
+
# Resume theme hook (CSS can target .theme-<value> on <body>)
|
|
206
|
+
resume_theme: default
|
|
207
|
+
|
|
208
|
+
# Job search CTA behavior
|
|
209
|
+
resume_looking_for_work: true
|
|
210
|
+
|
|
211
|
+
# Sections
|
|
212
|
+
resume_section:
|
|
213
|
+
experience: true
|
|
214
|
+
education: true
|
|
215
|
+
certifications: true
|
|
216
|
+
courses: true
|
|
217
|
+
volunteering: true
|
|
218
|
+
projects: true
|
|
219
|
+
skills: true
|
|
220
|
+
recognition: true
|
|
221
|
+
associations: true
|
|
222
|
+
interests: true
|
|
223
|
+
languages: true
|
|
224
|
+
links: true
|
|
225
|
+
lang_header: false # if true, show compact languages in header
|
|
226
|
+
|
|
227
|
+
# Order in which sections are rendered
|
|
228
|
+
resume_section_order:
|
|
229
|
+
- experience
|
|
230
|
+
- education
|
|
231
|
+
- projects
|
|
232
|
+
- skills
|
|
233
|
+
- languages
|
|
234
|
+
- links
|
|
235
|
+
|
|
236
|
+
# Print behavior
|
|
237
|
+
resume_print_social_links: true
|
|
238
|
+
|
|
239
|
+
# Active data subtree for resume_data
|
|
240
|
+
active_resume_path: ""
|
|
241
|
+
```
|
|
242
|
+
|
|
243
|
+
Per-page front matter (for multilingual SEO):
|
|
244
|
+
|
|
245
|
+
```yaml
|
|
246
|
+
---
|
|
247
|
+
layout: resume-en
|
|
248
|
+
permalink: /resume/en/
|
|
249
|
+
lang: en
|
|
250
|
+
t_id: resume
|
|
251
|
+
---
|
|
252
|
+
```
|
|
253
|
+
```yaml
|
|
254
|
+
---
|
|
255
|
+
layout: resume-ar
|
|
256
|
+
permalink: /resume/ar/
|
|
257
|
+
lang: ar
|
|
258
|
+
t_id: resume
|
|
259
|
+
---
|
|
260
|
+
```
|
|
261
|
+
|
|
262
|
+
---
|
|
263
|
+
|
|
264
|
+
## Creating a new layout
|
|
265
|
+
|
|
266
|
+
1) Create a file under `_layouts/your-layout.html`.
|
|
267
|
+
2) Start from `default.html` for a minimal skeleton (shared head, main CSS, SEO, analytics, `{{ content }}`).
|
|
268
|
+
3) If your page needs resume CSS or multilingual SEO, include the relevant head include(s) and `hreflang.html`.
|
|
269
|
+
4) Keep complex markup in `_includes/` so the layout stays thin.
|
|
270
|
+
|
|
271
|
+
Example skeleton:
|
|
272
|
+
|
|
273
|
+
```html
|
|
274
|
+
<!DOCTYPE html>
|
|
275
|
+
<html lang="en">
|
|
276
|
+
<head>
|
|
277
|
+
{% include shared-head.html %}
|
|
278
|
+
{% include main-head.html %}
|
|
279
|
+
{% seo %}
|
|
280
|
+
{% include analytics-head.html %}
|
|
281
|
+
</head>
|
|
282
|
+
<body>
|
|
283
|
+
{% include analytics-body.html %}
|
|
284
|
+
{{ content }}
|
|
285
|
+
</body>
|
|
286
|
+
</html>
|
|
287
|
+
```
|
|
288
|
+
|
|
289
|
+
---
|
|
290
|
+
|
|
291
|
+
## Creating a new resume-like layout (another language or variant)
|
|
292
|
+
|
|
293
|
+
1) Duplicate `resume-en.html` or `resume-ar.html` to `_layouts/resume-xx.html`.
|
|
294
|
+
2) Set `<html lang="xx" dir="rtl|ltr">` appropriately.
|
|
295
|
+
3) Create a head include like `_includes/resume-head-xx.html` (fonts + CSS), and include `hreflang.html` inside it.
|
|
296
|
+
4) Create a section include like `_includes/resume-section-xx.html` with localized labels, and mirror the structure used by EN/AR.
|
|
297
|
+
5) Optionally add a localized CTA and header strings.
|
|
298
|
+
6) Update pages to use `layout: resume-xx` and set `lang` and `t_id` for SEO.
|
|
299
|
+
|
|
300
|
+
Tip: Keep date formatting and “present” text consistent with the target language.
|
|
301
|
+
|
|
302
|
+
---
|
|
303
|
+
|
|
304
|
+
## Common pitfalls and troubleshooting
|
|
305
|
+
|
|
306
|
+
- Sections not rendering? Check `resume_section_order`, `resume_section.<name>` flags, and `active: true` on data items.
|
|
307
|
+
- Wrong data showing? Confirm `active_resume_path` and your `_data/` structure.
|
|
308
|
+
- Arabic months not displayed? Ensure `site.data.ar.months` is defined (see includes guide: `ar-date.html`).
|
|
309
|
+
- Icons missing? Verify the SVG exists under `/_includes/vendors/lineicons-*/` and the include path is correct.
|
|
310
|
+
- SEO alternates missing? Ensure both pages share the same `t_id`, and each has a `lang` value.
|
|
311
|
+
|
|
312
|
+
---
|
data/docs/SASS_GUIDE.md
ADDED
|
@@ -0,0 +1,290 @@
|
|
|
1
|
+
# SCSS/SASS Guide (_sass)
|
|
2
|
+
|
|
3
|
+
A contributor- and user-friendly tour of the theme’s styling system: how styles are organized, how entrypoints compile, what each partial does, and safe ways to customize or extend.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## Table of Contents
|
|
8
|
+
|
|
9
|
+
- [How styles compile](#how-styles-compile)
|
|
10
|
+
- [Entrypoints and outputs](#entrypoints-and-outputs)
|
|
11
|
+
- [Why @use (not @import)](#why-use-not-import)
|
|
12
|
+
- [Overriding theme partials in a site](#overriding-theme-partials-in-a-site)
|
|
13
|
+
- [File inventory (what each partial does)](#file-inventory-what-each-partial-does)
|
|
14
|
+
- [_variables.scss](#1-_variablesscss)
|
|
15
|
+
- [_mixins.scss](#2-_mixinsscss)
|
|
16
|
+
- [_normalize.scss](#3-_normalizescss)
|
|
17
|
+
- [_base.scss](#4-_basesscss)
|
|
18
|
+
- [_layout.scss](#5-_layoutscss)
|
|
19
|
+
- [_resume.scss](#6-_resumescss)
|
|
20
|
+
- [_resume-rtl.scss](#7-_resume-rtlscss)
|
|
21
|
+
- [_profile.scss](#8-_profilescss)
|
|
22
|
+
- [_all-pages.scss](#9-_all-pagesscss)
|
|
23
|
+
- [Responsive, print, and RTL strategy](#responsive-print-and-rtl-strategy)
|
|
24
|
+
- [Variables reference](#variables-reference)
|
|
25
|
+
- [Mixins reference](#mixins-reference)
|
|
26
|
+
- [Customization recipes](#customization-recipes)
|
|
27
|
+
- [Override variables without forking](#override-variables-without-forking)
|
|
28
|
+
- [Change fonts (EN/AR)](#change-fonts-enar)
|
|
29
|
+
- [Adjust layout container and grid](#adjust-layout-container-and-grid)
|
|
30
|
+
- [Tweak section borders and spacing](#tweak-section-borders-and-spacing)
|
|
31
|
+
- [Languages table spacing/print behavior](#languages-table-spacingprint-behavior)
|
|
32
|
+
- [Add a new SCSS partial](#add-a-new-scss-partial)
|
|
33
|
+
- [Theme variants hook](#theme-variants-hook)
|
|
34
|
+
- [Pitfalls and tips](#pitfalls-and-tips)
|
|
35
|
+
|
|
36
|
+
---
|
|
37
|
+
|
|
38
|
+
## How styles compile
|
|
39
|
+
|
|
40
|
+
### Entrypoints and outputs
|
|
41
|
+
|
|
42
|
+
These three files are compiled by Jekyll/Sass into CSS. They live under `assets/css/` and contain front matter (`---`) so Jekyll treats them as entrypoints:
|
|
43
|
+
|
|
44
|
+
- `assets/css/cv.scss` → `assets/css/cv.css`
|
|
45
|
+
- English resume CSS
|
|
46
|
+
- `assets/css/cv-ar.scss` → `assets/css/cv-ar.css`
|
|
47
|
+
- Arabic resume CSS (loads RTL overrides)
|
|
48
|
+
- `assets/css/main.scss` → `assets/css/main.css`
|
|
49
|
+
- Profile/landing and general site styles
|
|
50
|
+
|
|
51
|
+
Each entrypoint wires up modules from `_sass/` via `@use`.
|
|
52
|
+
|
|
53
|
+
### Why @use (not @import)
|
|
54
|
+
|
|
55
|
+
This theme uses modern Dart Sass `@use`:
|
|
56
|
+
- Namespaces variables and mixins (e.g., `variables.$white`, `@include mixins.clearfix`)
|
|
57
|
+
- Prevents accidental global leakage
|
|
58
|
+
- Allows overriding `!default` variables by providing a replacement module earlier on the load path
|
|
59
|
+
|
|
60
|
+
### Overriding theme partials in a site
|
|
61
|
+
|
|
62
|
+
Jekyll adds both your site and the theme gem to Sass load paths. If your consuming site defines a file with the same logical path/name as the theme’s module (e.g., `_sass/variables.scss`), `@use "variables";` will resolve to your site’s copy first. This is the preferred way to override variables/mixins without forking.
|
|
63
|
+
|
|
64
|
+
Notes:
|
|
65
|
+
- Many variables are declared with `!default`, enabling safe overrides.
|
|
66
|
+
- Because `@use` namespaces members, you still reference them as `variables.$name` inside modules that load `variables`.
|
|
67
|
+
- You can also duplicate an entrypoint (e.g., copy `assets/css/cv.scss` into your site) and `@use` your customized modules.
|
|
68
|
+
|
|
69
|
+
---
|
|
70
|
+
|
|
71
|
+
## File inventory (what each partial does)
|
|
72
|
+
|
|
73
|
+
### 1) `_variables.scss`
|
|
74
|
+
Purpose: central constants.
|
|
75
|
+
- Layout: `$container-width` (980px), `$grid-gutter` (10px)
|
|
76
|
+
- Colors: `$white`, `$black`, `$text_color`
|
|
77
|
+
- Typography stacks: `$body-font`, `$mono-font`
|
|
78
|
+
- Sizes: `$body-font-size` (currently not consumed globally but available)
|
|
79
|
+
|
|
80
|
+
Most are marked `!default` so sites can override.
|
|
81
|
+
|
|
82
|
+
---
|
|
83
|
+
|
|
84
|
+
### 2) `_mixins.scss`
|
|
85
|
+
Purpose: reusable helpers.
|
|
86
|
+
- Utilities: `border-radius`, `transition`, `clearfix`
|
|
87
|
+
- Media queries: `media_max($w)`, `media_min($w)`, `media_larger_than_mobile` (min-width: 600px), `media_mobile` (max-width: 600px)
|
|
88
|
+
- Typography: `sans[_light|_regular|_bold|_extrabold]`, `serif[_regular|_bold]`
|
|
89
|
+
- Layout accents: `section_border`, `section_border_thin`
|
|
90
|
+
|
|
91
|
+
Used across base/layout/resume for consistent typography and spacing.
|
|
92
|
+
|
|
93
|
+
---
|
|
94
|
+
|
|
95
|
+
### 3) `_normalize.scss`
|
|
96
|
+
Purpose: Normalize.css v8.0.1 for cross-browser baseline (headings, forms, interactive elements, etc.).
|
|
97
|
+
|
|
98
|
+
---
|
|
99
|
+
|
|
100
|
+
### 4) `_base.scss`
|
|
101
|
+
Purpose: Global element defaults and shell wrappers.
|
|
102
|
+
- Universal `box-sizing: border-box`
|
|
103
|
+
- `html` background; `body` typography (`@include mixins.serif`, `font-size: 16px`, `line-height: 1.5`)
|
|
104
|
+
- `.wrapper` and `.group` clearfix patterns
|
|
105
|
+
- Text selection colors
|
|
106
|
+
|
|
107
|
+
---
|
|
108
|
+
|
|
109
|
+
### 5) `_layout.scss`
|
|
110
|
+
Purpose: Container and light grid utilities.
|
|
111
|
+
- `.container` centered fixed width (variables-driven)
|
|
112
|
+
- `.columns` row wrapper
|
|
113
|
+
- `.column` and width helpers: `.one-third`, `.two-thirds`, `.one-half`, `.three-fourths`, `.one-fifth`, `.four-fifths`
|
|
114
|
+
- `.single-column` padding helper
|
|
115
|
+
- `.table-column` equal-width table-cell columns
|
|
116
|
+
|
|
117
|
+
---
|
|
118
|
+
|
|
119
|
+
### 6) `_resume.scss`
|
|
120
|
+
Purpose: Resume-specific components and typography.
|
|
121
|
+
- Section headers with bold, condensed titles (`.section-header`)
|
|
122
|
+
- Page header: avatar, name, contact row, title bar, executive summary
|
|
123
|
+
- Social links bar (hoverable SVGs)
|
|
124
|
+
- Contact CTA button (also supports a “not-looking” modifier)
|
|
125
|
+
- Content sections:
|
|
126
|
+
- `.resume-item-title`, `.resume-item-details`, `.resume-item-copy`
|
|
127
|
+
- Link styling for readability and print
|
|
128
|
+
- Languages table: responsive block-on-mobile and print-optimized two-column layout
|
|
129
|
+
- Footer and print-only utilities
|
|
130
|
+
- Print media overrides (smaller typography; thinner section borders)
|
|
131
|
+
|
|
132
|
+
---
|
|
133
|
+
|
|
134
|
+
### 7) `_resume-rtl.scss`
|
|
135
|
+
Purpose: Arabic/RTL overrides scoped to `html[dir="rtl"]`.
|
|
136
|
+
- Sets Arabic-friendly font stack (Cairo, Noto Naskh Arabic)
|
|
137
|
+
- Applies Arabic fonts to headings and content blocks
|
|
138
|
+
- Right-aligns key text blocks
|
|
139
|
+
- Flips floats (e.g., header title, social links) for RTL
|
|
140
|
+
- Adjusts lists and the languages table for RTL direction
|
|
141
|
+
|
|
142
|
+
Loaded only by `cv-ar.scss`.
|
|
143
|
+
|
|
144
|
+
---
|
|
145
|
+
|
|
146
|
+
### 8) `_profile.scss`
|
|
147
|
+
Purpose: Landing/profile page styles.
|
|
148
|
+
- System sans font stack
|
|
149
|
+
- Avatar, name, about text
|
|
150
|
+
- Social links list
|
|
151
|
+
- Prominent “CV” button
|
|
152
|
+
|
|
153
|
+
Used by `assets/css/main.scss` entrypoint.
|
|
154
|
+
|
|
155
|
+
---
|
|
156
|
+
|
|
157
|
+
### 9) `_all-pages.scss`
|
|
158
|
+
Purpose: Small shared bits across pages.
|
|
159
|
+
- SVG icon defaults and header contact icon sizing
|
|
160
|
+
- Footer styles (shared with `.page-footer` in resume)
|
|
161
|
+
|
|
162
|
+
---
|
|
163
|
+
|
|
164
|
+
## Responsive, print, and RTL strategy
|
|
165
|
+
|
|
166
|
+
- Responsive: Mixins `media_larger_than_mobile` and `media_mobile` (600px breakpoint) provide simple adjustments (e.g., stacking → floats).
|
|
167
|
+
- Print: Dedicated `@media print` blocks in `_resume.scss` keep the output compact and readable (smaller fonts, non-stacking languages table, print-only helpers).
|
|
168
|
+
- RTL: `_resume-rtl.scss` is loaded only by the Arabic entrypoint; overrides are scoped under `html[dir="rtl"]` to avoid affecting LTR pages.
|
|
169
|
+
|
|
170
|
+
---
|
|
171
|
+
|
|
172
|
+
## Variables reference
|
|
173
|
+
|
|
174
|
+
From `_variables.scss` (selected):
|
|
175
|
+
|
|
176
|
+
- `$container-width` (default 980px): resume max width used by `.container`
|
|
177
|
+
- `$grid-gutter` (default 10px): column padding and row negative margins
|
|
178
|
+
- `$white`, `$black`, `$text_color`: core colors
|
|
179
|
+
- `$body-font`, `$mono-font`: font stacks for base and code
|
|
180
|
+
- `$body-font-size` (13px): available for consumers; base currently uses an explicit 16px
|
|
181
|
+
|
|
182
|
+
All variables declared `!default` can be overridden by defining a `variables.scss` module in your site.
|
|
183
|
+
|
|
184
|
+
---
|
|
185
|
+
|
|
186
|
+
## Mixins reference
|
|
187
|
+
|
|
188
|
+
- `@include border-radius($radius)`
|
|
189
|
+
- `@include transition($value)`
|
|
190
|
+
- `@include clearfix`
|
|
191
|
+
- `@include media_max($px)` / `@include media_min($px)`
|
|
192
|
+
- `@include media_larger_than_mobile` (min-width: 600px)
|
|
193
|
+
- `@include media_mobile` (max-width: 600px)
|
|
194
|
+
- Typography:
|
|
195
|
+
- `@include sans[_light|_regular|_bold|_extrabold]`
|
|
196
|
+
- `@include serif[_regular|_bold]`
|
|
197
|
+
- Accents: `@include section_border` / `@include section_border_thin`
|
|
198
|
+
|
|
199
|
+
Example:
|
|
200
|
+
```scss
|
|
201
|
+
.my-cta {
|
|
202
|
+
@include sans_bold;
|
|
203
|
+
@include border-radius(4px);
|
|
204
|
+
@include transition(all .2s ease);
|
|
205
|
+
}
|
|
206
|
+
```
|
|
207
|
+
|
|
208
|
+
---
|
|
209
|
+
|
|
210
|
+
## Customization recipes
|
|
211
|
+
|
|
212
|
+
### Override variables without forking
|
|
213
|
+
|
|
214
|
+
In your consuming site, add `_sass/variables.scss` with your values. Because the theme uses `!default`, your module will be used instead.
|
|
215
|
+
|
|
216
|
+
```scss
|
|
217
|
+
// _sass/variables.scss (in your site)
|
|
218
|
+
$container-width: 900px !default;
|
|
219
|
+
$grid-gutter: 16px !default;
|
|
220
|
+
$text_color: #222 !default;
|
|
221
|
+
```
|
|
222
|
+
|
|
223
|
+
No other changes needed—entrypoints that `@use "variables";` will pick up your overrides.
|
|
224
|
+
|
|
225
|
+
### Change fonts (EN/AR)
|
|
226
|
+
|
|
227
|
+
- English resume and general pages inherit fonts from mixins.
|
|
228
|
+
- Arabic resume sets fonts under `html[dir="rtl"]` in `_resume-rtl.scss`.
|
|
229
|
+
|
|
230
|
+
Options:
|
|
231
|
+
1) Override typography mixins in your own `_sass/mixins.scss` (advanced; ensure API compatibility), or
|
|
232
|
+
2) Add a small override partial in your site and `@use` it from a copied entrypoint, for example:
|
|
233
|
+
|
|
234
|
+
```scss
|
|
235
|
+
// assets/css/cv.scss (copied into your site)
|
|
236
|
+
---
|
|
237
|
+
---
|
|
238
|
+
@use "normalize";
|
|
239
|
+
@use "mixins";
|
|
240
|
+
@use "variables";
|
|
241
|
+
@use "base";
|
|
242
|
+
@use "layout";
|
|
243
|
+
@use "resume";
|
|
244
|
+
@use "all-pages";
|
|
245
|
+
|
|
246
|
+
// Your tweaks
|
|
247
|
+
html { font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
|
|
248
|
+
```
|
|
249
|
+
|
|
250
|
+
### Adjust layout container and grid
|
|
251
|
+
|
|
252
|
+
- Change `$container-width`/`$grid-gutter` in your variables override.
|
|
253
|
+
- Add more widths by extending `_layout.scss` in your site (e.g., `.one-sixth`, `.five-sixths`).
|
|
254
|
+
|
|
255
|
+
### Tweak section borders and spacing
|
|
256
|
+
|
|
257
|
+
Use the provided mixins:
|
|
258
|
+
```scss
|
|
259
|
+
.section-header { @include section_border_thin; }
|
|
260
|
+
```
|
|
261
|
+
Or override the values by redefining the mixins in a site module with identical names (advanced).
|
|
262
|
+
|
|
263
|
+
### Languages table spacing/print behavior
|
|
264
|
+
|
|
265
|
+
- Mobile stacking is controlled via `@include media_mobile` in `_resume.scss`.
|
|
266
|
+
- Adjust `border-spacing` and padding in your site overrides to increase/decrease gaps.
|
|
267
|
+
|
|
268
|
+
### Add a new SCSS partial
|
|
269
|
+
|
|
270
|
+
1) Create `_sass/_your-partial.scss` in your site.
|
|
271
|
+
2) If you want it across the resume, copy `assets/css/cv.scss` into your site and append `@use "your-partial";`.
|
|
272
|
+
3) For Arabic resume only, copy `assets/css/cv-ar.scss` and import there.
|
|
273
|
+
|
|
274
|
+
### Theme variants hook
|
|
275
|
+
|
|
276
|
+
Layouts add `class="theme-{{ site.resume_theme }}"` to `<body>`. Target theme variants as:
|
|
277
|
+
```scss
|
|
278
|
+
body.theme-default .section-header h2 { /* variant-specific tweaks */ }
|
|
279
|
+
```
|
|
280
|
+
You can implement alternate themes by scoping rules under different `.theme-*` classes.
|
|
281
|
+
|
|
282
|
+
---
|
|
283
|
+
|
|
284
|
+
## Pitfalls and tips
|
|
285
|
+
|
|
286
|
+
- `@use` is namespaced: reference variables as `variables.$name` inside modules that load them.
|
|
287
|
+
- Variable overrides require providing a module with the same logical name (e.g., `_sass/variables.scss`) in your site; you do not edit the theme gem.
|
|
288
|
+
- Entry files must have front matter (`---`) or Jekyll won’t process them.
|
|
289
|
+
- Keep print-specific rules in `@media print` to avoid regressions on screen.
|
|
290
|
+
- For RTL tweaks, scope overrides under `html[dir="rtl"]` to avoid impacting LTR.
|