Convert to component based architecture
This commit is contained in:
Schmelczer András
parent
eb2075aec5
commit
cdaa423b8a
70 changed files with 1942 additions and 484 deletions
18
src/style/elements.scss
Normal file
18
src/style/elements.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
#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;
|
||||
}
|
||||
/**/
|
||||
67
src/style/fonts.scss
Normal file
67
src/style/fonts.scss
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
/* raleway-regular - latin_latin-ext */
|
||||
@font-face {
|
||||
font-family: "Raleway";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url("../static/fonts/raleway/raleway-v14-latin_latin-ext-regular.eot"); /* IE9 Compat Modes */
|
||||
src: local("Raleway"), local("Raleway-Regular"),
|
||||
url("../static/fonts/raleway/raleway-v14-latin_latin-ext-regular.eot?#iefix")
|
||||
format("embedded-opentype"),
|
||||
/* IE6-IE8 */
|
||||
url("../static/fonts/raleway/raleway-v14-latin_latin-ext-regular.woff2")
|
||||
format("woff2"),
|
||||
/* Super Modern Browsers */
|
||||
url("../static/fonts/raleway/raleway-v14-latin_latin-ext-regular.woff")
|
||||
format("woff"),
|
||||
/* Modern Browsers */
|
||||
url("../static/fonts/raleway/raleway-v14-latin_latin-ext-regular.ttf")
|
||||
format("truetype"),
|
||||
/* Safari, Android, iOS */
|
||||
url("../static/fonts/raleway/raleway-v14-latin_latin-ext-regular.svg#Raleway")
|
||||
format("svg"); /* Legacy iOS */
|
||||
}
|
||||
|
||||
/* open-sans-300italic - latin_latin-ext */
|
||||
@font-face {
|
||||
font-family: "Open Sans";
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
src: url("../static/fonts/open_sans/open-sans-v17-latin_latin-ext-300italic.eot"); /* IE9 Compat Modes */
|
||||
src: local("Open Sans Light Italic"), local("OpenSans-LightItalic"),
|
||||
url("../static/fonts/open_sans/open-sans-v17-latin_latin-ext-300italic.eot?#iefix")
|
||||
format("embedded-opentype"),
|
||||
/* IE6-IE8 */
|
||||
url("../static/fonts/open_sans/open-sans-v17-latin_latin-ext-300italic.woff2")
|
||||
format("woff2"),
|
||||
/* Super Modern Browsers */
|
||||
url("../static/fonts/open_sans/open-sans-v17-latin_latin-ext-300italic.woff")
|
||||
format("woff"),
|
||||
/* Modern Browsers */
|
||||
url("../static/fonts/open_sans/open-sans-v17-latin_latin-ext-300italic.ttf")
|
||||
format("truetype"),
|
||||
/* Safari, Android, iOS */
|
||||
url("../static/fonts/open_sans/open-sans-v17-latin_latin-ext-300italic.svg#OpenSans")
|
||||
format("svg"); /* Legacy iOS */
|
||||
}
|
||||
/* open-sans-regular - latin_latin-ext */
|
||||
@font-face {
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url("../static/fonts/open_sans/open-sans-v17-latin_latin-ext-regular.eot"); /* IE9 Compat Modes */
|
||||
src: local("Open Sans Regular"), local("OpenSans-Regular"),
|
||||
url("../static/fonts/open_sans/open-sans-v17-latin_latin-ext-regular.eot?#iefix")
|
||||
format("embedded-opentype"),
|
||||
/* IE6-IE8 */
|
||||
url("../static/fonts/open_sans/open-sans-v17-latin_latin-ext-regular.woff2")
|
||||
format("woff2"),
|
||||
/* Super Modern Browsers */
|
||||
url("../static/fonts/open_sans/open-sans-v17-latin_latin-ext-regular.woff")
|
||||
format("woff"),
|
||||
/* Modern Browsers */
|
||||
url("../static/fonts/open_sans/open-sans-v17-latin_latin-ext-regular.ttf")
|
||||
format("truetype"),
|
||||
/* Safari, Android, iOS */
|
||||
url("../static/fonts/open_sans/open-sans-v17-latin_latin-ext-regular.svg#OpenSans")
|
||||
format("svg"); /* Legacy iOS */
|
||||
}
|
||||
30
src/style/mixins.scss
Normal file
30
src/style/mixins.scss
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
@import "vars";
|
||||
|
||||
@mixin center-children() {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
@mixin card() {
|
||||
text-align: center;
|
||||
border-radius: $border-radius;
|
||||
padding: $normal-margin;
|
||||
background-color: $card-color;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.125);
|
||||
|
||||
@media (max-width: $breakpoint-width) {
|
||||
& {
|
||||
transition: box-shadow $transition-time;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 0 3px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin square($size) {
|
||||
width: $size;
|
||||
height: $size;
|
||||
}
|
||||
84
src/style/page.scss
Normal file
84
src/style/page.scss
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
header,
|
||||
footer,
|
||||
#timeline,
|
||||
#about > p:first-of-type,
|
||||
#timeline > section:not(:first-of-type) > .card {
|
||||
margin-top: var(--margin);
|
||||
}
|
||||
|
||||
#about > p {
|
||||
}
|
||||
|
||||
#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);
|
||||
}
|
||||
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
35
src/style/vars.scss
Normal file
35
src/style/vars.scss
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
@import "fonts";
|
||||
|
||||
$background: linear-gradient(90deg, #fff9e0 0, #ffd6d6 100vw);
|
||||
|
||||
$normal-text-color: #31343f;
|
||||
$light-text-color: #7a7d8e;
|
||||
$inverse-text-color: #ffffff;
|
||||
|
||||
$card-color: #ffffff;
|
||||
$accent-color: #5264bf;
|
||||
$light-accent-color: #e5e5ff;
|
||||
$scrollbar-color: #ffd6d6;
|
||||
|
||||
$transition-time: 220ms;
|
||||
$line-width: 3px;
|
||||
$border-radius: 5px;
|
||||
$breakpoint-width: 900px;
|
||||
|
||||
$normal-margin: 35px;
|
||||
$small-margin: 25px;
|
||||
|
||||
$icon-size: 25px;
|
||||
$body-width: 765px;
|
||||
|
||||
$title-font: 400 3.33rem "Raleway", sans-serif;
|
||||
$sub-title-font: 400 2rem "Raleway", sans-serif;
|
||||
$text-font: 400 18px "Open sans", sans-serif;
|
||||
|
||||
@media (max-width: $breakpoint-width) {
|
||||
$line-width: 2px;
|
||||
$normal-margin: 25px;
|
||||
$small-margin: 20px;
|
||||
$icon-size: 20px;
|
||||
$body-width: 85%;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue