init

1 files changed, 305 insertions, 0 deletions

diff --git a/assets/static/style.css b/assets/static/style.css
new file mode 100644
index 0000000..b108b4a
--- /dev/null
+++ b/assets/static/style.css
@@ -0,0 +1,305 @@
+
+body{
+	margin: 0;
+	font-family: inter;
+	font-size: 1vw;
+}
+
+h1{
+	font-size: 150%;
+	font-weight: normal;
+	text-align: left;
+	margin-left: 0.5em;
+}
+
+h2{
+	font-weight: normal;
+}
+
+p{
+	line-height: 150%;
+}
+
+.gardienttop{
+	position: fixed;
+	top: 0px;
+	left: 0px;
+	width: 100vw;
+	height: 1.5vw;
+	background: linear-gradient(rgba(255, 255, 255,1),rgba(255, 255, 255, 0));
+}
+
+
+.gardientbottom{
+	position: fixed;
+	bottom: 0px;
+	left: 0px;
+	width: 100vw;
+	height: 1.5vw;
+	background: linear-gradient(rgba(255, 255, 255,0),rgba(255, 255, 255,1));
+}
+
+.info > p{
+	margin-left:0.75em;
+	margin-right:0.75em;
+}
+
+#foregroundimg{
+	z-index: 999;
+	position: fixed;
+	pointer-events: none;
+	left: 0px;
+	right: 0px;
+	bottom: 0px;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+.top{
+	position: fixed;
+	top: 0px;
+}
+
+.mainmenu{
+	left: 0.5em;
+}
+
+.language{
+	right: 0em;
+}
+
+.pagefull{
+	margin-top: 3em;
+	margin-bottom: 3em;
+}
+
+.page{
+	margin-top: 3em;
+	margin-bottom: 3em;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	min-height: calc(100vH - 6em);
+}
+
+.pagework{
+	margin-top: 3em;
+	margin-bottom: 3em;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.pageinner{
+	max-width:800px;
+}
+
+ul.menu{
+	display: inline-flex;
+	margin: 0;
+	padding: 0;
+	font-size: 150%;
+	font-family: serif;
+}
+
+ul.menu li {
+	display:inline-flex;
+	padding-right: 0.5em;
+}
+
+ul.menu li a{
+	color: #000000;
+	text-decoration: none;
+}
+
+ul.menu li a.active{
+	text-decoration: line-through;
+}
+
+table, th, td {
+	border-collapse: collapse;
+	cursor: grabbing;
+}
+
+tr{
+	text-align: center;
+	border-bottom: 1px solid black;
+	line-height: 2em;
+}
+
+tr.works:hover {
+	background-color: #dddddd;
+	transition: all 0.25s ease-in;
+}
+
+tr:hover .workthumb { 
+	display: block; 
+	position: fixed;
+}
+
+@keyframes flashy {
+	0%   {background-color:#ffffff;}
+	50%  {background-color:#ffaaaa;}
+	100% {background-color:#ffffff;}
+}
+
+
+.flash{
+	background-color: #ffffff;
+	animation-name: flashy;
+	animation-iteration-count: infinite;
+}
+
+td{
+	margin: 0.5em;
+}
+
+td.work{
+	text-align: left; 
+	padding-left: 0.75em;
+}
+
+td a { 
+   display: block; 
+   text-decoration: none;
+   color: black;
+   cursor: grabbing;
+}
+
+td.work a{
+   display: inline-block; 
+}
+
+.workthumb { 
+	display: none; 
+	pointer-events: none;
+	max-height:400px;
+	transform: translate(-50%,-50%);
+}    
+
+.bottom{
+	position: fixed;
+	bottom: 0px;
+	left: 0px;
+	font-family: serif;
+	z-index: 101;
+
+}
+
+.background, .foreground{
+	padding-left: 0.5em;
+	float: left;
+}
+
+.listdate{
+	text-align: left;
+	padding-left: 0.75em;
+}
+
+.listformat{
+	text-align: right;
+	padding-right: 0.75em;
+}
+
+
+.workdescription{
+	margin-top: 3em;
+}
+
+.video{
+	text-align: center;
+}
+video{
+	max-width:800px;
+}
+
+/* start page */
+
+/*
+.previews{
+	margin-top: 3em;
+	display: flex;
+	flex-wrap: wrap;
+	margin-bottom: 3em;
+	justify-items: center;
+	align-items: center;
+	padding-left: 0.75vw;
+
+}
+*/
+div.previews{
+	padding-top: 1.5vw;
+	padding-left: 0.75em;
+}
+
+.preview:hover{
+	z-index: 101 !important;
+}
+.previews > h1{
+	position: fixed;
+	opacity: 0;
+}
+
+.previews:hover > h1{
+	opacity: 1;
+	z-index: 101 !important;
+}
+
+.previews:hover > .preview{
+	opacity: 1;
+	z-index: 100 !important;
+	transform: scale(1.0);
+	box-shadow: 0px 0px 5px #000;
+}
+
+.previews > .preview{
+	opacity: 0.5;
+	transform: scale(0.8);
+	transition: all 0.25s ease-in;
+	display: inline-grid;
+}
+
+
+.preview > a{
+	text-decoration: none;
+}
+
+/*gallery start*/
+.gallery {
+    max-width: 800px;
+    text-align: center;
+}
+
+.bigimage{
+	max-width: 800px;
+	max-height: calc(100vH - 2em);
+}
+/*gallery end*/
+
+/*responsive start*/
+
+@media screen and (max-width: 800px),(max-height: 800px){
+	body {
+		font-size: 3vH;
+	}
+
+	.pagework{
+		display: block;
+		left-padding: 0.75em;
+		right-padding: 0.75em;
+		margin: 0.75em;
+	}
+	.bigimage,
+	video{
+		width: 800px;
+		max-width: calc(100vw - 1.5em);
+		
+	}
+	
+	.bottom{
+		display: none;
+	}
+}
+
+/*responsive end*/
+