Living reference for mhmdaskari.github.io. Design tokens are defined in
assets/css/tokens.css — the single source of truth. Components below are styled by
assets/css/main.css (Dimension template) and assets/css/styles.css (custom
CV, blog, and opened-window refinements). To re-theme the site, edit a token and reload.
Values are read live from :root via getComputedStyle.
Backgrounds
Foreground / text
Borders
Custom-component surfaces & lines
--color-line-blog and --color-fg-faint are off-palette (light grays inherited from the original blog styling).
Opacity steps
Family · weights 300 / 600.
Type scale
Body & inline
Body copy at 1rem, line-height . This is strong,
this is emphasized, this is a link, and this is inline
code set in .
Spacing / sizing
Radius & border width
Hover the box — it transitions over --duration-transition.
This is bold and this is strong. This is italic and this is
emphasized. This is superscript text and this is subscript text.
This is underlined and this is code: for (;;) { ... }. Finally, this is a link.
Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum.
i = 0;
while (!deck.isInOrder()) {
print 'Iteration ' + i;
deck.shuffle();
i++;
}| Name | Description | Price |
|---|---|---|
| Item One | Ante turpis integer aliquet porttitor. | 29.99 |
| Item Two | Vis ac commodo adipiscing arcu aliquet. | 19.99 |
| Item Three | Morbi faucibus arcu accumsan lorem. | 29.99 |
| 100.00 | ||
| Name | Description | Price |
|---|---|---|
| Item One | Ante turpis integer aliquet porttitor. | 29.99 |
| Item Two | Vis ac commodo adipiscing arcu aliquet. | 19.99 |
| Item Three | Morbi faucibus arcu accumsan lorem. | 29.99 |
| 100.00 | ||
Brand icons (Font Awesome)
Academic icons (Academicons)
The .image.left variant floats with the surrounding text wrapping to its right, while
.image.fit spans the full content width. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
A bordered .box container with standard padding. Useful for grouping related content.
The .box.alt variant drops the border, padding, and radius.
Production target: #main article. The visual scrollbar is injected and positioned by assets/js/main.js, while sizing, fade, and mobile scroll containment live in assets/css/styles.css.
This represents the active Dimension article panel used for About, CV, Projects, Blog, and Contact.
.article-scrollbar fades in on hover, wheel, touch swipe, or scroll.body.is-article-visible locks the outer page after the opening phase, letting the article own the scroll.Styled by assets/css/styles.css. Used inside the injected CV.
Timeline
PhD Candidate in Civil Engineering
BSc in Engineering
Skills
Publications
An example publication title demonstrating the citation block
Journal of Examples, 12(3), 100–120 In press
DOI: 10.0000/example.2026.001Rows (presentations / certifications)
A modular object-oriented framework for demonstrations.
Certified Example Practitioner.
Markup generated by assets/js/blog.js, styled by assets/css/styles.css.
2025-10-03
This is the body text of a blog post. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.