web-cv/assets/style/style.css

191 lines
2.8 KiB
CSS

@font-face {
font-family: 'Roboto';
src: url('/assets/style/Roboto-Regular.woff2') format('woff2'),
url('/assets/style/Roboto-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@viewport {
width: device-width;
zoom: 1;
}
#core {
padding-top:50px;
max-width: 914px;
margin: auto;
font-family: 'Roboto', sans-serif;
}
h1 {
margin-top: 50;
width: 100%;
font-size: 48px;
color: #2e74d5;
float: left;
}
h2 svg {
transform: translateY(15%);
}
#pp {
width: 100%;
text-align: center;
}
.coordonnes {
float:left;
width: 100%;
height: auto;
margin-bottom: 10px;
}
.coordonnes a {
text-decoration: inherit;
color: #555555;
}
@media (min-width: 600px) {
#pp {
width: auto;
float: right;
}
#pp img {
display: inherit;
transform: translateY(-80px);
}
.coordonnes {
width: auto;
}
}
#pp img {
clear: both;
display: block;
max-width: 200px;
max-height: 250px;
min-width: 150px;
min-height: 200px;
width: auto;
height: auto;
margin-left: auto;
margin-right: auto;
display: block;
background-color: whitesmoke;
}
.infos {
padding-top: 5px;
clear: both;
}
.anchor {
color: #2e74d5;
text-decoration: inherit;
}
.anchor svg {
fill: #2e74d5;
}
#jobs {
width: auto;
height: auto;
text-align: center;
border-style: solid;
border-width: 1px;
}
.cell {
white-space: nowrap;
display: inline-block;
border-style: solid;
border-width: 1px;
width : 150px;
height: 150px;
cursor: pointer;
transition: width 0.25s;
}
.opened {
width: 100%;
height: auto;
white-space: pre-line;
}
.logo {
width : 150px;
height: 150px;
border-style: solid;
border-width: 1;
display: table-cell;
float: right;
}
.logo span {
position: relative;
top: 38%;
z-index: -1;
font-size: 32px;
}
.logo img {
max-width:100%;
max-height:100%;
position: relative;
top: 50%;
transform: translateY(-50.5%);
vertical-align: middle;
z-index: -1;
}
.data {
text-align: left;
margin: 10px;
}
.hidden {
overflow: hidden;
opacity: 0;
height: 0;
}
.hidden h2 {
overflow: hidden;
opacity: 0;
height: 0;
}
.hidden h3 {
overflow: hidden;
opacity: 0;
height: 0;
}
.hidden p {
overflow: hidden;
opacity: 0;
height: 0;
}
.display h2 {
opacity: 1;
transition: opacity 1s ease-out;
transition-delay: 0.2s;
}
.display h3 {
opacity: 1;
transition: opacity 1s ease-out;
transition-delay: 0.3s;
}
.display p {
opacity: 1;
transition: opacity 1s ease-out;
transition-delay: 0.6s;
}