diff --git a/public/css/fonts.css b/public/css/fonts.css index 6e3a00d..48818ce 100644 --- a/public/css/fonts.css +++ b/public/css/fonts.css @@ -1,168 +1,161 @@ @font-face { font-family: "Poppins"; src: url('/public/fonts/Poppins/poppins-thin.woff2') format('woff2'), - url('/public/fonts/Poppins/poppins-thin.woff') format('woff'), - url('/public/fonts/Poppins/poppins-thin.otf') format('otf'); + url('/public/fonts/Poppins/poppins-thin.woff') format('woff'), + url('/public/fonts/Poppins/poppins-thin.otf') format('otf'); font-weight: 100; font-style: normal; - } +} @font-face { font-family: "Poppins"; src: url('/public/fonts/Poppins/poppins-thin-italic.woff2') format('woff2'), - url('/public/fonts/Poppins/poppins-thin-italic.woff') format('woff'), - url('/public/fonts/Poppins/poppins-thin-italic.otf') format('otf'); + url('/public/fonts/Poppins/poppins-thin-italic.woff') format('woff'), + url('/public/fonts/Poppins/poppins-thin-italic.otf') format('otf'); font-weight: 100; font-style: italic; - } - +} @font-face { font-family: "Poppins"; src: url('/public/fonts/Poppins/poppins-extralight.woff2') format('woff2'), - url('/public/fonts/Poppins/poppins-extralight.woff') format('woff'), - url('/public/fonts/Poppins/poppins-extralight.otf') format('otf'); + url('/public/fonts/Poppins/poppins-extralight.woff') format('woff'), + url('/public/fonts/Poppins/poppins-extralight.otf') format('otf'); font-weight: 200; font-style: normal; - } +} @font-face { font-family: "Poppins"; src: url('/public/fonts/Poppins/poppins-extralight-italic.woff2') format('woff2'), - url('/public/fonts/Poppins/poppins-extralight-italic.woff') format('woff'), - url('/public/fonts/Poppins/poppins-extralight-italic.otf') format('otf'); + url('/public/fonts/Poppins/poppins-extralight-italic.woff') format('woff'), + url('/public/fonts/Poppins/poppins-extralight-italic.otf') format('otf'); font-weight: 200; font-style: italic; - } +} @font-face { font-family: "Poppins"; src: url('/public/fonts/Poppins/poppins-light.woff2') format('woff2'), - url('/public/fonts/Poppins/poppins-light.woff') format('woff'), - url('/public/fonts/Poppins/poppins-light.otf') format('otf'); + url('/public/fonts/Poppins/poppins-light.woff') format('woff'), + url('/public/fonts/Poppins/poppins-light.otf') format('otf'); font-weight: 300; font-style: normal; - } - +} @font-face { font-family: "Poppins"; src: url('/public/fonts/Poppins/poppins-light-italic.woff2') format('woff2'), - url('/public/fonts/Poppins/poppins-light-italic.woff') format('woff'), - url('/public/fonts/Poppins/poppins-light-italic.otf') format('otf'); + url('/public/fonts/Poppins/poppins-light-italic.woff') format('woff'), + url('/public/fonts/Poppins/poppins-light-italic.otf') format('otf'); font-weight: 300; font-style: italic; - } +} @font-face { font-family: "Poppins"; src: url('/public/fonts/Poppins/poppins-regular.woff2') format('woff2'), - url('/public/fonts/Poppins/poppins-regular.woff') format('woff'), - url('/public/fonts/Poppins/poppins-regular.otf') format('otf'); + url('/public/fonts/Poppins/poppins-regular.woff') format('woff'), + url('/public/fonts/Poppins/poppins-regular.otf') format('otf'); font-weight: 400; font-style: normal; - } +} @font-face { font-family: "Poppins"; src: url('/public/fonts/Poppins/poppins-regular-italic.woff2') format('woff2'), - url('/public/fonts/Poppins/poppins-regular-italic.woff') format('woff'), - url('/public/fonts/Poppins/poppins-regular-italic.otf') format('otf'); + url('/public/fonts/Poppins/poppins-regular-italic.woff') format('woff'), + url('/public/fonts/Poppins/poppins-regular-italic.otf') format('otf'); font-weight: 400; font-style: italic; - } +} @font-face { font-family: "Poppins"; src: url('/public/fonts/Poppins/poppins-medium.woff2') format('woff2'), - url('/public/fonts/Poppins/poppins-medium.woff') format('woff'), - url('/public/fonts/Poppins/poppins-medium.otf') format('otf'); + url('/public/fonts/Poppins/poppins-medium.woff') format('woff'), + url('/public/fonts/Poppins/poppins-medium.otf') format('otf'); font-weight: 500; font-style: normal; - } +} @font-face { font-family: "Poppins"; src: url('/public/fonts/Poppins/poppins-medium-italic.woff2') format('woff2'), - url('/public/fonts/Poppins/poppins-medium-italic.woff') format('woff'), - url('/public/fonts/Poppins/poppins-medium-italic.otf') format('otf'); + url('/public/fonts/Poppins/poppins-medium-italic.woff') format('woff'), + url('/public/fonts/Poppins/poppins-medium-italic.otf') format('otf'); font-weight: 500; font-style: italic; - } +} @font-face { font-family: "Poppins"; src: url('/public/fonts/Poppins/poppins-semibold.woff2') format('woff2'), - url('/public/fonts/Poppins/poppins-semibold.woff') format('woff'), - url('/public/fonts/Poppins/poppins-semibold.otf') format('otf'); + url('/public/fonts/Poppins/poppins-semibold.woff') format('woff'), + url('/public/fonts/Poppins/poppins-semibold.otf') format('otf'); font-weight: 600; font-style: normal; - } +} @font-face { font-family: "Poppins"; src: url('/public/fonts/Poppins/poppins-semibold-italic.woff2') format('woff2'), - url('/public/fonts/Poppins/poppins-semibold-italic.woff') format('woff'), - url('/public/fonts/Poppins/poppins-semibold-italic.otf') format('otf'); + url('/public/fonts/Poppins/poppins-semibold-italic.woff') format('woff'), + url('/public/fonts/Poppins/poppins-semibold-italic.otf') format('otf'); font-weight: 600; font-style: italic; - } @font-face { font-family: "Poppins"; src: url('/public/fonts/Poppins/poppins-bold.woff2') format('woff2'), - url('/public/fonts/Poppins/poppins-bold.woff') format('woff'), - url('/public/fonts/Poppins/poppins-bold.otf') format('otf'); + url('/public/fonts/Poppins/poppins-bold.woff') format('woff'), + url('/public/fonts/Poppins/poppins-bold.otf') format('otf'); font-weight: 700; font-style: normal; - } @font-face { font-family: "Poppins"; src: url('/public/fonts/Poppins/poppins-bold-italic.woff2') format('woff2'), - url('/public/fonts/Poppins/poppins-bold-italic.woff') format('woff'), - url('/public/fonts/Poppins/poppins-bold-italic.otf') format('otf'); + url('/public/fonts/Poppins/poppins-bold-italic.woff') format('woff'), + url('/public/fonts/Poppins/poppins-bold-italic.otf') format('otf'); font-weight: 700; font-style: italic; - } @font-face { font-family: "Poppins"; src: url('/public/fonts/Poppins/poppins-extrabold.woff2') format('woff2'), - url('/public/fonts/Poppins/poppins-extrabold.woff') format('woff'), - url('/public/fonts/Poppins/poppins-extrabold.otf') format('otf'); + url('/public/fonts/Poppins/poppins-extrabold.woff') format('woff'), + url('/public/fonts/Poppins/poppins-extrabold.otf') format('otf'); font-weight: 800; font-style: normal; - } - @font-face { font-family: "Poppins"; src: url('/public/fonts/Poppins/poppins-extrabold-italic.woff2') format('woff2'), - url('/public/fonts/Poppins/poppins-extrabold-italic.woff') format('woff'), - url('/public/fonts/Poppins/poppins-extrabold-italic.otf') format('otf'); + url('/public/fonts/Poppins/poppins-extrabold-italic.woff') format('woff'), + url('/public/fonts/Poppins/poppins-extrabold-italic.otf') format('otf'); font-weight: 800; font-style: italic; - } +} @font-face { font-family: "Poppins"; src: url('/public/fonts/Poppins/poppins-black.woff2') format('woff2'), - url('/public/fonts/Poppins/poppins-black.woff') format('woff'), - url('/public/fonts/Poppins/poppins-black.otf') format('otf'); + url('/public/fonts/Poppins/poppins-black.woff') format('woff'), + url('/public/fonts/Poppins/poppins-black.otf') format('otf'); font-weight: 900; font-style: normal; - } +} @font-face { font-family: "Poppins"; src: url('/public/fonts/Poppins/poppins-black-italic.woff2') format('woff2'), - url('/public/fonts/Poppins/poppins-black-italic.woff') format('woff'), - url('/public/fonts/Poppins/poppins-black-italic.otf') format('otf'); + url('/public/fonts/Poppins/poppins-black-italic.woff') format('woff'), + url('/public/fonts/Poppins/poppins-black-italic.otf') format('otf'); font-weight: 900; font-style: italic; - } +} \ No newline at end of file diff --git a/public/css/general.css b/public/css/general.css index 8474153..c933b55 100644 --- a/public/css/general.css +++ b/public/css/general.css @@ -1,35 +1,74 @@ -.header { - width: 100%; - } +html { + box-sizing: border-box; +} -.headerMenu { - font-family: "Poppins"; - font-weight: 400; /*regular*/ - font-size: 1.25rem; /*20px*/ - color: #000; /*Noir pur*/ - display: flex; - flex-flow: row; - justify-content: space-around; - align-items: center; - } +*, +*:before, +*:after { + box-sizing: inherit; +} -.headerMenuElement:hover { - border-bottom: 5px #FF563C solid; /*Orange Highlight*/ - cursor: pointer; - } +img { + max-width: 100%; +} + +body { + margin: 0; + padding-top: 60px; +} + +ul { + margin: 0; +} + +.wrapper { + max-width: 375px; + width: calc(100% - var(5px)); + margin: 0 auto; +} .heading1 { font-family: "Poppins"; - font-weight: 600; /*semi-bold*/ - font-size: 6rem; /*96px*/ - color: #394596; /*Bleu AGECEM*/ + font-weight: 600; + /*semi-bold*/ + font-size: 3rem; + /*48px*/ + color: #394596; + /*Bleu AGECEM*/ text-align: center; - } +} .heading2 { font-family: "Poppins"; - font-weight: 600; /*semi-bold*/ - font-size: 1.5rem; /*24px*/ - color: #394596; /*Bleu AGECEM*/ + font-weight: 300; + /*light*/ + font-size: 1rem; + /*16px*/ + color: #394596; + /*Bleu AGECEM*/ text-align: center; - } \ No newline at end of file +} + +@media screen and (min-width: 768px) { + .wrapper { + max-width: 768px; + width: calc(100% - var(15px)); + } + + .heading1 { + font-size: 4rem; + /*64px*/ + } + + .heading2 { + font-size: 1.5rem; + /*24px*/ + } +} + +@media screen and (min-width: 1140px) { + .wrapper { + max-width: 1140px; + width: calc(100% - var(30px)); + } +} \ No newline at end of file diff --git a/public/css/header.css b/public/css/header.css new file mode 100644 index 0000000..7521bc2 --- /dev/null +++ b/public/css/header.css @@ -0,0 +1,107 @@ +.header { + position: fixed; + z-index: 20; + width: 100%; + top: 0; + background-color: #fff; + height: 60px; +} + +.headerWrapper { + display: flex; + flex-flow: row; + align-items: center; + justify-content: space-between; + padding: 5px; +} + +a { + color: #000; + text-decoration: none; +} + +a:visited { + color: #000; + text-decoration: none; +} + +.headerMenu { + background-color: #fff; + font-family: "Poppins"; + font-weight: 400; + /*regular*/ + font-size: 1.25rem; + /*20px*/ + list-style: none; + display: none; + width: 100%; +} + +.headerMenuElement { + padding-bottom: 5px; + margin: 0; +} + +.headerMenuElement:hover { + border-bottom: 5px #FF563C solid; + /*Orange Highlight*/ + cursor: pointer; + padding-bottom: 0; +} + +.headerMenuHamburger { + height: 50px; + width: 50px; + cursor: pointer; +} + +.headerMenuMobile { + font-family: "Poppins"; + font-weight: 400; + /*regular*/ + font-size: 2rem; + /*32px*/ + list-style: none; + display: none; +} + +.nav-is-active { + background-color: #fff; + display: flex; + flex-flow: column; + justify-content: center; + align-items: center; + text-align: left; + position: fixed; + top: 75px; + width: 100%; + height: 90%; + margin: 0; + padding: auto; +} + +/* Le header s'affiche en menu hamburger pour les breakpoints téléphone et tablette */ +@media screen and (min-width: 778px) { + .nav-is-active { + font-size: 2rem; + /*32px*/ + } +} + +/* Les éléments du header s'affichent pour le breakpoint ordinateur */ +@media screen and (min-width: 1140px) { + .headerMenu { + display: flex; + flex-flow: row; + justify-content: space-around; + align-items: center; + } + + .headerMenuHamburger { + display: none; + } + + .nav-is-active { + display: none; + } +} \ No newline at end of file diff --git a/public/icones/agecem-logo.svg b/public/icones/agecem-logo.svg new file mode 100644 index 0000000..f6bc9ee --- /dev/null +++ b/public/icones/agecem-logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/icones/hamburger-menu.svg b/public/icones/hamburger-menu.svg new file mode 100644 index 0000000..2fc43ca --- /dev/null +++ b/public/icones/hamburger-menu.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/js/header.js b/public/js/header.js new file mode 100644 index 0000000..e69de29 diff --git a/public/public.go b/public/public.go index 524b521..585aafd 100644 --- a/public/public.go +++ b/public/public.go @@ -10,7 +10,7 @@ package public import "embed" -//go:embed css/*.css js/*.js fonts/* +//go:embed css/*.css js/*.js fonts/* icones/* var publicFS embed.FS func GetPublicFS() embed.FS { diff --git a/templates/html/admin-upload.gohtml b/templates/html/admin-upload.gohtml index 9200b03..c7afd53 100644 --- a/templates/html/admin-upload.gohtml +++ b/templates/html/admin-upload.gohtml @@ -1,17 +1,16 @@ {{ define "admin-upload-html" }} - - - - - AGECEM - {{ template "general-html" }} - - - {{ template "header-html" }} -

Upload

-
+ + + + + AGECEM + {{ template "general-html" }} + + + {{ template "header-html" }} +

Upload

+ - -
-

{{ .Message }}

- - + +

{{ .Message }}

+ + {{ end }} diff --git a/templates/html/admin.gohtml b/templates/html/admin.gohtml index 8308583..edcf8c4 100644 --- a/templates/html/admin.gohtml +++ b/templates/html/admin.gohtml @@ -1,17 +1,17 @@ {{ define "admin-html" }} - - - - - AGECEM - {{ template "general-html" }} - - - {{ template "header-html" }} -

Admin

- + + {{ end }} diff --git a/templates/html/documentation.gohtml b/templates/html/documentation.gohtml index ab846ed..02849a2 100644 --- a/templates/html/documentation.gohtml +++ b/templates/html/documentation.gohtml @@ -1,16 +1,17 @@ {{ define "documentation-html" }} - - - - - AGECEM | Documentation - {{ template "general-html" }} - - - {{ template "header-html" }} -

Documentation

-

- {{ range . }} + + + + + AGECEM | Documentation + {{ template "general-html" }} + + + {{ template "header-html" }} +

+

Documentation

+

+ {{ range . }} {{ $bucket_name := .Name }} {{ $bucket_display_name := .DisplayName }}

@@ -22,8 +23,9 @@ {{ end}}
- {{ end }} -

- - + {{ end }} +

+
+ + {{ end }} diff --git a/templates/html/formulaires.gohtml b/templates/html/formulaires.gohtml index b60fd64..795c028 100644 --- a/templates/html/formulaires.gohtml +++ b/templates/html/formulaires.gohtml @@ -1,14 +1,14 @@ {{ define "formulaires-html" }} - - - - - AGECEM | Formulaires - {{ template "general-html" }} - - - {{ template "header-html" }} -

Formulaires

- - + + + + + AGECEM | Formulaires + {{ template "general-html" }} + + + {{ template "header-html" }} +

Formulaires

+ + {{ end }} diff --git a/templates/html/general.gohtml b/templates/html/general.gohtml index eefcdc7..35f7d8a 100644 --- a/templates/html/general.gohtml +++ b/templates/html/general.gohtml @@ -1,4 +1,11 @@ {{ define "general-html" }} + + {{ end }} diff --git a/templates/html/header.gohtml b/templates/html/header.gohtml index c4e3185..ba018eb 100644 --- a/templates/html/header.gohtml +++ b/templates/html/header.gohtml @@ -1,13 +1,20 @@ {{ define "header-html" }} - -
- -
- - +
+
+ + + +
+ +
{{ end }} diff --git a/templates/html/index.gohtml b/templates/html/index.gohtml index ece7076..dab01aa 100644 --- a/templates/html/index.gohtml +++ b/templates/html/index.gohtml @@ -1,15 +1,18 @@ {{ define "index-html" }} - - - - - AGECEM - {{ template "general-html" }} - - - - {{ template "header-html" }} -

Association Générale Étudiante du Cégep Édouard-Montpetit

- - + + + + + AGECEM + {{ template "general-html" }} + + + + {{ template "header-html" }} +
+

AGECEM

+

Association Générale Étudiante du Cégep Édouard-Montpetit

+
+ + {{ end }} diff --git a/templates/html/vie-etudiante.gohtml b/templates/html/vie-etudiante.gohtml index fd1bb24..893e770 100644 --- a/templates/html/vie-etudiante.gohtml +++ b/templates/html/vie-etudiante.gohtml @@ -1,14 +1,16 @@ {{ define "vie-etudiante-html" }} - - - - - AGECEM | Vie étudiante - {{ template "general-html" }} - - - {{ template "header-html" }} -

Vie étudiante

- - + + + + + AGECEM | Vie étudiante + {{ template "general-html" }} + + + {{ template "header-html" }} +
+

Vie étudiante

+
+ + {{ end }}