diff --git a/activities.html b/activities.html new file mode 100644 index 0000000..e83dd48 --- /dev/null +++ b/activities.html @@ -0,0 +1,179 @@ + + + + + LinuxUPC - Activitats + + + + + + + + + + + + +
+ + MENU +

LinuxUPC

+ + +

2 Feb 10:01

+ + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + +
+
+
+
+
+
+
+ Workshop de git 2025 cartell de promoció + +
+ + +
+
+

📌 Git Workshop

+

El passat 26 de febrer de 2025 vam celebrar el nostre Workshop de Git, un taller pràctic + on vam + aprendre a gestionar versions de manera eficient amb Git i a col·laborar en projectes a GitHub sense el + caos dels + arxius. 😜

+

Durant la sessió, els participants van explorar els conceptes clau de Git, des dels + commits fins als + branches, passant per els merges i les pull requests. A + través + d'exemples reals i exercicis guiats, vam posar en pràctica aquestes eines fonamentals per al + desenvolupament + col·laboratiu. +

+

Va ser una gran oportunitat per resoldre dubtes en directe, compartir experiències i, sobretot, perdre la + por a Git! + 🎉

+

Gràcies a tots els assistents per la vostra participació i entusiasme! Esperem veure-us en els pròxims + tallers. 🚀 +

+

📅 Data: 26 de Febrer, 2025 (Finalitzat)

+

🕛 Hora: 12:00

+

⌛ Durada: 2h

+

📍 Lloc: A5001

+ +
+
+
+
+
+
+
+
+ Install Party 2024 foto 1 de l'esdeveniment + Install Party 2024 foto 2 de l'esdeveniment + Install Party 2024 foto 3 de l'esdeveniment + +
+ + +
+
+

📌 Install Party

+

El passat 18 de setembre de 2024 vam celebrar la nostra Install Party, una jornada on + vam ajudar als participants a instal·lar Linux als seus portàtils i a fer els primers passos en aquest + sistema operatiu lliure i de codi obert.🐧

+ +

Durant la sessió, vam guiar als assistents en el procés d'instal·lació, responent dubtes i oferint suport + perquè poguessin configurar el seu sistema de manera òptima. A més, vam introduir-los als conceptes bàsics + de Linux, la seva estructura i les eines fonamentals per començar a treballar amb ell amb confiança.

+ +

Va ser una gran oportunitat per conèixer gent amb els mateixos interessos, compartir experiències i + descobrir el potencial de Linux en un ambient col·laboratiu i dinàmic. 🎉

+ +

Gràcies a tots els que vau participar! Esperem veure-us en els pròxims esdeveniments i que seguiu + explorant el món del programari lliure. 🚀

+ +

📅 Data: 18 de Setembre, 2024 (Finalitzat)

+

⌛ Durada: 1h (per sessió)

+

1️⃣ Primer Interval

+ +

🕛 Hora: 10:00 - 15:00

+

📍 Lloc: A6104

+ +

2️⃣ Segon Interval

+ +

🕛 Hora: 15:00 - 19:00

+

📍 Lloc: A6105

