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