diff --git a/.eslintrc.js b/.eslintrc.js index f948388..aa55bd0 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -15,6 +15,7 @@ module.exports = { }, rules: { "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", - "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off" + "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off", + "@typescript-eslint/no-explicit-any": "off", } }; diff --git a/public/celestials_bg-min.jpg b/public/celestials_bg-min.jpg new file mode 100644 index 0000000..50183dc Binary files /dev/null and b/public/celestials_bg-min.jpg differ diff --git a/public/celestials_bg.jpg b/public/celestials_bg.jpg new file mode 100644 index 0000000..99fbb5c Binary files /dev/null and b/public/celestials_bg.jpg differ diff --git a/public/home_bg-min.jpg b/public/home_bg-min.jpg new file mode 100644 index 0000000..e622170 Binary files /dev/null and b/public/home_bg-min.jpg differ diff --git a/public/home_bg.jpg b/public/home_bg.jpg new file mode 100644 index 0000000..e829fea Binary files /dev/null and b/public/home_bg.jpg differ diff --git a/public/icons/galaxy-spiral-shape-white.svg b/public/icons/galaxy-spiral-shape-white.svg new file mode 100644 index 0000000..f09b2ee --- /dev/null +++ b/public/icons/galaxy-spiral-shape-white.svg @@ -0,0 +1,23 @@ + + + + + + + + + diff --git a/public/icons/galaxy-spiral-shape.svg b/public/icons/galaxy-spiral-shape.svg new file mode 100644 index 0000000..08e9286 --- /dev/null +++ b/public/icons/galaxy-spiral-shape.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/icons/moon-and-stars-in-a-cloud-white.svg b/public/icons/moon-and-stars-in-a-cloud-white.svg new file mode 100644 index 0000000..8c16716 --- /dev/null +++ b/public/icons/moon-and-stars-in-a-cloud-white.svg @@ -0,0 +1,29 @@ + + + + + + + + + + diff --git a/public/icons/moon-and-stars-in-a-cloud.svg b/public/icons/moon-and-stars-in-a-cloud.svg new file mode 100644 index 0000000..998dedc --- /dev/null +++ b/public/icons/moon-and-stars-in-a-cloud.svg @@ -0,0 +1,67 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/icons/saturn-and-other-planets-white.svg b/public/icons/saturn-and-other-planets-white.svg new file mode 100644 index 0000000..bd13adf --- /dev/null +++ b/public/icons/saturn-and-other-planets-white.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + diff --git a/public/icons/saturn-and-other-planets.svg b/public/icons/saturn-and-other-planets.svg new file mode 100644 index 0000000..b702316 --- /dev/null +++ b/public/icons/saturn-and-other-planets.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/icons/saturn-planet-shape-white.svg b/public/icons/saturn-planet-shape-white.svg new file mode 100644 index 0000000..7d70206 --- /dev/null +++ b/public/icons/saturn-planet-shape-white.svg @@ -0,0 +1,19 @@ + + + + + + + + + + diff --git a/public/icons/saturn-planet-shape.svg b/public/icons/saturn-planet-shape.svg new file mode 100644 index 0000000..fc1a45c --- /dev/null +++ b/public/icons/saturn-planet-shape.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/icons/stars-group-white.svg b/public/icons/stars-group-white.svg new file mode 100644 index 0000000..100b618 --- /dev/null +++ b/public/icons/stars-group-white.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + diff --git a/public/icons/stars-group.svg b/public/icons/stars-group.svg new file mode 100644 index 0000000..733e47a --- /dev/null +++ b/public/icons/stars-group.svg @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/icons/sun-shape-white.svg b/public/icons/sun-shape-white.svg new file mode 100644 index 0000000..0efbc52 --- /dev/null +++ b/public/icons/sun-shape-white.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + diff --git a/public/icons/sun-shape.svg b/public/icons/sun-shape.svg new file mode 100644 index 0000000..0f90aba --- /dev/null +++ b/public/icons/sun-shape.svg @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/nav-bg.png b/public/nav-bg.png new file mode 100644 index 0000000..00c6d0b Binary files /dev/null and b/public/nav-bg.png differ diff --git a/src/App.vue b/src/App.vue index e734da4..d10ed83 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,8 +1,34 @@ + + + + diff --git a/src/assets/scss/_animations.scss b/src/assets/scss/_animations.scss new file mode 100644 index 0000000..601de22 --- /dev/null +++ b/src/assets/scss/_animations.scss @@ -0,0 +1,48 @@ +@keyframes fadeInBg { + from { + opacity: 0; + } + to { + opacity: 33%; + } +} + +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 100%; + } +} + +@keyframes fromBottom { + from { + transform: translateY(20px); + } + to { + transform: translateY(0); + } +} + +@keyframes paneBgAround { + 0% { + background-position: -10vw 0%; + } + 50% { + background-position: -20vw 0%; + } + 100% { + background-position: -10vw 0%; + } +} + +.fade-in-children { + @for $i from 1 through 10 { + :nth-child(#{$i}) { + opacity: 0; + animation: fadeIn 1.5s ease-in-out 1s 1 forwards, fromBottom 1.5s ease-in-out 1s 1 forwards; + animation-delay: 0.25s + $i * 0.25s; + } + } +} diff --git a/src/assets/scss/_fonts.scss b/src/assets/scss/_fonts.scss new file mode 100644 index 0000000..2e45106 --- /dev/null +++ b/src/assets/scss/_fonts.scss @@ -0,0 +1 @@ +@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:wght@400;600;700;800;900&display=swap'); \ No newline at end of file diff --git a/src/assets/scss/_global.scss b/src/assets/scss/_global.scss new file mode 100644 index 0000000..2e485a5 --- /dev/null +++ b/src/assets/scss/_global.scss @@ -0,0 +1,129 @@ +@import 'libs/normalize'; + +@import 'fonts'; +@import 'variables'; +@import 'animations'; + +* { + box-sizing: border-box; +} + +body { + height: 100%; + font-family: $body-font-family; + font-size: $font-size-base; + line-height: 1.2; + color: $white; + background: $black; +} + +h1, h2, h3, h4, h5, h6 { + margin-top: 0; + font-family: $heading-font-family; + font-weight: $fw-regular; +} +h1 { font-size: 50px; } +h2 { font-size: 25px; } +h3 { font-size: 22px; } +h4 { font-size: 18px; } + +.heading { + &-1 { + margin-bottom: 20px; + font-size: 50px; + font-weight: $fw-semibold; + } + &-2 { + margin-bottom: 20px; + font-size: 25px; + font-weight: $fw-semibold; + } + &-3 { + margin-bottom: 0; + font-size: 20px; + font-weight: $fw-semibold; + } +} + +.txt { + &-capitalize { + text-transform: capitalize; + } +} + +ul { + &.no-style { + margin: 0; + padding-left: 0; + list-style-type: none; + } +} + +a { + &.no-style { + color: inherit; + text-decoration: none; + } +} + +hr { + border-color: rgba($white, .2); +} + +.btn { + display: inline-block; + padding: 13px 33px; + vertical-align: middle; + font-size: 13px; + line-height: 1; + white-space: nowrap; + text-decoration: none; + background: none; + border: none; + border-radius: 30px; + cursor: pointer; + + &:focus { + outline: none; + } + + & ~ & { + margin-left: 10px; + } + + &-primary { + color: $white; + background-color: $primary; + transition: background-color .3s ease-out; + &:hover { + background-color: $primary-light; + } + &:focus, &.active { + background-color: $primary-light; + transition: box-shadow .2s ease-in-out; + box-shadow: 0 0 10px rgba($white, 50%); + } + } + + &-icon { + position: relative; + padding-right: 53px; + .fs-icon { + position: absolute; + top: 50%; + transform: translateY(-50%); + right: 20px; + width: 20px; + height: 20px; + } + } +} + +.fs-icon { + width: 50px; + height: 50px; + &.icon-sm { + width: 20px; + height: 20px; + } +} \ No newline at end of file diff --git a/src/assets/scss/_variables.scss b/src/assets/scss/_variables.scss new file mode 100644 index 0000000..12c47f9 --- /dev/null +++ b/src/assets/scss/_variables.scss @@ -0,0 +1,24 @@ + +$white: #fff; +$black: #000; +$fs-black: #070712; + +$space-blue-700: #1d3557; +$space-blue-600: #234e69; +$space-blue-500: #457b9d; +$space-blue-300: #a8dadc; + +$primary: $space-blue-700; +$primary-light: $space-blue-600; + +$heading-font-family: 'Poppins', serif; +$body-font-family: 'Open Sans', sans-serif; + +$font-size-base: 14px; + +$fw-light: 300; +$fw-regular: 400; +$fw-semibold: 600; +$fw-bold: 700; +$fw-extra-bold: 800; +$fw-black: 900; diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue new file mode 100644 index 0000000..7eeee35 --- /dev/null +++ b/src/components/Navbar.vue @@ -0,0 +1,104 @@ + + + + + diff --git a/src/components/celestials/CelestialCard.vue b/src/components/celestials/CelestialCard.vue new file mode 100644 index 0000000..4d61454 --- /dev/null +++ b/src/components/celestials/CelestialCard.vue @@ -0,0 +1,140 @@ + + + + + diff --git a/src/components/celestials/CelestialFilters.vue b/src/components/celestials/CelestialFilters.vue new file mode 100644 index 0000000..0b2bc00 --- /dev/null +++ b/src/components/celestials/CelestialFilters.vue @@ -0,0 +1,120 @@ + + + + + diff --git a/src/components/celestials/CelestialsList.vue b/src/components/celestials/CelestialsList.vue new file mode 100644 index 0000000..29cbf1c --- /dev/null +++ b/src/components/celestials/CelestialsList.vue @@ -0,0 +1,112 @@ + + + + + diff --git a/src/main.ts b/src/main.ts index 7f4f960..04ba1a5 100644 --- a/src/main.ts +++ b/src/main.ts @@ -3,7 +3,8 @@ import App from "./App.vue"; import router from "./router"; import store from "./store"; -import "./assets/scss/libs/_normalize.scss"; +import "@/assets/scss/libs/_normalize.scss"; +import "@/assets/scss/_global.scss"; createApp(App) .use(store) diff --git a/src/plugins/methods/index.ts b/src/plugins/methods/index.ts new file mode 100644 index 0000000..cad386a --- /dev/null +++ b/src/plugins/methods/index.ts @@ -0,0 +1,26 @@ +export const addCelestialType = (celestial: any) => { + if (celestial.isPlanet) { + if (celestial.moons) { + celestial.type = "planète à lunes"; + } else { + celestial.type = "planète"; + } + + // Check if element is moon + } else if (celestial.aroundPlanet != null) { + celestial.type = "lune"; + + // Check if element is star + } else if (celestial.id === "soleil") { + celestial.type = "étoile"; + + // ...else, body is "other" + } else { + celestial.type = "autre"; + } + return celestial; +}; + +export default { + addCelestialType +}; diff --git a/src/router/index.ts b/src/router/index.ts index 83836d7..7087f20 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -4,6 +4,9 @@ import Home from "../views/Home.vue"; import About from "../views/About.vue"; import Profile from "../views/Profile.vue"; +import Celestials from "../views/celestials/Celestials.vue"; +import Celestial from "../views/celestials/Celestial.vue"; + const routes: Array = [ { path: "/", @@ -11,12 +14,23 @@ const routes: Array = [ component: Home }, { - path: "/about", + path: "/a-propos", name: "About", component: About }, { - path: "/profile", + path: "/celestes", + name: "CelesteAll", + component: Celestials + }, + { + path: "/celestes/:slug", + name: "CelesteSingle", + component: Celestial, + props: true + }, + { + path: "/profil", name: "Profile", component: Profile } diff --git a/src/views/About.vue b/src/views/About.vue index 8f24df0..2af234b 100644 --- a/src/views/About.vue +++ b/src/views/About.vue @@ -1,7 +1,7 @@ + + diff --git a/src/views/Profile.vue b/src/views/Profile.vue index e947cad..d61f568 100644 --- a/src/views/Profile.vue +++ b/src/views/Profile.vue @@ -1,7 +1,7 @@