diff --git a/Makefile b/Makefile index 01f7754..ee4d2df 100644 --- a/Makefile +++ b/Makefile @@ -8,4 +8,4 @@ frontend: .PHONY: backend backend: - go build -v -o ./out/backend/server ./cmd/server + go build -v -o ./out/server ./cmd/server diff --git a/README.md b/README.md index 47e66d8..e3ce6fa 100644 --- a/README.md +++ b/README.md @@ -8,25 +8,23 @@ Come usare questo progetto ### Development -TODO: ... - ```sh -$ todo ... +# Start the backend server and the frontend development server +$ go run -v ./cmd/dev-server + +# Or using entr lo get live reload for go files +$ fd -e go | entr -r go run -v ./cmd/dev-server ``` ### Production -TODO: ... - ```sh -$ todo ... +$ go run ./cmd/server ``` ### Deploy -TODO: ... - ```sh -$ todo ... +$ make all ``` diff --git a/astro.config.js b/astro.config.js index 8893897..e2323ab 100644 --- a/astro.config.js +++ b/astro.config.js @@ -2,7 +2,7 @@ import { defineConfig } from 'astro/config' // https://astro.build/config export default defineConfig({ - publicDir: './frontend/public', - srcDir: './frontend', - outDir: './out/frontend', + publicDir: './client/public', + srcDir: './client', + outDir: './out/client', }) diff --git a/client/env.d.ts b/client/env.d.ts new file mode 100644 index 0000000..8c34fb4 --- /dev/null +++ b/client/env.d.ts @@ -0,0 +1 @@ +/// \ No newline at end of file diff --git a/client/layouts/BaseLayout.astro b/client/layouts/BaseLayout.astro index 9343220..4286302 100644 --- a/client/layouts/BaseLayout.astro +++ b/client/layouts/BaseLayout.astro @@ -1,5 +1,11 @@ --- -const { title, description, thumbnail } = Astro.props +import '@fontsource/open-sans/latin.css' +import '@fontsource/source-sans-pro/latin.css' +import '@fontsource/source-code-pro/latin.css' + +import '../styles/main.scss' + +const { title, description, thumbnail, pageName } = Astro.props --- @@ -16,7 +22,7 @@ const { title, description, thumbnail } = Astro.props {title} - + diff --git a/client/layouts/PageLayout.astro b/client/layouts/PageLayout.astro index 5cbbb0d..8a34aaf 100644 --- a/client/layouts/PageLayout.astro +++ b/client/layouts/PageLayout.astro @@ -3,15 +3,20 @@ import BaseLayout from './BaseLayout.astro' --- - +
+ +
+ Utenti + Notizie + Progetti + About + Accedi +
+
+
© PHC 2023
 diff --git a/client/pages/index.astro b/client/pages/index.astro index ba2df7a..b0ffab1 100644 --- a/client/pages/index.astro +++ b/client/pages/index.astro @@ -1,7 +1,198 @@ --- -import BaseLayout from '../layouts/BaseLayout.astro' +import PageLayout from '../layouts/PageLayout.astro' --- - -

Homepage

- + +
+
+ +
+ +
+
Cos'è il PHC?
+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam vero deserunt tempore reprehenderit atque, voluptate + dolorum excepturi libero pariatur sequi? +

+

+ Laboriosam soluta ab a illum mollitia quaerat quia, veniam consequatur expedita dolore autem reiciendis quae rem + excepturi optio? Maiores, hic? +

+

+ Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem error atque amet. Tempora earum nemo eveniet + aspernatur quam quas, doloribus expedita quisquam dignissimos cupiditate inventore a modi optio harum veritatis, + adipisci ab ullam distinctio odio quod delectus ipsum, rerum animi. +

+
+
+
+
+
+ + + + + + + + +
+ +
Ultime Notizie
+ +
+
+
Lorem ipsum dolor sit.
+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis reprehenderit porro omnis enim deleniti esse quos, + architecto adipisci veritatis, iusto perferendis aperiam recusandae exercitationem doloribus, illum commodi + voluptatem pariatur eius! +

+

+ Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt possimus rerum expedita dicta + nesciunt enim mollitia iure ullam aut, pariatur, at cumque. Nemo obcaecati eaque recusandae fugit sed! +

+
+
+
+
Tempore provident impedit libero?
+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis reprehenderit porro omnis enim deleniti esse quos, + architecto adipisci veritatis, iusto perferendis aperiam recusandae exercitationem doloribus, illum commodi + voluptatem pariatur eius! +

+

+ Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt possimus rerum expedita dicta + nesciunt enim mollitia iure ullam aut, pariatur, at cumque. Nemo obcaecati eaque recusandae fugit sed! +

