2 files changed, 242 insertions, 0 deletions
diff --git a/library/public/index.html b/library/public/index.html
new file mode 100644
index 0000000..ce4d568
--- /dev/null
+++ b/library/public/index.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<link rel="stylesheet" href="main.css">
+<title>Bibliothèque</title>
+<body></body>
+<script src="books.js"></script>
+<script src="main.js"></script>
diff --git a/library/public/main.css b/library/public/main.css
new file mode 100644
index 0000000..f361cbe
--- /dev/null
+++ b/library/public/main.css
@@ -0,0 +1,235 @@
+/* Variables */
+
+:root {
+  --color-focus: #888833;
+
+  --font-size-dog: 1.5rem;
+
+  --spacing-mouse: 0.25rem;
+  --spacing-cat: 0.5rem;
+  --spacing-dog: 1rem;
+  --spacing-horse: 2rem;
+
+  --width-close-button: 3rem;
+  --width-book: 13rem;
+}
+
+/* Top level */
+
+html {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  height: 100%;
+  font-family: sans-serif;
+}
+
+dl {
+  margin: 0;
+}
+
+dd {
+  margin-left: 0;
+}
+
+p {
+  margin: 0;
+}
+
+/* Modal */
+
+.g-Modal {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 1;
+}
+
+.g-Modal__Content {
+  position: relative;
+  background-color: white;
+  width: 50%;
+  border-radius: 0.2rem;
+  border: 1px solid #EEE;
+}
+
+.g-Modal__Header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spacing-dog) var(--spacing-horse);
+  border-bottom: 1px solid #EEE;
+}
+
+.g-Modal__Body {
+  padding: var(--spacing-horse);
+  max-height: 50vh;
+  overflow-y: scroll;
+}
+
+.g-Modal__Close {
+  cursor: pointer;
+  font-weight: bold;
+  border-radius: 50%;
+  border: 1px solid #EEE;
+  background-color: transparent;
+  width: var(--width-close-button);
+  height: var(--width-close-button);
+  font-size: 1.7rem;
+  flex-shrink: 0;
+}
+
+.g-Modal__Close:hover, .g-Modal__Close:focus {
+  background-color: #EEE;
+}
+
+/* Filters */
+
+aside {
+  background-color: #333;
+  color: white;
+  width: 200px;
+  overflow-y: auto;
+}
+
+ul {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.g-FilterTitle {
+  padding: 0.5rem 1rem;
+  background-color: #555;
+  border-left: 8px solid transparent;
+  font-weight: bold;
+}
+
+.g-Filter--Unselected {
+  border-left: 8px solid #555;
+}
+
+.g-Filter--Selected {
+  border-left: 8px solid #883333;
+}
+
+.g-Filter button {
+  border: none;
+  background-color: transparent;
+  color: inherit;
+  cursor: pointer;
+  padding: 0.5rem 1rem;
+  width: 100%;
+  text-align: left;
+}
+
+.g-Filter button:hover {
+  background-color: var(--color-focus);
+}
+
+/* Books */
+
+main {
+  width: 100%;
+  padding: 1rem;
+  overflow-y: auto;
+}
+
+header {
+  display: flex;
+  font-size: 120%;
+  margin-bottom: 1rem;
+}
+
+.g-Search {
+  margin-right: 1rem;
+}
+
+.g-Books {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(var(--width-book), 1fr));
+  grid-gap: 1rem;
+}
+
+.g-Book {
+  align-self: center;
+  border: 1px solid #DDDDDD;
+  padding: 0;
+  width: fit-content;
+}
+
+.g-Book:hover {
+  cursor: pointer;
+  outline: none;
+}
+
+.g-Book:hover .g-Book__Image {
+  transform: scale(105%);
+  opacity: 0.9;
+}
+
+.g-Book__Image {
+  display: flex;
+  width: var(--width-book);
+  transition: all 0.2s ease-in-out;
+}
+
+/* Book detail */
+
+.g-BookDetail {
+  display: flex;
+  align-items: flex-start;
+}
+
+.g-BookDetail img {
+  width: var(--width-book);
+  margin-right: var(--spacing-horse);
+  border: 1px solid #EEE;
+}
+
+.g-BookDetail__Title {
+  font-size: var(--font-size-dog);
+  margin-bottom: var(--spacing-mouse);
+}
+
+.g-BookDetail__Subtitle {
+  font-style: italic;
+  margin-bottom: var(--spacing-mouse);
+}
+
+.g-BookDetail dl {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-cat);
+  margin-bottom: var(--spacing-dog);
+}
+
+.g-BookDetail dt {
+  display: inline;
+  text-decoration: underline;
+}
+
+.g-BookDetail dd {
+  display: inline;
+}
+
+.g-BookDetail p {
+  font-family: serif;
+  text-align: justify;
+  line-height: 1.4rem;
+  font-size: 1.1rem;
+  text-indent: 1.5rem;
+}
+
+.g-BookDetail p:not(:last-child) {
+  margin-bottom: var(--spacing-dog);
+}