Refactor js
This commit is contained in:
Schmelczer András
commit
5de596c38a
28 changed files with 859 additions and 0 deletions
173
css/elements.css
Normal file
173
css/elements.css
Normal file
|
|
@ -0,0 +1,173 @@
|
|||
/* 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;
|
||||
}
|
||||
}
|
||||
28
css/main.css
Normal file
28
css/main.css
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i|Raleway&subset=latin-ext');
|
||||
|
||||
:root {
|
||||
--photo-viewer-color: rgba(0, 0, 0, 0.75);
|
||||
--accent-color: #5264bf;
|
||||
--light-accent-color: #e5e5ff;
|
||||
--scroll-color: #ffd6d6;
|
||||
--bg-color:linear-gradient(90deg, #fff9e0 0, #ffd6d6 100%);
|
||||
--card-color: white;
|
||||
--text-color: #31343f;
|
||||
--light-text-color: #7a7d8e;
|
||||
--dot-size: 25px;
|
||||
--line-width: 3px;
|
||||
--exit-size: 25px;
|
||||
--line-height: 15px;
|
||||
--smaller-margin: 25px;
|
||||
--margin: 35px;
|
||||
--border-radius: 5px;
|
||||
--transition-time: 200ms;
|
||||
--width: 765px;
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
:root {
|
||||
--exit-size: 20px;
|
||||
--margin: 25px;
|
||||
--smaller-margin: 20px;
|
||||
}
|
||||
}
|
||||
131
css/page.css
Normal file
131
css/page.css
Normal file
|
|
@ -0,0 +1,131 @@
|
|||
* {
|
||||
margin: 0;
|
||||
box-sizing: content-box;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: #31343f;
|
||||
background: var(--bg-color);
|
||||
}
|
||||
|
||||
body {
|
||||
width: var(--width);
|
||||
font-size: 0.9em;
|
||||
margin: auto;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
header,
|
||||
footer,
|
||||
#timeline,
|
||||
#about > p:first-of-type,
|
||||
#timeline > section:not(:first-of-type) > .card {
|
||||
margin-top: var(--margin);
|
||||
}
|
||||
|
||||
#header-pic,
|
||||
h1 {
|
||||
font: 400 3.33em "Raleway", sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#header-pic {
|
||||
height: 4ch;
|
||||
border-radius: 100%;
|
||||
margin-right: 1.5ex;
|
||||
}
|
||||
|
||||
p,
|
||||
a {
|
||||
font: 400 1.25em "Open sans", sans-serif;
|
||||
}
|
||||
|
||||
#about > p {
|
||||
text-align: justify;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
#timeline > section {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.card {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#about > p,
|
||||
.card > *:not(:first-child):not(:last-child),
|
||||
.collapsed > *:not(:first-child) {
|
||||
margin-top: var(--line-height);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font: 400 2em "Raleway", sans-serif;
|
||||
}
|
||||
|
||||
.card img,
|
||||
video {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
user-select: none;
|
||||
border-radius: var(--border-radius);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-style: italic;
|
||||
margin-bottom: var(--smaller-margin);
|
||||
}
|
||||
|
||||
.collapsed > p {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.collapsed {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: height var(--transition-time);
|
||||
}
|
||||
.collapsed > *:last-child {
|
||||
margin-bottom: var(--smaller-margin);
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-bottom: var(--margin);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
body {
|
||||
width: 85%;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
#photo {
|
||||
max-width: 94vw;
|
||||
}
|
||||
|
||||
.card {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
header {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
h1,
|
||||
#header-pic {
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
#header-pic {
|
||||
height: 5.5ch;
|
||||
margin: 0.75ex 0 0.5ex 0;
|
||||
}
|
||||
|
||||
#about > p {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue