173 lines
3.5 KiB
CSS
173 lines
3.5 KiB
CSS
/* X sign visible in the photo viewer mode. */
|
|
#exit {
|
|
position: absolute;
|
|
width: var(--exit-size);
|
|
height: var(--exit-size);
|
|
top: var(--exit-size);
|
|
right: var(--exit-size);
|
|
cursor: pointer;
|
|
}
|
|
#exit:before,
|
|
#exit:after {
|
|
content: "";
|
|
position: absolute;
|
|
width: var(--line-width);
|
|
height: calc(var(--exit-size) * 1.4142);
|
|
background: white;
|
|
border-radius: var(--border-radius);
|
|
top: calc(var(--exit-size) * -0.4142 / 2);
|
|
left: 50%;
|
|
}
|
|
#exit:before {
|
|
transform: rotate(45deg);
|
|
}
|
|
#exit:after {
|
|
transform: rotate(-45deg);
|
|
}
|
|
/**/
|
|
|
|
/* Links with interactive underline. */
|
|
a {
|
|
text-decoration: none;
|
|
position: relative;
|
|
border-bottom: solid 3px var(--light-accent-color);
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
}
|
|
a:after {
|
|
content: "";
|
|
height: var(--line-width);
|
|
background-color: var(--accent-color);
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: calc(-1 * var(--line-width));
|
|
width: 0;
|
|
transition: width var(--transition-time);
|
|
}
|
|
a:hover:after {
|
|
width: 100%;
|
|
}
|
|
/**/
|
|
|
|
/* Line with circle for the timeline sections. */
|
|
.line {
|
|
margin-left: calc(var(--dot-size) / 2);
|
|
margin-right: var(--line-height);
|
|
border-left: var(--line-width) solid var(--text-color);
|
|
position: relative;
|
|
}
|
|
.line:before {
|
|
content: "";
|
|
position: absolute;
|
|
left: calc(-1 / 2 * var(--dot-size) - 4px);
|
|
background: var(--bg-color);
|
|
top: 33%;
|
|
width: var(--dot-size);
|
|
height: var(--dot-size);
|
|
border-radius: 100%;
|
|
border: var(--line-width) var(--text-color) solid;
|
|
}
|
|
/**/
|
|
|
|
/* Activity cards. */
|
|
.card {
|
|
border-radius: var(--border-radius);
|
|
text-align: center;
|
|
padding: var(--margin);
|
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.125);
|
|
transition: box-shadow;
|
|
transition-duration: var(--transition-time);
|
|
background: var(--card-color);
|
|
}
|
|
.card:hover {
|
|
box-shadow: 0 0 3px rgba(0, 0, 0, 0.05);
|
|
}
|
|
/**/
|
|
|
|
/* Dates related to the lines and cards. */
|
|
.date-narrow-screen,
|
|
.date-wide-screen {
|
|
font: 400 1em "Open sans", sans-serif;
|
|
}
|
|
.date-narrow-screen {
|
|
display: none;
|
|
margin: 0;
|
|
margin-top: calc(var(--line-height) / 2.25) !important;
|
|
color: var(--light-text-color);
|
|
}
|
|
.date-wide-screen {
|
|
position: relative;
|
|
top: calc(33% + var(--dot-size) + 1ch);
|
|
margin: 0 var(--margin) 0 calc(var(--line-width) + 1ex);
|
|
width: 100px;
|
|
}
|
|
/**/
|
|
|
|
/* The photo viewer */
|
|
#photo-viewer {
|
|
width: 100%;
|
|
height: 100vh;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
background: var(--photo-viewer-color);
|
|
z-index: -3;
|
|
opacity: 0;
|
|
transition: opacity var(--transition-time);
|
|
}
|
|
|
|
/* #photo */
|
|
#photo-viewer > img {
|
|
max-width: 80vw;
|
|
max-height: 80vh;
|
|
}
|
|
/**/
|
|
|
|
/* Scrollbar. */
|
|
body::-webkit-scrollbar-track,
|
|
body::-webkit-scrollbar {
|
|
background-color: var(--scroll-color);
|
|
width: 12px;
|
|
}
|
|
body::-webkit-scrollbar-thumb {
|
|
background-color: var(--accent-color);
|
|
border-radius: var(--border-radius);
|
|
}
|
|
/**/
|
|
|
|
/* Selections. */
|
|
::-moz-selection {
|
|
background: var(--accent-color);
|
|
color: white;
|
|
}
|
|
::selection {
|
|
background: var(--accent-color);
|
|
color: white;
|
|
}
|
|
/**/
|
|
|
|
/* Absolute centering parent. */
|
|
.center {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
/**/
|
|
|
|
@media (max-width: 900px) {
|
|
.line {
|
|
display: none;
|
|
}
|
|
|
|
/* Disable animation. */
|
|
.card:hover {
|
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.125);
|
|
}
|
|
|
|
.date-narrow-screen {
|
|
display: block;
|
|
}
|
|
.date-wide-screen {
|
|
display: none;
|
|
}
|
|
}
|