update

assets/scss/main.scss

@@ -47,7 +47,6 @@ table {
 
 /* begin custom css */
 html {
-	--accent-color: #00a3ff;
 	scroll-behavior: smooth;
 	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
 }
@@ -71,16 +70,14 @@ main {flex-grow: 1}
 
 /* single */
 .page-header {
-	background: black;
+
-	color: white;
-	padding: 10em 0;
 	max-height: calc(100vh - 44px);
 }
 .page-title {
-	font-size: 3em;
+	font-size: 2em;
+	@media (min-width: 62em) {font-size: 3em;}
 	font-weight: 700;
 	line-height: 1.2;
-	text-align: center;
 }
 .page {
 	h2 {
@@ -98,7 +95,7 @@ main {flex-grow: 1}
 		transition-property: text-decoration-thickness color;
 	}
 	a:hover {
-		color: var(--accent-color);
+		color: #00a3ff;
 		text-decoration-thickness: 6px;
 	}
 	ul {
@@ -121,6 +118,14 @@ main {flex-grow: 1}
 	}
 }
 
+/* list */
+.list {}
+.list-item {padding: 1em; background: #eee; margin-bottom: 1em; transition: 0.4s opacity ease-in-out;
+	&:hover {opacity: 0.4;}
+}
+.list-item__title {font-weight: 700;}
+.list-item__date {}
+.list-item__link {text-decoration: none; color: inherit;}
 
 /* sections */
 .section-header {
@@ -141,7 +146,7 @@ main {flex-grow: 1}
 		&:last-child {margin-bottom: 0;}
 	}
 }
-.read-more {color: var(--accent-color)}
+.read-more {color: #00a3ff}
 
 /* header bar */
 .site-header {background: #ddd; filter: drop-shadow(0px -1px 2px rgba(0,0,0,0.2))}
@@ -175,7 +180,7 @@ main {flex-grow: 1}
 		top: 0;
 		z-index: 2;
 		a {height: 44px;}
-		a:hover {border-bottom: 2px solid var(--accent-color);}
+		a:hover {border-bottom: 2px solid #00a3ff;}
 		.container {justify-content: space-between; flex-flow: row wrap; height: 64px; align-items: center;}
 	}
 }
@@ -291,7 +296,7 @@ body {
 	a {
 		display: flex;
 		box-sizing: border-box;
-		color: var(--accent-color);
+		color: #00a3ff;
 		text-decoration: none;
 		justify-content: center;
 		align-items: center;
@@ -303,13 +308,13 @@ body {
 	}
 	a:first-child {
 		margin-right: 1em;
-		background: var(--accent-color);
+		background: #00a3ff;
 		color: white;
 	}
 	a:not(:first-child) {
-		border: 2px solid var(--accent-color);
+		border: 2px solid #00a3ff;
 	}
-	a:hover {background: rgba(var(--accent-color),0.4)}
+	a:hover {background: rgba(#00a3ff,0.4)}
 }
 
 /* about logos */
@@ -407,6 +412,7 @@ html[lang="ar"] {
 	.site-nav,
 	.personal-summary,
 	.section-header,
+	.page-title,
 	.cta a
 	{direction: rtl;}
 	.cta a {margin-right: 0; margin-left: 1em;}

config.toml

@@ -4,13 +4,11 @@ DefaultContentLanguage = "en"
 
 [languages]
   [languages.ar]
-    contentDir = "content/ar"
     languagedirection = "rtl"
     title = "المهندس محمد الطراونه"
     languageName = "العربية"
     weight = 2
   [languages.en]
-    contentDir = "content/en"
     title = "Eng. Mohammed al-Tarawneh"
     languageName = "English"
     weight = 1

content/_index.ar.md

@@ -2,7 +2,7 @@
 summary: "محمد الطراونة هو <em>خبير</em> في حقوق الاشخاص ذوى الاحتياجات الخاصة، ويستخدم <em>التصميم الشامل</em> لتحسين العالم."
 about: "محمد كافح من أجل إمكانية الوصول لعشرات السنين."
 readmore: "اقرأ أكثر عن محمد"
-latest: "أحدث الإعلام"
+latest: "أحدث المنشورات باللغة العربية"
 contact: "الدكتور المهندس محمد حاليا متاح للاستشارات و الأدوار الإستشارية."
 translationKey: "home"
 ---

content/ar/media/_index.md

@@ -1,4 +0,0 @@
----
-title: "أحدث الإعلام"
-translationKey: media
----

content/en/media/_index.md

@@ -1,4 +0,0 @@
----
-title: "Latest media"
-translationKey: media
----

content/media/_index.ar.md

@@ -0,0 +1,4 @@
+---
+title: "أحدث المنشورات باللغة العربية"
+translationKey: media
+---

content/media/_index.en.md

@@ -0,0 +1,4 @@
+---
+title: "Latest media in English"
+translationKey: media
+---

layouts/_default/list.html

@@ -5,12 +5,17 @@
 			<h1 class="page-title">{{ .Title }}</h1>
 		</div>
 	</header>
-	{{ range .Pages }}
+	<section class="section list">
-		<article>
+		<div class="container">
-			<h2>{{ .Title }}</h2>
+			{{ range .Pages }}
-			<datetime>{{ .Date.Format "January 2, 2006" }}</datetime>
+				<article class="list-item">
-			<a href="{{ .Permalink }}">Read more</a>
+					<a class="list-item__link" href="{{ .Permalink }}">
-		</article>
+					<h2 class="list-item__title">{{ .Title }}</h2>
-	{{ end }}
+					<datetime class="list-item__date">{{ .Date.Format "January 2, 2006" }}</datetime>
+					</a>
+				</article>
+			{{ end }}
+		</div>
+	</section>
 </main>
 {{ end }}

layouts/index.html

@@ -23,7 +23,7 @@
 			</div>
 			<div class="cta">
 				{{ with .Params.readmore }}
-				<a href="/about">{{.}}</a>
+				<a href="./about">{{.}}</a>
 				{{ end }}
 			</div>
 		</div>