diff --git a/css/DMMono-Italic.woff2 b/css/DMMono-Italic.woff2 deleted file mode 100644 index 54fdc20..0000000 Binary files a/css/DMMono-Italic.woff2 and /dev/null differ diff --git a/css/DMMono-Medium.woff2 b/css/DMMono-Medium.woff2 deleted file mode 100644 index aa607de..0000000 Binary files a/css/DMMono-Medium.woff2 and /dev/null differ diff --git a/css/DMMono-Regular.woff2 b/css/DMMono-Regular.woff2 deleted file mode 100644 index c36abf6..0000000 Binary files a/css/DMMono-Regular.woff2 and /dev/null differ diff --git a/css/WorkSans-Italic.woff2 b/css/WorkSans-Italic.woff2 new file mode 100644 index 0000000..501a57c Binary files /dev/null and b/css/WorkSans-Italic.woff2 differ diff --git a/css/WorkSans-Medium.woff2 b/css/WorkSans-Medium.woff2 new file mode 100644 index 0000000..fe138f8 Binary files /dev/null and b/css/WorkSans-Medium.woff2 differ diff --git a/css/WorkSans-Regular.woff2 b/css/WorkSans-Regular.woff2 new file mode 100644 index 0000000..4c12c1f Binary files /dev/null and b/css/WorkSans-Regular.woff2 differ diff --git a/css/style.css b/css/style.css index b2e8b8e..5abe948 100755 --- a/css/style.css +++ b/css/style.css @@ -1,29 +1,27 @@ @font-face { - font-family: 'DM Mono'; - src: url('DMMono-Regular.woff2'); + font-family: 'Work Sans'; + src: url('WorkSans-Regular.woff2'); font-weight: normal; } @font-face { - font-family: 'DM Mono'; - src: url('DMMono-Medium.woff2'); + font-family: 'Work Sans'; + src: url('WorkSans-Medium.woff2'); font-weight: bold; } @font-face { - font-family: 'DM Mono'; - src: url('DMMono-Italic.woff2'); + font-family: 'Work Sans'; + src: url('WorkSans-Italic.woff2'); font-style: italic; } :root { - --txt: #c0ccdb; - --body-bg: #17191c; - --accent: #e4d294; - --border: #76818e; - --border-light: #a0a8b1; - --green: #5da892; - --font-body: 'DM Mono', 'Lucida Console', 'Monaco', 'Courier New', 'Courier', monospace; + --txt: #f2f4f8; + --body-bg: #161616; + --accent: #6690d9; + --border: #222; + --font-body: 'Work Sans', sans-serif; } body { @@ -42,22 +40,9 @@ header { font-size: 2rem; } -/* Add typewriter animation when text fits without line break */ -@media screen and (min-width: 570px) { - header { - display: inline-block; - overflow: hidden; - white-space: nowrap; - border-right: .05em solid var(--accent); - padding-right: 10px; - animation: typing 1s steps(80), blink-cursor 2s infinite; - } -} - header a { color: var(--accent); text-decoration: none; - font-style: italic; } nav, @@ -66,20 +51,22 @@ footer { } nav a { + background-color: var(--border); border: 1px solid var(--border); border-radius: .3rem; margin: .7rem; padding: .4rem 1.2rem; text-decoration: none; - box-shadow: 0px 2px 3px -2px rgba(0,0,0,.3); + box-shadow: 0px 2px 3px 2px rgba(0,0,0,.3); user-select: none; cursor: pointer; display: inline-block; } nav a:hover { + background-color: var(--body-bg); + border: 1px solid var(--border); color: var(--txt); - border: 1px solid var(--border-light); } main { @@ -103,30 +90,6 @@ main ul { display: block; } -@media screen and (min-width: 900px) { - .quick-fixes { - max-width: 75% !important; - } -} - -@media screen and (max-width: 899px) { - .quick-fixes { - max-width: 90% !important; - } -} - -.quick-fixes-table { - border-collapse: collapse; - table-layout: fixed; - width: 100%; -} - -.quick-fixes-table th, -.quick-fixes-table td { - border: thin solid var(--border); - padding: .5rem; -} - .author { float: left; max-width: 400px; @@ -152,11 +115,11 @@ main ul { } .no-dollar::before { - content: '' !important; + content: ''; } .cowsay { - font-family: var(--font-body); + font-family: monospace; text-align: left; white-space: pre; max-width: fit-content; @@ -176,18 +139,15 @@ a { transition: 300ms; } -a:hover, -a:active { - color: var(--accent); -} - h1, h2, h3, h4, h5, -h6 { - color: var(--green); +h6, +a:hover, +a:active { + color: var(--accent); } code { @@ -197,21 +157,3 @@ code { margin: .3rem; } -@keyframes typing { - from { - max-width: 0; - } - to { - max-width: 80%; - } -} - -@keyframes blink-cursor { - from, - to { - border-color: transparent; - } - 50% { - border-color: var(--accent); - } -}