diff --git a/.ignore b/.ignore new file mode 100644 index 0000000..a48cf0d --- /dev/null +++ b/.ignore @@ -0,0 +1 @@ +public diff --git a/package.json b/package.json index 98a1fd7..71c2105 100644 --- a/package.json +++ b/package.json @@ -31,5 +31,8 @@ "typescript": "^5.0.0", "typescript-eslint": "^8.20.0", "vite": "^6.0.0" + }, + "dependencies": { + "remixicon": "^4.6.0" } } diff --git a/src/app.html b/src/app.html index 77a5ff5..68f90c2 100644 --- a/src/app.html +++ b/src/app.html @@ -1,5 +1,5 @@ - + diff --git a/src/lib/components/Article.svelte b/src/lib/components/Article.svelte index 7ce667c..7351054 100644 --- a/src/lib/components/Article.svelte +++ b/src/lib/components/Article.svelte @@ -6,5 +6,16 @@
- +
+ +
+
+ + diff --git a/src/lib/styles/styles.css b/src/lib/styles/styles.css index 848d8cc..504d62f 100644 --- a/src/lib/styles/styles.css +++ b/src/lib/styles/styles.css @@ -2,107 +2,154 @@ /* @import 'fluid.css'; */ @import url('https://fonts.googleapis.com/css2?family=Inclusive+Sans:ital,wght@0,300..700;1,300..700&display=swap'); -html { - --bg-color: rgb(20, 153, 84); - - font-family: "Inclusive Sans", sans-serif; - color: white; - text-transform: lowercase; - - box-sizing: border-box; - - background-color: var(--bg-color); - width: 100%; - - scroll-behavior: smooth; +.light { + --color-primary: white; + --bg-color: rgb(20, 153, 84); } +.dark { + --color-primary: white; + --bg-color: black; +} +html { + font-family: 'Inclusive Sans', sans-serif; + color: white; + font-weight: 300; -body { - width: 100%; + box-sizing: border-box; + background-color: var(--bg-color); + scroll-behavior: smooth; + padding: 2rem; } header { - width: 100%; - position: fixed; - height: max-content; - bottom: 0; - - padding-left: 2rem; - - & h1 { - font-weight: 500; - border-top: solid 1px white; - font-size: 8rem; - background-color: var(--bg-color); - letter-spacing: 0.6rem; - line-height: 7rem; - } + text-transform: lowercase; } +.sticky-container { + position: -webkit-sticky; + position: sticky; + top: 2rem; +} -h2 { - font-size: 1.1rem; +.btn__theme { + all: unset; + margin-top: 2rem; + cursor: pointer; + display: flex; + align-items: baseline; + gap: 0.5rem; +} + +.hero { + height: 100vh; + padding: 2rem 0rem; + --margin: 3rem; + & h1 { + padding-bottom: var(--margin); + margin-bottom: var(--margin); + font-size: 9rem; + font-weight: 500; + text-decoration: none; + border-bottom: solid 2px white; + } + + & .subtitle { + display: flex; + flex-direction: row; + & > p:last-child { + margin-left: auto; + justify-self: flex-end; + width: fit-content; + } + } + + & p { + margin-top: 0; + font-size: 1.5rem; + width: fit-content; + & i { + font-style: italic; + } + } + + & a { + display: block; + margin-top: var(--margin); + text-decoration: none; + & i { + font-size: 3rem; + font-weight: 300; + } + } +} + +p { + line-height: 1.3rem; +} + +a { + color: var(--color-primary); +} + +h1 { + text-decoration: underline; + margin-bottom: 1rem; +} + +main { + display: grid; + grid-template-columns: 1fr 3fr; + gap: 2rem; } nav { - & ul { - display: flex; - flex-direction: column; - gap: 1rem; - margin-bottom: 2rem; + margin-top: 2rem; + & ul { + display: flex; + flex-direction: column; + gap: 1rem; + /* margin-bottom: 2rem; */ + } - } - - & a { - color: white; - text-decoration: none; - font-weight: 400; - letter-spacing: 0.15rem; - } + & a { + color: white; + } } - - section { - position: absolute; - left: 50%; - /* max-width: 68ch; */ - padding: 1rem 2rem 42vh 0; - z-index: -1; - - & h2 { - margin-bottom: 3rem; - margin-top: 1rem; - position: relative; - left: -2rem; - text-decoration: underline; - } + & h2 { + display: none; + color: red; + /* margin-bottom: 3rem; */ + margin-top: 1rem; + position: relative; + text-decoration: underline; + } } - +article { + display: grid; + grid-template-columns: 2fr 3fr; + gap: 0.7rem; +} article h1 { - font-size: 5rem; - font-style: italic; - margin-bottom: 1rem; - - &::before { - content: '#' - } + text-decoration: underline; + margin-bottom: 1rem; + color: white; + &::before { + content: '#'; + } } -article+article { - margin-top: 5rem; +article + article { + margin-top: 5rem; } -article+h2 { - margin-top: 6rem; +article + h2 { + margin-top: 6rem; } article p { - font-size: 1.1rem; - line-height: 1.3rem; - /* font-weight: 400; */ - - &+p { - margin-top: 0.8rem; - } -} \ No newline at end of file + & + p { + margin-top: 0.6rem; + } +} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index c2efde9..d533eae 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,7 +1,9 @@ -
+
{@render children()}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 09c4657..9e8166a 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,38 +1,82 @@ + + -
-

Alliances Transcoloniales

- -
+
+

alliances transcoloniales

+
+

arts. sciences. décolonisation.

+

université de soit-disant montréal.

+ +
-
-

Événements

- {#each data.documents as d} -
- {/each} -

Archives

-

Déclaration de principes

-

Bibliographie sélective

-
-

- Retrouvez ressources bibliographiques partagées par les intervenants de nos différents - événements sur le Zotero + + +

+
+
+
+

Alliances Transcoloniales

+

+ Alliances Transcoloniales est une série d’événements (#) souhaitant porter une réflexion + critique, à la lumière de l’art et du cinéma, aux des questions d’oppression et de + subalternité, passées et actuelles, vécues par différentes communautés à plusieurs endroits + de la planète en adoptant une perspective transcolonialiste. +

+ + - des Alliances Transcoloniales -

- - +
+
+ +
+

Événements

+ {#each data.documents as d} +
+ {/each} +

Archives

+

Déclaration de principes

+

Bibliographie sélective

+
+

+ Retrouvez ressources bibliographiques partagées par les intervenants de nos différents + événements sur le Zotero + des Alliances Transcoloniales. +

+
+
+
diff --git a/src/routes/+page.ts b/src/routes/+page.ts index 2edde90..a6d0c51 100644 --- a/src/routes/+page.ts +++ b/src/routes/+page.ts @@ -1,6 +1,6 @@ export const load = async () => { - const documents = import.meta.glob('$lib/content/events/*.md', { eager: true }) - return { - documents: Object.values(documents) - } -} \ No newline at end of file + const documents = import.meta.glob('$lib/content/events/*.md', { eager: true }); + return { + documents: Object.values(documents) + }; +};