diff --git a/index.html b/index.html
index 66af856..b29e5c1 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,8 @@
-
+
+
Resume
diff --git a/public/css/animations.css b/public/css/animations.css
new file mode 100644
index 0000000..40e6964
--- /dev/null
+++ b/public/css/animations.css
@@ -0,0 +1,26 @@
+:root {
+ interpolate-size: allow-keywords; /* Allow transition to/from "auto" */
+}
+
+:root, .card {
+ transition: color 5s, background-color 5s;
+}
+
+a {
+ transition: all 1s;
+}
+
+details {
+ transition: all 1s;
+
+ &[open] {
+ height: auto;
+ overflow: clip; /* Clip off contents while animating */
+ }
+}
+
+.highlights {
+ li {
+ transition: background 1.5s;
+ }
+}
diff --git a/public/main.css b/public/css/main.css
similarity index 59%
rename from public/main.css
rename to public/css/main.css
index 5a95598..1cc8c69 100644
--- a/public/main.css
+++ b/public/css/main.css
@@ -1,31 +1,32 @@
+@import url('./variables.css');
+
:root {
- interpolate-size: allow-keywords; /* Allow transition to/from "auto" */
+ background-color: var(--color-primary);
}
body {
- background-color: #f0f0ec;
- margin-bottom: 1rem;
+ margin-bottom: var(--gutter-normal);
}
h1 {
font-size: 6rem;
- margin-top: 1rem;
- margin-bottom: .5rem;
+ margin-top: var(--gutter-normal);
+ margin-bottom: var(--gutter-narrow);
}
h2 {
font-size: 4rem;
- margin-top: 2rem;
+ margin-top: var(--gutter-wide);
}
h3 {
font-size: 2rem;
- margin-top: 1rem;
- margin-bottom: 1rem;
+ margin-top: var(--gutter-normal);
+ margin-bottom: var(--gutter-normal);
}
nav {
- padding-bottom: 1.25rem;
+ padding-bottom: var(--gutter-mid-wide);
ul {
display: grid;
@@ -41,15 +42,15 @@ nav {
header {
text-align: center;
- font-family: 'Forum', Helvetica, Arial, sans-serif;
+ font-family: var(--font-header);
p {
margin: 0 auto;
- margin-bottom: 3rem;
- margin-top: -1.5rem;
+ margin-bottom: var(--gutter-ultra-wide);
+ margin-top: calc(var(--gutter-mid-wide) * -1);
max-width: 45rem;
text-align: justify;
- font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
+ font-family: var(--font-body);
opacity: .75;
font-weight: 100;
}
@@ -57,33 +58,21 @@ header {
a {
text-decoration: none;
- color: #754668;
+ color: var(--color-accent-primary);
font-weight: bold;
- transition: all 1s;
&:hover {
- color: #617a71;
+ color: var(--color-accent-secondary);
}
}
details {
height: 1.2rem;
- padding: .5rem auto;
+ padding: var(--gutter-narrow) auto;
summary {
cursor: pointer;
}
-
- /* @media screen and (prefers-reduced-animation: no-preference) { */
- transition: all 1s;
-
- &[open] {
- height: auto;
- overflow: clip; /* Clip off contents while animating */
- }
- /* } */
-
-
}
.icon {
@@ -94,14 +83,14 @@ details {
.cardholder {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30rem, 35rem));
- grid-gap: 1rem;
+ grid-gap: var(--gutter-normal);
justify-content: center;
}
.card {
- background: #fcfbf8;
- box-shadow: 3px 3px 5px 0 rgba(0,0,0,.08);
- padding: 1rem 1.5rem;
+ background: var(--color-primary-light);
+ box-shadow: var(--box-shadow);
+ padding: var(--gutter-normal) var(--gutter-mid-wide);
border-radius: 3px;
header {
@@ -109,7 +98,7 @@ details {
}
h3 {
- margin-bottom: .5rem;
+ margin-bottom: var(--gutter-narrow);
}
h4 {
@@ -127,7 +116,7 @@ details {
position: absolute;
top: -.75rem;
left: -.5rem;
- font-size: 1.25rem;
+ font-size: 1.5rem;
opacity: .5;
}
}
@@ -138,17 +127,17 @@ details {
li {
list-style-type: circle;
padding: 3px 2px;
- transition: all 1.5s;
&:hover {
- background: rgba(97,122,113,.06);
+ background: var(--color-primary);
+ background: var(--color-background-highlight);
}
}
}
.tech {
column-count: 3;
- color: #7f968f;
+ color: var(--color-accent-light);
list-style-type: none;
padding-left: 0;
@@ -162,10 +151,10 @@ details {
}
#app {
- font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
+ font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
- color: #3f4f5f;
+ color: var(--color-secondary);
margin: 3rem 4rem 5rem 4rem;
font-size: 18px;
}
diff --git a/public/css/variables.css b/public/css/variables.css
new file mode 100644
index 0000000..5f1571d
--- /dev/null
+++ b/public/css/variables.css
@@ -0,0 +1,32 @@
+:root {
+ --color-primary: #f0f0ec;
+ --color-primary-light: #fcfbf8;
+ --color-secondary: #333f4c;
+ --color-accent-primary: #495c55;
+ --color-accent-light: #4a5a56;
+ --color-accent-secondary: #754668;
+ --color-background-highlight: color-mix(in srgb, var(--color-accent-primary), transparent 94%);
+
+ --font-body: 'Source Sans Pro', Helvetica, Arial, sans-serif;
+ --font-header: 'Forum', Helvetica, Arial, sans-serif;
+
+ --box-shadow: 3px 3px 5px 0 rgba(0,0,0,.08);
+
+ --gutter-normal: 1rem;
+ --gutter-narrow: calc(var(--gutter-normal) / 2);
+ --gutter-mid-wide: calc(var(--gutter-normal) * 1.5);
+ --gutter-wide: calc(var(--gutter-normal) * 2);
+ --gutter-ultra-wide: calc(var(--gutter-normal) * 3);
+
+ @media (prefers-color-scheme: dark) {
+ --color-primary: #111318;
+ --color-primary-light: #080b13;
+ --color-secondary: #c0b0a0;
+ --color-accent-primary: #7ea388;
+ --color-accent-light: #aa939e;
+ --color-accent-secondary: #a5969d;
+ --color-background-highlight: color-mix(in srgb, var(--color-accent-light), transparent 90%);
+
+ --box-shadow: 2px 2px 8px 0 rgba(255,255,255,.05);
+ }
+}