Add footer and polish look&feel at the different screen resolutions

README.md

@@ -7,12 +7,12 @@ Currently uses [cifplayer](https://github.com/tilde-lab/cifplayer) and data from
 paper](https://github.com/google-deepmind/materials_discovery).
 The physical properties prediction is done dynamically by [MPDS ML server](https://mpds.io/ml).
 
-![2023-12-10-001838_1095x878_scrot](https://github.com/ml-evs/this-material-does-not-exist/assets/7916000/678ba7ec-d929-438e-8637-3dad5bf26493)
+![GNome_d582d1239f_screenshot](https://github.com/mpds-io/this-material-does-not-exist/main/d582d1239f.png)
 
 
 ## Build
 
-The `cifplayer` is powered by `$mol` framework. Note that, unlike many other frontend frameworks, `$mol` provides the same single environment for all its projects, under the standard namespace scheme. That is, all your `$mol`-based code lives inside the same directory `$MOL_HOME`. So if you don't have `$MOL_HOME` yet, please create it and navigate there:
+The `cifplayer` is powered by `$mol` framework. Note that, unlike many other frontend frameworks, `$mol` provides the same single environment for all its projects, under the standard namespace scheme. That is, all your `$mol`-based code lives inside the same directory `$MOL_HOME`. So if you don't have `$MOL_HOME` yet, please create it and navigate there
 
 ```bash
 mkdir $MOL_HOME && cd $MOL_HOME

app/app.view.css

@@ -1,3 +1,8 @@
-@media all and (max-width: 900px) {
+@media all and (max-width: 850px) {
 	[optimade_tmdne_app_param_mae], [optimade_tmdne_app_param_name] { display: none; }
+	[optimade_tmdne_app_acks] { display: none; }
+}
+
+@media all and (max-height: 650px) {
+	[optimade_tmdne_app_prediction] { display: none; }
 }

app/app.view.css.ts

@@ -47,6 +47,9 @@ namespace $.$$ {
 			justify: {
 				content: 'center',
 			},
+			font: {
+				size: '1.2rem',
+			},
 		},
 
 		Prediction: {
@@ -113,7 +116,7 @@ namespace $.$$ {
 			},
 			width: '24rem',
 			position: 'absolute',
-			bottom: '4rem',
+			bottom: '5.3rem',
 
 			pointerEvents: 'none',
 			transition: 'opacity 0.2s',
@@ -123,18 +126,24 @@ namespace $.$$ {
 					opacity: 0,
 				},
 			},
+			zIndex: 1,
 		},
 
 		Hint_no: {
 			pointerEvents: 'auto',
 			color: '#ff6666',
-			zIndex: 10,
 		},
 
 		Hint_yes: {
 			pointerEvents: 'auto',
 			color: $mol_theme.current,
-			zIndex: 10,
+		},
+
+		Acks: {
+			font: {
+				size: '0.7rem',
+			},
+			zIndex: 0,
 		},
 
 	} )

app/app.view.tree

@@ -35,7 +35,7 @@ $optimade_tmdne_app $mol_view
 						<= Param_name* $mol_paragraph
 							title <= param_name* \
 						<= Param_symbol* $mol_html_view
-							minimal_height <= param_min_height 24
+							minimal_height <= param_min_height 22
 							html <= param_symbol* \
 						\=
 						<= Param_value* $mol_view
@@ -70,3 +70,25 @@ $optimade_tmdne_app $mol_view
 					swiped_to? <=> swiped_to*? \
 					swipe_to_right => swipe_to_right*
 					swipe_to_left => swipe_to_left*
+		<= Acks $mol_view
+			sub /
+				<= Acks_a $mol_link
+					uri \https://www.optimade.org
+					sub /
+						\Powered by Optimade
+				<= Acks_b $mol_link
+					uri \https://github.com/tilde-lab/cifplayer
+					sub /
+						\and cifplayer
+				<= Acks_c $mol_link
+					uri \https://github.com/google-deepmind/materials_discovery
+					sub /
+						\using the GNome dataset
+				<= Acks_d $mol_link
+					uri \https://github.com/ml-evs/this-material-does-not-exist
+					sub /
+						\developed on GitHub
+				<= Acks_e $mol_link
+					uri \https://thispersondoesnotexist.com
+					sub /
+						\and inspired by...

card/card.view.css.ts

@@ -7,7 +7,8 @@ namespace $.$$ {
 		position: 'fixed',
 		left: '50%',
 		transform: 'translateX(-50%)',
-		bottom: 0,
+		bottom: '1.6rem',
+		zIndex: 2,
 
 		// position: 'relative',
 		// left: 0,
@@ -28,7 +29,7 @@ namespace $.$$ {
 			background: {
 				color: $mol_theme.back,
 			},
-			transform: 'translateY(110%)',
+			transform: 'translateY(125%)',
 			transition: 'transform 0.7s',
 			'[loaded]': {
 				'true': {

card/card.view.tree

@@ -9,7 +9,7 @@ $optimade_tmdne_card $optimade_tmdne_swipe
 					card_position <= card_position \
 				sub /
 					<= Name $mol_html_view
-						minimal_height 24
+						minimal_height 22
 						html <= name \
 					<= Question $mol_paragraph
 						title \Do you think it's synthesizable?