+

+ Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt possimus rerum expedita dicta + nesciunt enim mollitia iure ullam aut, pariatur, at cumque. Nemo obcaecati eaque recusandae fugit sed! +

+

+ Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt possimus rerum expedita dicta + nesciunt enim mollitia iure ullam aut, pariatur, at cumque. Nemo obcaecati eaque recusandae fugit sed! +

+
+
+
+
Alias molestias consectetur quam
+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis reprehenderit porro omnis enim deleniti esse quos, + architecto adipisci veritatis, iusto perferendis aperiam recusandae exercitationem doloribus, illum commodi + voluptatem pariatur eius! +

+
+
+
+
Inventore dignissimos sapiente nulla
+
+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis reprehenderit porro omnis enim deleniti esse quos, + architecto adipisci veritatis, iusto perferendis aperiam recusandae exercitationem doloribus, illum commodi + voluptatem pariatur eius! +

+

+ Impedit ut quod aspernatur vitae vero incidunt cupiditate perferendis explicabo sunt possimus rerum expedita dicta + nesciunt enim mollitia iure ullam aut, pariatur, at cumque. Nemo obcaecati eaque recusandae fugit sed! +

+
+
+
+ + Vai all'Archivio +
+
+
+ + + + + + + + +
+ +
Progetti
+ +
+ +
+
+
+
+
Gitea
+
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus quam iure dolor. Excepturi facere, ipsa + accusantium labore explicabo quaerat incidunt. +
+
+ + +
+
+
+
+
Zulip
+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus, veritatis.
+
+ + +
+
+
+
+
Orario
+
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus quam iure dolor. Excepturi facere, ipsa + accusantium labore explicabo quaerat incidunt. +
+
+ + +
+
+
+
+
Problemi
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, hic libero beatae voluptatem incidunt. +
+
+ + +
+
+
+
+
Cluster "Steffè"
+
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus quam iure dolor. Excepturi facere, ipsa + accusantium labore explicabo quaerat incidunt. +
+
+ +
+
+
+
+ + + + + + + + +
+ +
Vuoi diventare macchinsta?
+
+ diff --git a/client/public/images/logo-circuit-board.svg b/client/public/images/logo-circuit-board.svg new file mode 100644 index 0000000..1e65c1c --- /dev/null +++ b/client/public/images/logo-circuit-board.svg @@ -0,0 +1,87 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/public/images/logo-circuit-board@100w.png b/client/public/images/logo-circuit-board@100w.png new file mode 100644 index 0000000..44b629f Binary files /dev/null and b/client/public/images/logo-circuit-board@100w.png differ diff --git a/client/public/images/logo-circuit-board@1x.png b/client/public/images/logo-circuit-board@1x.png new file mode 100644 index 0000000..c60a039 Binary files /dev/null and b/client/public/images/logo-circuit-board@1x.png differ diff --git a/client/public/images/scritta-h.jpg b/client/public/images/scritta-h.jpg new file mode 100644 index 0000000..979c7d9 Binary files /dev/null and b/client/public/images/scritta-h.jpg differ diff --git a/client/public/images/scritta-t-mini.jpg b/client/public/images/scritta-t-mini.jpg new file mode 100644 index 0000000..11d197a Binary files /dev/null and b/client/public/images/scritta-t-mini.jpg differ diff --git a/client/public/images/scritta-t.jpg b/client/public/images/scritta-t.jpg new file mode 100644 index 0000000..b10289a Binary files /dev/null and b/client/public/images/scritta-t.jpg differ diff --git a/client/public/images/scritta.jpg b/client/public/images/scritta.jpg new file mode 100644 index 0000000..335260e Binary files /dev/null and b/client/public/images/scritta.jpg differ diff --git a/client/public/images/zigzag.svg b/client/public/images/zigzag.svg new file mode 100644 index 0000000..39a154b --- /dev/null +++ b/client/public/images/zigzag.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/client/styles/main.scss b/client/styles/main.scss new file mode 100644 index 0000000..d047b4e --- /dev/null +++ b/client/styles/main.scss @@ -0,0 +1,464 @@ +*, +*::before, +*::after { + box-sizing: border-box; + font: inherit; + margin: 0; +} + +html, +body { + min-height: 100%; + height: 100%; + margin: 0; + + font-family: 'Open Sans', sans-serif; + font-size: 18px; + color: #222; +} + +html { + scroll-snap-type: y proximity; + scroll-padding-top: 4rem; +} + +img { + display: block; +} + +a { + color: inherit; + text-decoration: none; +} + +// +// Typography +// + +.text { + display: block; + + line-height: 1.5; + + p + p { + margin-top: 0.5rem; + } +} + +// +// Controls +// + +button, +.button, +[role='button'] { + appearance: none; + + background: #fff; + + border: 3px solid #222; + border-radius: 6px; + box-shadow: 4px 4px 0 0 #222; + + transition: all 64ms linear; + + &:hover { + background: #f0f0f0; + } + + &:active { + transform: translate(2px, 2px); + box-shadow: 2px 2px 0 0 #222; + } + + padding: 0.25rem 1.5rem; + + text-decoration: none; + color: #222; + + font-family: 'Source Sans Pro', sans-serif; + font-weight: 600; + + &.primary { + background: #1e6733; + color: #f4fef7; + + &:hover { + background: #2b8b47; + } + } +} + +// +// Pages +// + +header { + z-index: 10; + + height: 6rem; + border-bottom: 4px solid #222; + background: #fff; + + position: fixed; + width: 100%; + + display: flex; + align-items: center; + justify-content: space-between; + + .logo { + padding-left: 0.5rem; + + img { + height: 4rem; + } + } + + .links { + display: flex; + align-items: center; + gap: 1.5rem; + + padding: 0 1.5rem; + + a { + font-size: 22px; + font-weight: 600; + } + } +} + +footer { + min-height: 6rem; + border-top: 4px solid #222; + background: #444; + color: #fdfdfd; + + display: grid; + place-content: center; + + font-family: 'Source Sans Pro', sans-serif; + font-size: 20px; +} + +.page-homepage { + header .logo { + visibility: hidden; + } + + section { + position: relative; + + min-height: calc(100vh - 6rem); + + &:last-of-type { + min-height: calc(100vh - 10rem); + } + + display: flex; + flex-direction: column; + align-items: center; + + gap: 2rem; + + scroll-snap-align: start; + + & > .title { + font-weight: 700; + font-size: 60px; + + font-family: 'Source Sans Pro', sans-serif; + + padding-top: 4rem; + } + } + + .zig-zag { + z-index: 5; + + position: absolute; + width: 100%; + + display: flex; + + &:first-child { + bottom: 100%; + } + } + + section.principal { + z-index: -2; + + min-height: calc(100vh - 2rem); + + flex-direction: row; + align-items: center; + justify-content: center; + gap: 6rem; + + padding: 6rem 0; + + background: #f0f0f0; + + flex-wrap: wrap; + + position: relative; + + .circuit-layer { + z-index: -1; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + } + + .logo { + max-width: 35rem; + position: relative; + + user-select: none; + + img { + width: 100%; + filter: drop-shadow(8px 8px 0 #222) drop-shadow(4px 0 0 #222) drop-shadow(0 4px 0 #222) drop-shadow(-4px 0 0 #222) + drop-shadow(0 -4px 0 #222); + } + } + + .whats-phc { + background: #e0e0e0; + + border: 4px solid #222; + border-radius: 8px; + box-shadow: 6px 6px 0 0 #222; + + padding: 2rem; + + max-width: 37rem; + + display: flex; + flex-direction: column; + align-items: center; + + gap: 1rem; + + .title { + font-family: 'Source Sans Pro', sans-serif; + font-weight: 700; + font-size: 40px; + } + + .content { + @extend .text; + } + } + } + + section.news { + background: #c2a8eb; + + gap: 3rem; + + padding-bottom: 6rem; + + .news-list { + display: flex; + flex-direction: row; + gap: 3rem; + + padding: 0 3rem; + + justify-content: center; + flex-wrap: wrap; + + .news { + background: #fffbeb; + + border: 3px solid #222; + border-radius: 9px; + box-shadow: 9px 9px 0 0 #222; + + display: flex; + flex-direction: column; + + width: 22rem; + max-height: 27rem; + + ::-webkit-scrollbar { + width: 10px; + } + + ::-webkit-scrollbar-thumb { + background-color: #c67e14; + border: 2px solid #222; + + &:hover { + background-color: #e69419; + } + } + + a { + font-weight: 600; + text-decoration: none; + color: #c67e14; + + &:hover { + text-decoration: underline solid 2px; + } + } + + & > .title { + // border-bottom: 2px solid #222; + + border-top-left-radius: 9px; + border-top-right-radius: 9px; + + padding: 1rem; + background: #f8e8b1; + + font-family: 'Source Sans Pro', sans-serif; + font-weight: 700; + font-size: 32px; + } + & > .abstract { + flex-grow: 1; + + padding: 1rem; + + overflow-y: auto; + + @extend .text; + } + & > .continue { + padding: 1rem; + + display: grid; + align-items: end; + justify-content: end; + } + } + } + + [role='button'] { + padding: 0.5rem 2rem; + + &.primary { + // background: #824ed4; + // color: #f0e6ff; + background: #f8e8b1; + color: #000d; + + &:hover { + // background: #8e5ddd; + } + } + } + } + + section.projects { + background: #ccf5ce; + + padding-bottom: 6rem; + + .project-list { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); + gap: 3rem; + + padding: 0 6rem; + + align-items: start; + + .project { + // background: #fcddff; + background: #f5cecc; + color: #000e; + + border: 3px solid #222; + border-radius: 9px; + box-shadow: 9px 9px 0 0 #222; + + padding: 1rem; + + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: auto 1fr; + + gap: 0.25rem 1rem; + + .title { + font-family: 'Source Sans Pro', sans-serif; + font-weight: 700; + font-size: 32px; + } + + .image { + grid-row: span 2; + // place-self: center; + + .box { + background: #0003; + border: 3px solid #0006; + border-radius: 6px; + width: 5rem; + height: 5rem; + } + } + + .description { + font-size: 16px; + } + + transition: all 128ms ease-out; + + &:hover { + transform: translate(0, -8px); + } + } + } + } + + section.wanna-be-macchinista { + background: #888; + color: #fdfdfd; + } +} + +// +// Misc +// + +::-webkit-scrollbar-track:vertical { + background-color: #f0f0f0; + border-left: 2px solid #222; + border-top: 2px solid #222; + border-bottom: 2px solid #222; +} + +::-webkit-scrollbar-track:horizontal { + background-color: #f0f0f0; + border-top: 2px solid #222; + border-left: 2px solid #222; + border-right: 2px solid #222; +} + +::-webkit-scrollbar-thumb { + background-color: #1e6733; + border: 2px solid #222; +} + +::-webkit-scrollbar-thumb:hover { + background-color: #2b8b47; +} + +::-webkit-scrollbar-corner { + background-color: #f0f0f0; + // border-left: 2px solid #222; + // border-top: 2px solid #222; +} + +::-webkit-scrollbar { + width: 15px; +} diff --git a/frontend/env.d.ts b/frontend/env.d.ts new file mode 100644 index 0000000..8c34fb4 --- /dev/null +++ b/frontend/env.d.ts @@ -0,0 +1 @@ +/// \ No newline at end of file diff --git a/package.json b/package.json index bcf054c..33ad755 100644 --- a/package.json +++ b/package.json @@ -2,6 +2,7 @@ "name": "website-frontend", "version": "1.0.0", "description": "Frontend for the PHC website", + "type": "module", "scripts": { "dev": "astro dev", "start": "astro dev", @@ -10,6 +11,9 @@ }, "license": "MIT", "dependencies": { + "@fontsource/open-sans": "^4.5.14", + "@fontsource/source-code-pro": "^4.5.14", + "@fontsource/source-sans-pro": "^4.5.11", "astro": "^2.3.1", "sass": "^1.62.1" } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 89c92b6..365f383 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,10 +1,16 @@ lockfileVersion: 5.4 specifiers: + '@fontsource/open-sans': ^4.5.14 + '@fontsource/source-code-pro': ^4.5.14 + '@fontsource/source-sans-pro': ^4.5.11 astro: ^2.3.1 sass: ^1.62.1 dependencies: + '@fontsource/open-sans': 4.5.14 + '@fontsource/source-code-pro': 4.5.14 + '@fontsource/source-sans-pro': 4.5.11 astro: 2.3.1_sass@1.62.1 sass: 1.62.1 @@ -541,6 +547,18 @@ packages: dev: false optional: true + /@fontsource/open-sans/4.5.14: + resolution: {integrity: sha512-mBXIIETBlW8q/ocuUN0hyGow2iuf75hQEHQt8R/RJ/HcphVbLg8KB7pHYGbFGDqs75W+SWvTC7JkVeAjT65BuQ==} + dev: false + + /@fontsource/source-code-pro/4.5.14: + resolution: {integrity: sha512-EWE0djE7wFCBmExWa9oT1vIp+qj5MUroVvXWb9G7Ig4t4aXDd9QDidYZzMzNemb8gQxTdOzGmhx6EZnDTFMh5Q==} + dev: false + + /@fontsource/source-sans-pro/4.5.11: + resolution: {integrity: sha512-f7iw44q1EjBv3MNcHCGAgrW/QVyweaEouFsJzykPhTOGnZFSwFJRISToXornOmuAy7xUUGiVdqOLiykgZoYB8A==} + dev: false + /@jridgewell/gen-mapping/0.3.3: resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==} engines: {node: '>=6.0.0'}