654 lines
16 KiB
CSS
Executable File
654 lines
16 KiB
CSS
Executable File
body {
|
|
background: black url("../img/fairyland-canyon-1632749-low.jpg") no-repeat top center;
|
|
-webkit-background-size: 100%;
|
|
background-size: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-family: Roboto, sans-serif;
|
|
font-weight: 300;
|
|
font-size: 13pt;
|
|
margin: 0;
|
|
outline: none; }
|
|
body a {
|
|
color: inherit;
|
|
text-decoration: none; }
|
|
body header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
margin-top: 50px; }
|
|
body header #logo {
|
|
color: #fff;
|
|
font-family: "Century Schoolbook L";
|
|
font-size: 23pt; }
|
|
body header nav {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
flex-grow: 0.2; }
|
|
body header nav .navIcon {
|
|
width: 25px;
|
|
filter: brightness(0.6);
|
|
transition: filter 0.5s; }
|
|
body header nav .navIcon:hover {
|
|
filter: brightness(1); }
|
|
body header nav .navItem {
|
|
cursor: pointer;
|
|
position: relative;
|
|
color: #B3B3B3;
|
|
transition: color 0.2s; }
|
|
body header nav .navItem:hover {
|
|
color: white; }
|
|
body header nav .navItem.focus {
|
|
color: white; }
|
|
body header nav .navItem.focus .navIcon {
|
|
filter: brightness(1); }
|
|
|
|
.search {
|
|
position: absolute;
|
|
top: -141px;
|
|
opacity: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 141px;
|
|
background: white;
|
|
transition: top 0.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1); }
|
|
.search .inputContainer {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
width: 80%;
|
|
height: 100%; }
|
|
.search .inputContainer input {
|
|
flex-grow: 1;
|
|
height: 50px;
|
|
background: transparent;
|
|
border: none;
|
|
font-size: 20pt;
|
|
font-family: Roboto, sans-serif;
|
|
font-weight: 300; }
|
|
.search .inputContainer button {
|
|
position: relative;
|
|
border: none;
|
|
padding: 40px;
|
|
background: transparent url(../img/close.svg) no-repeat center center;
|
|
background-size: 20px 20px;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
font-family: Roboto, sans-serif;
|
|
color: white;
|
|
overflow: hidden;
|
|
transition: color 0.3s;
|
|
cursor: pointer; }
|
|
.search .inputContainer button:after {
|
|
content: "";
|
|
background: #6d6d6d;
|
|
position: absolute;
|
|
width: 0px;
|
|
height: 0px;
|
|
top: 0;
|
|
left: -3px;
|
|
bottom: 0;
|
|
right: -3px;
|
|
margin: auto;
|
|
transition: width 0s, height 0s, background 0s, opacity 0s;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
opacity: 1; }
|
|
.search .inputContainer button:active:after {
|
|
width: 150px;
|
|
height: 150px;
|
|
background: white;
|
|
opacity: 0;
|
|
transition: width 0.2s, height 0.2s, background 0.2s, opacity 0.2s; }
|
|
.search .inputContainer button:before {
|
|
content: "";
|
|
background: transparent;
|
|
position: absolute;
|
|
width: 0px;
|
|
height: 0px;
|
|
top: 0;
|
|
left: -3px;
|
|
bottom: 0;
|
|
right: -3px;
|
|
margin: auto;
|
|
transition: width 0.1s, height 0.1s, background 0.5s;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
opacity: 1;
|
|
z-index: -1; }
|
|
.search .inputContainer button:hover:before {
|
|
width: 300px;
|
|
height: 300px;
|
|
background: #fff;
|
|
transition: width 0.5s, height 0.5s, background 0.5s; }
|
|
|
|
.blackAsset {
|
|
filter: brightness(0); }
|
|
|
|
.flexgrid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
width: 100%; }
|
|
.flexgrid .row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: stretch; }
|
|
.flexgrid .row .cell {
|
|
margin: 5px;
|
|
flex-shrink: 1.958; }
|
|
.flexgrid .row .cell.merged-2 {
|
|
flex-shrink: 1; }
|
|
|
|
.tile {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background: white;
|
|
width: 100%;
|
|
border-radius: 3px;
|
|
color: black;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
transition: transform 0.2s cubic-bezier(0.07, 0.7, 0.6, 0.96); }
|
|
.tile a {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center; }
|
|
.tile .tileCover {
|
|
height: 200px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: row; }
|
|
.tile .tileCover img {
|
|
max-width: 100%;
|
|
min-height: 100%; }
|
|
.tile .tileLegend {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-grow: 1;
|
|
flex-direction: row; }
|
|
.tile .tileLegend .content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center; }
|
|
.tile .tileLegend .content .titleLegend {
|
|
font-size: 12pt;
|
|
font-style: italic; }
|
|
.tile .tileLegend .content .separator {
|
|
margin-top: 5px;
|
|
width: 100px; }
|
|
.tile .tileLegend .content h2 {
|
|
margin-top: 0;
|
|
font-size: 19pt;
|
|
padding: 0 10px 0px 10px;
|
|
font-family: "Century Schoolbook L";
|
|
font-weight: normal;
|
|
text-align: center; }
|
|
|
|
.tile:active {
|
|
transform: scale3d(0.96, 0.96, 0.96); }
|
|
|
|
#disclaimer {
|
|
margin-top: 100px;
|
|
color: white;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center; }
|
|
#disclaimer .titleLegend {
|
|
font-size: 14pt;
|
|
font-style: italic; }
|
|
#disclaimer .separator {
|
|
margin-top: 5px;
|
|
width: 180px; }
|
|
#disclaimer h2 {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
font-size: 30pt;
|
|
font-family: "Century Schoolbook L";
|
|
font-weight: normal;
|
|
width: 700px;
|
|
text-align: center; }
|
|
#disclaimer button {
|
|
position: relative;
|
|
background-color: transparent;
|
|
border: 1px solid white;
|
|
padding: 10px 30px 10px 30px;
|
|
border-radius: 5px;
|
|
font-family: Roboto, sans-serif;
|
|
color: white;
|
|
overflow: hidden;
|
|
transition: color 0.3s;
|
|
cursor: pointer;
|
|
margin-top: 50px; }
|
|
#disclaimer button:hover {
|
|
color: #203443; }
|
|
#disclaimer button:after {
|
|
content: "";
|
|
background: #203443;
|
|
position: absolute;
|
|
width: 0px;
|
|
height: 0px;
|
|
top: 0;
|
|
left: -3px;
|
|
bottom: 0;
|
|
right: -3px;
|
|
margin: auto;
|
|
transition: width 0s, height 0s, background 0s, opacity 0s;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
opacity: 1; }
|
|
#disclaimer button:active:after {
|
|
width: 400px;
|
|
height: 400px;
|
|
background: white;
|
|
opacity: 0;
|
|
transition: width 0.5s, height 0.5s, background 0.5s, opacity 0.5s; }
|
|
#disclaimer button:before {
|
|
content: "";
|
|
background: transparent;
|
|
position: absolute;
|
|
width: 0px;
|
|
height: 0px;
|
|
top: 0;
|
|
left: -3px;
|
|
bottom: 0;
|
|
right: -3px;
|
|
margin: auto;
|
|
transition: width 0.1s, height 0.1s, background 0.5s;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
opacity: 1;
|
|
z-index: -1; }
|
|
#disclaimer button:hover:before {
|
|
width: 300px;
|
|
height: 300px;
|
|
background: #fff;
|
|
transition: width 0.5s, height 0.5s, background 0.5s; }
|
|
|
|
main {
|
|
background: white;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-top: 50px;
|
|
padding-top: 50px;
|
|
padding-bottom: 50px; }
|
|
main section {
|
|
width: 100%;
|
|
max-width: 900px; }
|
|
|
|
main.transparent {
|
|
background: transparent;
|
|
color: white; }
|
|
|
|
section {
|
|
display: flex;
|
|
flex-direction: column; }
|
|
section nav {
|
|
align-self: center;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
width: 80%; }
|
|
section nav .separator {
|
|
width: 200px; }
|
|
section nav button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: transparent;
|
|
border: none;
|
|
color: black;
|
|
font-family: Roboto;
|
|
font-size: 15pt;
|
|
font-style: italic;
|
|
font-weight: 300;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
transition: background 0.2s, color 0.2s; }
|
|
section nav button img {
|
|
height: 25px;
|
|
filter: brightness(0);
|
|
transition: filter 0.2s; }
|
|
section nav button.prev img {
|
|
margin-right: 10px; }
|
|
section nav button.next img {
|
|
margin-left: 10px; }
|
|
section nav button:hover {
|
|
background: #111;
|
|
color: white; }
|
|
section nav button:hover img {
|
|
filter: brightness(1); }
|
|
section nav button:active {
|
|
outline: none; }
|
|
section article {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-top: 40px; }
|
|
section article .articleTitle {
|
|
width: 80%; }
|
|
section article .articleTitle h1 {
|
|
font-size: 35pt;
|
|
font-family: Roboto;
|
|
font-weight: bold;
|
|
margin: 0;
|
|
word-wrap: break-word;
|
|
hyphens: auto; }
|
|
section article .articleTitle .author {
|
|
font-style: italic;
|
|
margin-top: 10px;
|
|
font-size: 17pt; }
|
|
section article .content {
|
|
max-width: 80%; }
|
|
section article .content p {
|
|
font-family: "Century Schoolbook L";
|
|
font-weight: normal;
|
|
line-height: 30pt;
|
|
font-size: 16pt;
|
|
word-wrap: break-word;
|
|
hyphens: auto; }
|
|
section article .content a{
|
|
text-decoration:underline }
|
|
|
|
#comments {
|
|
margin-top: 50px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 80%; }
|
|
#comments #commentsCounter {
|
|
font-size: 20pt;
|
|
margin-bottom: 20px;
|
|
margin-left: 20px;
|
|
align-self: left; }
|
|
#comments .comment {
|
|
background: #eaeaea;
|
|
padding: 20px;
|
|
border-radius: 5px;
|
|
display: flex;
|
|
flex-direction: column; }
|
|
#comments .comment .infos {
|
|
display: flex;
|
|
align-items: center; }
|
|
#comments .comment .infos .userAvatar {
|
|
padding: 10px;
|
|
background: #ff7500;
|
|
color: white;
|
|
border-radius: 50%;
|
|
margin-right: 10px; }
|
|
#comments .comment .infos .author {
|
|
font-size: 15pt; }
|
|
#comments .comment .infos .date {
|
|
font-size: 10pt;
|
|
font-style: italic;
|
|
margin-left: 10px; }
|
|
#comments .comment p {
|
|
font-family: "Century Schoolbook L";
|
|
font-weight: lighter;
|
|
letter-spacing: -0.5px; }
|
|
|
|
form {
|
|
width: 100%;
|
|
margin-top: 50px;
|
|
display: flex;
|
|
flex-direction: column; }
|
|
form .inputGrp {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
padding-top: 10px; }
|
|
form .inputGrp label {
|
|
position: absolute;
|
|
bottom: 23px;
|
|
left: 1px;
|
|
font-size: 14pt;
|
|
font-weight: 300;
|
|
transition: bottom 0.2s, font-size 0.2s; }
|
|
form .inputGrp input.focus + label {
|
|
font-size: 11pt;
|
|
bottom: 46px; }
|
|
form .inputGrp textarea + label {
|
|
bottom: 58px; }
|
|
form .inputGrp textarea.focus + label {
|
|
font-size: 11pt;
|
|
bottom: 80px; }
|
|
form .inputGrp input, form .inputGrp textarea {
|
|
width: 100%;
|
|
border: none;
|
|
border-bottom: 3px solid #203443;
|
|
padding-top: 5px;
|
|
padding-bottom: 5px;
|
|
font-size: 14pt;
|
|
margin-bottom: 15px;
|
|
font-family: Roboto;
|
|
font-weight: 300;
|
|
color: black;
|
|
outline: none; }
|
|
form .inputGrp button {
|
|
width: inherit;
|
|
align-self: right;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: transparent;
|
|
border: none;
|
|
color: black;
|
|
font-family: Roboto;
|
|
font-size: 15pt;
|
|
font-style: italic;
|
|
font-weight: 300;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
transition: background 0.2s, color 0.2s; }
|
|
form .inputGrp button img {
|
|
height: 25px;
|
|
filter: brightness(0);
|
|
transition: filter 0.2s;
|
|
margin-left: 10px; }
|
|
form .inputGrp button:hover {
|
|
background: #111;
|
|
color: white; }
|
|
form .inputGrp button:hover img {
|
|
filter: brightness(1); }
|
|
|
|
#galerie {
|
|
display: flex;
|
|
flex-direction: column; }
|
|
#galerie .tagFilter {
|
|
align-self: center;
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
background: #e2e2e2;
|
|
border-radius: 5px;
|
|
overflow: hidden;
|
|
height: 50px; }
|
|
#galerie .tagFilter .filterSelector {
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
transition: background 0.2s, color 0.2s;
|
|
cursor: pointer; }
|
|
#galerie .tagFilter .filterSelector:hover {
|
|
background: #848484;
|
|
color: white; }
|
|
#galerie .tagFilter .filterSelector.active {
|
|
background: #222;
|
|
color: white; }
|
|
#galerie .work {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
user-select: none; }
|
|
#galerie .colorCover {
|
|
width: 100%;
|
|
height: 300px;
|
|
overflow: hidden;
|
|
background: #299ddc; }
|
|
#galerie .workLegend {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
padding: 10px; }
|
|
#galerie .workLegend .content {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center; }
|
|
#galerie .workLegend .content h2 {
|
|
font-size: 20pt;
|
|
margin: 0;
|
|
color: white; }
|
|
#galerie .workLegend .content .tagZone {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
flex-wrap: wrap; }
|
|
#galerie .workLegend .content .tagZone .tag {
|
|
background: white;
|
|
border-radius: 3px;
|
|
padding: 5px;
|
|
margin: 5px; }
|
|
|
|
#popup {
|
|
position: fixed;
|
|
bottom: 0;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 5000;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
flex-direction: row;
|
|
align-items: center;
|
|
display: none;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease; }
|
|
#popup .centerZone {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100%; }
|
|
#popup .centerZone .window {
|
|
width: 500px;
|
|
background: white;
|
|
-webkit-border-radius: 5px;
|
|
-moz-border-radius: 5px;
|
|
border-radius: 5px;
|
|
padding: 20px;
|
|
margin-top: 20px; }
|
|
#popup .centerZone > button {
|
|
position: relative;
|
|
border: none;
|
|
padding: 40px;
|
|
background: transparent url(../img/closeWhite.svg) no-repeat center center;
|
|
background-size: 20px 20px;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
font-family: Roboto, sans-serif;
|
|
color: white;
|
|
overflow: hidden;
|
|
transition: color 0.3s;
|
|
cursor: pointer; }
|
|
#popup .centerZone > button:after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 0px;
|
|
height: 0px;
|
|
top: 0;
|
|
left: -3px;
|
|
bottom: 0;
|
|
right: -3px;
|
|
margin: auto;
|
|
transition: width 0s, height 0s, background 0s, opacity 0s;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
opacity: 1;
|
|
background: white; }
|
|
#popup .centerZone > button:active:after {
|
|
width: 150px;
|
|
height: 150px;
|
|
opacity: 0;
|
|
transition: width 0.2s, height 0.2s, opacity 0.2s; }
|
|
#popup .centerZone > button:before {
|
|
content: "";
|
|
background: transparent;
|
|
position: absolute;
|
|
width: 0px;
|
|
height: 0px;
|
|
top: 0;
|
|
left: -3px;
|
|
bottom: 0;
|
|
right: -3px;
|
|
margin: auto;
|
|
transition: width 0.1s, height 0.1s, border 0.5s;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
opacity: 1;
|
|
z-index: -1;
|
|
border: 1px solid transparent;
|
|
box-sizing: border-box; }
|
|
#popup .centerZone > button:hover:before {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: 1px solid white;
|
|
transition: width 0.2s, height 0.2s, border 0.2s; }
|
|
|
|
#popup.present {
|
|
display: flex; }
|
|
|
|
#popup.visible {
|
|
opacity: 1; }
|
|
|
|
#workView {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: #203443;
|
|
z-index: 2;
|
|
display: none;
|
|
flex-direction: row;
|
|
align-items: center; }
|
|
#workView .contentSide {
|
|
width: 50%;
|
|
height: 100%; }
|
|
#workView .imgSide {
|
|
width: 50%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: 100%;
|
|
align-items: center; }
|
|
|
|
/*# sourceMappingURL=global.css.map */
|