css media

gen.py

@@ -143,10 +143,11 @@ def index_content(dir_name: str, data_dir: pathlib.Path, index_txt: pathlib.Path
 	if desc_md is None and content_index is None:
 		return;
 	
+	content_desc = ""
 	content = ""
 
 	if desc_md:
-		content += "<li>" + "<desc>" + "\n" + desc_md + "</desc>" + "</li>" + "\n";
+		content_desc += "<li>" + "<desc>" + "\n" + desc_md + "</desc>" + "</li>" + "\n";
 
 	if content_index:
 
@@ -171,7 +172,7 @@ def index_content(dir_name: str, data_dir: pathlib.Path, index_txt: pathlib.Path
 
 	# check if there is an html file existing already. if so use that one.
 
-	html = template.replace('[[content]]', content).replace('[[dir]]', str(dir_name));
+	html = template.replace('[[content_desc]]', content_desc).replace('[[content]]', content).replace('[[dir]]', str(dir_name));
 
 	try:
 		out = data_dir / 'index.html'		

styles/+++/lestyle.css

@@ -5,79 +5,106 @@ body {
 	padding: 0;
 }
 
-.tableau {
+hd {
-	border: 10px grey ridge;
+	display: flex;
-	margin: 5em;
+	flex-direction: column;
-	margin-bottom: 1em;
+	max-width: 45em;
+	min-width: 250px;
 }
 
+hd img {
+	width: 80%;
+	border: 10px grey ridge;
+	margin-bottom: 1em;
+	margin-top: 5em;
+	
+}
+
+h1 { font-size: 2.7vw; }
+
+h2 { font-size: 2.2vw;}
+
+h3 { font-size: 1.7vw;}
+
+h4 { font-size: 1.3vw;}
+
 table {
-	display: block;
 	margin: 1em;
 	border: 10px grey ridge;
-	font-size: small;
 	text-align: left;
-	width: 55em;
+	max-width: 55em;
+	min-width: 250px;			
 }
 
-table td {
+table tr {
-	border: 2px grey ridge;
+	display: flex;
+	flex-direction: column;	
+	text-align: center;		
+}
+
+table tr td {
 	padding: 1em;
+/*	width: 75em;*/
 }
 
 table td h1 {
-	bborder: 1px red solid;
 	margin-top: 0.4em;
 	margin-bottom: 0.2em;
 }
 
+table tr td img {
+	width: 100%;
+	height: auto;
+	border: 2px grey ridge;
+}
+
+table tr td video {
+	width: 100%;
+	height: auto;
+	border: 2px grey ridge;
+}
+
+
+table td p {
+	margin-top: 0.1em;
+	margin-bottom: 0.4em;
+}
+
 h1 a:hover, h1 a:active {
 	text-decoration: none;
 }
 
-
-table td p {
-	bborder: 1px red solid;
-	margin-top: 0.1em;
-	margin-bottom: 0.4em;
-}
-
 a:hover p, a:active p {
 	text-decoration: none;
 }
 
-
-table tr {
-	text-align: center;
-}
-
-table td img {
-	width: 100%;
-	border: 2px grey ridge;
-}
-
 .lst {
+	display: flex;
+	flex-direction: column;	
 	margin-right: 3em;
+	margin-left: 3em;
 }
 
 .lst p mat {
 	margin-left: : 2em;
 }
 
-.lst ul li { display: inline; }
 
 .lst ul li desc {
-	margin: 2em;
+	margin-left: 1em;
+	margin-right: 1em;
 	margin-bottom: 1em;	
-	width: 985;
+	min-width: 250px;
+	max-width: 1024px;	
 	display: block;
 }
 
+
 .lst ul li desc img {
 	border: 10px grey ridge;
 	margin: 0em;
 	margin-bottom: 2em;
-	width: 985;
+	width: 98%;
 	display: block;
 }
 
@@ -85,36 +112,42 @@ table td img {
 	border: 10px grey ridge;
 	margin: 0em;
 	margin-bottom: 2em;
-	width: 985;
+	width: 98%;
 	display: block;
 }
 
+.lst ul li { display: inline-block; }
+
 .lst ul li img {
 	border: 10px grey ridge;
-	margin: 2em;
+	margin: 0.5em;
 	margin-bottom: 1em;	
-	width: 450;
+	resize: both;
+  	overflow: auto;	
+	width: 488px;
 }
 
 .lst ul li video {
 	border: 10px grey ridge;
-	margin: 2em;
+	margin: 0.5em;
 	margin-bottom: 1em;	
-	width: 450;
+	width: 488px;
 }
 
 .lst ul li sound {
-	display: inline-block;
+	display: block;	
 	border: 10px grey ridge;
-	margin: 2em;
+	margin-left: 1em;
-	width: 440;
+	margin-right: 1em;
 	padding: 10;
+	min-width: 250px;
+	max-width: 990px;		
 }
 
 .lst ul li sound track {
-	display: block;
 	margin-top: 0.3em;
 	margin-bottom: 0.3em;
+	width: 100%;
 }
 
 .lst ul li sound info {
@@ -126,19 +159,19 @@ table td img {
 	margin-top: 0.5em;
 }
 
-.lst ul li lo img {
+.lst ul li desc lo img {
 	border: none;
 	margin: 1em;
 	margin-top: 0.5em;
 	max-width: 300;
 }
 
-.lst ul li la img {
+.lst ul li desc la img {
 	border: none;
 	margin: 1em;
 	margin-top: 0.5em;
 	max-width: 100;
-	max-height: 100;
+	min-width: 100;
 }
 
 address {
@@ -149,4 +182,41 @@ address {
 	margin: 20px;
 }
 
+@media screen and (max-width: 1200px) {
 
+	h1 { font-size: 6vw; }
+
+	h2 { font-size: 5.3vw;}
+
+	h3 { font-size: 5vw;}
+
+	h4 { font-size: 4vw;}
+
+	p { font-size: 3.7vw;}
+
+	pre { font-size: 3.5vw;}
+
+	table {
+		max-width: 65em;
+	}
+
+
+	.lst ul li { display: block; }
+
+	.lst ul li img {
+		border: 10px grey ridge;
+		margin: 0.5em;
+		margin-bottom: 1em;	
+		width: 96%;
+		min-width: 250px;		
+	}
+
+	.lst ul li video {
+		border: 10px grey ridge;
+		margin: 0.5em;
+		margin-bottom: 1em;	
+		width: 96%;
+		min-width: 250px;		
+	}
+
+}

templates/index_apache_template.html

@@ -15,8 +15,11 @@
 
 	<div class="lst">		
 		<ul>
-		[[content]]
+		[[content_desc]]
 		</ul>
+		<ul>
+		[[content]]
+		</ul>		
 	</div>
 	
 <address>Apache Server at gauthiier.info Port 80</address>

templates/index_template.html

@@ -1,7 +1,7 @@
 <html>
 <head>
 	<meta charset="utf-8">
-	<meta name="keywords" content="david gauthier, gauthiier, davidgauthier, dviid">
+	<meta name="keywords" content="david gauthier, gauthiier, davidgauthier">
 	<meta name="description" content="David Gauthier (b.1979, CA) - selected index of works">
 	<link rel="icon" href="+++/jules-henri.ico" type="image/x-icon">	
 	<link rel="stylesheet" type="text/css" href="+++/lestyle.css"/>
@@ -9,11 +9,12 @@
 </head>
 <body>
 	<div align="center">
-		<a href="+++/"><img src="+++/yeux.png" width="500" class="tableau"></a>
+		<hd>
-		<h4>David Gauthier</h4>
+			<a href="+++/"><img src="+++/yeux.png" class="tableau"></a>
-		<h1><i>(Selected) Index of works</i></h1>		
+			<h3>David Gauthier</h3>
-		<h4><a href="https://www.uu.nl/staff/DGauthier">index of academic work</a></h4>
+			<h1><i>(Selected) Index of works</i></h1>		
-		<h4>d[at]gauthiier.info</h4>
+			<h3><a href="https://www.uu.nl/staff/DGauthier">index of academic work</a></h3>
+		</hd>
 		[[content]]
 	</div>
 </body>