andrew/home
andrew
/
home
mirror of https://github.com/andrewgioia/home.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Dark mode now automatically supported, modularizing the sass files, using css variables now as well, and a new npm watch command

This commit is contained in:
Andrew Gioia 2020-07-08 09:40:18 -04:00
parent e7b654c16f
commit 1a769250f9
6 changed files with 114 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -12,7 +12,8 @@
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "sass --no-source-map src/scss/theme.scss dist/site.css && cp src/index.html dist/index.html && cp -R src/img dist && cp -R src/icons dist",
"prod": "sass --no-source-map src/scss/theme.scss dist/site.css && cp src/index.html dist/index.html && cp -R src/img dist && cp -R src/icons dist"
"prod": "sass --no-source-map src/scss/theme.scss dist/site.css && cp src/index.html dist/index.html && cp -R src/img dist && cp -R src/icons dist",
"watch": "sass --no-source-map --watch src/scss/theme.scss dist/site.css"
},
"repository": {
"type": "git",

2
src/index.html
View File

@ -15,7 +15,7 @@
Andrew Gioia,
</span>
<span class="what">
dad, designer, &amp; co-founder at <a href="https://teachboost.com" target="blank">TeachBoost</a>,
dad, designer, &amp; co-founder at <a href="https://teachboost.com" class="shine" target="blank">TeachBoost</a>,
</span>
<span class="where">
living &amp; tinkering in Pittsburgh.

26
src/scss/_dark.scss Normal file
View File

@ -0,0 +1,26 @@
// dark mode preference
@media (prefers-color-scheme: dark) {
body {
background: var(--bg-dark);
}
main {
border-top-color: var(--border-dark);
h1 {
color: var(--text-dark);
span.who {
color: var(--text-dark-hl);
}
a {
color: var(--link-tb-dark);
}
}
}
footer {
a.github {
color: var(--link-gh-dark);
}
}
}

28
src/scss/_media.scss Normal file
View File

@ -0,0 +1,28 @@
// media queries
@media only screen and (min-width: $screen-tablet) {
main {
padding-right: 12vmin;
}
}
@media only screen and (min-width: $screen-laptop) {
main {
padding-right: 24vmin;
h1 {
//line-height: 1.15
}
}
}
@media only screen and (min-width: $screen-display) {
main {
padding-right: 32vmin;
}
}
@media only screen and (min-width: $screen-full) {
main {
padding-right: 50vmin;
h1 {
//line-height: 1.1;
}
}
}

22
src/scss/_variables.scss Normal file
View File

@ -0,0 +1,22 @@
// global variables
$version: '1.0.3';
$bg-light: #f3f3f1;
$bg-dark: #21252b;
$border-light: #fff;
$border-dark: #353b45;
$font-color-navy: #002953;
$font-color-navier: #032140;
$font-color-gray: #d6d7df;
$font-color-white: #fff;
$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
$font-size-base: 16px;
$link-tb-normal: #0069ff;
$link-tb-dark: #29baff;
$link-gh-normal: #24292e;
$link-gh-dark: #f1f1f1;
$screen-mobile: 640px;
$screen-tablet: 768px;
$screen-laptop: 1024px;
$screen-display: 1280px;
$screen-full: 1440px;

67
src/scss/theme.scss
View File

@ -3,27 +3,35 @@
// normalize
@import "../../node_modules/normalize.css/normalize";
// variables
$version: '1.0.3';
$bg-light: #f3f3f1;
$font-color-navy: #002953;
$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
$font-size-base: 16px;
$screen-mobile: 640px;
$screen-tablet: 768px;
$screen-laptop: 1024px;
$screen-display: 1280px;
$screen-full: 1440px;
// sass variables
@import "variables";
// css variables
:root {
--bg-normal: #{$bg-light};
--bg-dark: #{$bg-dark};
--border-normal: #{$border-light};
--border-dark: #{$border-dark};
--text-normal: #{$font-color-navy};
--text-normal-hl: #{$font-color-navier};
--text-dark: #{$font-color-gray};
--text-dark-hl: #{$font-color-white};
--font-base: #{$font-size-base};
--link-tb-normal: #{$link-tb-normal};
--link-tb-dark: #{$link-tb-dark};
--link-gh-normal: #{$link-gh-normal};
--link-gh-dark: #{$link-gh-dark};
}
// icons
@import "icons";
// fit and finish
body {
background: $bg-light;
background: var(--bg-normal);
display: flex;
flex-direction: column;
font-size: $font-size-base;
font-size: var(--font-base);
height: 100vh;
justify-content: space-between;
overflow: hidden;
@ -31,26 +39,27 @@ body {
}
main {
border-top: 1vmin solid #fff;
padding: 6vmin;
border-top: 1vmax solid var(--border-normal);
padding: 5vmin 6vmin 0;
h1 {
color: $font-color-navy;
color: var(--text-normal);
font-family: $font-family-base;
font-size: 4rem; // basic fallback
font-size: 10vmin; // premium fallback
font-size: max(10vmin, 24px);
font-size: max(10vmin, 26px);
font-weight: 700;
line-height: 1.15;
line-height: max(11vmin, 32px);
margin: 0;
span.who {
color: var(--text-normal-hl);
display: block;
font-weight: 900;
}
a {
color: #0069ff;
color: var(--link-tb-normal);
text-decoration: none;
}
}
@ -61,16 +70,16 @@ footer {
display: flex;
flex-direction: row;
justify-content: start;
padding: 6vmin;
padding: 5vmin 6vmin;
a {
font-size: 3rem; // basic fallback
font-size: 5vmin; // premium fallback
font-size: max(5vmin, 32px);
font-size: max(8vmin, 36px);
margin-right: 4vmin;
&.github {
color: #24292e;
color: var(--link-gh-normal);
}
&.mastodon {
@ -114,14 +123,8 @@ a {
}
// schemes
@import "dark";
// media queries
@media only screen and (min-width: $screen-display) {
main {
padding-right: 20vmin;
}
}
@media only screen and (min-width: $screen-full) {
main {
padding-right: 32vmin;
}
}
@import "media";