+ +
+
+
+
+
+ + + + + + + + \ No newline at end of file diff --git a/assets/css/activities.css b/assets/css/activities.css index 0af76c0..8b38d17 100644 --- a/assets/css/activities.css +++ b/assets/css/activities.css @@ -1,183 +1,145 @@ -.activities-component { - position: relative; - font-size: clamp(1rem, 0.481rem + 2.374vw, 2rem); - padding: 0.5em; - max-width: 48rem; - height: fit-content; -} - -.activities-component .window-component { - position: absolute; - top: 0; - left: 0; -} +main { + flex: 1; -.activities { - position: relative; - pointer-events: none; - z-index: 1; + overflow-x: hidden; display: flex; flex-direction: column; - align-items: start; - gap: 0.4em; -} - -.activities > .title { - display: flex; - flex-direction: row; - justify-content: center; + flex-wrap: nowrap; align-items: center; - gap: 0.25em; - width: fit-content; + justify-content: flex-start; + padding: 0.75rem; + gap: 0.75em; } -.activities > .title img { - height: 2em; - object-fit: contain; -} - -.activities > .title h3 { +h2 { font-family: Ubuntu; font-style: normal; - font-size: 1em; - font-weight: 600; + font-size: 1.5em; + font-weight: 700; letter-spacing: 0.5px; - text-decoration: none; - text-transform: none; - color: #fff; - margin: 0; - padding: 0; - text-align: start; - align-self: center; + margin-bottom: 0.25em; } -.activities p, .activities li { +p { font-family: Ubuntu; font-style: normal; - font-size: 0.55em; + font-size: 0.6em; font-weight: 400; - letter-spacing: 0.5px; - text-decoration: none; - text-transform: none; - color: #fff; - margin: 0; - padding: 0; + letter-spacing: 0.75px; + line-height: 1.25em; text-align: justify; - width: fit-content; } -.activities > .cards { - flex: 1; - display: flex; - flex-direction: row; - justify-content: center; - align-items: stretch; - gap: 0.5em; +.activity-card { + position: relative; + font-size: clamp(1.25rem, 0.861rem + 1.78vw, 2rem); + padding: 0.8em; + padding-top: 1em; + + .window-component { + position: absolute; + top: 0; + left: 0; + } } -.activities > .cards > .card { - flex: 1 0; - background: #171718; - border-radius: 12px; - overflow: hidden; - display: flex; - flex-direction: column; +.content { + --max-width: 1200px; + --min-height: 20rem; + + position: relative; + z-index: 1; + + display: grid; + grid-template-columns: 1fr 2fr; + max-width: var(--max-width); + min-height: var(--min-height); + gap: 0.5em; } -.activities > .cards > .card img { - height: 5em; - object-fit: cover; - object-position: center -155px; +.carousel { + position: relative; + height: 100%; } -.activities > .cards .card-content { - flex: 1; - display: flex; - flex-direction: column; - justify-content: start; - gap: 12px; - padding: 10px; +.carousel-inner { + height: 100%; + + img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 0.25em; + } } -.activities > .cards .card-content button { - flex: 0; - pointer-events: all; - background: #3C7EAE; - border-radius: 10px; - border: none; - font-size: 0.8em; - font-weight: 600; - color: #ffffff; - - padding: 5px; - margin-top: auto; +.carousel-inner > :not(.active) { + display: none; } -.activities > .cards .card-content button:hover { - background: #5d95bd; + +/* 2) Mostrar los botones sólo si hay al menos 2 imágenes */ +.carousel:has(img:only-of-type) .prev, +.carousel:has(img:only-of-type) .next { + display: none; } -.activities h4 { - font-family: Ubuntu; - font-style: normal; - font-size: 0.8em; - font-weight: 500; - letter-spacing: 0.5px; - text-decoration: none; - text-transform: none; - color: #fff; - padding: 0; +.carousel > button { + position: absolute; + margin: 0 0.20em; + top: 50%; + border-radius: 50%; + background-color: hsla(from var(--background-200) h s l / 50%); + padding: 0.1em 0.4em; + color: var(--text); + transform: translateY(-50%); + cursor: pointer; + + &:is(.prev) { + left: 0; + } + + &:is(.next) { + right: 0; + } } -.dots { - flex: 0; +.info { + align-self: start; display: flex; - align-items: center; - justify-content: space-between; + flex-direction: column; gap: 0.25em; } -.dots span { - width: 0.45em; - height: 0.45em; - background-color: rgb(255, 255, 255); - border-radius: 50%; - display: inline-block; +.info > span { + margin-left: 1em; } -/* Media querry for medium size -@media (max-height: 905px) { - .dots { - display: none; - } -} */ - -/* Media querry for small size */ -@media (max-height: 925px) or (max-width: 1650px) { - .dots { - flex: 0 1 1em; - display: flex; - } - - .activities > .cards > .card:not(:first-child) { - display: none; - } +.info > a { + background-color: var(--primary); + border: 1px solid var(--text); + border-radius: 0.25em; + padding: 0.2em 0; + text-align: center; + cursor: pointer; + text-decoration: none; + color: var(--text); +} - .activities > .cards > .card { - flex: 1; - flex-direction: row; +@media (hover: hover) { + .info > a:hover { + background-color: var(--secondary); } +} - .activities > .cards > .card img { - height: 100%; - width: 30%; - object-position: center center; +@media (max-width: 700px) { + .content { + display: flex; + flex-direction: column; } -} -@media (max-width: 425px) { - .activities > .cards > .card img { - display: none; + .carousel-inner{ + height: 150px; } } \ No newline at end of file diff --git a/assets/css/about.css b/assets/css/components/about.css similarity index 90% rename from assets/css/about.css rename to assets/css/components/about.css index e1fe488..3168f48 100644 --- a/assets/css/about.css +++ b/assets/css/components/about.css @@ -2,6 +2,7 @@ position: relative; padding: 0.5em; font-size: clamp(1rem, 0.481rem + 2.374vw, 2rem); + max-width: 28em; /* Establecer maxima altura */ max-height: 100%; @@ -15,6 +16,7 @@ } .about { + color: var(--text); position: relative; pointer-events: none; z-index: 1; @@ -37,9 +39,8 @@ width: fit-content; } -.about > .title img { +.about > .title > .svg-container { height: 2em; - object-fit: contain; } .about > .title h3 { @@ -50,13 +51,16 @@ letter-spacing: 0.5px; text-decoration: none; text-transform: none; - color: #fff; margin: 0; padding: 0; text-align: start; align-self: center; } +.about > .title:is(h4) { + font-size: 0.85em; +} + .about p, .about li { font-family: Ubuntu; font-style: normal; @@ -65,7 +69,6 @@ letter-spacing: 0.5px; text-decoration: none; text-transform: none; - color: #fff; margin: 0; padding: 0; text-align: justify; @@ -76,6 +79,10 @@ margin-left: 0.5em; } +.about a { + pointer-events: all; +} + .about > .list { display: flex; flex: 1; @@ -86,7 +93,7 @@ } .about > .list li { - background: rgba(105, 105, 105, 0.65); + background: var(--background-200); border-radius: 0.75em; padding: 0.5em; } diff --git a/assets/css/components/activities.css b/assets/css/components/activities.css new file mode 100644 index 0000000..3c77b88 --- /dev/null +++ b/assets/css/components/activities.css @@ -0,0 +1,189 @@ +.activities-component { + position: relative; + font-size: clamp(1rem, 0.481rem + 2.374vw, 2rem); + padding: 0.5em; + max-width: 48rem; + height: fit-content; +} + +.activities-component .window-component { + position: absolute; + top: 0; + left: 0; +} + +.activities { + color: var(--text); + position: relative; + pointer-events: none; + z-index: 1; + display: flex; + flex-direction: column; + align-items: start; + gap: 0.4em; +} + +.activities > .title { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 0.25em; + width: fit-content; +} + +.activities > .title > .svg-container { + height: 2em; +} + +.activities > .title h3 { + font-family: Ubuntu; + font-style: normal; + font-size: 1em; + font-weight: 600; + letter-spacing: 0.5px; + text-decoration: none; + text-transform: none; + margin: 0; + padding: 0; + text-align: start; + align-self: center; +} + +.activities p, .activities li { + font-family: Ubuntu; + font-style: normal; + font-size: 0.55em; + font-weight: 400; + letter-spacing: 0.75px; + text-decoration: none; + text-transform: none; + margin: 0; + padding: 0; + text-align: justify; + width: fit-content; +} + +.activities > .cards { + flex: 1; + display: flex; + flex-direction: row; + justify-content: center; + align-items: stretch; + gap: 0.5em; +} + +.activities > .cards > .card { + flex: 1 0; + background: var(--background-200); + border-radius: 12px; + overflow: hidden; + + display: flex; + flex-direction: column; +} + +.activities > .cards > .card img { + height: 5em; + object-fit: cover; +} + +.activities > .cards .card-content { + flex: 1; + display: flex; + flex-direction: column; + justify-content: start; + gap: 0.6rem; + padding: 10px; +} + +.activities > .cards .card-content button { + flex: 0; + pointer-events: all; + color: var(--text); + background: var(--primary); + transition: background 0.3s; + border-radius: 10px; + border: none; + font-size: 0.8em; + font-weight: 600; + cursor: pointer; + + padding: 5px; + margin-top: auto; +} + +@media (hover: hover) { + .activities > .cards .card-content button:hover { + background: var(--secondary); + } +} + +.activities h4 { + font-family: Ubuntu; + font-style: normal; + font-size: 0.8em; + font-weight: 500; + letter-spacing: 0.5px; + text-decoration: none; + text-transform: none; + padding: 0; +} + +.dots { + flex: 0; + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.25em; + pointer-events: all; + align-self: center; +} + +.dots span { + width: 0.45em; + height: 0.45em; + background-color: var(--text); + border-radius: 50%; + display: inline-block; +} + +/* Media querry for medium size +@media (max-height: 905px) { + .dots { + display: none; + } +} */ + +/* Media querry for small size */ +@media (max-height: 880px) or (max-width: 1425px) { + .activities-component { + max-width: 40rem; + } + + .dots { + flex: 0 1 1em; + display: flex; + } + + .activities > .cards > .card:not(:first-child) { + display: none; + } + + .activities > .cards > .card { + flex: 1; + flex-direction: row; + } + + .activities > .cards > .card img { + height: 100%; + width: 30%; + object-position: center center; + } +} + +@media (max-width: 425px) { + .activities > .cards > .card img { + display: none; + } +} \ No newline at end of file diff --git a/assets/css/title.css b/assets/css/components/title.css similarity index 95% rename from assets/css/title.css rename to assets/css/components/title.css index 81f630b..47a3c95 100644 --- a/assets/css/title.css +++ b/assets/css/components/title.css @@ -19,6 +19,8 @@ flex-direction: column; align-items: center; gap: 0.2em; + + color: var(--text); } .title > div:first-child { @@ -37,7 +39,6 @@ letter-spacing: 0.5px; text-decoration: none; text-transform: unset; - color: #fff; margin: 0; padding: 0; text-align: center; @@ -52,12 +53,11 @@ .title > h2 { font-family: Ubuntu; font-style: normal; - font-size: 1em; + font-size: 0.9em; font-weight: 500; letter-spacing: 0.5px; text-decoration: none; text-transform: unset; - color: #fff; margin: 0; padding: 0; text-align: center; diff --git a/assets/css/components/window.css b/assets/css/components/window.css new file mode 100644 index 0000000..add0da7 --- /dev/null +++ b/assets/css/components/window.css @@ -0,0 +1,62 @@ +.window-component { + background: hsla(from var(--background-200) h s l / 60%); + font-size: clamp(1.25rem, 0.861rem + 1.78vw, 2rem); + width: 100%; + height: 100%; + border-radius: 0.2em; + position: relative; +} + +.window-controls { + position: absolute; + top: 0.2em; + right: 0.2em; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + align-items: start; + gap: 0.2em; +} + +button { + border: 0; + + &:hover{ + border: 0; + } +} + +.window-controls > button { + width: 0.6em; + height: 0.6em; + border-radius: 50%; + background: hsla(from var(--background-200) h s l / 90%); + transition: background 0.3s; + display: flex; + justify-content: center; + align-items: center; +} + +.window-controls > button svg { + fill: var(--text); + stroke: var(--text); + width: 100%; + height: 100%; +} + +button + .maximize-icon { + padding: 0.12em; +} + +.window-controls > button + .close-icon { + background: var(--primary); +} + +@media (hover: hover) { + .window-controls > button:hover { + background: var(--background-400); + } + .window-controls > button + .close-icon:hover { + background: var(--secondary); + } +} \ No newline at end of file diff --git a/assets/css/index.css b/assets/css/index.css new file mode 100644 index 0000000..1db3c00 --- /dev/null +++ b/assets/css/index.css @@ -0,0 +1,48 @@ +/* Contenido Principal */ +.content { + flex: 1; + display: grid; + overflow-x: hidden; + overflow-y: auto; + grid-template-rows: auto 1fr; /* Define la altura de la primera columna*/ + gap: 0.75em; + padding: 0.75em; +} + +/* Primera fila */ +.row:first-child { + display: flex; + justify-content: center; + flex-wrap: nowrap; +} + +/* Segunda fila */ +.row:last-child { + display: flex; + justify-content: center; + flex-wrap: nowrap; + width: 100%; + gap: 0.5em; + align-items: center; +} + +@media (max-width: 1300px) or (max-height: 915px) { + .row > * { + max-width: 52rem !important; + } + + .row:last-child { + flex-direction: column; + justify-content: start; + } +} + +/* Segunda fila primera columna */ +.row:last-child > *:first-child { + justify-self: end; +} + +/* Segunda fila segunda columna */ +.row:last-child > *:last-child:not(:first-child) { + justify-self: start; +} diff --git a/assets/css/styles.css b/assets/css/styles.css index a7fc05a..6b2fdbe 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -1,4 +1,44 @@ -@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400&display=swap'); +@import url('https://fonts.googleapis.com/css?family=Ubuntu:700|Ubuntu:400'); + +:root { + --text: hsl(0, 0%, 0%); + + --background-50: hsl(0, 0%, 95%); + --background-100: hsl(0, 0%, 90%); + --background-200: hsl(0, 0%, 80%); + --background-300: hsl(0, 0%, 70%); + --background-400: hsl(0, 0%, 60%); + --background-500: hsl(0, 0%, 50%); + --background-600: hsl(0, 0%, 40%); + --background-700: hsl(0, 0%, 30%); + --background-800: hsl(0, 0%, 20%); + --background-900: hsl(0, 0%, 10%); + --background-950: hsl(0, 0%, 5%); + + --primary: hsl(16, 93%, 59%); + --secondary: hsl(16, 96%, 72%); + --accent: hsl(306, 41%, 45%); +} + +.dark { + --text: hsl(0, 0%, 100%); + + --background-50: hsl(0, 0%, 5%); + --background-100: hsl(0, 0%, 10%); + --background-200: hsl(0, 0%, 20%); + --background-300: hsl(0, 0%, 30%); + --background-400: hsl(0, 0%, 40%); + --background-500: hsl(0, 0%, 50%); + --background-600: hsl(0, 0%, 60%); + --background-700: hsl(0, 0%, 70%); + --background-800: hsl(0, 0%, 80%); + --background-900: hsl(0, 0%, 90%); + --background-950: hsl(0, 0%, 95%); + + --primary: hsl(16, 97%, 59%); + --secondary: hsl(15, 100%, 68%); + --accent: hsl(306, 57%, 70%); +} /* Reseteo básico */ * { @@ -8,34 +48,43 @@ } /* Hacer que la página ocupe toda la pantalla sin scroll */ -html, body { - width: 100vw; - height: 100dvh; - overflow: hidden; - font-family: Ubuntu, sans-serif; +html, +body { + min-height: 100dvh; + font-family: 'Ubuntu', sans-serif; + font-weight: 400; display: flex; flex-direction: column; + scroll-padding-top: var(--scroll-padding, 60px); } body { - background-image: url('../img/bg.png'); + background-image: url("../img/bg.png"); background-size: cover; background-position: center; background-repeat: no-repeat; } /* 🔹 Barra Superior */ -.top-bar { +header { + position: sticky; + z-index: 1000; + top: 0; + display: flex; justify-content: space-between; - font-size: clamp(1.1rem, 0.972rem + 0.587vw, 1.5rem); /* min 350px | max 1440px*/ + font-size: clamp( + 1.1rem, + 0.972rem + 0.587vw, + 1.5rem + ); /* min 350px | max 1440px*/ align-items: center; - background-color: #131313; - color: white; + background-color: var(--background-200); + color: var(--text); padding: 0.3em; } -.top-bar > .left { +header > .left { display: flex; height: 100%; gap: 0.4em; @@ -74,7 +123,7 @@ body { .right { display: flex; - height: 1.7em; + height: 1.7em; gap: 0.5em; align-items: center; align-content: stretch; @@ -83,153 +132,157 @@ body { justify-content: start; } -.right a { +.right > * { + --background-items: var(--background-300); + --background-items-hover: var(--background-400); + height: 100%; + width: 100%; border-radius: 0.4em; - background: #3F3F3F; - padding: 0.1em; + background: var(--background-items); + transition: background 0.3s; + border: 0.1em solid var(--background-items-hover); + padding: 0.05em; } -.right a:hover { - background: #5a5858; +@media (hover: hover) { + .right > *:hover { + background: var(--background-items-hover); + border: 0.1em solid var(--background-items-hover); + } } -.right a img { +.right > * svg{ + cursor: pointer; + padding: 0.05rem; height: 100%; + width: 100%; aspect-ratio: 1; + fill: var(--text); } /* Contenedor Principal */ .container { flex-grow: 1; - max-height: calc(100dvh - clamp(1.1rem, 0.972rem + 0.587vw, 1.5rem)*2.3); /* chapuza total, no se como hacerlo bien*/ display: flex; } /* Barra Lateral */ -.sidebar { +nav { + --background: hsla(from var(--background-200) h s l / 75%); + + position: sticky; + left: 0; min-width: clamp(50px, 8dvw, 90px); - background: rgba(29, 29, 29, 0.75); + background: var(--background); +} + +nav ul { display: flex; flex-direction: column; - align-items: stretch; gap: 0.3rem; padding: 0.3rem; } /* Elementos apilados en la barra lateral */ -.sidebar > * { +nav li { + --background-items: var(--background-300); + --background-items-hover: var(--background-400); + display: flex; justify-content: center; align-items: center; - background: rgba(67, 58, 67, 0.9); + background: var(--background-items); border-radius: 0.5rem; + border: 0.2rem solid var(--background-items-hover); cursor: pointer; transition: background 0.3s; padding: 0.1rem; width: 100%; + aspect-ratio: 1; + + &:hover { + background: var(--background-items-hover); + } +} + +nav a:is(.active) svg { + fill: var(--accent); } -.sidebar > *:hover { - background-color: #555; +.svg-container { + height: 100%; } -.sidebar img { +.svg-container svg { /* ! Apply in about.html and activities.html as well */ + height: 100%; width: 100%; - aspect-ratio: 1; - object-fit: cover; + fill: var(--text); } +#sidebarCollapse { + display: none; +} + + + @media (max-width: 425px) { - .sidebar { - align-self: self-start; - margin-top: 0.5rem; + nav:not(.show) { + min-width: auto; + background: none; + } + + nav:not(.show) > #sidebarCollapse { + display: flex; + border: 0; border-radius: 0 0.5rem 0.5rem 0; - min-width: 1.65rem; + background: var(--background); + min-width: 1.5rem; min-height: 2.5rem; - position: relative; - cursor: pointer; + } + + @media (hover: hover) { + nav:not(.show) > #sidebarCollapse:hover { + background-color: var(--background-400); + border: 0; + } } - .sidebar::before { - content: ''; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); + nav > #sidebarCollapse > svg { + align-self: center; width: 100%; height: 100%; - background: url('../icons/chevron_right_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg') no-repeat center; - background-size: contain; - } - - .sidebar:hover { - background-color: rgba(17, 17, 17, 0.75);; + fill: var(--text); } - .sidebar * { - display: none; + nav:not(.show) ul { + display: none !important; } -} - -/* Contenido Principal */ -.content { - flex: 1; - display: grid; - overflow-x: hidden; - overflow-y: auto; - grid-template-rows: auto 1fr; /* Define la altura de la primera columna*/ - gap: 0.5em; - padding: 0.5em; -} - -.content::-webkit-scrollbar { - width: 0.5em; -} - -.content::-webkit-scrollbar-track { - background: rgba(29, 29, 29, 1); -} - -.content::-webkit-scrollbar-thumb { - background: rgba(105, 105, 105, 0.65); - border-radius: 8px; - border: 2px solid rgba(29, 29, 29, 1); -} -.content::-webkit-scrollbar-thumb:hover { - background: rgba(150, 150, 150, 0.75); -} - -/* Primera fila */ -.row:first-child { - display: flex; - justify-content: center; - flex-wrap: nowrap; -} + nav:is(.show) > #sidebarCollapse { + --margin: 0.25rem; -/* Segunda fila */ -.row:last-child { - display: grid; - grid-template-columns: 1fr 1fr; - width: 100%; - gap: 0.5em; - align-items: center; -} + position: absolute; + bottom: var(--margin); + left: var(--margin); -@media (max-width: 1275px) or (max-height: 850px) { - .row:last-child { display: flex; - flex-direction: column; + border: 0.15rem solid var(--background-500); + border-radius: 0.5rem; + background: var(--background-300); + width: calc(100% - 2 * var(--margin)); + aspect-ratio: 1; } -} -/* Segunda fila primera columna */ -.row:last-child > *:first-child { - justify-self: end; -} + @media (hover: hover) { + nav:is(.show) > #sidebarCollapse:hover { + background-color: var(--background-400); + border: 0; + } + } -/* Segunda fila segunda columna */ -.row:last-child > *:last-child:not(:first-child) { - justify-self: start; + nav:is(.show) > #sidebarCollapse > svg { + transform: rotate(180deg); + justify-self: center; + } } \ No newline at end of file diff --git a/assets/css/window.css b/assets/css/window.css deleted file mode 100644 index 91a3912..0000000 --- a/assets/css/window.css +++ /dev/null @@ -1,50 +0,0 @@ -.window-component { - background: rgba(29, 29, 29, 0.75); - font-size: clamp(1.25rem, 0.861rem + 1.78vw, 2rem); - width: 100%; - height: 100%; - border-radius: 0.2em; - position: relative; -} - -.window-controls { - position: absolute; - top: 0.2em; - right: 0.2em; - display: flex; - flex-direction: row; - flex-wrap: nowrap; - align-items: start; - gap: 0.2em; -} - -.window-controls > .win-control { - width: 0.6em; - height: 0.6em; - border-radius: 50%; - background: #131313; - display: flex; - justify-content: center; - align-items: center; -} - -.window-controls > .win-control img { - width: 100%; - height: 100%; -} - -.win-control + .maximize-icon { - padding: 0.12em; -} - -.window-controls > .win-control:hover { - background: #3F3F3F; -} - -.window-controls > .win-control + .close-icon { - background: #EA5322; -} - -.window-controls > .win-control + .close-icon:hover { - background: #f78f62; -} \ No newline at end of file diff --git a/assets/icons/icons8-github.svg b/assets/icons/icons8-github.svg new file mode 100644 index 0000000..0d58006 --- /dev/null +++ b/assets/icons/icons8-github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/img/git_workshop.jpg b/assets/img/git_workshop.jpg new file mode 100644 index 0000000..709e75a Binary files /dev/null and b/assets/img/git_workshop.jpg differ diff --git a/assets/img/install-party-2025-1.jpg b/assets/img/install-party-2025-1.jpg new file mode 100644 index 0000000..7a71946 Binary files /dev/null and b/assets/img/install-party-2025-1.jpg differ diff --git a/assets/img/install-party-2025-2.jpg b/assets/img/install-party-2025-2.jpg new file mode 100644 index 0000000..95b3368 Binary files /dev/null and b/assets/img/install-party-2025-2.jpg differ diff --git a/assets/img/install-party-2025-3.jpg b/assets/img/install-party-2025-3.jpg new file mode 100644 index 0000000..7566b1f Binary files /dev/null and b/assets/img/install-party-2025-3.jpg differ diff --git a/assets/img/install_party.jpeg b/assets/img/install_party.jpeg index 9e9b65b..28c3dfc 100644 Binary files a/assets/img/install_party.jpeg and b/assets/img/install_party.jpeg differ diff --git a/assets/js/carrousel.js b/assets/js/carrousel.js new file mode 100644 index 0000000..ff38bed --- /dev/null +++ b/assets/js/carrousel.js @@ -0,0 +1,52 @@ +const contentElement = document.querySelectorAll(".content"); +function maxHeightCarrousel() { + contentElement.forEach((element) => { + const infoElement = element.querySelector(".info"); + const carouselElement = element.querySelector(".carousel"); + if (carouselElement.clientHeight + 1 > infoElement.clientHeight) { + carouselElement.style.maxHeight = infoElement.clientHeight + "px"; + } else { + carouselElement.style.maxHeight = ""; + } + }); +} + +window.addEventListener("resize", () => { + maxHeightCarrousel(); +}); +maxHeightCarrousel(); + +// Rotate carrousel elements +const carrouselListElements = document.querySelectorAll(".carousel-inner"); +function scrollCarrousel(index, direction) { + const carrouselListElement = carrouselListElements[index]; + const activeElement = carrouselListElement.querySelector(".active"); + let newActiveElement; + + if (direction === "next") { + newActiveElement = activeElement.nextElementSibling || carrouselListElement.firstElementChild; + } else if (direction === "prev") { + newActiveElement = activeElement.previousElementSibling || carrouselListElement.lastElementChild; + } + + if (newActiveElement) { + activeElement.classList.remove("active"); + newActiveElement.classList.add("active"); + } +} + +// Event listeners for carrousel buttons +const carrouselNextButtons = document.querySelectorAll(".carousel .next"); +carrouselNextButtons.forEach((element, index) => { + element.addEventListener("click", () => { + scrollCarrousel(index, "next"); + }); +}); + +const carrouselPrevButtons = document.querySelectorAll(".carousel .prev"); +carrouselPrevButtons.forEach((element, index) => { + element.addEventListener("click", () => { + scrollCarrousel(index, "prev"); + }); +}); + diff --git a/assets/js/colorMode.js b/assets/js/colorMode.js new file mode 100644 index 0000000..a7ee238 --- /dev/null +++ b/assets/js/colorMode.js @@ -0,0 +1,28 @@ +let lightMode = localStorage.getItem('lightMode'); +const toggleModeButton = document.querySelector('#colorModeButton'); + +if(lightMode === 'enabled'){ + document.body.classList.remove('dark'); + document.documentElement.style.setProperty('color-scheme', 'light'); +} +else + document.documentElement.style.setProperty('color-scheme', 'dark'); + + + +function toggleColorMode() { + if(lightMode === 'enabled') { + document.body.classList.add('dark'); + document.documentElement.style.setProperty('color-scheme', 'dark'); + lightMode = null; + } else { + document.body.classList.remove('dark'); + document.documentElement.style.setProperty('color-scheme', 'light'); + lightMode = 'enabled'; + } + localStorage.setItem('lightMode', lightMode); +} + +toggleModeButton.addEventListener('click', () => { + toggleColorMode(); +}); \ No newline at end of file diff --git a/assets/js/components.js b/assets/js/components.js index 2194d96..7ec0eb1 100644 --- a/assets/js/components.js +++ b/assets/js/components.js @@ -15,10 +15,22 @@ function loadComponent(selector, file) { // Load components on page load event document.addEventListener("DOMContentLoaded", () => { Promise.all([ - loadComponent(".title-component", "./components/title.html"), + loadComponent(".main-title", "./components/title.html"), loadComponent(".about-component", "./components/about.html"), loadComponent(".activities-component", "./components/activities.html"), + loadComponent(".activities-title", "./components/activities-title.html"), ]).then(() => { - loadComponent(".window-component", "./components/window.html"); + loadComponent(".window-component", "./components/window.html").then(() => { + /** + * ! Chapuzon historico, esto es para que el boton de maximice de la card de activitiats de main redirija a activities.html. + * Es una tonteria de feature ademas xd. + */ + const maximizeButton = document.querySelector( + ".activities-component .maximize-icon" + ); + maximizeButton.addEventListener("click", () => { + location.href='activities.html'; + }); + }); }); }); \ No newline at end of file diff --git a/assets/js/sidebar.js b/assets/js/sidebar.js new file mode 100644 index 0000000..e372be6 --- /dev/null +++ b/assets/js/sidebar.js @@ -0,0 +1,26 @@ +const sidebar = document.getElementById("sidebar"); +const sidebarButton = document.getElementById("sidebarCollapse"); +sidebarButton.addEventListener("click", () => { + sidebar.classList.toggle("show"); + adjustSidebarTop(); + sidebarButton.blur(); +}); + +function adjustSidebarTop() { + const topBar = document.getElementById("topbar"); + let topBarHeight = topBar.clientHeight; + + if (getComputedStyle(sidebarButton).display != "none" && !sidebar.classList.contains("show")) { + const remInPixels = parseFloat( + getComputedStyle(document.documentElement).fontSize + ); + topBarHeight += 0.5 * remInPixels; + } + + sidebar.style.top = `${topBarHeight}px`; + sidebar.style.maxHeight = `calc(100vh - ${topBarHeight}px)`; +} + +adjustSidebarTop(); +window.addEventListener("resize", adjustSidebarTop); +window.addEventListener("scroll", adjustSidebarTop); diff --git a/assets/js/topbar.js b/assets/js/topbar.js new file mode 100644 index 0000000..157e2a1 --- /dev/null +++ b/assets/js/topbar.js @@ -0,0 +1,38 @@ +function updateDateTime() { + const dateTimeElement = document.getElementById("top_datetime"); + const now = new Date(); + + // Diría que las fechas de Ubuntu salen más o menos así + const months = [ + "Jan", + "Feb", + "Mar", + "Apr", + "May", + "Jun", + "Jul", + "Aug", + "Sep", + "Oct", + "Nov", + "Dec", + ]; + + const day = now.getDate(); + const month = months[now.getMonth()]; + const hours = now.getHours().toString().padStart(2, "0"); + const minutes = now.getMinutes().toString().padStart(2, "0"); + + dateTimeElement.textContent = `${day} ${month} ${hours}:${minutes}`; +} + +setInterval(updateDateTime, 1000); + +updateDateTime(); + +// Adjust scroll padding for anchor links +const topbar = document.getElementById("topbar"); +const main = document.querySelector("main"); +const mainStyle = getComputedStyle(main); +const mainPaddingTop = parseInt(mainStyle.paddingTop); +document.documentElement.style.setProperty('--scroll-padding', topbar.clientHeight + mainPaddingTop + 'px'); diff --git a/components/about.html b/components/about.html index 90b718e..ba8edb6 100644 --- a/components/about.html +++ b/components/about.html @@ -1,27 +1,28 @@
- info -

¿Qué es LinuxUPC?

+
+ +
+

Què és LinuxUPC?

-

- LinuxUPC es una asociación sin ánimo de lucro, dedicada al estudio y difusión del Software Libre en el seno de la Universitat Politècnica de Catalunya. -

-

- Los objetivos de la asociación son: -

+

LinuxUPC és una associació sense ànim de lucre, dedicada a l'estudi i difusió del Programari Lliure en la Universitat Politècnica de Catalunya.

+

Els objectius de l'associació són:

  1. - Promover y formar en el uso de la cultura, las redes y hardware libre en todos los estamentos de la universidad. + Promoure i formar en l'ús de la cultura, les xarxes i maquinari lliure en tots els estaments de la universitat.
  2. - Promover, como actividad de extensión universitaria, la participación en proyectos de software, cultura, redes y hardware libres. + Promoure, com a activitat d'extensió universitària, la participació en projectes de programari, cultura, xarxes i maquinari lliure.
  3. - Promover buenas prácticas en las actividades de especificación, diseño, implementación, implantación y gestión de proyectos de software libre. + Promoure bones pràctiques en les activitats d'especificació, disseny, implementació, implantació i gestió de projectes de programari lliure.
  4. - Promover el uso y la colaboración con proyectos de software libre en las actividades de especificación, implementación, implantación y gestión de proyectos de software libre. + Promoure l'ús i la col·laboració amb projectes de programari lliure en les activitats d'especificació, implementació, implantació i gestió de projectes de programari lliure.
+

Contacte

+

Email: linuxupc@disroot.org

+

Adreça: C. Jordi Girona 1-3, Edifici Omega, Despatx S105 Campus Nord

\ No newline at end of file diff --git a/components/activities-title.html b/components/activities-title.html new file mode 100644 index 0000000..869129b --- /dev/null +++ b/components/activities-title.html @@ -0,0 +1,7 @@ +
+
+
+

Activitats

+
+

Activitats i esdeveniments que hem realitzat o realitzarem

+
\ No newline at end of file diff --git a/components/activities.html b/components/activities.html index 8fa3166..b09eb77 100644 --- a/components/activities.html +++ b/components/activities.html @@ -1,38 +1,42 @@
- icon -

Actividades

+
+ +
+

Activitats

-

- Aprende, experimenta y colabora en nuestra comunidad. ¡Únete a nuestros eventos y mejora tus habilidades!" 🚀 -

+

Aprèn, experimenta i col·labora en la nostra comunitat. Uneix-te a les nostres activitats i millora les teves habilitats! 🚀

- event + event
-

📌Install Party

-

¡Instala Linux con nuestra ayuda! Trae tu portátil y te guiaremos en el proceso. Aprenderás los primeros pasos para moverte en este nuevo entorno y aprovechar todo su potencial. 🚀

-

📅Fecha: 15 de Marzo, 2025

-

📍Lugar: X

- +

📌Git Workshop

+

Aprèn des de zero a usar Git per a gestionar versions de manera eficient i col·laborar en projectes en GitHub sense caos ni arxius versioFinalFinalisima. 😜

+

📅Data: 26 de Febrer, 2025

+

🕛Hora: 12:00

+

⌛Durada: 2h

+

📍Lloc: A5001

+
- event + event
-

📌Stream - Linux Basics

-

Te enseñamos desde cero lo que necesitas saber para empezar: gestionar la terminal, archivos, instalar programas y entender la estructura del sistema.

-

📅Fecha: 15 de Marzo, 2025

-

📍Lugar: X

- +

📌Install Party

+

Instal·la Linux amb la nostra ajuda! Porta el teu portàtil i et guiarem en el procés. Aprendràs els primers passos per a moure't en aquest entorn i aprofitar tot el seu potencial. 😉

+

📅Data: 18 de Setembre, 2024

+

🕛Hora: 10:00-19:00

+

⌛Durada: 1h

+

📍Lloc: A6104-A6105

+
-
+ -
+
\ No newline at end of file diff --git a/components/title.html b/components/title.html index 5d4ca02..ac9aab4 100644 --- a/components/title.html +++ b/components/title.html @@ -4,5 +4,5 @@ logo

LinuxUPC

-

Explora, aprende y crea con Software Libre en la UPC

+

Associació d'estudiants apassionats del programari lliure

\ No newline at end of file diff --git a/components/window.html b/components/window.html index 62f2780..f29b55e 100644 --- a/components/window.html +++ b/components/window.html @@ -1,11 +1,11 @@
-
- minimize -
-
- maximize -
-
- close -
+ + +
\ No newline at end of file diff --git a/index.html b/index.html index ec8a0d4..8d33c70 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,21 @@ - Linux UPC - + LinuxUPC + - + - - - - + + + + + + - + -
+
MENU

LinuxUPC

@@ -22,29 +24,45 @@

LinuxUPC

2 Feb 10:01

 - - LIGHT MODE - + - X + - INSTA + + + +
- + +
-
+
@@ -54,25 +72,7 @@

LinuxUPC

- + + diff --git a/pages/.gitkeep b/pages/.gitkeep deleted file mode 100644 index e69de29..0000000