mirror of
https://github.com/hazemKrimi/personal-website.git
synced 2026-05-01 18:00:26 +00:00
Content pages and table of contents
This commit is contained in:
Hazem Krimi
@@ -3,7 +3,7 @@
|
||||
--card-dark-background: #131212;
|
||||
}
|
||||
|
||||
article {
|
||||
.card {
|
||||
background-color: var(--card-background);
|
||||
color: var(--text);
|
||||
border-radius: 1.875rem;
|
||||
@@ -11,34 +11,39 @@ article {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
article h3 {
|
||||
.card h3 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1.75rem;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
article p {
|
||||
margin-bottom: 4rem;
|
||||
.card .date {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
article #links {
|
||||
.card p {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.card #links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
article .read-more,
|
||||
article .demo {
|
||||
.card .read-more,
|
||||
.card .demo {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
article .read-more svg,
|
||||
article .demo svg {
|
||||
margin-left: 0.5rem;
|
||||
.card .read-more svg,
|
||||
.card .demo svg {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
article .demo {
|
||||
.card .demo {
|
||||
background-color: #353535;
|
||||
color: var(--white);
|
||||
border-radius: 0.4375rem;
|
||||
@@ -46,20 +51,21 @@ article .demo {
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
article .demo .eye {
|
||||
.card .demo .eye {
|
||||
stroke: var(--white);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
article {
|
||||
.card {
|
||||
padding: 2.5rem 1.5rem;
|
||||
}
|
||||
|
||||
article h3 {
|
||||
.card h3 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
article p {
|
||||
.card p {
|
||||
margin-bottom: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
--nav-dark-background: #121212;
|
||||
}
|
||||
|
||||
header, nav {
|
||||
header, #mobile-navigation {
|
||||
width: 85%;
|
||||
border-radius: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
@@ -23,7 +23,7 @@ header {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
nav:not(.breadcrumb) {
|
||||
#mobile-navigation {
|
||||
background-color: var(--nav-background);
|
||||
display: none;
|
||||
position: fixed;
|
||||
@@ -40,7 +40,7 @@ header #header-face h3 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
header #menus a, nav:not(.breadcrumb) #menus a {
|
||||
header #menus a, #mobile-navigation #menus a {
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
@@ -52,7 +52,7 @@ header #menus {
|
||||
column-gap: 1.563rem;
|
||||
}
|
||||
|
||||
nav:not(.breadcrumb) #menus {
|
||||
#mobile-navigation #menus {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: end;
|
||||
@@ -60,7 +60,7 @@ nav:not(.breadcrumb) #menus {
|
||||
row-gap: 3.125rem;
|
||||
}
|
||||
|
||||
nav:not(.breadcrumb) hr {
|
||||
#mobile-navigation hr {
|
||||
margin-top: 3.125rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
@@ -71,13 +71,13 @@ header #links {
|
||||
column-gap: 1.5rem;
|
||||
}
|
||||
|
||||
nav:not(.breadcrumb) #links {
|
||||
#mobile-navigation #links {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
column-gap: 1.5rem;
|
||||
}
|
||||
|
||||
nav:not(.breadcrumb) #links .theme-toggler {
|
||||
#mobile-navigation #links .theme-toggler {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
@@ -90,7 +90,7 @@ header #nav-toggler {
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
header, nav:not(.breadcrumb) {
|
||||
header, #mobile-navigation {
|
||||
margin: 1.5rem auto;
|
||||
padding: 0.938rem 1.25rem;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
#TableOfContents ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
main #metadata {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
main #metadata h1 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
main #metadata div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
main #metadata #share {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
main #content {
|
||||
display: flex;
|
||||
column-gap: 2rem;
|
||||
}
|
||||
|
||||
main h2, main h3, main h4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
main p, main ul, main ol {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
main #content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
main #content #TableOfContents {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,21 @@
|
||||
---
|
||||
title: "Test blog"
|
||||
description: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
|
||||
date: 2023-10-18T20:03:43+01:00
|
||||
date: 2023-10-18
|
||||
---
|
||||
|
||||
## Hi
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor nulla sed mi faucibus, non commodo nulla malesuada. Aliquam sem lectus, sodales sit amet cursus ac, auctor quis dolor. Pellentesque ac metus vulputate, scelerisque nunc id, mollis est. Duis nec nisi feugiat, sagittis enim vitae, tincidunt metus. Nulla vitae laoreet quam. Integer tortor erat, dictum vel placerat ultricies, eleifend eu risus. Nam sit amet finibus dui. Cras malesuada ligula a maximus sagittis. Proin sed tortor consectetur, vestibulum mauris at, auctor orci. Quisque blandit lectus sollicitudin hendrerit euismod.
|
||||
|
||||
### Greetings
|
||||
|
||||
Praesent efficitur diam laoreet lacus congue, vitae finibus purus blandit. Maecenas ex turpis, vehicula ac varius a, porttitor in sem. Nulla in suscipit elit. Vestibulum id leo eget odio convallis consectetur. Nullam ac diam lobortis, efficitur erat venenatis, tristique ligula. Mauris dui nisi, facilisis et malesuada id, scelerisque in urna. Curabitur egestas lobortis interdum. Etiam convallis mi eu lectus consectetur, feugiat imperdiet sem gravida. Proin eget malesuada ipsum. Maecenas congue scelerisque magna.
|
||||
|
||||
## Hello
|
||||
|
||||
Nunc molestie lorem velit, in efficitur risus dictum vel. Integer porta odio in odio posuere consequat. Etiam accumsan, enim ac scelerisque ultricies, lorem quam ultrices ex, ut ullamcorper mi ante quis augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ut ex feugiat, bibendum felis interdum, finibus nulla. Aenean accumsan bibendum massa. Aenean nec enim ligula. In a cursus orci. Etiam accumsan nisl quis velit porta pellentesque. Morbi dignissim mattis vestibulum. Morbi posuere velit nec augue interdum, facilisis congue augue auctor. Suspendisse nec elit sit amet velit ultrices porta.
|
||||
|
||||
Duis molestie venenatis rhoncus. Phasellus pulvinar odio vel nulla accumsan pretium eget at nunc. Sed convallis, orci at laoreet consequat, odio leo tincidunt sapien, eget ultricies tortor nisl at metus. Integer pretium odio in ipsum iaculis, sit amet pretium lacus vehicula. Etiam vel ex id nisl hendrerit consequat iaculis id metus. Donec scelerisque justo augue, sed accumsan velit elementum finibus. Cras in viverra ex, in faucibus diam. Sed volutpat lacus vel suscipit aliquet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent bibendum ligula lacinia consectetur interdum.
|
||||
|
||||
Fusce ultricies ex et volutpat elementum. Curabitur finibus iaculis erat, et venenatis lectus facilisis nec. Donec sollicitudin, sapien quis bibendum auctor, arcu nunc interdum enim, scelerisque aliquet enim neque eu neque. Fusce in turpis felis. Curabitur sapien mi, lobortis at hendrerit sit amet, maximus in nisi. Sed ac purus suscipit, laoreet lacus quis, congue leo. Cras imperdiet massa rutrum est dictum, quis convallis purus sollicitudin. Nulla eu nibh vel nisl accumsan ultrices.
|
||||
|
||||
@@ -5,17 +5,17 @@ demo: "https://hazemkrimi.github.io/react-weather-app"
|
||||
date: 2023-09-19
|
||||
---
|
||||
|
||||
# About the project
|
||||
## About the project
|
||||
|
||||
This is a project that I made as a step in the interview process for my final year internship.
|
||||
|
||||
# Technologies
|
||||
## Technologies
|
||||
|
||||
- React
|
||||
- TypeScript
|
||||
- Styled Components
|
||||
- OpenWeatherMap API
|
||||
|
||||
# Screenshots
|
||||
## Screenshots
|
||||
|
||||
|
||||
|
||||
@@ -2,6 +2,7 @@ languageCode = 'en-us'
|
||||
title = 'Hazem Krimi'
|
||||
[params]
|
||||
formSpreeURL = 'https://formspree.io/f/xoqpgyge'
|
||||
dateFormat = '02 January 2006'
|
||||
[module]
|
||||
[menu]
|
||||
[[menu.main]]
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
{{ define "styles" }}
|
||||
{{ $styles := resources.Get "css/single.css" | toCSS | minify }}
|
||||
|
||||
<link rel="stylesheet" href="{{ $styles.Permalink }}" />
|
||||
{{ end }}
|
||||
|
||||
{{ define "main" }}
|
||||
{{ partial "breadcrumb.html" . }}
|
||||
|
||||
<section id="metadata">
|
||||
<h1>{{ .Title }}</h1>
|
||||
<div>
|
||||
<span>{{ .Date.Format .Site.Params.dateFormat }}</span>
|
||||
<span>{{ printf "%d minutes read" .ReadingTime }}</span>
|
||||
<span
|
||||
id="share"
|
||||
data-title="{{ .Title }}"
|
||||
data-description="{{ .Params.description }}"
|
||||
data-url="{{ .Permalink }}"
|
||||
>
|
||||
Share
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="content">
|
||||
<div>
|
||||
{{ .Content }}
|
||||
</div>
|
||||
{{ partial "table-of-contents.html" . }}
|
||||
</section>
|
||||
|
||||
<h2>Contact</h2>
|
||||
{{ partial "contact-form.html" }}
|
||||
|
||||
<script>
|
||||
document.querySelector('#share').addEventListener('click', async event => {
|
||||
await navigator.share({
|
||||
title: event.target.getAttribute('data-title'),
|
||||
description: event.target.getAttribute('data-description'),
|
||||
url: event.target.getAttribute('data-url'),
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{{ end }}
|
||||
@@ -5,12 +5,15 @@
|
||||
<article class="card">
|
||||
<div>
|
||||
<h3>{{ .Title }}</h3>
|
||||
{{ if .InSection ($.Site.GetPage "blog") }}
|
||||
<b>{{ .Date.Format .Site.Params.dateFormat }}</b>
|
||||
{{ end }}
|
||||
<p>{{ .Params.description }}</p>
|
||||
<div id="links">
|
||||
<a class="read-more" href="{{ .Permalink }}">
|
||||
Read more {{ readFile "assets/icons/arrow.svg" | safeHTML }}
|
||||
</a>
|
||||
{{ with .Params.demo }}
|
||||
{{ with (and (.InSection ($.Site.GetPage "projects")) .Params.demo) }}
|
||||
<a class="demo" href="{{ . }}" target="_blank">
|
||||
Demo {{ readFile "assets/icons/eye.svg" | safeHTML }}
|
||||
</a>
|
||||
|
||||
@@ -40,7 +40,7 @@
|
||||
</span>
|
||||
</header>
|
||||
|
||||
<nav>
|
||||
<nav id="mobile-navigation">
|
||||
<div id="menus">
|
||||
{{ range site.Menus.main.Sort.ByWeight }}
|
||||
<a {{ printf "href=%q" .URL | safeHTMLAttr }}>{{ .Name }}</a>
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
{{ $styles := resources.Get "css/partials/table-of-contents.css" | toCSS | minify }}
|
||||
|
||||
<link rel="stylesheet" href="{{ $styles.Permalink }}" />
|
||||
|
||||
<aside>
|
||||
{{ .TableOfContents }}
|
||||
</aside>
|
||||
Reference in New Issue
Block a user