16 changed files with 866 additions and 664 deletions
+ 5
- 2
web/app/main.py
View File
| # route for index page | # route for index page | ||||
| @main.route('/') | @main.route('/') | ||||
| def index(): | def index(): | ||||
| tools = Resource.query.filter_by(type='tool').order_by(func.random()).limit(6).all() | |||||
| tools = Resource.query.filter_by(type='tool').order_by(func.random()).limit(1).all() | |||||
| books = Resource.query.filter_by(type='book').order_by(func.random()).limit(1).all() | |||||
| tools2 = Resource.query.filter_by(type='tool').order_by(func.random()).limit(1).all() | |||||
| books2 = Resource.query.filter_by(type='book').order_by(func.random()).limit(1).all() | |||||
| with open('content/home.md', 'r') as f: | with open('content/home.md', 'r') as f: | ||||
| text = f.read() | text = f.read() | ||||
| text = markdown.markdown(text) | text = markdown.markdown(text) | ||||
| return render_template('index.html', text=text, tools=tools) | |||||
| return render_template('index.html', text=text, tools=tools,books=books, tools2=tools2,books2=books2) | |||||
| # route for profile page | # route for profile page | ||||
| @main.route('/profile') | @main.route('/profile') |
+ 101
- 16
web/app/static/src/main.css
View File
| @tailwind base; | @tailwind base; | ||||
| @tailwind components; | @tailwind components; | ||||
| @tailwind utilities; | @tailwind utilities; | ||||
| @font-face { | @font-face { | ||||
| font-family: 'ag'; | font-family: 'ag'; | ||||
| src: url(ApfelGrotezk-Regular.woff) format("woff"); | |||||
| src: url('ApfelGrotezk-Regular.woff') format("woff"); | |||||
| } | } | ||||
| @font-face { | @font-face { | ||||
| font-family: 'ag-brukt'; | font-family: 'ag-brukt'; | ||||
| src: url(ApfelGrotezk-Brukt.woff) format("woff"); | |||||
| src: url('ApfelGrotezk-Brukt.woff') format("woff"); | |||||
| } | } | ||||
| @font-face { | @font-face { | ||||
| font-family: 'ag-fett'; | font-family: 'ag-fett'; | ||||
| src: url(ApfelGrotezk-Fett.woff) format("woff"); | |||||
| src: url('ApfelGrotezk-Fett.woff') format("woff"); | |||||
| } | |||||
| @font-face { | |||||
| font-family: 'dauphine'; | |||||
| src: url('Dauphine-Regular.ttf') format("truetype"); | |||||
| } | |||||
| @font-face { | |||||
| font-family: 'dauphine'; | |||||
| src: url('Dauphine-Italic.ttf') format("truetype"); | |||||
| font-style: italic; | |||||
| } | |||||
| @font-face { | |||||
| font-family: 'robo'; | |||||
| src: url('roboto-regular.ttf') format("truetype"); | |||||
| } | |||||
| @font-face { | |||||
| font-family: 'robo'; | |||||
| src: url('roboto-italic.ttf') format("truetype"); | |||||
| font-style: italic; | |||||
| } | |||||
| @font-face { | |||||
| font-family: 'cirrus'; | |||||
| src: url('CirrusCumulus.woff') format("woff"); | |||||
| } | } | ||||
| body { | body { | ||||
| font-family: 'ag'; | |||||
| font-family: 'dauphine'; | |||||
| } | } | ||||
| strong { | strong { | ||||
| font-family: 'ag-fett'; | font-family: 'ag-fett'; | ||||
| } | } | ||||
| .book { | |||||
| font-family: 'ag-fett', 'Arial Black'; | |||||
| } | |||||
| .tool { | |||||
| font-family: 'robo'; | |||||
| } | |||||
| .practice { | |||||
| font-family: 'cirrus'; | |||||
| } | |||||
| .std-margin { | .std-margin { | ||||
| @apply p-2; | @apply p-2; | ||||
| } | } | ||||
| .cell-margin { | .cell-margin { | ||||
| @apply p-4 pt-4 pb-8 pr-8 | |||||
| @apply p-4; | |||||
| } | } | ||||
| .block-margin { | .block-margin { | ||||
| .cell { | .cell { | ||||
| @apply cell-margin relative; | @apply cell-margin relative; | ||||
| /* background: linear-gradient(to right, white 0%, rgb(252, 206, 255) 15px, white 10%, white 100%); */ | |||||
| } | } | ||||
| .cell::before { | .cell::before { | ||||
| content: ''; | content: ''; | ||||
| position: absolute; | position: absolute; | ||||
| top: 10px; | top: 10px; | ||||
| right: 0px; | right: 0px; | ||||
| width: 3px; | |||||
| width: 2px; | |||||
| height: calc(100% - 20px); | height: calc(100% - 20px); | ||||
| background-color: black; | background-color: black; | ||||
| } | } | ||||
| content: ''; | content: ''; | ||||
| position: absolute; | position: absolute; | ||||
| bottom: 0px; | |||||
| left: 8px; | |||||
| width: calc(100% - 20px); | |||||
| height: 2px; | |||||
| background-color: black; | |||||
| } | |||||
| .slash { | |||||
| position: relative; | |||||
| } | |||||
| .slash::after { | |||||
| content: ''; | |||||
| position: absolute; | |||||
| bottom: 0px; | bottom: 0px; | ||||
| left: 8px; | left: 8px; | ||||
| width: calc(100% - 20px); | width: calc(100% - 20px); | ||||
| height: 3px; | height: 3px; | ||||
| background-color: black; | background-color: black; | ||||
| transform-origin: 100% 100%; | |||||
| transform: rotate(45deg); | |||||
| } | } | ||||
| .meta { | |||||
| /* .meta { | |||||
| transform: rotate(-3.5deg); | transform: rotate(-3.5deg); | ||||
| } */ | |||||
| .facts { | |||||
| @apply grid lg:grid-cols-2 gap-4; | |||||
| } | |||||
| .facts h3 { | |||||
| } | |||||
| .facts > * { | |||||
| @apply max-w-[65ch]; | |||||
| } | |||||
| a:hover { | |||||
| @apply opacity-60; | |||||
| } | } | ||||
| h2,h3 { | h2,h3 { | ||||
| @apply overflow-hidden max-w-full overflow-ellipsis; | |||||
| hyphens: auto; | |||||
| } | } | ||||
| h2 { | h2 { | ||||
| } | } | ||||
| h3 { | h3 { | ||||
| @apply text-xl tracking-wide; | |||||
| font-family: 'ag-fett'; | font-family: 'ag-fett'; | ||||
| @apply uppercase; | |||||
| } | |||||
| .indent { | |||||
| @apply mx-4 my-4; | |||||
| } | } | ||||
| .text > h3 { | .text > h3 { | ||||
| h2 + *, | h2 + *, | ||||
| h3 + * { | h3 + * { | ||||
| @apply ml-6 mt-1; | |||||
| /* @apply ml-6 mt-1; */ | |||||
| } | } | ||||
| p { | |||||
| max-width: 55ch; | |||||
| } | |||||
| p + p { | p + p { | ||||
| @apply ml-6 mt-[1em]; | |||||
| @apply mt-[1em]; | |||||
| } | } | ||||
| .loading { | .loading { | ||||
| opacity: 0; | opacity: 0; | ||||
| transition: opacity 200ms ease-in; | |||||
| background-image: linear-gradient(to top, rgb(103, 48, 255,0.8), rgb(255, 255, 255, 0),rgb(255, 255, 255, 0)); | |||||
| } | } | ||||
| .htmx-request .loading { | .htmx-request .loading { | ||||
| transition: opacity 7000ms cubic-bezier(.16, .01, .31, .99); | |||||
| opacity: 1; | opacity: 1; | ||||
| display: block; | display: block; | ||||
| } | } | ||||
| text-decoration: underline; | text-decoration: underline; | ||||
| } | } | ||||
| #resources.expanded .filter-header::before { | |||||
| content:'- '; | |||||
| } | |||||
| #resources .filter-header::before { | |||||
| content:'+ '; | |||||
| } |
BIN
web/app/static/styles/CirrusCumulus.woff
View File
BIN
web/app/static/styles/Dauphine-Italic.ttf
View File
BIN
web/app/static/styles/Dauphine-Regular.ttf
View File
+ 292
- 96
web/app/static/styles/main.css
View File
| --tw-backdrop-saturate: ; | --tw-backdrop-saturate: ; | ||||
| --tw-backdrop-sepia: ; | --tw-backdrop-sepia: ; | ||||
| } | } | ||||
| .container { | .container { | ||||
| width: 100%; | width: 100%; | ||||
| } | } | ||||
| @media (min-width: 640px) { | @media (min-width: 640px) { | ||||
| .container { | .container { | ||||
| max-width: 640px; | max-width: 640px; | ||||
| } | } | ||||
| } | } | ||||
| @media (min-width: 768px) { | @media (min-width: 768px) { | ||||
| .container { | .container { | ||||
| max-width: 768px; | max-width: 768px; | ||||
| } | } | ||||
| } | } | ||||
| @media (min-width: 1024px) { | @media (min-width: 1024px) { | ||||
| .container { | .container { | ||||
| max-width: 1024px; | max-width: 1024px; | ||||
| } | } | ||||
| } | } | ||||
| @media (min-width: 1280px) { | @media (min-width: 1280px) { | ||||
| .container { | .container { | ||||
| max-width: 1280px; | max-width: 1280px; | ||||
| } | } | ||||
| } | } | ||||
| @media (min-width: 1536px) { | @media (min-width: 1536px) { | ||||
| .container { | .container { | ||||
| .z-50 { | .z-50 { | ||||
| z-index: 50; | z-index: 50; | ||||
| } | } | ||||
| .col-span-2 { | |||||
| grid-column: span 2 / span 2; | |||||
| } | |||||
| .col-span-3 { | |||||
| grid-column: span 3 / span 3; | |||||
| } | |||||
| .row-span-2 { | .row-span-2 { | ||||
| grid-row: span 2 / span 2; | grid-row: span 2 / span 2; | ||||
| } | } | ||||
| .row-span-3 { | .row-span-3 { | ||||
| grid-row: span 3 / span 3; | grid-row: span 3 / span 3; | ||||
| } | } | ||||
| .row-span-1 { | |||||
| grid-row: span 1 / span 1; | |||||
| } | |||||
| .row-start-1 { | .row-start-1 { | ||||
| grid-row-start: 1; | grid-row-start: 1; | ||||
| } | } | ||||
| .m-16 { | .m-16 { | ||||
| margin: 4rem; | margin: 4rem; | ||||
| } | } | ||||
| .m-8 { | |||||
| margin: 2rem; | |||||
| .my-4 { | |||||
| margin-top: 1rem; | |||||
| margin-bottom: 1rem; | |||||
| } | } | ||||
| .my-8 { | .my-8 { | ||||
| margin-top: 2rem; | margin-top: 2rem; | ||||
| margin-bottom: 2rem; | margin-bottom: 2rem; | ||||
| } | } | ||||
| .mx-4 { | |||||
| margin-left: 1rem; | |||||
| margin-right: 1rem; | |||||
| .mx-auto { | |||||
| margin-left: auto; | |||||
| margin-right: auto; | |||||
| } | |||||
| .mb-16 { | |||||
| margin-bottom: 4rem; | |||||
| } | } | ||||
| .mb-2 { | .mb-2 { | ||||
| margin-bottom: 0.5rem; | margin-bottom: 0.5rem; | ||||
| .mb-8 { | .mb-8 { | ||||
| margin-bottom: 2rem; | margin-bottom: 2rem; | ||||
| } | } | ||||
| .mb-\[1em\] { | |||||
| margin-bottom: 1em; | |||||
| } | |||||
| .ml-4 { | |||||
| margin-left: 1rem; | |||||
| } | |||||
| .ml-auto { | |||||
| margin-left: auto; | |||||
| } | |||||
| .mr-8 { | |||||
| margin-right: 2rem; | |||||
| } | |||||
| .mr-auto { | .mr-auto { | ||||
| margin-right: auto; | margin-right: auto; | ||||
| } | } | ||||
| .mt-3 { | .mt-3 { | ||||
| margin-top: 0.75rem; | margin-top: 0.75rem; | ||||
| } | } | ||||
| .ml-auto { | |||||
| margin-left: auto; | |||||
| .mt-4 { | |||||
| margin-top: 1rem; | |||||
| } | } | ||||
| .mb-16 { | |||||
| margin-bottom: 4rem; | |||||
| .mr-2 { | |||||
| margin-right: 0.5rem; | |||||
| } | } | ||||
| .block { | .block { | ||||
| display: block; | display: block; | ||||
| } | } | ||||
| .flex { | |||||
| display: flex; | |||||
| } | |||||
| .table { | |||||
| display: table; | |||||
| .inline-block { | |||||
| display: inline-block; | |||||
| } | } | ||||
| .grid { | .grid { | ||||
| display: grid; | display: grid; | ||||
| } | } | ||||
| .hidden { | |||||
| display: none; | |||||
| } | |||||
| .h-10 { | .h-10 { | ||||
| height: 2.5rem; | height: 2.5rem; | ||||
| } | } | ||||
| .h-20 { | |||||
| height: 5rem; | |||||
| } | |||||
| .h-40 { | .h-40 { | ||||
| height: 10rem; | height: 10rem; | ||||
| } | } | ||||
| .h-screen { | .h-screen { | ||||
| height: 100vh; | height: 100vh; | ||||
| } | } | ||||
| .h-\[50rem\] { | |||||
| height: 50rem; | |||||
| } | |||||
| .h-\[25rem\] { | |||||
| height: 25rem; | |||||
| } | |||||
| .h-\[clamp\(20rem\2c 30rem\2c 40rem\)\] { | |||||
| height: clamp(20rem,30rem,40rem); | |||||
| } | |||||
| .h-12 { | |||||
| height: 3rem; | |||||
| } | |||||
| .max-h-\[30rem\] { | |||||
| max-height: 30rem; | |||||
| } | |||||
| .w-10 { | .w-10 { | ||||
| width: 2.5rem; | width: 2.5rem; | ||||
| } | } | ||||
| .w-20 { | |||||
| width: 5rem; | |||||
| } | |||||
| .w-40 { | .w-40 { | ||||
| width: 10rem; | width: 10rem; | ||||
| } | } | ||||
| .w-\[25rem\] { | |||||
| width: 25rem; | |||||
| } | |||||
| .w-\[30rem\] { | |||||
| width: 30rem; | |||||
| } | |||||
| .w-full { | .w-full { | ||||
| width: 100%; | width: 100%; | ||||
| } | } | ||||
| .w-\[3rem\] { | |||||
| width: 3rem; | |||||
| .w-\[32rem\] { | |||||
| width: 32rem; | |||||
| } | } | ||||
| .w-\[30rem\] { | |||||
| width: 30rem; | |||||
| .w-60 { | |||||
| width: 15rem; | |||||
| } | } | ||||
| .w-\[20rem\] { | |||||
| width: 20rem; | |||||
| .w-52 { | |||||
| width: 13rem; | |||||
| } | } | ||||
| .w-\[25rem\] { | |||||
| width: 25rem; | |||||
| .min-w-\[35rem\] { | |||||
| min-width: 35rem; | |||||
| } | } | ||||
| .min-w-\[10rem\] { | |||||
| min-width: 10rem; | |||||
| .min-w-\[32rem\] { | |||||
| min-width: 32rem; | |||||
| } | } | ||||
| .max-w-\[30rem\] { | .max-w-\[30rem\] { | ||||
| max-width: 30rem; | max-width: 30rem; | ||||
| } | } | ||||
| .max-w-\[55ch\] { | |||||
| max-width: 55ch; | |||||
| .max-w-\[65ch\] { | |||||
| max-width: 65ch; | |||||
| } | } | ||||
| .max-w-\[25rem\] { | |||||
| max-width: 25rem; | |||||
| .max-w-\[20rem\] { | |||||
| max-width: 20rem; | |||||
| } | } | ||||
| .shrink-0 { | .shrink-0 { | ||||
| flex-shrink: 0; | flex-shrink: 0; | ||||
| .grid-flow-col { | .grid-flow-col { | ||||
| grid-auto-flow: column; | grid-auto-flow: column; | ||||
| } | } | ||||
| .grid-cols-\[1fr\2c 4fr\] { | |||||
| grid-template-columns: 1fr 4fr; | |||||
| .grid-cols-2 { | |||||
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |||||
| } | |||||
| .grid-cols-\[2fr\2c 1fr\] { | |||||
| grid-template-columns: 2fr 1fr; | |||||
| } | } | ||||
| .items-center { | |||||
| align-items: center; | |||||
| .items-start { | |||||
| align-items: flex-start; | |||||
| } | } | ||||
| .justify-center { | |||||
| justify-content: center; | |||||
| .justify-start { | |||||
| justify-content: flex-start; | |||||
| } | } | ||||
| .justify-between { | .justify-between { | ||||
| justify-content: space-between; | justify-content: space-between; | ||||
| } | } | ||||
| .gap-2 { | |||||
| gap: 0.5rem; | |||||
| } | |||||
| .gap-4 { | |||||
| gap: 1rem; | |||||
| } | |||||
| .gap-8 { | .gap-8 { | ||||
| gap: 2rem; | gap: 2rem; | ||||
| } | } | ||||
| text-overflow: ellipsis; | text-overflow: ellipsis; | ||||
| white-space: nowrap; | white-space: nowrap; | ||||
| } | } | ||||
| .rounded-full { | |||||
| border-radius: 9999px; | |||||
| } | |||||
| .border-2 { | .border-2 { | ||||
| border-width: 2px; | border-width: 2px; | ||||
| } | } | ||||
| .border-b-\[3px\] { | |||||
| border-bottom-width: 3px; | |||||
| .border-b-2 { | |||||
| border-bottom-width: 2px; | |||||
| } | |||||
| .border-b-\[2px\] { | |||||
| border-bottom-width: 2px; | |||||
| } | } | ||||
| .border-black { | .border-black { | ||||
| --tw-border-opacity: 1; | --tw-border-opacity: 1; | ||||
| border-color: rgb(0 0 0 / var(--tw-border-opacity)); | border-color: rgb(0 0 0 / var(--tw-border-opacity)); | ||||
| } | } | ||||
| .bg-black { | |||||
| --tw-bg-opacity: 1; | |||||
| background-color: rgb(0 0 0 / var(--tw-bg-opacity)); | |||||
| } | |||||
| .bg-black\/20 { | .bg-black\/20 { | ||||
| background-color: rgb(0 0 0 / 0.2); | background-color: rgb(0 0 0 / 0.2); | ||||
| } | } | ||||
| -o-object-fit: contain; | -o-object-fit: contain; | ||||
| object-fit: contain; | object-fit: contain; | ||||
| } | } | ||||
| .p-2 { | |||||
| padding: 0.5rem; | |||||
| .p-1 { | |||||
| padding: 0.25rem; | |||||
| } | } | ||||
| .p-4 { | .p-4 { | ||||
| padding: 1rem; | padding: 1rem; | ||||
| } | } | ||||
| .p-8 { | |||||
| padding: 2rem; | |||||
| } | |||||
| .p-1 { | |||||
| padding: 0.25rem; | |||||
| } | |||||
| .py-3 { | .py-3 { | ||||
| padding-top: 0.75rem; | padding-top: 0.75rem; | ||||
| padding-bottom: 0.75rem; | padding-bottom: 0.75rem; | ||||
| } | } | ||||
| .pb-8 { | |||||
| padding-bottom: 2rem; | |||||
| } | |||||
| .pl-44 { | |||||
| padding-left: 11rem; | |||||
| } | |||||
| .pl-20 { | |||||
| padding-left: 5rem; | |||||
| } | |||||
| .pl-24 { | |||||
| padding-left: 6rem; | |||||
| } | |||||
| .pl-16 { | |||||
| padding-left: 4rem; | |||||
| } | |||||
| .pt-3 { | |||||
| padding-top: 0.75rem; | |||||
| } | |||||
| .pt-4 { | .pt-4 { | ||||
| padding-top: 1rem; | padding-top: 1rem; | ||||
| } | } | ||||
| .pl-12 { | |||||
| padding-left: 3rem; | |||||
| } | |||||
| .pb-16 { | |||||
| padding-bottom: 4rem; | |||||
| } | |||||
| .pb-12 { | |||||
| padding-bottom: 3rem; | |||||
| } | |||||
| .text-center { | .text-center { | ||||
| text-align: center; | text-align: center; | ||||
| } | } | ||||
| vertical-align: bottom; | vertical-align: bottom; | ||||
| } | } | ||||
| .text-base { | .text-base { | ||||
| font-size: 1.08rem; | |||||
| line-height: 1.35; | |||||
| font-size: 1.25rem; | |||||
| line-height: 1.22; | |||||
| } | } | ||||
| .text-sm { | .text-sm { | ||||
| font-size: 0.95rem; | |||||
| font-size: 1rem; | |||||
| line-height: 1.35; | line-height: 1.35; | ||||
| } | } | ||||
| .text-xl { | |||||
| font-size: 1.25rem; | |||||
| line-height: 1.75rem; | |||||
| } | |||||
| .text-xs { | .text-xs { | ||||
| font-size: 0.75rem; | font-size: 0.75rem; | ||||
| line-height: 1rem; | line-height: 1rem; | ||||
| } | } | ||||
| .leading-tight { | |||||
| line-height: 1.25; | |||||
| .uppercase { | |||||
| text-transform: uppercase; | |||||
| } | } | ||||
| .text-red-600 { | |||||
| --tw-text-opacity: 1; | |||||
| color: rgb(220 38 38 / var(--tw-text-opacity)); | |||||
| .capitalize { | |||||
| text-transform: capitalize; | |||||
| } | } | ||||
| .text-white { | |||||
| --tw-text-opacity: 1; | |||||
| color: rgb(255 255 255 / var(--tw-text-opacity)); | |||||
| .italic { | |||||
| font-style: italic; | |||||
| } | } | ||||
| .grayscale { | .grayscale { | ||||
| --tw-grayscale: grayscale(100%); | --tw-grayscale: grayscale(100%); | ||||
| .filter { | .filter { | ||||
| filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); | filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); | ||||
| } | } | ||||
| .transition-opacity { | |||||
| transition-property: opacity; | |||||
| transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); | |||||
| transition-duration: 150ms; | |||||
| } | |||||
| @font-face { | @font-face { | ||||
| font-family: 'ag'; | font-family: 'ag'; | ||||
| src: url(ApfelGrotezk-Regular.woff) format("woff"); | |||||
| src: url('ApfelGrotezk-Regular.woff') format("woff"); | |||||
| } | } | ||||
| @font-face { | @font-face { | ||||
| font-family: 'ag-brukt'; | font-family: 'ag-brukt'; | ||||
| src: url(ApfelGrotezk-Brukt.woff) format("woff"); | |||||
| src: url('ApfelGrotezk-Brukt.woff') format("woff"); | |||||
| } | } | ||||
| @font-face { | @font-face { | ||||
| font-family: 'ag-fett'; | font-family: 'ag-fett'; | ||||
| src: url(ApfelGrotezk-Fett.woff) format("woff"); | |||||
| src: url('ApfelGrotezk-Fett.woff') format("woff"); | |||||
| } | |||||
| @font-face { | |||||
| font-family: 'dauphine'; | |||||
| src: url('Dauphine-Regular.ttf') format("truetype"); | |||||
| } | |||||
| @font-face { | |||||
| font-family: 'dauphine'; | |||||
| src: url('Dauphine-Italic.ttf') format("truetype"); | |||||
| font-style: italic; | |||||
| } | |||||
| @font-face { | |||||
| font-family: 'robo'; | |||||
| src: url('roboto-regular.ttf') format("truetype"); | |||||
| } | |||||
| @font-face { | |||||
| font-family: 'robo'; | |||||
| src: url('roboto-italic.ttf') format("truetype"); | |||||
| font-style: italic; | |||||
| } | |||||
| @font-face { | |||||
| font-family: 'cirrus'; | |||||
| src: url('CirrusCumulus.woff') format("woff"); | |||||
| } | } | ||||
| body { | body { | ||||
| font-family: 'ag'; | |||||
| font-family: 'dauphine'; | |||||
| } | } | ||||
| strong { | strong { | ||||
| font-family: 'ag-fett'; | font-family: 'ag-fett'; | ||||
| } | } | ||||
| .book { | |||||
| font-family: 'ag-fett', 'Arial Black'; | |||||
| } | |||||
| .tool { | |||||
| font-family: 'robo'; | |||||
| } | |||||
| .practice { | |||||
| font-family: 'cirrus'; | |||||
| } | |||||
| .std-margin { | .std-margin { | ||||
| padding: 0.5rem; | padding: 0.5rem; | ||||
| } | } | ||||
| .cell-margin { | .cell-margin { | ||||
| padding: 1rem; | padding: 1rem; | ||||
| padding-top: 1rem; | |||||
| padding-bottom: 2rem; | |||||
| padding-right: 2rem; | |||||
| } | } | ||||
| .block-margin { | .block-margin { | ||||
| .cell { | .cell { | ||||
| position: relative; | position: relative; | ||||
| padding: 1rem; | padding: 1rem; | ||||
| padding-top: 1rem; | |||||
| padding-bottom: 2rem; | |||||
| padding-right: 2rem; | |||||
| /* background: linear-gradient(to right, white 0%, rgb(252, 206, 255) 15px, white 10%, white 100%); */ | |||||
| } | } | ||||
| .cell::before { | .cell::before { | ||||
| content: ''; | content: ''; | ||||
| position: absolute; | position: absolute; | ||||
| top: 10px; | top: 10px; | ||||
| right: 0px; | right: 0px; | ||||
| width: 3px; | |||||
| width: 2px; | |||||
| height: calc(100% - 20px); | height: calc(100% - 20px); | ||||
| background-color: black; | background-color: black; | ||||
| } | } | ||||
| content: ''; | content: ''; | ||||
| position: absolute; | position: absolute; | ||||
| bottom: 0px; | |||||
| left: 8px; | |||||
| width: calc(100% - 20px); | |||||
| height: 2px; | |||||
| background-color: black; | |||||
| } | |||||
| .slash { | |||||
| position: relative; | |||||
| } | |||||
| .slash::after { | |||||
| content: ''; | |||||
| position: absolute; | |||||
| bottom: 0px; | bottom: 0px; | ||||
| left: 8px; | left: 8px; | ||||
| width: calc(100% - 20px); | width: calc(100% - 20px); | ||||
| height: 3px; | height: 3px; | ||||
| background-color: black; | background-color: black; | ||||
| transform-origin: 100% 100%; | |||||
| transform: rotate(45deg); | |||||
| } | } | ||||
| .meta { | |||||
| /* .meta { | |||||
| transform: rotate(-3.5deg); | transform: rotate(-3.5deg); | ||||
| } */ | |||||
| .facts { | |||||
| display: grid; | |||||
| gap: 1rem; | |||||
| } | |||||
| @media (min-width: 1024px) { | |||||
| .facts { | |||||
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |||||
| } | |||||
| } | |||||
| .facts h3 { | |||||
| } | |||||
| .facts > * { | |||||
| max-width: 65ch; | |||||
| } | |||||
| a:hover { | |||||
| opacity: 0.6; | |||||
| } | } | ||||
| h2,h3 { | h2,h3 { | ||||
| max-width: 100%; | |||||
| overflow: hidden; | |||||
| text-overflow: ellipsis; | |||||
| -webkit-hyphens: auto; | |||||
| hyphens: auto; | |||||
| } | } | ||||
| h2 { | h2 { | ||||
| font-size: 2.53rem; | |||||
| font-size: 2.8rem; | |||||
| line-height: 1; | line-height: 1; | ||||
| } | } | ||||
| h3 { | h3 { | ||||
| font-size: 1.25rem; | |||||
| line-height: 1.75rem; | |||||
| letter-spacing: 0.025em; | |||||
| font-family: 'ag-fett'; | font-family: 'ag-fett'; | ||||
| text-transform: uppercase; | |||||
| } | |||||
| .indent { | |||||
| margin-left: 1rem; | |||||
| margin-right: 1rem; | |||||
| margin-top: 1rem; | |||||
| margin-bottom: 1rem; | |||||
| } | } | ||||
| .text > h3 { | .text > h3 { | ||||
| h2 + *, | h2 + *, | ||||
| h3 + * { | h3 + * { | ||||
| margin-left: 1.5rem; | |||||
| margin-top: 0.25rem; | |||||
| /* @apply ml-6 mt-1; */ | |||||
| } | } | ||||
| p { | |||||
| max-width: 55ch; | |||||
| } | |||||
| p + p { | p + p { | ||||
| margin-left: 1.5rem; | |||||
| margin-top: 1em; | margin-top: 1em; | ||||
| } | } | ||||
| .loading { | .loading { | ||||
| opacity: 0; | opacity: 0; | ||||
| transition: opacity 200ms ease-in; | |||||
| background-image: linear-gradient(to top, rgb(103, 48, 255,0.8), rgb(255, 255, 255, 0),rgb(255, 255, 255, 0)); | |||||
| } | } | ||||
| .htmx-request .loading { | .htmx-request .loading { | ||||
| transition: opacity 7000ms cubic-bezier(.16, .01, .31, .99); | |||||
| opacity: 1; | opacity: 1; | ||||
| display: block; | display: block; | ||||
| } | } | ||||
| text-decoration: underline; | text-decoration: underline; | ||||
| } | } | ||||
| #resources.expanded .filter-header::before { | |||||
| content:'- '; | |||||
| } | |||||
| #resources .filter-header::before { | |||||
| content:'+ '; | |||||
| } | |||||
| .hover\:opacity-60:hover { | |||||
| opacity: 0.6; | |||||
| } | |||||
| @media (min-width: 1024px) { | @media (min-width: 1024px) { | ||||
| .lg\:mt-16 { | |||||
| margin-top: 4rem; | |||||
| } | |||||
| .lg\:block { | |||||
| display: block; | |||||
| } | |||||
| .lg\:flex { | .lg\:flex { | ||||
| display: flex; | display: flex; | ||||
| } | } | ||||
| .lg\:grid-cols-3 { | |||||
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |||||
| .lg\:grid-cols-4 { | |||||
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |||||
| } | } | ||||
| .lg\:grid-rows-3 { | .lg\:grid-rows-3 { | ||||
| grid-template-rows: repeat(3, minmax(0, 1fr)); | grid-template-rows: repeat(3, minmax(0, 1fr)); | ||||
| } | } | ||||
| } | |||||
| .lg\:grid-rows-2 { | |||||
| grid-template-rows: repeat(2, minmax(0, 1fr)); | |||||
| } | |||||
| .lg\:grid-rows-\[1fr\2c 1fr\] { | |||||
| grid-template-rows: 1fr 1fr; | |||||
| } | |||||
| .lg\:grid-rows-\[1fr\2c 1fr\2c 1fr\] { | |||||
| grid-template-rows: 1fr 1fr 1fr; | |||||
| } | |||||
| .lg\:grid-rows-\[3fr\2c 1fr\2c 1fr\] { | |||||
| grid-template-rows: 3fr 1fr 1fr; | |||||
| } | |||||
| .lg\:grid-rows-\[auto\2c auto\2c auto\] { | |||||
| grid-template-rows: auto auto auto; | |||||
| } | |||||
| } |
BIN
web/app/static/styles/roboto-italic.ttf
View File
BIN
web/app/static/styles/roboto-regular.ttf
View File
+ 3
- 3
web/app/static/tailwind.config.js
View File
| extend: { | extend: { | ||||
| fontSize: { | fontSize: { | ||||
| // xs: ['0.95rem', { lineHeight: '1.35' }], | // xs: ['0.95rem', { lineHeight: '1.35' }], | ||||
| sm: ['0.95rem', { lineHeight: '1.35' }], | |||||
| base: ['1.08rem', { lineHeight: '1.35' }], | |||||
| sm: ['1rem', { lineHeight: '1.35' }], | |||||
| base: ['1.25rem', { lineHeight: '1.22' }], | |||||
| // lg: ['1.125rem', { lineHeight: '1.5' }], | // lg: ['1.125rem', { lineHeight: '1.5' }], | ||||
| // xl: ['1.25rem', { lineHeight: '1.6' }], | // xl: ['1.25rem', { lineHeight: '1.6' }], | ||||
| // '2xl': ['1.5rem', { lineHeight: '1.88rem' }], | // '2xl': ['1.5rem', { lineHeight: '1.88rem' }], | ||||
| // '3xl': ['1.875rem', { lineHeight: '2.25rem' }], | // '3xl': ['1.875rem', { lineHeight: '2.25rem' }], | ||||
| '4xl': ['2.53rem', { lineHeight: '1' }], | |||||
| '4xl': ['2.8rem', { lineHeight: '1' }], | |||||
| // '5xl': ['3rem', { lineHeight: '1.1' }], | // '5xl': ['3rem', { lineHeight: '1.1' }], | ||||
| // '6xl': ['3.75rem', { lineHeight: '1.04' }], | // '6xl': ['3.75rem', { lineHeight: '1.04' }], | ||||
| // '7xl': ['4.5rem', { lineHeight: '1.1' }], | // '7xl': ['4.5rem', { lineHeight: '1.1' }], |
+ 1
- 1
web/app/templates/about.html
View File
| {% block content %} | {% block content %} | ||||
| <div class="cell-margin text max-w-[55ch]"> | |||||
| <div class="cell-margin text max-w-[65ch]"> | |||||
| {{ text|safe }} | {{ text|safe }} | ||||
| </div> | </div> | ||||
+ 135
- 98
web/app/templates/base.html
View File
| # Boostrap select: https://stackoverflow.com/questions/67942546/bootstrap-5-select-dropdown-with-the-multiple-attribute-collapsed | # Boostrap select: https://stackoverflow.com/questions/67942546/bootstrap-5-select-dropdown-with-the-multiple-attribute-collapsed | ||||
| --> | --> | ||||
| {% macro relationships_links(relationships) %} | |||||
| {% if relationships %} | |||||
| {% for relationship in relationships %} | |||||
| {{ resource_lead(relationship)}} | |||||
| {% endfor %} | |||||
| {% endif %} | |||||
| {% endmacro %} | |||||
| {% macro resource_with_related(resource, pre_title='', post_title='Related') %} | |||||
| <div class="w-full overflow-x-scroll my-8 pb-12 border-b-2 border-black"> | |||||
| <div class="grid lg:grid-rows-[auto,auto,auto] grid-flow-col" > | |||||
| <div class=" w-40 pl-16 pt-4 row-start-1 "> | |||||
| {% if pre_title == '' %} | |||||
| <p>1 / 34</p> | |||||
| {% else %} | |||||
| <p>{{ pre_title }}</p> | |||||
| {% endif %} | |||||
| </div> | |||||
| <div class="w-[32rem] shrink-0 row-start-1 row-span-3"> | |||||
| {{ resource_lead(resource) }} | |||||
| </div> | |||||
| <div class=" w-52 pl-24 pt-4 row-start-1 "> | |||||
| {{ post_title }} | |||||
| </div> | |||||
| <div class="h-12"> | |||||
| </div> | |||||
| {% if resource['name'] != 'practice' %} | |||||
| <div class="w-52 pl-24 pt-4 "> | |||||
| Related practices | |||||
| </div> | |||||
| {% endif %} | |||||
| <div class="shrink-0 min-w-[32rem] row-start-1"> | |||||
| {{ resource_lead(resource) }} | |||||
| </div> | |||||
| <div class=""></div> | |||||
| <div class="cell practice"> | |||||
| <h2>Collaborative writing</h2> | |||||
| </div> | |||||
| <div class="shrink-0 min-w-[32rem] row-start-1"> | |||||
| {{ resource_lead(resource) }} | |||||
| </div> | |||||
| <div class="shrink-0 min-w-[32rem] row-start-1"> | |||||
| {{ resource_lead(resource) }} | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| {% endmacro %} | |||||
| {% macro popup_link(title,url) %} | {% macro popup_link(title,url) %} | ||||
| <a href="{{ url }}" class="nav-link"> | <a href="{{ url }}" class="nav-link"> | ||||
| {{ title }} | {{ title }} | ||||
| </a> | </a> | ||||
| {% endmacro %} | {% endmacro %} | ||||
| {% macro resource_lead(type, title, leadtext, url, year, thumbnail='', large_title=false) %} | |||||
| <div class="relative cell h-full"> | |||||
| {% macro resource_lead(resource) %} | |||||
| <div class="relative cell "> | |||||
| <a | <a | ||||
| class="block cursor-pointer" | |||||
| class="block h-full hover:opacity-60 transition-opacity cursor-pointer " | |||||
| href="{{ url }}" | |||||
| {% if resource['type'] == 'book' %} | |||||
| href="{{ url_for('book.show_book', book_id=resource['id']) }}" | |||||
| {% endif %} | |||||
| {% if resource['type'] == 'tool' %} | |||||
| href="{{ url_for('tool.show_tool', tool_id=resource['id']) }}" | |||||
| {% endif %} | |||||
| {% if resource['type'] == 'practice' %} | |||||
| href="{{ url_for('practice.show_practice', practice_id=resource['id']) }}" | |||||
| {% endif %} | |||||
| hx-target="#modal-content" | hx-target="#modal-content" | ||||
| hx-select="main" | hx-select="main" | ||||
| > | > | ||||
| {% if large_title %} | |||||
| <h2 class="">{{ title }}</h2> | |||||
| {% else %} | |||||
| <h3 class="">{{ title }}</h3> | |||||
| {% if (resource['type'] == 'book') %} | |||||
| <img class="w-20 h-20 object-contain float-right mt-4 ml-4 mb-4 grayscale rotate-[15deg]" src="https://dummyimage.com/4:5x70" alt="cover for {{ resource['name'] }}"> | |||||
| {% endif %} | {% endif %} | ||||
| {% if year %} | |||||
| <div class="">{{ year }}</div> | |||||
| {% endif %} | |||||
| {% if type == 'book' and thumbnail %} | |||||
| <img class="w-40 h-40 object-contain float-right m-16 grayscale rotate-[15deg]" src={{ book['thumbnail'] }} alt="cover for {{ title }}"> | |||||
| <h2 class="{{ resource['type'] }} mb-2">{{ resource['name'] }}</h2> | |||||
| {% if resource['year'] %} | |||||
| <div class=" text-sm"> | |||||
| {{ resource['year'] }}{% if resource['author'] %}, {{ resource['author'] }}{% endif%} | |||||
| </div> | |||||
| {% endif %} | {% endif %} | ||||
| <div class=""> | |||||
| {{ leadtext | truncate(100) }} | |||||
| <div class="text-xl mb-[1em]"> | |||||
| {{ resource['description'] | truncate(150) }} | |||||
| </div> | </div> | ||||
| </a> | </a> | ||||
| {% if current_user.is_authenticated %} | {% if current_user.is_authenticated %} | ||||
| <div class=""> | <div class=""> | ||||
| {% endif %} | {% endif %} | ||||
| </div> | </div> | ||||
| {% endif %} | {% endif %} | ||||
| </div> | |||||
| {% endmacro %} | |||||
| {% macro resource_small(resource) %} | |||||
| {% if resource['type'] == 'tool' %} | |||||
| {{ | |||||
| resource_lead( | |||||
| resource['type'], | |||||
| resource['name'], | |||||
| resource['description'], | |||||
| url_for('tool.show_tool', | |||||
| tool_id=resource['id']), | |||||
| null, | |||||
| '', | |||||
| true | |||||
| ) | |||||
| }} | |||||
| {% elif resource['type'] == 'practice' %} | |||||
| {{ | |||||
| resource_lead( | |||||
| resource['type'], | |||||
| resource['name'], | |||||
| resource['description'], | |||||
| url_for('practice.show_practice', | |||||
| practice_id=resource['id']), | |||||
| null | |||||
| ) | |||||
| }} | |||||
| {% elif resource['type'] == 'book' %} | |||||
| {{ | |||||
| resource_lead( | |||||
| resource['type'], | |||||
| resource['name'], | |||||
| resource['author'], | |||||
| url_for('book.show_book', | |||||
| book_id=resource['id']), | |||||
| null, | |||||
| resource['thumbnail'], | |||||
| true | |||||
| ) | |||||
| }} | |||||
| {% endif %} | |||||
| </div> | |||||
| {% endmacro %} | {% endmacro %} | ||||
| <meta charset="utf-8"> | <meta charset="utf-8"> | ||||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||||
| <script src="https://unpkg.com/htmx.org@1.8.6"></script> | <script src="https://unpkg.com/htmx.org@1.8.6"></script> | ||||
| <script src="//unpkg.com/alpinejs" defer></script> | <script src="//unpkg.com/alpinejs" defer></script> | ||||
| <title>ExPub Compendium</title> | <title>ExPub Compendium</title> | ||||
| <link href="{{ url_for('static',filename='styles/main.css') }}" rel="stylesheet"> | <link href="{{ url_for('static',filename='styles/main.css') }}" rel="stylesheet"> | ||||
| </head> | |||||
| <script> | <script> | ||||
| // htmx.on('htmx:beforeRequest', e=> { | // htmx.on('htmx:beforeRequest', e=> { | ||||
| // console.log(e) | // console.log(e) | ||||
| modalOpen: false, | modalOpen: false, | ||||
| showRelated: false, | showRelated: false, | ||||
| home: '/', | home: '/', | ||||
| hideIfBase() { | hideIfBase() { | ||||
| let str = document.location.toString(); | let str = document.location.toString(); | ||||
| str = str.replace('http://', ''); | str = str.replace('http://', ''); | ||||
| str = str.replace('https://', ''); | str = str.replace('https://', ''); | ||||
| let l = str.split('/').length-1; | |||||
| if(l<2) { | |||||
| let l = str.split('/').length - 1; | |||||
| if (l < 2) { | |||||
| this.modalOpen = false; | this.modalOpen = false; | ||||
| } | } | ||||
| return l; | return l; | ||||
| }, | }, | ||||
| init() { | init() { | ||||
| this.$watch('document.location', (value, oldValue) => { | |||||
| this.$watch('document.location', (value, oldValue) => { | |||||
| console.log('new url', value); | console.log('new url', value); | ||||
| }); | }); | ||||
| window.addEventListener('popstate', e => { | window.addEventListener('popstate', e => { | ||||
| }, | }, | ||||
| hideOverlay() { | hideOverlay() { | ||||
| this.modalOpen = false; | this.modalOpen = false; | ||||
| // window.history.pushState({}, '', this.home); | // window.history.pushState({}, '', this.home); | ||||
| }, | }, | ||||
| openModal() { | openModal() { | ||||
| // this.$refs.modal.innerHTML = ''; | // this.$refs.modal.innerHTML = ''; | ||||
| this.modalOpen = true; | this.modalOpen = true; | ||||
| let mc = document.querySelector('#modal-content'); | let mc = document.querySelector('#modal-content'); | ||||
| mc.scrollTo(0,0); | |||||
| mc.scrollTo(0, 0); | |||||
| } | } | ||||
| } | } | ||||
| } | } | ||||
| </script> | </script> | ||||
| </head> | |||||
| <body | <body | ||||
| class="text-base overflow-y-scroll" | class="text-base overflow-y-scroll" | ||||
| x-data="base()" | x-data="base()" | ||||
| hx-swap="outerHTML" | hx-swap="outerHTML" | ||||
| hx-indicator="body" | hx-indicator="body" | ||||
| > | > | ||||
| <div id="loading" class="loading"> | |||||
| <div class="pointer-events-none fixed top-0 left-0 w-full h-screen z-50 flex justify-center items-center p-4"> | |||||
| <div class="rounded-full bg-black text-white p-4 "> | |||||
| Loading... | |||||
| </div> | |||||
| </div> | |||||
| <div id="loading" class="loading pointer-events-none fixed top-0 left-0 w-full h-screen z-50"> | |||||
| </div> | </div> | ||||
| <div id="all"> | <div id="all"> | ||||
| <header class="sticky top-0 z-10 bg-white std-padding border-b-[3px] border-black"> | |||||
| <nav class=""> | |||||
| <div class="lg:flex gap-2 mb-2"> | |||||
| <a class="link leading-tight" href="{{ url_for('main.index') }}">ExPub<br>Compendium</a> | |||||
| <a href="{{ url_for('main.about') }}" class="{{ 'active' if request.path == url_for('main.about') }} ml-auto link"> | |||||
| About | |||||
| <header class="sticky top-0 z-10 bg-white std-padding border-b-[2px] border-black"> | |||||
| <nav class=" lg:flex justify-between"> | |||||
| <a class="link inline-block w-40" href="{{ url_for('main.index') }}">ExPub<br>Compendium</a> | |||||
| <div class="mr-8"> | |||||
| <h2><a href="{{ url_for('tool.get_tools') }}" class="tool link align-bottom">Tools</a></h2> | |||||
| </div> | |||||
| <div class="mr-8"> | |||||
| <h2> | |||||
| <a href="{{ url_for('practice.get_practices') }}" class="practice link"> | |||||
| Practices | |||||
| </a> | |||||
| </h2> | |||||
| </div> | |||||
| <div class="mr-8"> | |||||
| <h2> | |||||
| <a href="{{ url_for('book.get_books') }}" class="book link"> | |||||
| Books | |||||
| </a> | |||||
| </h2> | |||||
| </div> | |||||
| <!-- <div class="mr-8"> | |||||
| <h2 class=""> | |||||
| <a href="{{ url_for('practice.get_practices') }}" class="practice link"> | |||||
| Typologies | |||||
| </a> | |||||
| </h2> | |||||
| </div> --> | |||||
| <div class="mr-8"> | |||||
| <a href="{{ url_for('main.about') }}" | |||||
| class="{{ 'active' if request.path == url_for('main.about') }} ml-auto link mr-auto"> | |||||
| About<br>ExPub | |||||
| </a> | </a> | ||||
| </div> | |||||
| <div class="ml-auto mr-2"> | |||||
| {% if current_user.is_authenticated %} | {% if current_user.is_authenticated %} | ||||
| <a href="{{ url_for('create.create_resource') }}" class="link"> | |||||
| <a href="{{ url_for('create.create_resource') }}" class="block link"> | |||||
| Add resource | Add resource | ||||
| </a> | </a> | ||||
| {% endif %} | {% endif %} | ||||
| {% if current_user.is_authenticated %} | |||||
| <a href="{{ url_for('main.profile') }}" class="link"> | |||||
| {% if current_user.is_authenticated %} | |||||
| <a href="{{ url_for('main.profile') }}" class="block link"> | |||||
| Profile | Profile | ||||
| </a> | </a> | ||||
| {% endif %} | {% endif %} | ||||
| {% if not current_user.is_authenticated %} | {% if not current_user.is_authenticated %} | ||||
| <a href="{{ url_for('auth.login') }}" class="link"> | |||||
| <a href="{{ url_for('auth.login') }}" class="block link"> | |||||
| Login | Login | ||||
| </a> | </a> | ||||
| <a href="{{ url_for('auth.signup') }}" class="link"> | |||||
| <a href="{{ url_for('auth.signup') }}" class="block link"> | |||||
| Sign Up | Sign Up | ||||
| </a> | </a> | ||||
| {% endif %} | {% endif %} | ||||
| {% if current_user.is_authenticated %} | {% if current_user.is_authenticated %} | ||||
| <a href="{{ url_for('auth.logout') }}" class="link"> | |||||
| <a href="{{ url_for('auth.logout') }}" class="block link"> | |||||
| Logout | Logout | ||||
| </a> | </a> | ||||
| {% endif %} | {% endif %} | ||||
| </div> | </div> | ||||
| <h2 class="flex gap-4 "> | |||||
| <a href="{{ url_for('tool.get_tools') }}" class=" link align-bottom"> | |||||
| Tools | |||||
| </a> | |||||
| <a href="{{ url_for('practice.get_practices') }}" class="link"> | |||||
| Practices | |||||
| </a> | |||||
| <a href="{{ url_for('book.get_books') }}" class="link"> | |||||
| Books | |||||
| </a> | |||||
| <input class="ml-auto text-base border-2 border-black p-1 " type="text" placeholder="Search"> | |||||
| </h2> | |||||
| <input class=" text-base border-2 border-black p-1 " type="text" placeholder="Search"> | |||||
| </nav> | </nav> | ||||
| </header> | </header> | ||||
| </main> | </main> | ||||
| </div> | </div> | ||||
| <div id="modal" x-show="modalOpen" class="modal h-screen w-full fixed top-0 z-20 p-8 bg-black/20 overscroll-none"> | |||||
| <div id="modal" x-show="modalOpen" class="modal h-screen w-full fixed top-0 z-20 p-4 bg-black/20 overscroll-none"> | |||||
| <div class="cross cursor-pointer absolute top-10 right-10 w-10 h-10" @click="hideOverlay()"> | <div class="cross cursor-pointer absolute top-10 right-10 w-10 h-10" @click="hideOverlay()"> | ||||
| <svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> | <svg width="100%" height="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||||
| <path d="M2 2L18 18M18 2L2 18" stroke="black" stroke-width="1"></path> | <path d="M2 2L18 18M18 2L2 18" stroke="black" stroke-width="1"></path> |
+ 123
- 153
web/app/templates/book.html
View File
| {% block content %} | {% block content %} | ||||
| <div class="cell-margin"> | |||||
| {% if book['thumbnail'] %} | |||||
| <img class="w-40 h-40 object-contain float-right m-16 grayscale rotate-[15deg]" src={{ book['thumbnail'] }} alt="cover for {{ book['Title'] }}"> | |||||
| {% endif %} | |||||
| <h2 class="max-w-[30rem]">{% block title %} {{ book['Title'] or resource['name'] }} {% endblock %}</h2> | |||||
| {% if current_user.is_authenticated %} | |||||
| <div class="row text-center py-3"> | |||||
| <a href="{{ url_for('book.edit_book', book_id=resource['id']) }}"> | |||||
| <span class="badge bg-dark">Edit</span> | |||||
| </a> | |||||
| </div> | |||||
| {% endif %} | |||||
| </div> | |||||
| <div class="row block-margin"> | |||||
| <div class="col"> | |||||
| <table class="table table-hover"> | |||||
| <tbody> | |||||
| <div class="cell-margin grid grid-cols-[2fr,1fr]"> | |||||
| <div class="left"> | |||||
| <div class="mb-8"> | |||||
| <div class="mb-2">Book</div> | |||||
| {% if book['thumbnail'] %} | |||||
| <div class="float-right"> | |||||
| <img class="w-40 h-40 object-contain m-16 rotate-[15deg]" src={{ book['thumbnail'] }} alt="cover for {{ book['Title'] }}"> | |||||
| </div> | |||||
| {% endif %} | |||||
| <h2 class="book mb-2 max-w-[30rem]">{% block title %} {{ book['Title'] or resource['name'] }} {% endblock %}</h2> | |||||
| {% if book['Year'] %} | |||||
| {{ book['Year'] }} | |||||
| {% endif %} | |||||
| {% if book['Authors'] %} | |||||
| <div class=""> | |||||
| {% if book['Authors']|length > 1 %} | |||||
| <div class=""> | |||||
| {% for author in book['Authors'] %} | |||||
| {{ author }}</br> | |||||
| {% endfor %} | |||||
| </div> | |||||
| {% else %} | |||||
| <div> | |||||
| {% for author in book['Authors'] %} | |||||
| {{ author }} | |||||
| {% endfor %} | |||||
| </div> | |||||
| {% endif %} | |||||
| </div> | |||||
| {% endif %} | |||||
| </div> | |||||
| <div class=""> | |||||
| {% if current_user.is_authenticated %} | |||||
| <div class=""> | |||||
| <a href="{{ url_for('book.edit_book', book_id=resource['id']) }}"> | |||||
| <span class="badge bg-dark">Edit</span> | |||||
| </a> | |||||
| </div> | |||||
| {% endif %} | |||||
| <div class="facts"> | |||||
| {% if resource['typology'] %} | {% if resource['typology'] %} | ||||
| <tr> | |||||
| <th> | |||||
| Typology category: | |||||
| </th> | |||||
| <td> | |||||
| <a href="/books?typology={{ resource['typology'] }}">{{ resource['typology'] }}</a> | |||||
| </td> | |||||
| </tr> | |||||
| <div class=""> | |||||
| <h3>Typology category</h3> | |||||
| <a href="/books?typology={{ resource['typology'] }}">{{ resource['typology'] }}</a> | |||||
| </div> | |||||
| {% endif %} | {% endif %} | ||||
| {% if resource['bookUrl'] %} | {% if resource['bookUrl'] %} | ||||
| <tr> | |||||
| <th> | |||||
| URL: | |||||
| </th> | |||||
| <td> | |||||
| <a href="{{ resource['bookUrl'] }}">{{ resource['bookUrl'] }}</a> | |||||
| </td> | |||||
| </tr> | |||||
| <div class=""> | |||||
| <h3>URL</h3> | |||||
| <a target="_blank" href="{{ resource['bookUrl'] }}">{{ resource['bookUrl'] }}</a> | |||||
| </div> | |||||
| {% endif %} | {% endif %} | ||||
| {% if book %} | {% if book %} | ||||
| <!-- fields for books from isbntools --> | |||||
| {% if book['Title'] %} | |||||
| <tr> | |||||
| <th> | |||||
| Title: | |||||
| </th> | |||||
| <td> | |||||
| {{ book['Title'] }} | |||||
| </td> | |||||
| </tr> | |||||
| {% endif %} | |||||
| {% if book['Authors'] %} | |||||
| <tr> | |||||
| {% if book['Authors']|length > 1 %} | |||||
| <th> | |||||
| Authors: | |||||
| </th> | |||||
| <td> | |||||
| {% for author in book['Authors'] %} | |||||
| {{ author }}</br> | |||||
| {% endfor %} | |||||
| </td> | |||||
| {% else %} | |||||
| <th> | |||||
| Author: | |||||
| </th> | |||||
| <td> | |||||
| {% for author in book['Authors'] %} | |||||
| {{ author }} | |||||
| {% endfor %} | |||||
| </td> | |||||
| {% endif %} | |||||
| </tr> | |||||
| {% endif %} | |||||
| {% if book['ISBN-13'] %} | |||||
| <tr> | |||||
| <th> | |||||
| ISBN-13: | |||||
| </th> | |||||
| <td> | |||||
| {{ book['ISBN-13'] }} | |||||
| </td> | |||||
| </tr> | |||||
| {% endif %} | |||||
| {% if book['Year'] %} | |||||
| <tr> | |||||
| <th> | |||||
| Publication year: | |||||
| </th> | |||||
| <td> | |||||
| {{ book['Year'] }} | |||||
| </td> | |||||
| </tr> | |||||
| {% endif %} | |||||
| {% if book['Publisher'] %} | |||||
| <tr> | |||||
| <th> | |||||
| Publisher: | |||||
| </th> | |||||
| <td> | |||||
| {{ book['Publisher'] }} | |||||
| </td> | |||||
| </tr> | |||||
| {% endif %} | |||||
| {% if book['desc'] %} | |||||
| <tr> | |||||
| <th> | |||||
| Publisher's description: | |||||
| </th> | |||||
| <td> | |||||
| {{ book['desc'] }} | |||||
| </td> | |||||
| </tr> | |||||
| {% endif %} | |||||
| <!-- fields for books from isbntools --> | |||||
| {% if book['ISBN-13'] %} | |||||
| <div class=""> | |||||
| <h3> | |||||
| ISBN-13 | |||||
| </h3> | |||||
| <div> | |||||
| {{ book['ISBN-13'] }} | |||||
| </div> | |||||
| </div> | |||||
| {% endif %} | |||||
| {% if book['Publisher'] %} | |||||
| <div class=""> | |||||
| <h3> | |||||
| Publisher | |||||
| </h3> | |||||
| <div> | |||||
| {{ book['Publisher'] }} | |||||
| </div> | |||||
| </div> | |||||
| {% endif %} | |||||
| {% else %} | {% else %} | ||||
| <!-- fields for books from database --> | |||||
| {% if resource['name'] %} | |||||
| <tr> | |||||
| <th> | |||||
| Title: | |||||
| </th> | |||||
| <td> | |||||
| {{ resource['name'] }} | |||||
| </td> | |||||
| </tr> | |||||
| {% endif %} | |||||
| {% if resource['author'] %} | |||||
| <tr> | |||||
| <th> | |||||
| Author: | |||||
| </th> | |||||
| <td> | |||||
| {{ resource['author'] }} | |||||
| </td> | |||||
| </tr> | |||||
| {% endif %} | |||||
| {% if resource['year'] %} | |||||
| <tr> | |||||
| <th> | |||||
| Publication year: | |||||
| </th> | |||||
| <td> | |||||
| {{ resource['year'] }} | |||||
| </td> | |||||
| </tr> | |||||
| {% endif %} | |||||
| <!-- fields for books from database --> | |||||
| {% if resource['name'] %} | |||||
| <!-- <div class=""> | |||||
| <h3>Title</h3> | |||||
| <div class="">{{ resource['name'] }}</div> | |||||
| </div> --> | |||||
| {% endif %} | {% endif %} | ||||
| {% if resource['author'] %} | |||||
| <div class=""> | |||||
| <h3>Author</h3> | |||||
| <div class="">{{ resource['author'] }}</div> | |||||
| </div> | |||||
| {% endif %} | |||||
| {% if resource['year'] %} | |||||
| <div class=""> | |||||
| <h3>Publication year</h3> | |||||
| <div> | |||||
| {{ resource['year'] }} | |||||
| </div> | |||||
| </div> | |||||
| {% endif %} | |||||
| {% endif %} | |||||
| {% if book['desc'] %} | |||||
| <div class="col-span-2"> | |||||
| <h3>Publisher's description</h3> | |||||
| <div class="">{{ book['desc'] }}</div> | |||||
| </div> | |||||
| {% endif %} | |||||
| {% if resource['description'] %} | {% if resource['description'] %} | ||||
| <tr> | |||||
| <th> | |||||
| <div class="col-span-2"> | |||||
| <h3> | |||||
| Experimental aspects: | Experimental aspects: | ||||
| </th> | |||||
| <td> | |||||
| </h3> | |||||
| <div> | |||||
| {{ resource['description'] }} | {{ resource['description'] }} | ||||
| </td> | |||||
| </tr> | |||||
| </div> | |||||
| </div> | |||||
| {% endif %} | {% endif %} | ||||
| </tbody> | |||||
| </table> | |||||
| </div> | |||||
| </div> | |||||
| </div> | </div> | ||||
| <div class="right lg:mt-16"> | |||||
| <div class=" max-w-[30rem] mx-auto p-4"> | |||||
| {{ relationships_links(relationships) }} | |||||
| </div> | |||||
| </div> | |||||
| </div> | </div> | ||||
| {% if relationships %} | |||||
| <div class="grid lg:grid-cols-3"> | |||||
| {% for relationship in relationships %} | |||||
| {{ resource_small(relationship)}} | |||||
| {% endfor %} | |||||
| </div> | |||||
| {% endif %} | |||||
| {% endblock %} | {% endblock %} | ||||
+ 24
- 16
web/app/templates/index.html
View File
| {% extends "base.html" %} | {% extends "base.html" %} | ||||
| {% block content %} | {% block content %} | ||||
| <div class="std-grid"> | |||||
| <div class=""> | |||||
| <div class="border-b-2 border-black"> | |||||
| <div class="pl-44 text my-8 row-span-2 meta max-w-[65ch]"> | |||||
| {{ text|safe }} | |||||
| </div> | |||||
| <div class="std-margin text row-span-2 cell meta"> | |||||
| {{ text|safe }} | |||||
| </div> | </div> | ||||
| {% for tool in tools %} | {% for tool in tools %} | ||||
| {{ resource_small(tool) }} | |||||
| {{ resource_with_related(tool, 'Tool', 'Used by') }} | |||||
| {% endfor %} | {% endfor %} | ||||
| <div class="cell text-red-600"> | |||||
| MISSING :<br> | |||||
| {% for book in books %} | |||||
| Clusters of things (book + tool). SHow books and what tools they're made with, and "tagged" with practice and typology | |||||
| </div> | |||||
| <div class="cell text-red-600"> | |||||
| MISSING :<br> | |||||
| {{ resource_with_related(book, 'Book', 'Made with') }} | |||||
| {% endfor %} | |||||
| {% for tool in tools2 %} | |||||
| {{ resource_with_related(tool, 'Tool', 'Used by') }} | |||||
| {% endfor %} | |||||
| {% for book in books2 %} | |||||
| {{ resource_with_related(book, 'Book', 'Made with') }} | |||||
| {% endfor %} | |||||
| Lead into Typology with some examples and lead text | |||||
| </div> | |||||
| <div class="cell text-red-600"> | |||||
| MISSING :<br> | |||||
| Lead into Practices with some examples and lead text | |||||
| </div> | |||||
| </div> | </div> | ||||
| {% endblock %} | {% endblock %} |
+ 111
- 171
web/app/templates/resource.html
View File
| {% extends 'base.html' %} | {% extends 'base.html' %} | ||||
| {% block content %} | {% block content %} | ||||
| <div class="cell-margin"> | |||||
| <div class="cell-margin"> | |||||
| <h2 class="block-margin"> | |||||
| <div class="cell-margin grid gap-8 grid-cols-[2fr,1fr]"> | |||||
| <div class="left"> | |||||
| <div class="mb-2 capitalize">{{ resource['type'] }}</div> | |||||
| <h2 class="block-margin {{ resource['type'] }}"> | |||||
| {% block title %} | {% block title %} | ||||
| {% autoescape false %} | {% autoescape false %} | ||||
| {{ resource['name'] | replace(" ","<br>") }} | {{ resource['name'] | replace(" ","<br>") }} | ||||
| </h2> | </h2> | ||||
| {% if current_user.is_authenticated %} | {% if current_user.is_authenticated %} | ||||
| {% if resource['type'] == 'tool' %} | |||||
| <div class="row text-center py-3"> | |||||
| <a href="{{ url_for('tool.edit_tool', tool_id=resource['id']) }}"> | |||||
| <span class="">Edit</span> | |||||
| </a> | |||||
| </div> | |||||
| {% elif resource['type'] == 'practice' %} | |||||
| <div class="row text-center py-3"> | |||||
| <a href="{{ url_for('practice.edit_practice', practice_id=resource['id']) }}"> | |||||
| <span class="">Edit</span> | |||||
| </a> | |||||
| </div> | |||||
| {% endif %} | |||||
| {% if resource['type'] == 'tool' %} | |||||
| <div class="row text-center py-3"> | |||||
| <a href="{{ url_for('tool.edit_tool', tool_id=resource['id']) }}"> | |||||
| <span class="">Edit</span> | |||||
| </a> | |||||
| </div> | |||||
| {% elif resource['type'] == 'practice' %} | |||||
| <div class="row text-center py-3"> | |||||
| <a href="{{ url_for('practice.edit_practice', practice_id=resource['id']) }}"> | |||||
| <span class="">Edit</span> | |||||
| </a> | |||||
| </div> | |||||
| {% endif %} | |||||
| {% endif %} | {% endif %} | ||||
| <table class="table table-hover"> | |||||
| <tbody> | |||||
| <tr> | |||||
| <th> | |||||
| Created: | |||||
| </th> | |||||
| <td> | |||||
| {{ resource['created'].strftime("%Y-%m-%d %H:%M") }} UTC | |||||
| </td> | |||||
| </tr> | |||||
| {% if resource['description'] %} | |||||
| <tr> | |||||
| <th> | |||||
| Description: | |||||
| </th> | |||||
| <td> | |||||
| {{ resource['description'] }} | |||||
| </td> | |||||
| </tr> | |||||
| {% endif %} | |||||
| <!-- fields for tools --> | |||||
| {% if resource['developer'] %} | |||||
| <tr> | |||||
| <th> | |||||
| Developer | |||||
| </th> | |||||
| <td> | |||||
| {% if resource['developerUrl'] %} | |||||
| <a href="{{ resource['developerUrl'] }}">{{ resource['developer'] }}</a> | |||||
| {% else %} | |||||
| {{ resource['developer'] }} | |||||
| {% endif %} | |||||
| </td> | |||||
| </tr> | |||||
| {% endif %} | |||||
| {% if resource['license'] %} | |||||
| <tr> | |||||
| <th> | |||||
| Software license: | |||||
| </th> | |||||
| <td> | |||||
| {{ resource['license'] }} | |||||
| </td> | |||||
| </tr> | |||||
| {% endif %} | |||||
| {% if resource['scriptingLanguage'] %} | |||||
| <tr> | |||||
| <th> | |||||
| Software language(s): | |||||
| </th> | |||||
| <td> | |||||
| {{ resource['scriptingLanguage'] }} | |||||
| </td> | |||||
| </tr> | |||||
| {% endif %} | |||||
| {% if resource['projectUrl'] %} | |||||
| <tr> | |||||
| <th> | |||||
| Project page: | |||||
| </th> | |||||
| <td> | |||||
| <a href="{{ resource['projectUrl'] }}">{{ resource['projectUrl'] }}</a> | |||||
| </td> | |||||
| </tr> | |||||
| {% endif %} | |||||
| {% if resource['repositoryUrl'] %} | |||||
| <tr> | |||||
| <th> | |||||
| Code repository: | |||||
| </th> | |||||
| <td> | |||||
| <a href="{{ resource['repositoryUrl'] }}">{{ resource['repositoryUrl'] }}</a> | |||||
| </td> | |||||
| </tr> | |||||
| {% endif %} | |||||
| {% if resource['ingestFormats'] %} | |||||
| <tr> | |||||
| <th> | |||||
| Import / ingest formats: | |||||
| </th> | |||||
| <td> | |||||
| {{ resource['ingestFormats'] }} | |||||
| </td> | |||||
| </tr> | |||||
| {% endif %} | |||||
| {% if resource['outputFormats'] %} | |||||
| <tr> | |||||
| <th> | |||||
| Output formats: | |||||
| </th> | |||||
| <td> | |||||
| {{ resource['outputFormats'] }} | |||||
| </td> | |||||
| </tr> | |||||
| {% endif %} | |||||
| {% if resource['status'] %} | |||||
| <tr> | |||||
| <th> | |||||
| Platform status: | |||||
| </th> | |||||
| <td> | |||||
| {{ resource['status'] }} | |||||
| </td> | |||||
| </tr> | |||||
| {% endif %} | |||||
| <!-- fields for practices --> | |||||
| {% if resource['longDescription'] %} | |||||
| <tr> | |||||
| <th> | |||||
| Full description | |||||
| </th> | |||||
| <td> | |||||
| {{ resource['longDescription']|safe }} | |||||
| </td> | |||||
| </tr> | |||||
| {% endif %} | |||||
| {% if resource['experimental'] %} | |||||
| <tr> | |||||
| <th> | |||||
| Experimental uses | |||||
| </th> | |||||
| <td> | |||||
| {{ resource['experimental']|safe }} | |||||
| </td> | |||||
| </tr> | |||||
| {% endif %} | |||||
| {% if resource['considerations'] %} | |||||
| <tr> | |||||
| <th> | |||||
| Considerations | |||||
| </th> | |||||
| <td> | |||||
| <p style="white-space: pre-line">{{ resource['considerations']|safe }}</p> | |||||
| </td> | |||||
| </tr> | |||||
| {% endif %} | |||||
| {% if resource['references'] %} | |||||
| <tr> | |||||
| <th> | |||||
| References: | |||||
| </th> | |||||
| <td> | |||||
| <p style="white-space: pre-line">{{ resource['references']|safe }}</p> | |||||
| </td> | |||||
| </tr> | |||||
| {% endif %} | |||||
| </tbody> | |||||
| </table> | |||||
| <div class="facts"> | |||||
| {% if resource['description'] %} | |||||
| <div class=""> | |||||
| <h3>Description</h3> | |||||
| {{ resource['description'] }} | |||||
| </div> | |||||
| {% endif %} | |||||
| <!-- fields for tools --> | |||||
| {% if resource['developer'] %} | |||||
| <div class=""> | |||||
| <h3>Developer</h3> | |||||
| {% if resource['developerUrl'] %} | |||||
| <a href="{{ resource['developerUrl'] }}">{{ resource['developer'] }}</a> | |||||
| {% else %} | |||||
| {{ resource['developer'] }} | |||||
| {% endif %} | |||||
| </div> | |||||
| {% endif %} | |||||
| {% if resource['license'] %} | |||||
| <div class=""> | |||||
| <h3>Software license</h3> | |||||
| {{ resource['license'] }} | |||||
| </div> | |||||
| {% endif %} | |||||
| {% if resource['scriptingLanguage'] %} | |||||
| <div class=""> | |||||
| <h3>Software language(s)</h3> | |||||
| {{ resource['scriptingLanguage'] }} | |||||
| </div> | |||||
| {% endif %} | |||||
| {% if resource['projectUrl'] %} | |||||
| <div class=""> | |||||
| <h3>Project page</h3> | |||||
| <a href="{{ resource['projectUrl'] }}">{{ resource['projectUrl'] }}</a> | |||||
| </div> | |||||
| {% endif %} | |||||
| {% if resource['repositoryUrl'] %} | |||||
| <div class=""> | |||||
| <h3>Code repository</h3> | |||||
| <a href="{{ resource['repositoryUrl'] }}">{{ resource['repositoryUrl'] }}</a> | |||||
| </div> | |||||
| {% endif %} | |||||
| {% if resource['ingestFormats'] %} | |||||
| <div class=""> | |||||
| <h3>Import / ingest formats</h3> | |||||
| {{ resource['ingestFormats'] }} | |||||
| </div> | |||||
| {% endif %} | |||||
| {% if resource['outputFormats'] %} | |||||
| <div class=""> | |||||
| <h3>Output formats</h3> | |||||
| {{ resource['outputFormats'] }} | |||||
| </div> | |||||
| {% endif %} | |||||
| {% if resource['status'] %} | |||||
| <div class=""> | |||||
| <h3>Platform status</h3> | |||||
| {{ resource['status'] }} | |||||
| </div> | |||||
| {% endif %} | |||||
| <!-- fields for practices --> | |||||
| {% if resource['longDescription'] %} | |||||
| <div class="col-span-2"> | |||||
| <h3>Full description</h3> | |||||
| {{ resource['longDescription']|safe }} | |||||
| </div> | |||||
| {% endif %} | |||||
| {% if resource['experimental'] %} | |||||
| <div class="col-span-2"> | |||||
| <h3>Experimental uses</h3> | |||||
| {{ resource['experimental']|safe }} | |||||
| </div> | |||||
| {% endif %} | |||||
| {% if resource['considerations'] %} | |||||
| <div class="col-span-2"> | |||||
| <h3>Considerations</h3> | |||||
| <p>{{ resource['considerations']|safe }}</p> | |||||
| </div> | |||||
| {% endif %} | |||||
| {% if resource['references'] %} | |||||
| <div class="col-span-2"> | |||||
| <h3> References </h3> | |||||
| <p>{{ resource['references']|safe }}</p> | |||||
| </div> | |||||
| {% endif %} | |||||
| <div class=""> | |||||
| <h3>Created</h3> | |||||
| {{ resource['created'].strftime("%Y-%m-%d %H:%M") }} UTC | |||||
| </div> | |||||
| </div> | |||||
| </div> | </div> | ||||
| </div> | |||||
| {% if relationships %} | |||||
| <div class="grid lg:grid-cols-3"> | |||||
| {% for relationship in relationships %} | |||||
| {{ resource_small(relationship) }} | |||||
| {% endfor %} | |||||
| <div class="right lg:mt-16 max-w-[30rem] mx-auto p-4"> | |||||
| {{ relationships_links(relationships) }} | |||||
| </div> | </div> | ||||
| {% endif %} | |||||
| </div> | |||||
| {% endblock %} | {% endblock %} |
+ 70
- 103
web/app/templates/resources.html
View File
| <script> | <script> | ||||
| function filter() { | function filter() { | ||||
| return { | return { | ||||
| filterOpen: false, | |||||
| expandFilters: false, | |||||
| init() { | init() { | ||||
| // console.log(this.showRelated) | // console.log(this.showRelated) | ||||
| } | } | ||||
| } | } | ||||
| </script> | </script> | ||||
| <div class="" x-data="filter()"> | <div class="" x-data="filter()"> | ||||
| <div | |||||
| class="search fixed z-20 top-0 left-0 w-[20rem] h-screen bg-white cell-padding " | |||||
| x-show="filterOpen" | |||||
| style="box-shadow:0 0 2rem rgba(0,0,0,0.3)" | |||||
| @click.outside = "filterOpen = false" | |||||
| > | |||||
| <div class=" p-2 pt-4 gap-8 bg-white "> | |||||
| {% if practices_filter %} | |||||
| <details class="" open> | |||||
| <summary>Practices</summary> | |||||
| <div class=""> | |||||
| {% for practice in practices_filter %} | |||||
| <div {% if request.args.get('practice')==practice[0]|string %} class="active" {% endif %}> | |||||
| <a href="/{{type + 's'}}?practice={{practice[0]}}">{{ practice[1] }}</a> | |||||
| <div id="resources" :class="expandFilters?'expanded':''"> | |||||
| <div class="std-margin grid lg:grid-cols-4 mb-16"> | |||||
| {% if practices_filter %} | |||||
| <div class="hidden lg:block cursor-pointer" @click="expandFilters = !expandFilters">Show/hide filters</div> | |||||
| <div class=""> | |||||
| <div class="filter-header">Practices</div> | |||||
| <div class="filter-options my-4" x-show="expandFilters"> | |||||
| {% for practice in practices_filter %} | |||||
| <div {% if request.args.get('practice')==practice[0]|string %} class="active" {% endif %}> | |||||
| <a href="/{{type + 's'}}?practice={{practice[0]}}" hx-target="#resources" hx-select="#resources">{{ practice[1] }}</a> | |||||
| </div> | |||||
| {% endfor %} | |||||
| </div> | |||||
| </div> | |||||
| {% endif %} | |||||
| {% if year_filter %} | |||||
| <div class=""> | |||||
| <div class="filter-header">Year</div> | |||||
| <div class="filter-options my-4" x-show="expandFilters"> | |||||
| {% for year in year_filter %} | |||||
| <div {% if request.args.get('year')==year %} class="active" {% endif %}> | |||||
| <a href="/books?year={{year}}" hx-target="#resources" hx-select="#resources">{{ year }}</a> | |||||
| </div> | |||||
| {% endfor %} | |||||
| </div> | |||||
| </div> | |||||
| {% endif %} | |||||
| {% if typology_filter %} | |||||
| <div class=""> | |||||
| <div class="filter-header">Typology category</div> | |||||
| <div class="filter-options my-4" x-show="expandFilters"> | |||||
| {% for typology in typology_filter %} | |||||
| <div {% if request.args.get('typology')==typology %} class="active" {% endif %}> | |||||
| <a href="/books?typology={{typology}}" hx-target="#resources" hx-select="#resources">{{ typology }}</a> | |||||
| </div> | |||||
| {% endfor %} | |||||
| </div> | |||||
| </div> | |||||
| {% endif %} | |||||
| {% if languages_filter %} | |||||
| <div class="" > | |||||
| <div class="filter-header">Scripting languages</div> | |||||
| <div class="filter-options my-4" x-show="expandFilters"> | |||||
| {% for language in languages_filter %} | |||||
| <div {% if request.args.get('scriptingLanguage')==language %} class="active" {% endif %}> | |||||
| <a href="/tools?scriptingLanguage={{language}}" hx-target="#resources" hx-select="#resources">{{ language }}</a> | |||||
| </div> | |||||
| {% endfor %} | |||||
| </div> | |||||
| </div> | |||||
| {% endif %} | |||||
| {% if licenses_filter %} | |||||
| <div class="" > | |||||
| <div class="filter-header">License</div> | |||||
| <div class="filter-options my-4" x-show="expandFilters"> | |||||
| {% for license in licenses_filter %} | |||||
| <div {% if request.args.get('license')==license %} class="active" {% endif %}> | |||||
| <a href="/tools?license={{license}}" hx-target="#resources" hx-select="#resources">{{ license }}</a> | |||||
| </div> | |||||
| {% endfor %} | |||||
| </div> | |||||
| </div> | |||||
| {% endif %} | |||||
| </div> | </div> | ||||
| {% endfor %} | |||||
| </div> | |||||
| </details> | |||||
| {% endif %} | |||||
| {% if year_filter %} | |||||
| <details class=""> | |||||
| <summary>Year</summary> | |||||
| <div id="filter-year" class="collapse filter-items"> | |||||
| {% for year in year_filter %} | |||||
| <li {% if request.args.get('year')==year %} class="active" {% endif %}> | |||||
| <a href="/books?year={{year}}">{{ year }}</a> | |||||
| </li> | |||||
| {% endfor %} | |||||
| </div> | |||||
| </details> | |||||
| {% endif %} | |||||
| {% if typology_filter %} | |||||
| <details class=""> | |||||
| <summary class="">Typology category</summary> | |||||
| <div class=""> | |||||
| {% for typology in typology_filter %} | |||||
| <div {% if request.args.get('typology')==typology %} class="active" {% endif %}> | |||||
| <a href="/books?typology={{typology}}">{{ typology }}</a> | |||||
| </div> | |||||
| {% endfor %} | |||||
| </div> | |||||
| </details> | |||||
| {% endif %} | |||||
| {% if languages_filter %} | |||||
| <details class=""> | |||||
| <summary>Scripting languages</summary> | |||||
| <div class=""> | |||||
| {% for language in languages_filter %} | |||||
| <div {% if request.args.get('scriptingLanguage')==language %} class="active" {% endif %}> | |||||
| <a href="/tools?scriptingLanguage={{language}}">{{ language }}</a> | |||||
| </div> | |||||
| {% endfor %} | |||||
| </div> | |||||
| </details> | |||||
| {% endif %} | |||||
| {% if licenses_filter %} | |||||
| <details class="min-w-[10rem]"> | |||||
| <summary>License</summary> | |||||
| <div class=""> | |||||
| {% for license in licenses_filter %} | |||||
| <div {% if request.args.get('license')==license %} class="active" {% endif %}> | |||||
| <a href="/tools?license={{license}}">{{ license }}</a> | |||||
| <div> | |||||
| {% for resource in resources %} | |||||
| {{ resource_with_related(resource) }} | |||||
| {% endfor %} | |||||
| </div> | </div> | ||||
| {% endfor %} | |||||
| </div> | |||||
| </details> | |||||
| {% endif %} | |||||
| </div> | |||||
| </div> | |||||
| <div class="flex justify-between mx-4 my-8"> | |||||
| <div class="cursor-pointer" @click="filterOpen = true">← Show filters</div> | |||||
| <div class=""> | |||||
| <input type="checkbox" name="filter-open" x-model="showRelated" id=""> Also show everything related | |||||
| </div> | </div> | ||||
| </div> | |||||
| <div class="grid lg:grid-cols-3" x-show="!showRelated"> | |||||
| {% for resource in resources %} | |||||
| {{ resource_small(resource) }} | |||||
| {% endfor %} | |||||
| </div> | |||||
| <div x-show="showRelated"> | |||||
| {% for resource in resources %} | |||||
| <div class="w-full overflow-x-scroll"> | |||||
| <div class="grid lg:grid-rows-3 grid-flow-col mb-16"> | |||||
| <div class="w-[25rem] shrink-0 row-span-3 h-full"> | |||||
| {{ resource_small(resource) }} | |||||
| </div> | |||||
| <div class="w-[25rem] cell row-start-1"> | |||||
| Something Related | |||||
| </div> | |||||
| <div class="w-[25rem] cell shrink-0 row-start-1"> | |||||
| Something Related | |||||
| </div> | |||||
| <div class="w-[25rem] cell shrink-0 row-start-1"> | |||||
| Something Related | |||||
| </div> | |||||
| <div class="w-[25rem] cell shrink-0 row-start-1"> | |||||
| Something Related | |||||
| </div> | |||||
| </div> | |||||
| </div> | |||||
| {% endfor %} | |||||
| </div> | |||||
| </div> | </div> | ||||
| {% endblock %} | {% endblock %} |
+ 1
- 5
web/content/home.md
View File
| ## ExPub <br>Compendium | |||||
| The Experimental Publishing Compendium is for authors, designers, publishers, institutions and technologist who challenge, push and redefine the shape, form and rationale of scholarly works. The compendium offers a catalogues of tools, practices, and books to inspire experimental scholarly works. | |||||
| [About ExPub](/about) | |||||
| The Experimental Publishing Compendium is for authors, designers, publishers, institutions and technologist who challenge, push and redefine the shape, form and rationale of scholarly works. The compendium offers a catalogues of tools, practices, and books to inspire experimental scholarly works. [Read more](/about) |
Loading…