Blog theme styling updates (#7768)

* whole lotta updates and including some new fonts

* update placeholders

* fix mobile first child

* remove experimental stuff

* adding accessible text to header icon links

* preloading font files

* i did dum things

---------

Co-authored-by: Tony Sullivan <tony.f.sullivan@outlook.com>

1 files changed, 109 insertions, 29 deletions

diff --git a/examples/blog/src/styles/global.css b/examples/blog/src/styles/global.css
index 999782ff2..5ec3e0013 100644
--- a/examples/blog/src/styles/global.css
+++ b/examples/blog/src/styles/global.css
@@ -3,33 +3,84 @@
   https://github.com/HermanMartinus/bearblog/blob/297026a877bc2ab2b3bdfbd6b9f7961c350917dd/templates/styles/blog/default.css
   License MIT: https://github.com/HermanMartinus/bearblog/blob/master/LICENSE.md
  */
+
+ :root {
+	--accent: #2337FF;
+	--accent-dark: #000D8A;
+	--black: 15, 18, 25;
+	--gray: 96, 115, 159;
+	--gray-light: 229, 233, 240;
+	--gray-dark: 34, 41, 57;
+	--gray-gradient: rgba(var(--gray-light), 50%), #fff;
+	--box-shadow: 0 2px 6px rgba(var(--gray), 25%), 0 8px 24px rgba(var(--gray), 33%), 0 16px 32px rgba(var(--gray), 33%);
+}
+ @font-face {
+	font-family: 'Atkinson';
+	src: url('/fonts/atkinson-regular.woff') format('woff');
+	font-weight: 400;
+	font-style: normal;
+	font-display: swap;
+}
+ @font-face {
+	font-family: 'Atkinson';
+	src: url('/fonts/atkinson-bold.woff') format('woff');
+	font-weight: 700;
+	font-style: normal;
+	font-display: swap;
+}
 body {
-	font-family: Verdana, sans-serif;
-	margin: auto;
-	padding: 20px;
-	max-width: 65ch;
+	font-family: 'Atkinson', sans-serif;
+	margin: 0;
+	padding: 0;
 	text-align: left;
-	background-color: #fff;
+	background: linear-gradient(var(--gray-gradient)) no-repeat;
+	background-size: 100% 600px;
 	word-wrap: break-word;
 	overflow-wrap: break-word;
-	line-height: 1.5;
-	color: #444;
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-strong,
-b {
-	color: #222;
+	color: rgb(var(--gray-dark));
+	font-size: 20px;
+	line-height: 1.7;
+}
+main {
+	width: 720px;
+	max-width: calc(100% - 2em);
+	margin: auto;
+	padding: 3em 1em;
+}
+h1, h2, h3, h4, h5, h6 {
+	margin: 0 0 .5rem 0;
+	color: rgb(var(--black));
+	line-height: 1.2;
+}
+h1 { 
+	font-size: 3.052em; 
+}
+h2 { 
+	font-size: 2.441em; 
+}
+h3 { 
+	font-size: 1.953em; 
+}
+h4 { 
+	font-size: 1.563em; 
+}
+h5 { 
+	font-size: 1.25em; 
+}
+strong, b {
+	font-weight: 700;
 }
 a {
-	color: #3273dc;
+	color: var(--accent);
+}
+a:hover {
+	color: var(--accent);
+}
+p {
+	margin-bottom: 1em;
 }
-nav a {
-	margin-right: 10px;
+.prose p {
+	margin-bottom: 2em;
 }
 textarea {
 	width: 100%;
@@ -38,30 +89,59 @@ textarea {
 input {
 	font-size: 16px;
 }
-content {
-	line-height: 1.6;
-}
 table {
 	width: 100%;
 }
 img {
 	max-width: 100%;
 	height: auto;
+	border-radius: 8px;
 }
 code {
 	padding: 2px 5px;
-	background-color: #f2f2f2;
+	background-color: rgb(var(--gray-light));
+	border-radius: 2px;
 }
 pre {
-	padding: 1rem;
+	padding: 1.5em;
+	border-radius: 8px;
 }
 pre > code {
 	all: unset;
 }
 blockquote {
-	border: 1px solid #999;
-	color: #222;
-	padding: 2px 0px 2px 20px;
+	border-left: 4px solid var(--accent);
+	padding: 0 0 0 20px;
 	margin: 0px;
-	font-style: italic;
+	font-size: 1.333em;
+}
+hr {
+	border: none;
+	border-top: 1px solid rgb(var(--gray-light));
+}
+@media (max-width: 720px) {
+	body {
+		font-size: 18px;
+	}
+	main {
+		padding: 1em;
+	}
+}
+
+.sr-only {
+  border: 0;
+  padding: 0;
+  margin: 0;
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
+  clip: rect(1px 1px 1px 1px);
+  /* maybe deprecated but we need to support legacy browsers */
+  clip: rect(1px, 1px, 1px, 1px);
+  /* modern browsers, clip-path works inwards from each corner */
+  clip-path: inset(50%);
+  /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
+  white-space: nowrap;
 }