From 29007c89c6cd725f69ff800c720faf89e5aa77ee Mon Sep 17 00:00:00 2001
From: eug-vs <eugene@eug-vs.xyz>
Date: Wed, 4 May 2022 13:43:48 +0300
Subject: feat: add bitter font for headings

---
 src/fonts/Bitter-Regular.woff | Bin 0 -> 32460 bytes
 src/index.tsx                 |  18 +++++++++++++++---
 src/style.css                 |  34 ++++++++++++++++++++++++++++++++++
 3 files changed, 49 insertions(+), 3 deletions(-)
 create mode 100644 src/fonts/Bitter-Regular.woff

diff --git a/src/fonts/Bitter-Regular.woff b/src/fonts/Bitter-Regular.woff
new file mode 100644
index 0000000..8060e0a
Binary files /dev/null and b/src/fonts/Bitter-Regular.woff differ
diff --git a/src/index.tsx b/src/index.tsx
index 9b740f9..30d0f07 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
 import './style.css';
+import './fonts/Bitter-Regular.woff';
 
 import Timer from './components/Timer';
 
@@ -14,13 +15,24 @@ const App: React.FC = () => {
   const [solutions, setSolutions] = useState<Solution[]>([]);
 
   const registerResult = (result: string) => {
-    setSolutions([...solutions, { author, result }]);
+    setSolutions([{ author, result }, ...solutions]);
   }
 
   return (
-    <Timer registerResult={registerResult} />
+    <>
+      <h2>Timer</h2>
+      <Timer registerResult={registerResult} />
+
+      <h2>Results</h2>
+      <ul>
+        {solutions.map(solution => (
+          <li>
+            {solution.result} by {solution.author}
+          </li>
+        ))}
+      </ul>
+    </>
   );
 };
 
-document.body.style.overflow = 'hidden';
 ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/src/style.css b/src/style.css
index 54b39b3..e4eb8a5 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,7 +1,22 @@
+@font-face {
+  font-family: "Bitter";
+  src: local("Bitter"), url("./fonts/Bitter-Regular.woff") format("truetype");
+}
 html {
   font-family: "Open Sans", sans-serif;
   color: #ebdbb2;
   background-color: #282828;
+}
+body {
+  margin: 0 auto;
+  max-width: 1100px;
+  padding-left: 50px;
+  padding-right: 50px;
+  padding-top: 50px;
+  padding-bottom: 50px;
+  word-wrap: break-word;
+  text-rendering: optimizeLegibility;
+  font-kerning: normal;
   font-size: 16px;
 }
 p {
@@ -15,7 +30,20 @@ a:hover {
   text-decoration: underline;
 }
 h1, h2, h3, h4, h5, h6 {
+  font-family: "Bitter", serif;
   font-weight: normal;
+  line-height: 1.1;
+  margin-top: 1.4em;
+}
+h2 {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+}
+ol, ul {
+  padding-left: 1.7em;
+  margin-top: 1em;
+}
+li > ol, li > ul {
+  margin-top: 0;
 }
 code {
   font-family: monospace;
@@ -26,3 +54,9 @@ code {
   border-radius: 4px;
   border: 1px solid rgba(255, 255, 255, 0.12);
 }
+
+.SolutionCard {
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  padding: 4px;
+  margin: 8px;
+}
-- 
cgit v1.2.3