From f60e9ccd5b046101903a79bf6afa0cf87fdd956c Mon Sep 17 00:00:00 2001 From: joak Date: Mon, 17 Aug 2020 11:55:24 +0200 Subject: init --- assets/static/style.css | 305 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 305 insertions(+) create mode 100644 assets/static/style.css (limited to 'assets/static/style.css') 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*/ + -- cgit v1.2.3