diff --git a/src/app/app.component.html b/src/app/app.component.html index 32ced6ff..7cdbfbe8 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,9 +1,5 @@ -
- +
+

Frama date @@ -13,7 +9,9 @@ -

+ - - +
+ +
+ \ No newline at end of file diff --git a/src/app/app.component.scss b/src/app/app.component.scss index e69de29b..68a285a8 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -0,0 +1,15 @@ +@charset "UTF-8"; + +header { + h1, + a { + &::before, + &::after { + display: none; + } + } +} + +i { + display: block; +} \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 20079e20..0afe6d53 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -20,6 +20,7 @@ import { PicturesComponent } from './pages/pictures/pictures.component'; import { AnswersComponent } from './pages/answers/answers.component'; import { EndConfirmationComponent } from './pages/end-confirmation/end-confirmation.component'; import { CreateOrRetrieveComponent } from './page/create-or-retrieve/create-or-retrieve.component'; +import { CalendarComponent } from './calendar/calendar.component'; import { registerLocaleData } from '@angular/common'; import localeFr from '@angular/common/locales/fr'; @@ -42,6 +43,7 @@ registerLocaleData(localeFr, 'fr'); AnswersComponent, EndConfirmationComponent, CreateOrRetrieveComponent, + CalendarComponent, ], imports: [ diff --git a/src/app/calendar/calendar.component.html b/src/app/calendar/calendar.component.html new file mode 100644 index 00000000..6d8082c2 --- /dev/null +++ b/src/app/calendar/calendar.component.html @@ -0,0 +1 @@ +

calendar works!

diff --git a/src/app/calendar/calendar.component.html.save b/src/app/calendar/calendar.component.html.save new file mode 100644 index 00000000..8b137891 --- /dev/null +++ b/src/app/calendar/calendar.component.html.save @@ -0,0 +1 @@ + diff --git a/src/app/calendar/calendar.component.scss b/src/app/calendar/calendar.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/calendar/calendar.component.spec.ts b/src/app/calendar/calendar.component.spec.ts new file mode 100644 index 00000000..205a029d --- /dev/null +++ b/src/app/calendar/calendar.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CalendarComponent } from './calendar.component'; + +describe('CalendarComponent', () => { + let component: CalendarComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ CalendarComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CalendarComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/calendar/calendar.component.ts b/src/app/calendar/calendar.component.ts new file mode 100644 index 00000000..a16dd09f --- /dev/null +++ b/src/app/calendar/calendar.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'framadate-calendar', + templateUrl: './calendar.component.html', + styleUrls: ['./calendar.component.scss'] +}) +export class CalendarComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/page/create-or-retrieve/create-or-retrieve.component.html b/src/app/page/create-or-retrieve/create-or-retrieve.component.html index 833eb1b8..d9755fbe 100644 --- a/src/app/page/create-or-retrieve/create-or-retrieve.component.html +++ b/src/app/page/create-or-retrieve/create-or-retrieve.component.html @@ -11,7 +11,6 @@

