css mobile so far
This commit is contained in:
parent
35ea0990db
commit
95375ee4b7
@ -1,3 +1,7 @@
|
||||
/****************************/
|
||||
/********* ALL SITE *********/
|
||||
/****************************/
|
||||
|
||||
@font-face {
|
||||
font-family: "ApfelGrotezk";
|
||||
src: url("fonts/ApfelGrotezk-Regular.woff") format("woff"),
|
||||
@ -47,9 +51,10 @@ sup a {
|
||||
background: #a99f8a;
|
||||
}
|
||||
|
||||
|
||||
/************* LAYOUT COMPUTER *****************/
|
||||
/*padding to be moved to the sub stuff */
|
||||
.main-column-left {
|
||||
/*padding: 1.7em 0em;*/
|
||||
float: left;
|
||||
width: 50%;
|
||||
background: #ea4f2b;
|
||||
@ -58,7 +63,6 @@ sup a {
|
||||
}
|
||||
|
||||
.main-column-right {
|
||||
/* padding: 2em 1em; */
|
||||
float: right;
|
||||
width: 50%;
|
||||
background: #8048b7;
|
||||
@ -137,12 +141,173 @@ span.librarian-names:hover, span.file-names:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/**************************/
|
||||
/* LAYOUT PHONE */
|
||||
|
||||
@media (max-width: 770px) {
|
||||
|
||||
|
||||
/*RED ZONE*/
|
||||
.main-column-left {
|
||||
width: 100%;
|
||||
background: #ea4f2b;
|
||||
height: 90vh;
|
||||
}
|
||||
|
||||
|
||||
div.file-names-container{
|
||||
-ms-transform: rotate(-90deg) translate(-78%, 0%);
|
||||
-webkit-transform: rotate(-90deg) translate(-78%, 0%);
|
||||
transform: rotate(-90deg) translate(-0%, 0%);
|
||||
transform-origin: top left;
|
||||
height: 100vw;
|
||||
width: 100vw;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
position: absolute;
|
||||
left: 0%;
|
||||
top: calc(100% - 4em);
|
||||
}
|
||||
|
||||
div#listofpeople{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*PURPLE ZONE*/
|
||||
.main-column-right {
|
||||
width: 100%;
|
||||
background: #8048b7;
|
||||
overflow-y: scroll;
|
||||
height: 90vh;
|
||||
padding-top: 10%;
|
||||
/* clip-path: ellipse(50% 70% at center center); */
|
||||
/* -webkit-clip-path: ellipse(49% 70% at center center); */
|
||||
}
|
||||
|
||||
/*buttons*/
|
||||
|
||||
button#about, button#showall, button#reset{
|
||||
position: absolute;
|
||||
top: 85%;
|
||||
}
|
||||
|
||||
button#about{
|
||||
left:45%;
|
||||
}
|
||||
|
||||
button#showall{
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
button#reset{
|
||||
left:70%;
|
||||
}
|
||||
|
||||
|
||||
/* DIVS ABOUT */
|
||||
div#intro{
|
||||
z-index: 100;
|
||||
left: 20%;
|
||||
top: 5%;
|
||||
height: 90%;
|
||||
}
|
||||
div#howto{
|
||||
z-index: 100;
|
||||
left: 30%;
|
||||
top: 10%;
|
||||
height: 80%;
|
||||
}
|
||||
div#insert{
|
||||
z-index: 100;
|
||||
left: 10%;
|
||||
top: 0%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#closeintro, #closehowto, #closeinsert{
|
||||
right:1em;
|
||||
}
|
||||
#closeintro{
|
||||
top:2.5em;
|
||||
}
|
||||
#closehowto{
|
||||
top:4.5em;
|
||||
}
|
||||
#closeinsert{
|
||||
top:0.5em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/****************/
|
||||
/* COMPUTER */
|
||||
|
||||
@media (min-width: 770px) {
|
||||
|
||||
|
||||
/*buttons*/
|
||||
|
||||
button#about{
|
||||
position: fixed;
|
||||
top: 45.5%;
|
||||
left: 47.8%;
|
||||
}
|
||||
|
||||
button#showall{
|
||||
position: fixed;
|
||||
bottom: 34.7%;
|
||||
left: 47.85%;
|
||||
}
|
||||
|
||||
button#reset{
|
||||
position: fixed;
|
||||
top: 35%;
|
||||
left: 47.85%;
|
||||
}
|
||||
|
||||
/* DIVS ABOUT */
|
||||
div#intro{
|
||||
left: 21%;
|
||||
top: 10%;
|
||||
width: 29%;
|
||||
height: 80%;
|
||||
z-index: 1;
|
||||
}
|
||||
div#howto{
|
||||
left: 22%;
|
||||
top: 15%;
|
||||
width: 28%;
|
||||
height: 70%;
|
||||
z-index: 2;
|
||||
}
|
||||
div#insert{
|
||||
left: 20%;
|
||||
top: 5%;
|
||||
width: 30%;
|
||||
height: 90%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
div#closehowto {
|
||||
margin-left: 21.3em;
|
||||
}
|
||||
|
||||
div#closeintro {
|
||||
margin-left: 22.2em;
|
||||
}
|
||||
|
||||
div#closeinsert {
|
||||
margin-left: 23.1em;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
/**********************************/
|
||||
/* container for names and files */
|
||||
/********************************/
|
||||
|
||||
#nav-container {
|
||||
/*width: 50%;*/
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 25% 75%;
|
||||
@ -159,16 +324,8 @@ height: inherit;
|
||||
/*********************/
|
||||
|
||||
#listofpeople{
|
||||
/*border-bottom: #1c1c1c 1px solid;*/
|
||||
padding: 1.7em 0em;
|
||||
overflow-y: scroll;
|
||||
/* border: lime 1px solid; */
|
||||
/*position: fixed;*/
|
||||
/*width: 50%;*/
|
||||
/*padding: 0em;*/
|
||||
/*top: 25px;*/
|
||||
/*left: 0;*/
|
||||
/*z-index: 1;*/
|
||||
}
|
||||
/***********************/
|
||||
/* Block list of files*/
|
||||
@ -187,7 +344,6 @@ height: inherit;
|
||||
/*Standard syntax */
|
||||
transform: rotate(-90deg) translate(-0%, 0%);
|
||||
transform-origin: top left;
|
||||
/*border:blue 1px solid; */
|
||||
height: 50vw;
|
||||
width: 34vw;
|
||||
overflow-y: scroll;
|
||||
@ -224,8 +380,7 @@ height: inherit;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/************************/
|
||||
|
||||
img.listed-images {
|
||||
width: 100%;
|
||||
@ -252,6 +407,12 @@ object.listed-pdf {
|
||||
color: #8048b7 !important;
|
||||
}
|
||||
|
||||
/************************/
|
||||
/*BUTTONS AND INFO PAGES*/
|
||||
/************************/
|
||||
|
||||
/*Buttons*/
|
||||
|
||||
button {
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
@ -280,59 +441,28 @@ button#listoffiles:hover {
|
||||
background: #f0f0f0 !important;
|
||||
}
|
||||
|
||||
/* button#about {
|
||||
position: fixed;
|
||||
left: 47.25%;
|
||||
top: 49%;
|
||||
width: 6.4%;
|
||||
transform: rotate(270deg);
|
||||
background: #ea4f2b;
|
||||
}
|
||||
|
||||
button#about:hover {
|
||||
background: #f0f0f0 !important;
|
||||
cursor: pointer;
|
||||
} */
|
||||
|
||||
button#about {
|
||||
position: fixed;
|
||||
left: 47.8%;
|
||||
top: 45.5%;
|
||||
background: #f0f0f0;
|
||||
border-radius: 100%;
|
||||
padding: 2em 0.9em;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
button#about:hover {
|
||||
background: #ea4f2b;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button#reset {
|
||||
position: fixed;
|
||||
left: 47.85%;
|
||||
top: 35%;
|
||||
border-radius: 100%;
|
||||
padding: 2em 1em;
|
||||
}
|
||||
|
||||
button#reset:hover {
|
||||
button#about:hover, button#reset:hover, button#showall:hover, button.download:hover {
|
||||
background: #ea4f2b !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button#showall {
|
||||
position: fixed;
|
||||
left: 47.85%;
|
||||
bottom: 34.7%;
|
||||
button#reset {
|
||||
border-radius: 100%;
|
||||
padding: 2.05em 0.4em;
|
||||
padding: 2em 1em;
|
||||
}
|
||||
|
||||
button#showall:hover {
|
||||
background: #ea4f2b !important;
|
||||
cursor: pointer;
|
||||
|
||||
button#showall {
|
||||
border-radius: 100%;
|
||||
padding: 2.05em 0.4em;
|
||||
}
|
||||
|
||||
button.download {
|
||||
@ -340,48 +470,25 @@ button.download {
|
||||
border-radius: 5px 21px 5px 21px;
|
||||
}
|
||||
|
||||
button.download:hover {
|
||||
background: #ea4f2b;
|
||||
}
|
||||
/*info pages*/
|
||||
|
||||
#intro p, #howto p, #insert p {
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
#intro, #howto, #insert {
|
||||
border-radius: 10px 50px 50px 10px;
|
||||
overflow-y: scroll;
|
||||
position: fixed;
|
||||
display: none;
|
||||
padding: 1em 2em 1em 1em;
|
||||
}
|
||||
|
||||
#insert {
|
||||
left: 20%;
|
||||
top: 5%;
|
||||
#insert, #howto {
|
||||
background: #f0f0f0;
|
||||
width: 30%;
|
||||
height: 90%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#intro {
|
||||
left: 21%;
|
||||
top: 10%;
|
||||
background: #8048b7;
|
||||
/* color: white; */
|
||||
width: 29%;
|
||||
height: 80%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#howto {
|
||||
left: 22%;
|
||||
top: 15%;
|
||||
background: #f0f0f0;
|
||||
width: 28%;
|
||||
height: 70%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#howto audio {
|
||||
@ -394,9 +501,6 @@ button.download:hover {
|
||||
position: fixed;
|
||||
color: #1c1c1c;
|
||||
font-weight: bold;
|
||||
/* background: #1c1c1c; */
|
||||
/* padding: 0 0.2em 0.3em 0.2em; */
|
||||
/* border-radius: 5px 25px 5px 25px; */
|
||||
}
|
||||
|
||||
#closehowto:hover, #closeinsert:hover {
|
||||
@ -407,22 +511,6 @@ button.download:hover {
|
||||
color: #f0f0f0;;
|
||||
}
|
||||
|
||||
div#closehowto {
|
||||
margin-left: 21.3em;
|
||||
/* color: #8143b9; */
|
||||
}
|
||||
|
||||
div#closeintro {
|
||||
margin-left: 22.2em;
|
||||
/* color: #f0f0f0; */
|
||||
/* color: #ec4e1e; */
|
||||
}
|
||||
|
||||
div#closeinsert {
|
||||
margin-left: 23.1em;
|
||||
/* color: #8143b9; */
|
||||
}
|
||||
|
||||
span.method-label {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
@ -432,3 +520,5 @@ hr {
|
||||
color: #f0f0f0;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user