53 lines
912 B
CSS
53 lines
912 B
CSS
/* styles.css
|
|
* Global Color Theme
|
|
* ex: ` color: var(--red);`
|
|
*/
|
|
:root {
|
|
--bg-one: #111111; /* black */
|
|
--bg-two: #303030; /* gray */
|
|
|
|
--fg-one: #ffffff; /* white */
|
|
--fg-two: #f3f3f3; /* light gray */
|
|
|
|
--blue: #1e90ff;
|
|
--red: #e63946;
|
|
--green: #2a9d8f;
|
|
}
|
|
|
|
/* General Site */
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
|
|
background-color: var(--bg-one);
|
|
color: var(--fg-one);
|
|
}
|
|
|
|
/* container centered at 85% width */
|
|
.container {
|
|
width: 70vw;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 3rem;
|
|
}
|
|
|
|
/* scroll.js */
|
|
/* base state: slightly shrunken + faded out */
|
|
.scroll-section {
|
|
transform: scale(0.85);
|
|
opacity: 0.5;
|
|
transition:
|
|
transform 0.6s cubic-bezier(.22,.61,.36,1),
|
|
opacity 0.6s cubic-bezier(.22,.61,.36,1);
|
|
transform-origin: center center;
|
|
}
|
|
|
|
/* when in view: full size + fully opaque */
|
|
.scroll-section.in-view {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|