C'est parti @@ -36,7 +35,6 @@ name="mail" id="email" autofocus="autofocus" - placeholder="mon e-mail" /> - + Création - + Les Dates - + Réponses - + Visibilité - + Base - + Images - + Résumé - + Page démo - + Accueil - + \ No newline at end of file diff --git a/src/app/ui/navigation/navigation.component.scss b/src/app/ui/navigation/navigation.component.scss index e69de29b..87f2205e 100644 --- a/src/app/ui/navigation/navigation.component.scss +++ b/src/app/ui/navigation/navigation.component.scss @@ -0,0 +1,27 @@ +@charset "UTF-8"; + +nav { + text-align: center; + margin-bottom: 3.2rem; + padding-top: 1.6rem; + padding-bottom: 1.6rem; + border-top: 2px solid #ffd52c; + border-bottom: 2px solid #ffd52c; + + a { + &::before { + display: inline-block; + position: relative; + width: auto; + background: none; + } + &::after { + display: none; + } + + &:not(:first-of-type)::before { + content: ' | '; + + } + } +} diff --git a/src/assets/css/bootstrap-reboot-4.3.1.css b/src/assets/css/bootstrap-reboot-4.3.1.css new file mode 100644 index 00000000..6594c949 --- /dev/null +++ b/src/assets/css/bootstrap-reboot-4.3.1.css @@ -0,0 +1,331 @@ +/*! + * Bootstrap Reboot v4.3.1 (https://getbootstrap.com/) + * Copyright 2011-2019 The Bootstrap Authors + * Copyright 2011-2019 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md) + */ + *, + *::before, + *::after { + box-sizing: border-box; + } + + html { + font-family: sans-serif; + line-height: 1.15; + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + } + + article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { + display: block; + } + + body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + color: #212529; + text-align: left; + background-color: #fff; + } + + [tabindex="-1"]:focus { + outline: 0 !important; + } + + hr { + box-sizing: content-box; + height: 0; + overflow: visible; + } + + h1, h2, h3, h4, h5, h6 { + margin-top: 0; + margin-bottom: 0.5rem; + } + + p { + margin-top: 0; + margin-bottom: 1rem; + } + + abbr[title], + abbr[data-original-title] { + text-decoration: underline; + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; + cursor: help; + border-bottom: 0; + -webkit-text-decoration-skip-ink: none; + text-decoration-skip-ink: none; + } + + address { + margin-bottom: 1rem; + font-style: normal; + line-height: inherit; + } + + ol, + ul, + dl { + margin-top: 0; + margin-bottom: 1rem; + } + + ol ol, + ul ul, + ol ul, + ul ol { + margin-bottom: 0; + } + + dt { + font-weight: 700; + } + + dd { + margin-bottom: .5rem; + margin-left: 0; + } + + blockquote { + margin: 0 0 1rem; + } + + b, + strong { + font-weight: bolder; + } + + small { + font-size: 80%; + } + + sub, + sup { + position: relative; + font-size: 75%; + line-height: 0; + vertical-align: baseline; + } + + sub { + bottom: -.25em; + } + + sup { + top: -.5em; + } + + a { + color: #007bff; + text-decoration: none; + background-color: transparent; + } + + a:hover { + color: #0056b3; + text-decoration: underline; + } + + a:not([href]):not([tabindex]) { + color: inherit; + text-decoration: none; + } + + a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus { + color: inherit; + text-decoration: none; + } + + a:not([href]):not([tabindex]):focus { + outline: 0; + } + + pre, + code, + kbd, + samp { + font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + font-size: 1em; + } + + pre { + margin-top: 0; + margin-bottom: 1rem; + overflow: auto; + } + + figure { + margin: 0 0 1rem; + } + + img { + vertical-align: middle; + border-style: none; + } + + svg { + overflow: hidden; + vertical-align: middle; + } + + table { + border-collapse: collapse; + } + + caption { + padding-top: 0.75rem; + padding-bottom: 0.75rem; + color: #6c757d; + text-align: left; + caption-side: bottom; + } + + th { + text-align: inherit; + } + + label { + display: inline-block; + margin-bottom: 0.5rem; + } + + button { + border-radius: 0; + } + + button:focus { + outline: 1px dotted; + outline: 5px auto -webkit-focus-ring-color; + } + + input, + button, + select, + optgroup, + textarea { + margin: 0; + font-family: inherit; + font-size: inherit; + line-height: inherit; + } + + button, + input { + overflow: visible; + } + + button, + select { + text-transform: none; + } + + select { + word-wrap: normal; + } + + button, + [type="button"], + [type="reset"], + [type="submit"] { + -webkit-appearance: button; + } + + button:not(:disabled), + [type="button"]:not(:disabled), + [type="reset"]:not(:disabled), + [type="submit"]:not(:disabled) { + cursor: pointer; + } + + button::-moz-focus-inner, + [type="button"]::-moz-focus-inner, + [type="reset"]::-moz-focus-inner, + [type="submit"]::-moz-focus-inner { + padding: 0; + border-style: none; + } + + input[type="radio"], + input[type="checkbox"] { + box-sizing: border-box; + padding: 0; + } + + input[type="date"], + input[type="time"], + input[type="datetime-local"], + input[type="month"] { + -webkit-appearance: listbox; + } + + textarea { + overflow: auto; + resize: vertical; + } + + fieldset { + min-width: 0; + padding: 0; + margin: 0; + border: 0; + } + + legend { + display: block; + width: 100%; + max-width: 100%; + padding: 0; + margin-bottom: .5rem; + font-size: 1.5rem; + line-height: inherit; + color: inherit; + white-space: normal; + } + + progress { + vertical-align: baseline; + } + + [type="number"]::-webkit-inner-spin-button, + [type="number"]::-webkit-outer-spin-button { + height: auto; + } + + [type="search"] { + outline-offset: -2px; + -webkit-appearance: none; + } + + [type="search"]::-webkit-search-decoration { + -webkit-appearance: none; + } + + ::-webkit-file-upload-button { + font: inherit; + -webkit-appearance: button; + } + + output { + display: inline-block; + } + + summary { + display: list-item; + cursor: pointer; + } + + template { + display: none; + } + + [hidden] { + display: none !important; + } + /*# sourceMappingURL=bootstrap-reboot.css.map */ \ No newline at end of file diff --git a/src/assets/fonts/prozalibre-bold-webfont.woff b/src/assets/fonts/prozalibre-bold-webfont.woff new file mode 100755 index 00000000..da2c9ae1 Binary files /dev/null and b/src/assets/fonts/prozalibre-bold-webfont.woff differ diff --git a/src/assets/fonts/prozalibre-bold-webfont.woff2 b/src/assets/fonts/prozalibre-bold-webfont.woff2 new file mode 100755 index 00000000..2e614414 Binary files /dev/null and b/src/assets/fonts/prozalibre-bold-webfont.woff2 differ diff --git a/src/assets/fonts/prozalibre-medium-webfont.woff b/src/assets/fonts/prozalibre-medium-webfont.woff new file mode 100755 index 00000000..cb676292 Binary files /dev/null and b/src/assets/fonts/prozalibre-medium-webfont.woff differ diff --git a/src/assets/fonts/prozalibre-medium-webfont.woff2 b/src/assets/fonts/prozalibre-medium-webfont.woff2 new file mode 100755 index 00000000..211dc620 Binary files /dev/null and b/src/assets/fonts/prozalibre-medium-webfont.woff2 differ diff --git a/src/assets/fonts/prozalibre-regular-webfont.woff b/src/assets/fonts/prozalibre-regular-webfont.woff new file mode 100755 index 00000000..f1649523 Binary files /dev/null and b/src/assets/fonts/prozalibre-regular-webfont.woff differ diff --git a/src/assets/fonts/prozalibre-regular-webfont.woff2 b/src/assets/fonts/prozalibre-regular-webfont.woff2 new file mode 100755 index 00000000..e3201834 Binary files /dev/null and b/src/assets/fonts/prozalibre-regular-webfont.woff2 differ diff --git a/src/assets/fonts/prozalibre-semibold-webfont.woff b/src/assets/fonts/prozalibre-semibold-webfont.woff new file mode 100755 index 00000000..fec9d320 Binary files /dev/null and b/src/assets/fonts/prozalibre-semibold-webfont.woff differ diff --git a/src/assets/fonts/prozalibre-semibold-webfont.woff2 b/src/assets/fonts/prozalibre-semibold-webfont.woff2 new file mode 100755 index 00000000..f03c852f Binary files /dev/null and b/src/assets/fonts/prozalibre-semibold-webfont.woff2 differ diff --git a/src/assets/fonts/pt_sans_bold-webfont.woff b/src/assets/fonts/pt_sans_bold-webfont.woff new file mode 100755 index 00000000..87dcdb8f Binary files /dev/null and b/src/assets/fonts/pt_sans_bold-webfont.woff differ diff --git a/src/assets/fonts/pt_sans_bold-webfont.woff2 b/src/assets/fonts/pt_sans_bold-webfont.woff2 new file mode 100755 index 00000000..afb2d612 Binary files /dev/null and b/src/assets/fonts/pt_sans_bold-webfont.woff2 differ diff --git a/src/assets/fonts/pt_sans_regular-webfont.woff b/src/assets/fonts/pt_sans_regular-webfont.woff new file mode 100755 index 00000000..10a1458f Binary files /dev/null and b/src/assets/fonts/pt_sans_regular-webfont.woff differ diff --git a/src/assets/fonts/pt_sans_regular-webfont.woff2 b/src/assets/fonts/pt_sans_regular-webfont.woff2 new file mode 100755 index 00000000..16d093b0 Binary files /dev/null and b/src/assets/fonts/pt_sans_regular-webfont.woff2 differ diff --git a/src/assets/scss/atoms/_fonts.scss b/src/assets/scss/atoms/_fonts.scss index ab7ee9c8..97782588 100644 --- a/src/assets/scss/atoms/_fonts.scss +++ b/src/assets/scss/atoms/_fonts.scss @@ -4,8 +4,56 @@ // src: url("ProzaLibre-Regular.ttf") format("ttf"); // TODO find the correct path //} +@font-face { + font-family: "pt_sans"; + src: url("assets/fonts/pt_sans_regular-webfont.woff2") format("woff2"), + url("assets/fonts/pt_sans_regular-webfont.woff") format("woff"); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: "pt_sans"; + src: url("assets/fonts/pt_sans_bold-webfont.woff2") format("woff2"), + url("assets/fonts/pt_sans_bold-webfont.woff") format("woff"); + font-weight: bold; + font-style: normal; +} + +@font-face { + font-family: "proza_libre"; + src: url("assets/fonts/prozalibre-regular-webfont.woff2") format("woff2"), + url("assets/fonts/prozalibre-regular-webfont.woff") format("woff"); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: "proza_libre"; + src: url("assets/fonts/prozalibre-medium-webfont.woff2") format("woff2"), + url("assets/fonts/prozalibre-medium-webfont.woff") format("woff"); + font-weight: 500; + font-style: normal; +} + +@font-face { + font-family: "proza_libre"; + src: url("assets/fonts/prozalibre-semibold-webfont.woff2") format("woff2"), + url("assets/fonts/prozalibre-semibold-webfont.woff") format("woff"); + font-weight: 600; + font-style: normal; +} + +@font-face { + font-family: "proza_libre"; + src: url("assets/fonts/prozalibre-bold-webfont.woff2") format("woff2"), + url("assets/fonts/prozalibre-bold-webfont.woff") format("woff"); + font-weight: bold; + font-style: normal; +} + body { - font-family: "Proza-libre", "PT Sans", "DejaVu Sans Light", "Arial", "DejaVu Sans Mono"; + font-family: $default_font, Arial, Helvetica, sans-serif; font-size: 1.4rem; } @@ -15,5 +63,5 @@ h3, h4, h5, h6 { - font-family: "Proza-libre", "Brie Light", "Arial", "DejaVu Sans Mono"; + font-family: $title_font, "Brie Light", "Arial", "DejaVu Sans Mono"; } diff --git a/src/assets/scss/atoms/_forms.scss b/src/assets/scss/atoms/_forms.scss index d83753a1..f0a733a8 100644 --- a/src/assets/scss/atoms/_forms.scss +++ b/src/assets/scss/atoms/_forms.scss @@ -16,6 +16,9 @@ input, textarea, select { @extend .funky-box; + border:none; + border-bottom:2px solid $primary_color; + } textarea { diff --git a/src/assets/scss/atoms/_headings.scss b/src/assets/scss/atoms/_headings.scss index b8042a49..6bfe0bb7 100644 --- a/src/assets/scss/atoms/_headings.scss +++ b/src/assets/scss/atoms/_headings.scss @@ -1,10 +1,18 @@ @charset "UTF-8"; -h1, -h2, -h3, -h4, -h5, -h6 { - border-bottom: 1px solid $primary_color; + +h1 { + display: inline-block; + margin-bottom: 3rem; + + &::after { + content: ""; + display: block; + width: 27.4%; + height: 2px; + margin-top: 5px; + margin-right: auto; + margin-left: auto; + background-color: $primary_color; + } } diff --git a/src/assets/scss/atoms/_links.scss b/src/assets/scss/atoms/_links.scss index 0148c21f..a180e74d 100644 --- a/src/assets/scss/atoms/_links.scss +++ b/src/assets/scss/atoms/_links.scss @@ -1,15 +1,28 @@ @charset "UTF-8"; a { + position: relative; + font-family: $default_font; + font-weight: 600; + font-size: 1.6rem; + color: $black; text-decoration: none; - nav & { - @extend .btn-outline, .btn; - display: inline-block; - margin: 0.5em; - padding: 0.5em; - color: #000; - font-size: 1rem; + &::before { + content: ""; + position: absolute; + top: 0; + bottom: 0; + display: block; + width: 100%; + height: 6px; + margin: auto; + background-color: $primary_color; + z-index: -1; + } + + &::after { + content: ">"; } } diff --git a/src/assets/scss/_global_layout.scss b/src/assets/scss/atoms/_main.scss similarity index 70% rename from src/assets/scss/_global_layout.scss rename to src/assets/scss/atoms/_main.scss index b14f4ffb..cb902305 100644 --- a/src/assets/scss/_global_layout.scss +++ b/src/assets/scss/atoms/_main.scss @@ -1,12 +1,9 @@ @charset "UTF-8"; -body { - background-color: #fff; - padding: 1rem; -} - -app-root { +main { max-width: 500px; // to look like the styleguide, to remove when we will have full width views + width: 100%; display: block; margin: 0 auto; + padding: 0 1.2rem; } diff --git a/src/assets/scss/atoms/_section.scss b/src/assets/scss/atoms/_section.scss new file mode 100644 index 00000000..a07953ea --- /dev/null +++ b/src/assets/scss/atoms/_section.scss @@ -0,0 +1,7 @@ +@charset "UTF-8"; + +section { + & + & { + margin-top: 6rem; + } +} \ No newline at end of file diff --git a/src/assets/scss/default.scss b/src/assets/scss/default.scss new file mode 100644 index 00000000..c8273a42 --- /dev/null +++ b/src/assets/scss/default.scss @@ -0,0 +1,6 @@ +@charset "UTF-8"; + +html { + font-size: 62.5%; /* 10px */ + font-size: calc(1em * 0.625); /* fix */ +} diff --git a/src/assets/scss/variables.scss b/src/assets/scss/variables.scss index e774d329..7a3aaa67 100644 --- a/src/assets/scss/variables.scss +++ b/src/assets/scss/variables.scss @@ -14,3 +14,7 @@ $primary_color: $sun-yellow; $font_color: $black; $logo_color: $dark-lavender; $logo_color_2: $camo; + +// FONT +$default_font : "pt_sans"; +$title_font: "proza_libre"; \ No newline at end of file diff --git a/src/index.html b/src/index.html index 92dbe156..5ed1d6c4 100644 --- a/src/index.html +++ b/src/index.html @@ -7,6 +7,8 @@ + + diff --git a/src/styles.scss b/src/styles.scss index 2ed2020c..2705b3d7 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,7 +1,9 @@ /* You can add global styles to this file, and also import other style files */ @import "assets/scss/variables"; -@import "assets/scss/global_layout"; +@import "assets/scss/default"; +@import "assets/scss/atoms/main"; +@import "assets/scss/atoms/section"; @import "assets/scss/atoms/fonts"; @import "assets/scss/atoms/headings"; @import "assets/scss/atoms/buttons";