Initial commit

.gitignore

@@ -0,0 +1,21 @@
+# build output
+dist/
+
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

README.md

@@ -0,0 +1,54 @@
+# Astro Starter Kit: Basics
+
+```
+npm create astro@latest -- --template basics
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554)
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```
+/
+├── public/
+│   └── favicon.svg
+├── src/
+│   ├── components/
+│   │   └── Card.astro
+│   ├── layouts/
+│   │   └── Layout.astro
+│   └── pages/
+│       └── index.astro
+└── package.json
+```
+
+Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+
+There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+
+Any static assets, like images, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `npm install`             | Installs dependencies                            |
+| `npm run dev`             | Starts local dev server at `localhost:3000`      |
+| `npm run build`           | Build your production site to `./dist/`          |
+| `npm run preview`         | Preview your build locally, before deploying     |
+| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro -- --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

astro.config.mjs

@@ -0,0 +1,8 @@
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({});
+
+{
+    compressHTML: true
+}

package.json

@@ -0,0 +1,15 @@
+{
+  "name": "fosc-v3",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "astro": "^2.10.14"
+  }
+}

public/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png?v=2"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "FOSC",
+    "short_name": "FOSC",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png?v=2",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png?v=2",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

src/components/Card.astro

@@ -0,0 +1,61 @@
+---
+interface Props {
+	title: string;
+	body: string;
+	href: string;
+}
+
+const { href, title, body } = Astro.props;
+---
+
+<li class="link-card">
+	<a href={href}>
+		<h2>
+			{title}
+			<span>&rarr;</span>
+		</h2>
+		<p>
+			{body}
+		</p>
+	</a>
+</li>
+<style>
+	.link-card {
+		list-style: none;
+		display: flex;
+		padding: 1px;
+		background-color: #23262d;
+		background-image: none;
+		background-size: 400%;
+		border-radius: 7px;
+		background-position: 100%;
+		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+	}
+	.link-card > a {
+		width: 100%;
+		text-decoration: none;
+		line-height: 1.4;
+		padding: calc(1.5rem - 1px);
+		border-radius: 8px;
+		color: white;
+		background-color: #23262d;
+		opacity: 0.8;
+	}
+	h2 {
+		margin: 0;
+		font-size: 1.25rem;
+		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+	p {
+		margin-top: 0.5rem;
+		margin-bottom: 0;
+	}
+	.link-card:is(:hover, :focus-within) {
+		background-position: 0;
+		background-image: var(--accent-gradient);
+	}
+	.link-card:is(:hover, :focus-within) h2 {
+		color: rgb(var(--accent-light));
+	}
+</style>

src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

src/layouts/Layout.astro

@@ -0,0 +1,46 @@
+---
+interface Props {
+  title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="description" content="Astro description" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="generator" content={Astro.generator} />
+    <title>{title}</title>
+  </head>
+
+  <body>
+    <slot />
+  </body>
+</html>
+
+<style is:global>
+  :root {
+    --accent: 136, 58, 234;
+    --accent-light: 224, 204, 250;
+    --accent-dark: 49, 10, 101;
+    --accent-gradient: linear-gradient(
+      45deg,
+      rgb(var(--accent)),
+      rgb(var(--accent-light)) 30%,
+      white 60%
+    );
+  }
+  html {
+    font-family: system-ui, sans-serif;
+    background: #913117;
+    background-size: 224px;
+  }
+  code {
+    font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
+      DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
+  }
+</style>

src/layouts/old.astro

@@ -0,0 +1,56 @@
+
+---
+import '../styles/old.css';
+---
+<!DOCTYPE html>
+<html lang="en">
+  <!-- ****************************** -->
+  <!-- * Ah shit, here we go again. * -->
+  <!-- ****************************** -->
+
+  <head>
+    <meta charset="utf-8" />
+    <title>FOSC - Free Open Source Club</title>
+
+    <meta
+      name="description"
+      content="FOSC: Hackerspace located at Universidad Politecnica de Cartagena (UPCT)"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <link
+      href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap"
+      rel="stylesheet"
+    />
+
+    <!-- Massive amount of favicon related stuff -->
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="/apple-touch-icon.png?v=2"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="/favicon-32x32.png?v=2"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="/favicon-16x16.png?v=2"
+    />
+    <link rel="manifest" href="/site.webmanifest?v=2" />
+    <link rel="mask-icon" href="/safari-pinned-tab.svg?v=2" color="#5bbad5" />
+    <link rel="shortcut icon" href="/favicon.ico?v=2" />
+    <meta name="apple-mobile-web-app-title" content="FOSC" />
+    <meta name="application-name" content="FOSC" />
+    <meta name="msapplication-TileColor" content="#da532c" />
+    <meta name="theme-color" content="#ffffff" />
+  </head>
+
+  <body>
+    <slot />
+  </body>
+</html>

src/pages/cum.astro

@@ -0,0 +1,11 @@
+---
+import Layout from '../layouts/Layout.astro';
+import Card from '../components/Card.astro';
+---
+
+<Layout title="Welcome to Astro.">
+	<main>
+		cum
+	</main>
+</Layout>
+

src/pages/old.astro

@@ -0,0 +1,365 @@
+---
+import Layout from '../layouts/old.astro';
+---
+
+<Layout>
+  <header>
+    <section class="navigation">
+      <div class="nav-container">
+        <div class="brand">
+          <picture>
+            <source type="image/webp" srcset="img/Logo-invert.webp" />
+            <source type="image/png" srcset="img/Logo-invert.png" />
+            <img alt="FOSC Logo" loading="lazy" src="img/Logo-invert.png" style="width: 100px" />
+          </picture>
+        </div>
+        <nav>
+          <div class="nav-mobile">
+            <span id="nav-toggle"><span></span></span>
+          </div>
+          <ul class="nav-list">
+            <li>
+              <a href="https://blog.fosc.space"><span class="iconify" data-icon="mdi:notebook"></span>
+                Blog</a>
+            </li>
+            <li>
+              <a href="https://gallery.fosc.space"><span class="iconify" data-icon="mdi:image"></span>
+                Gallery</a>
+            </li>
+            <li>
+              <a href="https://download.fosc.space"><span class="iconify" data-icon="mdi:download"></span>
+                Downloads</a>
+            </li>
+            <li>
+              <a href="#contact"><span class="iconify" data-icon="mdi:account"></span>
+                Contact</a>
+            </li>
+            <li>
+              <a href="#!"><span class="iconify" data-icon="mdi:cogs"></span>
+                Services</a>
+              <ul class="nav-dropdown">
+                <li>
+                  <a href="https://cloud.fosc.space"><span class="iconify" data-icon="mdi:cloud"></span>
+                    Cloud</a>
+                </li>
+                <li>
+                  <a href="https://wiki.fosc.space"><span class="iconify" data-icon="mdi:text"></span>
+                    Wiki</a>
+                </li>
+                <li>
+                  <a href="https://rss.fosc.space"><span class="iconify" data-icon="mdi:rss"></span> RSS</a>
+                </li>
+                <li>
+                  <a href="https://netdata.fosc.space"><span class="iconify" data-icon="mdi:finance"></span>
+                    NetData</a>
+                </li>
+                <li>
+                  <a href="https://plausible.fosc.space"><span class="iconify" data-icon="mdi:google-analytics"></span>
+                    Analytics</a>
+                </li>
+                <li>
+                  <a href="https://git.fosc.space"><span class="iconify" data-icon="mdi:git"></span> Stolen
+                    Code</a>
+                </li>
+                <li>
+                  <a href="https://services.fosc.space"><span class="iconify" data-icon="mdi:bookmark-plus"></span>
+                    More</a>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </section>
+
+   
+  </header>
+
+  <div class="hero">
+    <h1><span class="color">FOSC</span></h1>
+    <h3>Hackerspace located at Polytechnic University of Cartagena</h3>
+    <hr />
+  </div>
+
+  <div class="fosc">
+    <h1>What is FOSC?</h1>
+    <hr />
+    <h3>
+      We are a student association focused on expanding free software and
+      hacker culture
+    </h3>
+  </div>
+
+  <div class="bgallery">
+    <div class="gallery">
+      <div class="column-gallery">
+        <picture>
+          <source type="image/webp" srcset="img/junction2018.webp" />
+          <source type="image/jpeg" srcset="img/junction2018.jpg" />
+          <img loading="lazy" src="img/junction2018.jpg" alt="Winners at Junction 2018" />
+        </picture>
+        <picture>
+          <source type="image/webp" srcset="/img/santi.webp" />
+          <source type="image/jpeg" srcset="/img/santi.jpg" />
+          <img loading="lazy" src="img/santi.jpg" alt="Explaining MCU glitching at Makers Murcia" />
+        </picture>
+        <picture>
+          <source type="image/webp" srcset="img/kids.webp" />
+          <source type="image/jpeg" srcset="img/kids.jpg" />
+          <img loading="lazy" src="img/kids.jpg" alt="Showing 3D printing at Semana de la Ciencia" />
+        </picture>
+        <picture>
+          <source type="image/webp" srcset="img/sec.webp" />
+          <source type="image/jpeg" srcset="img/sec.jpg" />
+          <img loading="lazy" src="img/sec.jpg" alt="More Semana de la Ciencia" />
+        </picture>
+        <picture>
+          <source type="image/webp" srcset="img/junction2018-1.webp" />
+          <source type="image/jpeg" srcset="img/junction2018-1.jpg" />
+          <img loading="lazy" src="img/junction2018-1.jpg" alt="Hacking at Junction 2018" />
+        </picture>
+      </div>
+
+      <div class="column-gallery">
+        <picture>
+          <source type="image/webp" srcset="img/app.webp" />
+          <source type="image/jpeg" srcset="img/app.jpg" />
+          <img loading="lazy" src="img/app.jpg" alt="Speaking for Puertas Violetas app" />
+        </picture>
+        <picture>
+          <source type="image/webp" srcset="img/bitup.webp" />
+          <source type="image/jpeg" srcset="img/bitup.jpg" />
+          <img loading="lazy" src="img/bitup.jpg" alt="Giving an ESP32 hacking talk at BITUP 2019" />
+        </picture>
+        <picture>
+          <source type="image/webp" srcset="img/soldadura.webp" />
+          <source type="image/jpeg" srcset="img/soldadura.jpg" />
+          <img loading="lazy" src="img/soldadura.jpg" alt="Learning to solder" />
+        </picture>
+        <picture>
+          <source type="image/webp" srcset="img/hacking.webp" />
+          <source type="image/jpeg" srcset="img/hacking.jpg" />
+          <img loading="lazy" src="img/hacking.jpg" alt="Installing Coreboot open firmware into a Thinkpad x230" />
+        </picture>
+        <picture>
+          <source type="image/webp" srcset="img/junction2019-1.webp" />
+          <source type="image/jpeg" srcset="img/junction2019-1.jpg" />
+          <img loading="lazy" src="img/junction2019-1.jpg" alt="Posing at Junction 2019" />
+        </picture>
+      </div>
+
+      <div class="column-gallery">
+        <picture>
+          <source type="image/webp" srcset="img/pepemod.webp" />
+          <source type="image/jpeg" srcset="img/pepemod.jpg" />
+          <img loading="lazy" src="img/pepemod.jpg" alt="Soldering Nitrocaster's adapter board to a Thinkpad x230" />
+        </picture>
+        <picture>
+          <source type="image/webp" srcset="img/atresmedia.webp" />
+          <source type="image/jpeg" srcset="img/atresmedia.jpg" />
+          <img loading="lazy" src="img/atresmedia.jpg" alt="Having fun in Atresmedia" />
+        </picture>
+        <picture>
+          <source type="image/webp" srcset="img/junction2019.webp" />
+          <source type="image/jpeg" srcset="img/junction2019.jpg" />
+          <img loading="lazy" src="img/junction2019.jpg" alt="Hacking at Junction 2019" />
+        </picture>
+        <picture>
+          <source type="image/webp" srcset="img/printer3d.webp" />
+          <source type="image/jpeg" srcset="img/printer3d.jpg" />
+          <img loading="lazy" src="img/printer3d.jpg" alt="3D printer, 3D printing" />
+        </picture>
+      </div>
+
+      <div class="column-gallery">
+        <picture>
+          <source type="image/webp" srcset="img/flp1.webp" />
+          <source type="image/jpeg" srcset="img/flp1.jpg" />
+          <img loading="lazy" src="img/flp1.jpg" alt="First FOSC LAN Party" />
+        </picture>
+        <picture>
+          <source type="image/webp" srcset="img/soldadura.webp" />
+          <source type="image/jpeg" srcset="img/soldadura.jpg" />
+          <img loading="lazy" src="img/soldadura.jpg" alt="Soldering workshop" />
+        </picture>
+        <picture>
+          <source type="image/webp" srcset="img/nn1.webp" />
+          <source type="image/jpeg" srcset="img/nn1.jpg" />
+          <img loading="lazy" src="img/nn1.jpg" alt="Giving an open firmware talk at Navaja Negra 2019" />
+        </picture>
+        <picture>
+          <source type="image/webp" srcset="img/fosc.webp" />
+          <source type="image/jpeg" srcset="img/fosc.jpg" />
+          <img loading="lazy" src="img/fosc2.jpg" alt="Showing some stuff during Cable Amarillo" />
+        </picture>
+      </div>
+    </div>
+  </div>
+
+  <div class="mgallery">
+    <h3>
+      Linux, hackathons, courses, talks, server systems administration, open
+      software, firmware and hardware!
+    </h3>
+  </div>
+
+  <div id="services">
+    <div class="services">
+      <h1>OUR SERVICES</h1>
+      <p>
+        We believe in self hosting! Our members can enjoy many different
+        applications which run from our servers.
+      </p>
+
+      <p>Here we show a few ones, but there are much more.</p>
+    </div>
+
+    <div class="tabla">
+      <div class="column">
+        <a href="https://cloud.fosc.space">
+          <picture>
+            <source type="image/webp" srcset="icons/cloud-computing.webp" />
+            <source type="image/png" srcset="icons/cloud-computing.png" />
+            <img loading="lazy" src="icons/cloud-computing.png" alt="Cloud" />
+          </picture>
+        </a>
+        <h4>Cloud</h4>
+      </div>
+
+      <div class="column">
+        <a href="https://doc.fosc.space">
+          <picture>
+            <source type="image/webp" srcset="icons/book.webp" />
+            <source type="image/png" srcset="icons/book.png" />
+            <img loading="lazy" src="icons/book.png" alt="Wiki" />
+          </picture>
+        </a>
+        <h4>Wiki</h4>
+      </div>
+
+      <div class="column">
+        <a href="https://rss.fosc.space">
+          <picture>
+            <source type="image/webp" srcset="icons/rss2.webp" />
+            <source type="image/png" srcset="icons/rss2.png" />
+            <img loading="lazy" src="icons/rss2.png" alt="RSS" />
+          </picture>
+        </a>
+        <h4>RSS</h4>
+      </div>
+    </div>
+
+    <div class="tabla tabla2">
+      <div class="column">
+        <a href="https://netdata.fosc.space">
+          <picture>
+            <source type="image/webp" srcset="icons/chart.webp" />
+            <source type="image/png" srcset="icons/chart.png" />
+            <img loading="lazy" src="icons/chart.png" alt="NetData" />
+          </picture>
+        </a>
+        <h4>NetData</h4>
+      </div>
+
+      <div class="column">
+        <a href="https://plausible.fosc.space">
+          <picture>
+            <source type="image/webp" srcset="icons/analytics.webp" />
+            <source type="image/png" srcset="icons/analytics.png" />
+            <img loading="lazy" src="icons/analytics.png" alt="Analytics" />
+          </picture>
+        </a>
+        <h4>Analytics</h4>
+      </div>
+
+      <div class="column">
+        <a href="https://git.fosc.space">
+          <picture>
+            <source type="image/webp" srcset="icons/gitea.webp" />
+            <source type="image/png" srcset="icons/gitea.png" />
+            <img loading="lazy" src="icons/gitea.png" alt="Gitea" />
+          </picture>
+        </a>
+        <h4>Stolen Code</h4>
+      </div>
+    </div>
+  </div>
+
+  <div class="members" id="contact">
+    <h1>We're looking for new members!</h1>
+
+    <div class="shape">
+      <div class="cmembers cmembers1">
+        <h4>How do I become a member?</h4>
+        <hr />
+
+        <p>
+          You become a member by either coming to our physical hackerspace
+          often<br /><br />
+          If you've been coming a lot to the space, it's likely that you will
+          be asked to become a formal member.<br /><br />
+          <b>Even if you are not a member, if the lights are on, you are free
+            to come and hack inside.</b>
+        </p>
+      </div>
+
+      <div class="cmembers cmembers2">
+        <h4>Tell us anything</h4>
+        <hr />
+
+        <div class="contact_methods">
+          <p>
+            <span class="iconify" data-icon="mdi:twitter" style="color: #2196f3"></span>
+            <a href="https://twitter.com/foscupct">Contact us on Twitter</a>
+          </p>
+          <br />
+          <p>
+            <span class="iconify" data-icon="mdi:email" style="color: #f32821"></span>
+            <a href="mailto:contact@fosc.space">Send us an email</a>
+          </p>
+        </div>
+
+        <div class="button">
+          <button onclick="document.getElementById('mapButton').style.animation = 'rainbow 1s linear infinite'"
+            id="mapButton">
+            Or just come in
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="map">
+      <iframe id="map" title="Map view of our location" frameborder="0" allowfullscreen loading="lazy"
+        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1580.5054989176758!2d-0.9796837724532329!3d37.60190018337746!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd6341863c83cf8f%3A0xe24278be476b56b8!2sFOSC!5e0!3m2!1ses!2ses!4v1544058887076"></iframe>
+    </div>
+  </div>
+
+  <footer>
+    <hr />
+    <div class="foot-logo">
+      <picture>
+        <source type="image/webp" srcset="img/Logo-invert.webp" />
+        <source type="image/png" srcset="img/Logo-invert.png" />
+        <img loading="lazy" src="img/Logo-invert.png" alt="FOSC Logo" />
+      </picture>
+      <a href="https://git.fosc.space/fosc/fosc.space">WEBSITE SOURCE CODE</a>
+      <div class="author">
+        <p>
+          Icons made by
+          <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a>
+          and
+          <a href="https://www.flaticon.com/authors/smalllikeart" title="Smalllikeart">Smalllikeart</a>
+          from <a href="https://www.flaticon.com/">www.flaticon.com</a>.
+        </p>
+      </div>
+    </div>
+  </footer>
+
+  <!-- With the DOM ready, lazyload all pics and swap all icons -->
+  <script>
+    window.lazyLoadOptions = {
+      elements_selector: ".lazy",
+    };
+  </script>
+  <script src="https://code.iconify.design/2/2.2.1/iconify.min.js"></script>
+</Layout>

src/styles/old.css

@@ -0,0 +1,798 @@
+/*  ****************************** 
+    * Ah shit, here we go again. * 
+    ******************************  */
+
+/*This document is for the FOSC website. 
+You probably already know that, otherwise you can visit him here "https://fosc.space/"*/
+
+/*First, I'm sorry if there's any mistake, I'm not an expert yet.*/
+/*Second, this document is free, so you can see it, use it and modify it as you wish.*/
+/*Finally, the document is divided into parts for better reading.*/
+/*That's all, thank you.*/
+
+
+/*FONTS*/
+/**********************************************************************************/
+
+@font-face {
+  font-family: nixiefont;
+  src: url(../fonts/NixieOne.ttf);
+  font-display: swap;
+}
+
+@font-face {
+  font-family: AmericanCfont;
+  src: url(../fonts/AmericanC.ttf);
+  font-display: swap;
+}
+
+@font-face {
+  font-family: typermfont;
+  src: url(../fonts/typewcond.otf);
+  font-display: swap;
+}
+
+@font-face {
+  font-family: avenirfont;
+  src: url(../fonts/AvenirCondensed.ttf);
+  font-display: swap;
+}
+
+/*GLOBAL ATTRIBUTES*/
+/**********************************************************************************/
+
+* {
+  padding: 0;
+  margin: 0;
+  text-decoration: none;
+  list-style: none;
+  box-sizing: border-box;
+}
+
+body, html {
+  height: 100%;
+  font-family: "Fira Sans", Sans-Serif; 
+}
+
+body {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-color: black;
+  background-attachment: fixed;
+}
+
+
+body {
+  background-image: url(../img/coreboot2.webp);
+}
+
+img {
+  background-image: none;
+}
+
+a {
+  color: white
+}
+
+/* Rainbows */
+@keyframes rainbow {
+  0% {background-color: hsla(0, 70%, 50%, 1);}
+  10% {background-color: hsla(30, 70%, 50%, 1);}
+  20% {background-color: hsla(60, 70%, 50%, 1);}
+  30% {background-color: hsla(90, 70%, 50%, 1);}
+  40% {background-color: hsla(120, 70%, 50%, 1);}
+  50% {background-color: hsla(150, 70%, 50%, 1);}
+  60% {background-color: hsla(180, 70%, 50%, 1);}
+  70% {background-color: hsla(210, 70%, 50%, 1);}
+  80% {background-color: hsla(240, 70%, 50%, 1);}
+  90% {background-color: hsla(270, 70%, 50%, 1);}
+  100% {background-color: hsla(0, 70%, 50%, 1);}
+}
+
+/*TOP NAVBAR*/
+/**********************************************************************************/
+
+.navigation {
+  height: 100px;
+  width: 100%;
+  position: fixed;
+  background: #000;
+  font-size: 18px;
+  top: 0;
+}
+
+.brand {
+  position: absolute;
+  padding-left: 0px;
+  float: left;
+}
+
+.brand a, .brand a:visited {
+  color: white;
+  text-decoration: none;
+}
+
+.nav-container {
+  max-width: 1500px;
+  margin: 0 auto;
+}
+
+nav {
+  float: right;
+}
+
+nav ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+nav ul li {
+  float: left ;
+  position: relative;
+}
+
+nav ul li a i {
+  margin-right: 10px;
+}
+
+nav ul li a, nav ul li a:visited {
+  display: block;
+  padding: 0 20px;
+  line-height: 100px;
+  background: black;
+  color: white;
+  text-decoration: none;
+  text-transform: uppercase;
+}
+
+nav ul li a:hover, nav ul li a:visited:hover {
+  background: purple !important;
+  color: white;
+}
+
+nav ul li a:not(:only-child):after, nav ul li a:visited:not(:only-child):after {
+  padding-left: 4px;
+  content: ' ▾';
+}
+
+nav ul li ul li {
+  min-width: 190px;
+}
+
+nav ul li ul li a {
+  padding: 15px;
+  line-height: 20px;
+  background-color: #333 !important;
+}
+
+.nav-dropdown {
+  position: absolute;
+  display: none;
+  z-index: 1;
+  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
+}
+
+/* Mobile navigation */
+/**********************************************************************************/
+
+.nav-mobile {
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+  background: #000;
+  height: 70px;
+  width: 70px;
+}
+
+@media only screen and (max-width: 798px) {
+  
+  .nav-mobile {
+    display: block;
+  }
+
+  .nav-list {
+    margin-top: 30px;
+  }
+
+  nav {
+    width: 100%;
+    padding: 70px 0 15px;
+
+  }
+  nav ul {
+    display: none;
+    margin-top: 0px;
+
+  }
+  nav ul li {
+    float: none;
+    
+  }
+  nav ul li a {
+    padding: 15px;
+    line-height: 20px;
+    background-color: #333 !important;
+  }
+
+  nav ul li ul li a {
+    padding-left: 30px;
+    background-color: #444 !important;
+  }
+
+  .nav-dropdown {
+    position: static;
+  }
+  
+}
+
+@media screen and (min-width: 799px) {
+  
+  .nav-list {
+    display: block !important;
+  }
+
+}
+
+#nav-toggle {
+  position: absolute;
+  left: 18px;
+  top: 35px;
+  cursor: pointer;
+  padding: 10px 35px 16px 0px;
+}
+
+#nav-toggle span,
+#nav-toggle span:before,
+#nav-toggle span:after {
+  cursor: pointer;
+  border-radius: 1px;
+  height: 5px;
+  width: 35px;
+  background: #ffffff;
+  position: absolute;
+  display: block;
+  content: '';
+  transition: all 300ms ease-in-out;
+}
+
+#nav-toggle span:before {
+  top: -10px;
+}
+
+#nav-toggle span:after {
+  bottom: -10px;
+}
+
+#nav-toggle.active span {
+  background-color: transparent;
+}
+
+#nav-toggle.active span:before, #nav-toggle.active span:after {
+  top: 0;
+}
+
+#nav-toggle.active span:before {
+  transform: rotate(45deg);
+}
+
+#nav-toggle.active span:after {
+  transform: rotate(-45deg);
+}
+
+/*1 SECTION, WELCOME TO FOSC*/
+/**********************************************************************************/
+
+.hero h1 {
+  text-align: center;
+  color: white;
+  font-family: nixiefont;
+  font-size: 100px;
+  margin-top: 20%;
+  
+}
+
+.color {
+  background: linear-gradient(to top right, purple, blue);
+  color: white;
+}
+
+.hero h3 {
+  text-align: center;
+  color: beige;
+  font-family: nixiefont;
+  font-size: 22px;
+  text-transform: uppercase;
+  margin-top: 3%;
+  padding-bottom: 10px;
+}
+
+.hero hr {
+  height: 3px;
+  background-color: orange;
+  width: 500px;
+  margin-left: auto;
+  margin-right: auto;
+  border: none;
+  margin-top: 10px;
+}
+
+/*2 SECTION, WHAT IS FOSC?*/
+/**********************************************************************************/
+
+.fosc {
+  text-align: center;
+  background: #111;
+  width: 100%;
+  padding: 50px 0px 30px 0px;
+  height: auto;
+  margin-top: 20%;
+}
+
+.fosc h1 {
+  font-size: 120px;
+  font-family: AmericanCfont;
+  text-transform: uppercase;
+  color: white;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.fosc hr {
+  width: 300px;
+  height: 3px;
+  background: aqua;
+  border: none; 
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 20px;
+}
+
+.fosc h3 {
+  font-family: typermfont;
+  text-transform: uppercase;
+  font-size: 28px;
+  color: beige; 
+}
+
+/*3 SECTION, GALLERY FOSC*/
+/**********************************************************************************/
+
+.gallery {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 10px 50px 50px 50px;
+  background: #111;
+  margin-bottom: 0px;
+}
+
+.column-gallery {
+  flex: 20%;
+  max-width: 25%;
+  padding: 0px 4px;
+}
+
+.column-gallery img {
+  margin-top: 10px;
+  vertical-align: middle;
+  width: 100%;
+  border: 1px solid white;
+}
+
+.mgallery {
+  background-color: #111;
+  text-align: center;
+  padding-bottom: 50px;
+}
+
+.mgallery h3 {
+  color: white;
+  font-family: avenirfont;
+  font-size: 32px;
+  padding: 50px 0px;
+  margin: 0px 100px;
+}
+
+/*4 SECTION, SERVICES*/
+/**********************************************************************************/
+
+#services {
+  padding: 50px 0px;
+  background-color: #222;
+}
+
+.services {
+  background-color: #222;
+  padding: 60px 0px 100px 0px;
+  margin-bottom: 0px;
+}
+
+.services h1 {
+  text-align: center;
+  font-size: 80px;
+  font-family: nixiefont;
+  text-transform: uppercase;
+  color: white;
+  margin-bottom: 60px;
+}
+
+.services p  {
+  margin: 0px 300px;
+  font-size: 16px; 
+  text-align: center;
+  color: lightgray;
+} 
+
+.tabla {
+  display: flex;
+  padding: 0px;
+  background-color: #222;
+  color: white;
+}
+
+.tabla2 {
+  padding-bottom: 50px;
+}
+
+.column {
+  color: white;
+  text-align: center;
+  background-color: #222;
+  flex: 30%;
+  margin: 10px 60px;
+  
+}
+
+.column h4 {
+  letter-spacing: 2px;
+  margin-top: 15px;
+}
+
+.column img {
+  width: 30%;
+  margin-top: 10%;
+}
+
+.column img:hover {
+  filter: grayscale(100%);
+}
+
+/*5 SECTION, MEMBERS*/
+/**********************************************************************************/
+
+
+.members {
+  padding-top: 150px;
+  padding-bottom: 150px;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-attachment: fixed;
+}
+
+.no-webp .members {
+  background-image: url(../img/flp-dark.jpg);
+}
+
+.webp .members {
+  background-image: url(../img/flp-dark.webp);
+}
+
+.members h1 {
+  text-align: center;
+  font-size: 60px;
+  font-family: nixiefont;
+  /* text-transform: uppercase; */
+  color: white;
+  margin-bottom: 60px;
+}
+
+.shape {
+  display: flex;
+  margin-left: 10%;
+}
+
+.cmembers {
+  flex: 50%;
+  margin: 100px 50px 50px 50px;
+  color: white;
+}
+
+.cmembers h4 {
+  padding-bottom: 0px;
+  margin-bottom: 10px;
+  font-size: 24px;
+}
+
+.cmembers hr {
+  width: 500px;
+  height: 3px;
+  background: orange; 
+  margin-left: 0px;
+  margin-bottom: 30px;
+  border: none;
+}
+
+.cmembers p {
+  text-align: justify;
+}
+
+.cmembers span {
+  background-color: green;
+}
+
+#mapButton {
+  background-color: yellow;
+  color: black;
+  padding: 10px;
+  margin: 20px 0px;
+  text-transform: uppercase;
+  border: none;
+  cursor: pointer;
+}
+
+#mapButton:hover {
+  background-color: purple;
+  color: white;
+  transition: 0.5s;
+}
+
+#map {
+  height: 300px;
+  width: 80%;
+  border: 0;
+  display: block;
+  margin-left: auto;
+  margin-right: auto
+}
+
+/*FINALLY, FOOTER*/
+/**********************************************************************************/
+
+footer {
+  background-color: #000;
+
+}
+
+.foot-logo {
+  text-align: center;
+  padding: 30px;
+}
+
+.foot-logo img {
+  width: 8%;
+}
+
+.foot-logo a {
+  display: block;
+  color: white;
+  margin-top: 20px;
+  width: 200px;
+  margin-left: auto;
+  margin-right: auto;
+  border-bottom: 2px solid white;
+ 
+}
+
+.foot-logo p {
+  color: gray;
+  margin-top: 10px;
+}
+
+.foot-logo p a {
+  color: lightgray;
+  display: inline-block;
+  border: none;
+  width: auto;
+  margin-top: 10px;
+}
+  
+/*FIX RESPONSIVE WEB DESIGN*/
+/**********************************************************************************/
+
+@media only screen and (max-width: 1600px) {
+
+  .hero h1 {
+    font-size: 70px;
+  }
+
+  .fosc h1 {
+    font-size: 90px;
+  }
+
+  .fosc h3 {
+    font-size: 24px;
+    margin: 0px 25px;
+  }
+
+  .services h1 {
+    font-size: 70px;
+  }
+
+  .services p {
+    margin: 25px;
+  }
+
+  .column img {
+    width: 50%;
+  }
+
+  .shape {
+    flex-direction: column;
+    padding: 50px 0px;
+  }
+
+  .cmembers {
+    margin: 0px;
+    padding: 0px 25px;
+  }
+
+  .cmembers2 {
+    padding-top: 50px;
+  }
+
+  .cmembers h4 {
+    font-size: 20px;
+  }
+
+  .cmembers hr {
+    width: 200px;
+  }
+
+}
+
+/*RESPOSIVE WEB DESIGN FOR PHONES*/
+/**********************************************************************************/
+
+@media only screen and (max-width: 600px) {
+
+  .hero {
+    padding: 30% 0px;
+  }
+
+  .hero h1 {
+    font-size: 50px;
+    text-align: center;
+    letter-spacing: 3px;
+  }
+
+  .hero h3 {
+    font-size: 22px;
+    margin-top: 30px;
+    margin-left: 25px;
+    margin-right: 25px;
+  }
+
+  .hero  hr {
+    width: 100px;
+    margin-top: 0px;
+  }
+
+  .fosc {
+    padding-bottom: 10px;
+  }
+
+  .fosc h1 {
+    font-size: 60px;
+  }
+
+  .fosc hr {
+    width: 150px;
+  }
+
+  .fosc h3 {
+    font-size: 22px;
+    margin: 0px 25px;
+  }
+
+  .bgallery {
+    background-color: #111;
+  }
+
+  .gallery {
+    padding: 10px;
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+
+  .column-gallery {
+    padding: 0px 2px;
+  }
+
+  .column-gallery img {
+    margin-top: 2px;
+  }
+
+  .mgallery {
+    background-color: #111;
+    text-align: center;
+    padding-bottom: 50px;
+  }
+
+  .services {
+    padding: 50px 0px 50px 0px;
+  }
+
+  .mgallery h3 {
+    font-size: 22px;
+    padding: 30px 0px 0px 0px;
+    margin: 0px 25px;
+  }
+
+  .services h1 {
+    font-size: 40px;
+    margin-bottom: 30px;
+  }
+
+  .services p {
+    text-align: justify;
+    margin: 0px 25px;
+  }
+
+  .column {
+    padding: 0px;
+    margin: 0px;
+  }
+
+  .column img {
+    width: 35%;
+    margin: 0px;
+    padding-top: 30px;
+  }
+
+  .column h4 {
+    font-size: 18px;
+
+  }
+
+  .tabla2 {
+    padding-bottom: 50px;
+  }
+
+  .shape {
+    flex-direction: column;
+    padding: 50px 0px;
+  }
+
+  .cmembers {
+    margin: 0px;
+    padding: 0px 25px;
+
+  }
+
+  .cmembers2 {
+    padding-top: 50px;
+  }
+
+  .cmembers h4 {
+    font-size: 20px;
+
+  }
+
+  .cmembers hr {
+    width: 200px;
+  }
+
+  #map {
+    width: 300px;
+    margin-top: 10px;
+  }
+
+  .foot-logo img {
+  	width: 25%;
+  }
+
+  .foot-logo p {
+  	margin-top: 20px;
+  }
+
+  .foot-logo p a {
+  	margin: 0px;
+  }
+
+} 
+
+
+
+

tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "astro/tsconfigs/strict"
+}