diff options
| author | Joris | 2023-09-17 12:23:47 +0200 |
|---|---|---|
| committer | Joris | 2023-09-17 12:23:47 +0200 |
| commit | 1ebc55c72a1a17293bbf4ad86e0177a10a794750 (patch) | |
| tree | 5fce0ea3a011ccbae85b0d3927f8ac33099585fb /library/public | |
| parent | c236facb4d4c277773c83f1a4ee85b48833d7e67 (diff) | |
Make app packageable
Diffstat (limited to 'library/public')
| -rw-r--r-- | library/public/index.html | 7 | ||||
| -rw-r--r-- | library/public/main.css | 235 |
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); +} |