Project for the Hybrid Publishing thesis award of 2018. By Julie Boschat Thorez and Cristina Cochior. https://www.wdka.nl/work/sic-scripture http://51.255.169.99:8080/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

218 lines
3.1 KiB

* {
box-sizing: border-box;
}
body{
margin: 0;
height: 100vh;
}
a {
text-decoration: none;
color: black;
}
.main {
background: #a99f8a;
}
.main-column-left {
padding: 1.7em 0em;
float: left;
width: 50%;
background: #ea4f2b;
overflow-y: scroll;
height: 100vh;
}
.main-column-right {
padding: 2em 1em;
float: right;
width: 50%;
background: #8048b7;
overflow-y: scroll;
height: 100vh;
clip-path: ellipse(50% 70% at center center);
-webkit-clip-path: ellipse(49% 70% at center center);
}
.main:after {
content: "";
display: table;
clear: both;
}
div.nav-bottom ul, div.nav-top ul {
list-style-type: none;
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
ul.name-elements li {
padding: 3em 2.5em 3em 0;
}
li span.nav-button {
display: block;
text-decoration: none;
padding: 0.25em;
font-family: sans-serif;
float: left;
width: 33.33%;
}
li span.nav-button:hover {
color: #ea4f2b;;
}
.nav-top {
height: 24px;
background: white;
width: 100%;
position: fixed;
cursor: pointer;
z-index: 1;
}
.nav-bottom{
height: 24px;
background: white;
width: 100%;
bottom: 0;
position: fixed;
z-index: 10000;
cursor: pointer;
z-index: 1;
}
span.librarian-names, span.file-names {
text-decoration: none;
padding: 0.3em;
color: black;
font-family: sans-serif;
}
span.librarian-names:hover, span.file-names:hover {
color: white;
cursor: pointer;
}
#listofpeople{
/* border: lime 1px solid; */
position: fixed;
width: 50%;
padding: 0em;
top: 25px;
left: 0;
z-index: 1;
}
.file-names-container {
/* IE 9 */
-ms-transform: rotate(-90deg) translate(-78%, 0%);
/* Safari */
-webkit-transform: rotate(-90deg) translate(-78%, 0%);
/* Standard syntax */
transform: rotate(-90deg) translate(-0%, 0%);
transform-origin: top left;
/* border:blue 1px solid; */
height: 50vw;
width: 40vw;
overflow-y: scroll;
overflow-x: hidden;
position: absolute;
left: 0%;
top: calc(100% - 1.5em);
}
img.listed-images {
width: 100%;
}
video.listed-videos {
width: 100%;
}
audio.listed-audio {
width: 100%;
}
object.listed-pdf {
width: 100%;
height: 75vh;
}
.methodclicked {
color: #ea4f2b !important;
}
.clicked {
color: white !important;
}
button {
border-radius: 0;
border: 0;
padding: 0;
z-index: 2;
}
button#listoffiles {
position: fixed;
left: 46.3%;
top: 49%;
transform: rotate(90deg);
width: 6.4%;
background: #8048b7;
}
button#listoffiles:hover {
background: white !important;
cursor: pointer;
}
button#about {
position: fixed;
left: 47.25%;
top: 49%;
width: 6.4%;
transform: rotate(270deg);
background: #ea4f2b;
}
button#about:hover {
background: white !important;
cursor: pointer;
}
button#reset {
position: fixed;
left: 48.3%;
top: 36%;
border-radius: 100%;
padding: 1.5em 0.8em;
}
button#reset:hover {
background: #ea4f2b !important;
cursor: pointer;
}
button#showall {
position: fixed;
left: 47.8%;
bottom: 34.4%;
border-radius: 100%;
padding: 2.1em 0.8em;
}
button#showall:hover {
background: #ea4f2b !important;
cursor: pointer;
}