indiescience/styles.css
2021-05-24 17:27:53 +02:00

466 lines
No EOL
7.1 KiB
CSS

@charset "UTF-8";
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
font-smooth: never;
-moz-font-smooth: never;
box-sizing: border-box;
}
@font-face {
font-family: 'Helvetica';
src: url("fonts/HelveticaLTStd-Roman.otf") format("opentype");
}
@font-face {
font-family: 'HelveticaOblique';
src: url("fonts/HelveticaLTStd-Obl.otf") format("opentype");
}
@font-face {
font-family: 'HappyTimes';
src: url("fonts/happy-times-NG_regular_master.otf") format("opentype");
}
html {
height: 100%;
overflow: hidden;
}
body {
margin: 0;
padding: 0;
background: black;
}
.home {
margin: 0;
padding: 0;
background: black;
background-image: url(outlinebg.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
overflow: hidden;
}
.menu {
font-family: Helvetica;
font-size: 9pt;
font-weight: normal;
position: fixed;
top: 3px;
right: 3px;
}
.menu .buttonsMenu {
background: black;
color: white;
display: inline-block;
border-width: 1px;
border-style: solid;
border-radius: 1vw;
border-color: white;
padding: 0.2vw 0.5vw 0.2vw 0.5vw;
cursor: pointer;
}
.menu .buttonsMenu:hover {
background: white;
color: black;
}
.object {
position: absolute;
width: 10vw;
cursor: move;
color: white;
text-align: center;
font-family: Helvetica;
font-size: 1.2vw;
font-weight: normal;
}
.object p {
/*opacity: 0;
transform: translateY(-50%);
transition: transform 500ms ease-in-out, opacity 300ms ease-in-out; */
display: none;
margin: 0;
}
.object:hover p {
/*opacity: 1;
transform: translateY(0);*/
display: block;
}
.object img {
width: 100%;
}
.object a {
position: absolute;
top: 50%;
left: 50%;
width: 30%;
height: 30%;
cursor: pointer;
display: block;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.landingPage {
position: absolute;
padding: 2vw 10vw 0 10vw;
background: black;
width: 100%;
height: 100%;
overflow: hidden;
color: white;
text-align: center;
font-family: Helvetica;
font-size: 1.2vw;
font-weight: normal;
}
.landingPage h1 {
font-family: Helvetica;
font-size: 300%;
font-weight: normal;
margin: 0 0 10w 0;
}
.landingPage .buttonEnter {
margin: 5% 0 0 0;
background: black;
color: white;
display: inline-block;
border-width: 1px;
border-style: solid;
border-radius: 3vw;
border-color: white;
padding: 0.5vw 1vw 0.5vw 1vw;
cursor: pointer;
}
.landingPage .buttonEnter:hover {
background: white;
color: black;
}
.object:nth-child(1) {
left: 26%;
top: 74%;
}
.object:nth-child(2) {
left: 49%;
top: 32%;
}
.object:nth-child(3) {
left: 75%;
top: 31%;
}
.object:nth-child(4) {
left: 63%;
top: 30%;
}
.object:nth-child(5) {
left: 32%;
top: 88%;
}
.bodyManifestoPage {
margin: 0;
padding: 0;
background: black;
background-image: url(bgthoughts.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
overflow: hidden;
}
.april {
width: 30%;
position: absolute;
top: 20vw;
right: 20vw;
overflow: hidden;
}
.april .texte {
font-family: HelveticaOblique;
}
.juin {
width: 20%;
position: absolute;
top: 10vw;
left: 10vw;
overflow: hidden;
}
.juin .texte {
font-family: HelveticaOblique;
}
.beantobar {
width: 25%;
position: absolute;
top: 18vw;
left: 5vw;
overflow: hidden;
}
.tonys {
width: 35%;
position: absolute;
top: 3vw;
left: 33vw;
overflow: hidden;
}
.issues {
width: 50%;
position: absolute;
top: 35vw;
right: 5vw;
overflow: hidden;
}
.issues a:link {
color: white;
}
.issues a:visited {
color: white;
}
.issues a:active {
color: #9900ff;
}
.thoughtsWindows {
font-family: Helvetica;
font-size: 11pt;
font-weight: normal;
}
.thoughtsWindows .entête {
text-transform: uppercase;
font-size: 10pt;
background: black;
border-width: 1px;
border-style: solid;
color: white;
padding: 3px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.thoughtsWindows .entête .titre {
text-align: left;
width: 50%;
}
.thoughtsWindows .entête .date {
text-align: right;
width: 50%;
}
.thoughtsWindows .texte {
background: white;
padding: 20px;
}
.quotes {
width: 40%;
position: absolute;
font-family: Helvetica;
font-size: 11pt;
font-weight: normal;
cursor: move;
}
.quotes:hover .entête {
opacity: 1;
}
.quotes .entête {
text-transform: uppercase;
font-size: 10pt;
background: black;
border-width: 1px;
border-style: solid;
color: white;
padding: 3px;
opacity: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.quotes .entête .titre {
text-align: left;
font-family: HelveticaOblique;
width: 50%;
}
.quotes .entête .linksource {
text-align: right;
width: 50%;
}
.quotes .texte {
background: white;
padding: 3px;
}
.quotes mark {
background-color: #9900ff;
color: white;
padding: 1px 6px 1px 6px;
}
.quotes a:link {
color: white;
}
.quotes a:visited {
color: white;
}
.quotes a:active {
color: #9900ff;
}
#inapril2018 {
top: 5vw;
right: 13vw;
}
#theharkinengel {
top: 7vw;
left: 10vw;
}
#theprotocollaidout {
top: 20vw;
left: 2vw;
}
#in2009 {
top: 15vw;
right: 4vw;
}
.personnalText {
position: absolute;
font-family: HelveticaOblique;
font-size: 11pt;
font-weight: normal;
color: white;
cursor: move;
padding: 2px;
left: 20vw;
top: 33vw;
}
.personnalText:hover {
border-width: 1px;
border-style: dashed;
border-color: white;
border-radius: 0.5vw;
}
.personnalText .personnalTextHarkinEngel {
-webkit-column-count: 3;
column-count: 3;
-webkit-column-gap: 20px;
column-gap: 20px;
width: 60vw;
}
.wholeBoxEditable {
position: absolute;
display: block;
width: 15vw;
top: 36vw;
right: 9px;
}
.wholeBoxEditable .zoneDragBoxEditable {
height: 15px;
width: 100%;
cursor: move;
}
.wholeBoxEditable .boxEditable {
border-width: 1px;
border-style: dashed;
border-color: white;
border-radius: 0.5vw;
position: absolute;
font-family: Helvetica;
font-size: 11pt;
font-weight: normal;
color: #9900ff;
background: black;
margin: 2px;
width: 100%;
}
.instructions {
display: block;
width: 15vw;
bottom: 8px;
right: 5px;
font-family: Helvetica;
font-size: 9pt;
font-weight: normal;
position: fixed;
border-width: 1px;
border-style: solid;
border-color: #9900ff;
background: black;
margin: 2px;
color: white;
padding: 5px;
}
.instructions .buttonGoogleDoc {
display: inline-table;
background: #9900ff;
color: white;
border-width: 1px;
border-style: solid;
border-radius: 1vw;
border-color: #9900ff;
padding: 0.2vw 0.5vw 0.2vw 0.5vw;
margin: 10px 40% 2px 40%;
cursor: pointer;
color: white;
}
.instructions .buttonGoogleDoc:hover {
background: white;
color: #9900ff;
border-color: white;
}
/*# sourceMappingURL=styles.css.map */