Tweak styles for blog.

dam5s · Feb 15, 2024 · 53bca08 · 53bca08
1 parent 5a57926
commit 53bca08
Show file tree

Hide file tree

Showing 3 changed files with 115 additions and 169 deletions.
diff --git a/Damo.Io.Blog/resources/app.css b/Damo.Io.Blog/resources/app.css
@@ -1,19 +1,19 @@
-@import '/normalize.css';
+@import '/reset.css';
 
 :root {
     --link: #037F8C;
     --linkDark: #205459;
-    --linkDark-alpha-20: rgba(32, 84, 89, .2);
-    --linkDark-alpha-10: rgba(32, 84, 89, .1);
+    --linkDark-alpha-60: color-mix(in srgb, var(--linkDark), transparent 40%);
+    --linkDark-alpha-80: color-mix(in srgb, var(--linkDark), transparent 20%);
     --background: #F2E7C4;
-    --background-alpha-10: rgba(242, 231, 196, .1);
+    --background-alpha-80: color-mix(in srgb, var(--background), transparent 20%);
     --foreground: #211;
-    --foreground-alpha-40: rgba(34, 17, 17, .4);
+    --foreground-alpha-40: color-mix(in srgb, var(--foreground), transparent 60%);
     --primary: #F28F38;
     --primaryDark: #F25757;
 
-    --spacing: .8rem;
-    --spacing-2: 1.6rem;
+    --spacing: 1.2rem;
+    --spacing-2: 2.4rem;
     --border-radius: 2px;
 
     --serif: 'Cambria', 'Palatino', serif;
@@ -23,13 +23,13 @@
 
 html {
     font-size: 62.5%;
+    background: var(--foreground);
+    color: var(--foreground);
 }
 
 body {
     font-family: var(--serif);
-    font-size: 1.7rem;
-    background: var(--foreground);
-    color: var(--foreground);
+    font-size: 1.8rem;
     word-wrap: break-word;
 }
 
@@ -41,27 +41,32 @@ a:hover {
     color: var(--linkDark);
 }
 
+a:active {
+    position: relative;
+    top: 1px;
+}
+
 h1, h2, h3, h4, h5, h6 {
     margin-top: 0;
     font-family: var(--sans-serif);
 }
 
 h1 {
-    font-size: 3.4rem;
+    font-size: 4.8rem;
 }
 
 h2 {
     color: var(--primaryDark);
-    font-size: 2.6rem;
+    font-size: 3.6rem;
 }
 
 h3, h4, h5, h6 {
-    font-size: 1.7rem;
+    font-size: 2.4rem;
 }
 
 p {
-    margin: 0 0 1.6rem;
-    line-height: 1.25;
+    margin: 0 0 var(--spacing-2);
+    line-height: 180%;
 }
 
 img {
@@ -75,14 +80,31 @@ pre {
     background: var(--foreground-alpha-40);
     padding: var(--spacing);
     border-radius: var(--border-radius);
-    line-height: 1.25;
+    line-height: 180%;
 }
 
 code {
-    font-size: 1.5rem;
+    font-size: 1.7rem;
     font-family: var(--monospace);
 }
 
+ul {
+    list-style-type: disc;
+}
+
+ol {
+    list-style-type: lower-alpha;
+}
+
+ul, ol {
+    margin-bottom: var(--spacing-2);
+}
+
+ul li, ol li {
+    margin-left:  var(--spacing-2);
+    margin-bottom: .4rem;
+}
+
 header {
     color: var(--primary);
     padding: var(--spacing-2);
@@ -98,7 +120,7 @@ header a:link, header a:visited {
 }
 
 header a:hover {
-    color: var(--background-alpha-10);
+    color: var(--background-alpha-80);
 }
 
 aside {
@@ -116,7 +138,7 @@ main {
 }
 
 main > * {
-    max-width: 70rem;
+    max-width: 80rem;
 }
 
 main nav {
@@ -127,18 +149,18 @@ main nav a:link, main nav a:hover, main nav a:visited {
     display: inline-block;
     padding: var(--spacing) var(--spacing-2);
     color: var(--background);
-    background: var(--linkDark-alpha-20);
+    background: var(--linkDark-alpha-60);
     border-radius: var(--border-radius);
     margin-right: 1rem;
     margin-bottom: var(--spacing);
 }
 
 main nav a:hover {
-    background: var(--linkDark-alpha-10);
+    background: var(--linkDark-alpha-80);
 }
 
 footer {
     padding: var(--spacing-2);
     color: var(--background);
-    font-size: 1.4rem;
+    font-size: 1.5rem;
 }
diff --git a/Damo.Io.Blog/resources/normalize.css b/Damo.Io.Blog/resources/normalize.css
diff --git a/Damo.Io.Blog/resources/reset.css b/Damo.Io.Blog/resources/reset.css
@@ -0,0 +1,71 @@
+/*
+YUI 3.18.1 (build f7e7bcb)
+Copyright 2014 Yahoo! Inc. All rights reserved.
+Licensed under the BSD License.
+http://yuilibrary.com/license/
+*/
+
+html {
+    color: #000;
+    background: #FFF
+}
+
+body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td {
+    margin: 0;
+    padding: 0
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0
+}
+
+fieldset, img {
+    border: 0
+}
+
+address, caption, cite, code, dfn, em, strong, th, var {
+    font-style: normal;
+    font-weight: normal
+}
+
+ol, ul {
+    list-style: none
+}
+
+caption, th {
+    text-align: left
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-size: 100%;
+    font-weight: normal
+}
+
+q:before, q:after {
+    content: ''
+}
+
+abbr, acronym {
+    border: 0;
+    font-variant: normal
+}
+
+sup {
+    vertical-align: text-top
+}
+
+sub {
+    vertical-align: text-bottom
+}
+
+input, textarea, select {
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+    *font-size: 100%
+}
+
+legend {
+    color: #000
+}