+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
FOSC
+ Hackerspace located at Polytechnic University of Cartagena
+
+
+
+
+
What is FOSC?
+
+
+ We are a student association focused on expanding free software and
+ hacker culture
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Linux, hackathons, courses, talks, server systems administration, open
+ software, firmware and hardware!
+
+
+
+
+
+
OUR SERVICES
+
+ We believe in self hosting! Our members can enjoy many different
+ applications which run from our servers.
+
+
+
Here we show a few ones, but there are much more.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/styles/old.css b/src/styles/old.css
new file mode 100644
index 0000000..841cc30
--- /dev/null
+++ b/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;
+ }
+
+}
+
+
+
+
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..77da9dd
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,3 @@
+{
+ "extends": "astro/tsconfigs/strict"
+}
\ No newline at end of file