Start rewriting website (unfinished)

Felipe-Sena · Felipe-Sena · commit 44b19b8229f7 · 2026-04-24T18:07:07.000-03:00
diff --git a/README.md b/README.md
@@ -1 +1,30 @@
 # Superposition Development
+
+For now the website is completely blank, save for the Superposition Development
+logotype (not the image). Few things to do:
+
+- Once we have anything to show for a project make a webpage for it:
+- Spectator
+- OnServerDuty
+- Relay
+
+These projects may also have devlogs, dunno.
+
+Logo has to be remade! The currnent image is nice but has fucked up alpha, meaning
+it only looks good on white backgrounds.
+
+# Things to do
+
+- Organize files
+- Clean up old files (old-index.html and other css files in the static folder)
+- Organize sources:
+  - Currently pages are fully displayed as flexboxes. I feel that only displaying
+    a subset of content as flexbox (such as a `<div class="content"></div>`) would
+    be better (it's causing issues in `pages/people.html`).
+  - Some designs could be improved
+- Setup colors
+- Setup descriptions for `pages/people.html`
+- Setup project pages
+  - I want [OnServerDuty] to have a terminal, doesn't need to be as fully fledged
+    as the one in game.
+- Polish
diff --git a/index.html b/index.html
@@ -1,164 +1,41 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
+  <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, inital-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
+
     <title>Superposition Development</title>
     <link rel="icon" href="favicon.ico" type="image/x-icon">
 
-    <!-- CSS -->
-    <!--"dependencies"-->
-    <link rel="stylesheet" href="/static/style/font.css">
-    <link rel="stylesheet" href="/static/style/page.css">
-    <link rel="stylesheet" href="/static/style/navbar.css">
-
-    <!--page specific-->
-    <link rel="stylesheet" href="/static/style/page-specific/index.css">
-    <!--End CSS-->
-    <meta property="og:site_name" content="The Superposition Development Team">
+    <link rel="stylesheet" href="static/style/main.css">
+    <link rel="stylesheet" href="static/style/index.css">
+    <script src="index.js"></script>
+    
+    <!-- Open Graph -->
+    <meta property="og:site_name" content="Superposition Development Website">
     <meta property="og:title" content="Superposition Development">
-    <meta name="description" content="Devlogs, releases, updates and more from the Superposition Development team."" />
+    <meta property="og:description" content="Devlogs, releases, updates and more from the Superposition Development team.">
     <meta property="og:url" content="https://superposition-development.github.io/">
     <meta property="og:image" content="https://raw.githubusercontent.com/Superposition-Development/Superposition-Development.github.io/29620154d0b55d10c67b9c946d5d7dcb226d1123/static/img/logo/sp-logo-new-dark-mono.png">
     <meta property="og:image:width" content="1200">
     <meta property="og:image:height" content="600">
 
-    <script src="inside.txt"></script>
-</head>
-
-<body>
-	<nav id="navbar">
-		<a>Home</a>
-		<a>Projects</a>
-		<a>Blog</a>
-		<a>About us</a>
-		<a>Contact</a>
-
-	</nav>
-
-	<div id="homepageBGImage">
-		<!--We don't have anything here yet
-		
-		Most likely it'll be rendered into with ThreeJS -->
-		
-		<div id="homepageImage"></div>
-
-		<div class="panel" id="spPanel">
-			SUPERPOSITION DEVELOPMENT
-		</div>
-	</div>
-
-	<div class="content">
-		<h1>Who are we?</h1>
-
-<p>
-    Superposition; a small, independent game development group organized in early 2025. We're a team of programmers and artists working towards creating high quality and immersive games in the Godot game engine. We also have our own independent projects you might be interested in.
-</p>
-
-<h1>Current Projects</h1>
-
-<p>
-    We're currently working on a title, "Spectator", without a defined release date. A demo may be released to gauge interest and gain feedback
-</p>
-
-<p>
-    Other members of the team may be working on separate independent projects, if you're interested in using them or giving feedback feel free to take a look at the about us page.
-</p>
-
-<h1>
-    Community
-</h1>
-
-<p>
-    Feedback on our projects is always appreciated, so feel free to shoot us an email in the contact page.
-</p>
-	</div>
-
-	<footer>
-		Copyright: Superposition Development ${date}
-	</footer>
-
-	<script src="/static/src/footerDate.js"></script>
-</body>
-
-<!--<body>
-    <nav id="navbar">
-        <a href="/" class="navbarSection" style="margin-left:7px;gap:10px">
-        <img src="/static/img/logo/new.png" id="navbarLogo"><span class="navbarText">Superposition Development</span>
-        </a>
-        <a class="dropdownSection" href="/pages/devlog.html">Devlog</a>
-    </nav>
-    <div id="particleCanvasWrapper">
-    <canvas id="particleCanvas" oncontextmenu="return false"></canvas>
-    </div>
-    <div id="pageContent">
-
-    <h1>
-        Superposition Development
-    </h1>
-    <p>
-        We're an indie game development team
-    </p>
+    <!--<script src="inside.txt"></script>-->
+  </head>
 
+  <!-- For now there'll be nothing here apart from the image -->
+  <!-- (I'm getting inspiration from Boards of Canada -->
 
-    </div>
-    <script src="static/src/particle.js"></script>
-</body>-->
+  <image class="sp_logotype" src="static/img/sp_dev.svg" alt="SUPERPOSITION DEVELOPMENT"/>
 
+  <div class="index_menu">
+    <button type="button" onclick="switchPage('about')">ABOUT</button>
+    <hr/>
+    <button type="button" onclick="switchPage('projects')">PROJECTS</button>
+    <hr/>
+    <button type="button" onclick="switchPage('people')">PEOPLE</button>
+  </div>
+  
+  
 </html>
-<!--
-<))<<<))<<<))<<<<))<<<))<<<))<<<))<<<<)<<<<)<<<<))<<<<)<<<<)<<<<))<<<))<<<))<<<<))<<<))<<<))<<<))< 
- <))<]<))<]<)))))))<)]<)))]<)))])))))))))))))))))))))))))))))))))))<))))<))))<))))<)]<))<]<))<]<))< 
- <))<]<))<]<))))))))))<))))<)))))))))))))))))))))))))))))))))))))))))))))))))))))))))<))<]<))<]<))) 
- <))<<<))<<<))<<<<)<<<<))<<<))<<<))<<<<)<<<<)<<<<))<<<<)<<<<)<<<<))<<<))<<<<)<<<<)<<<<))<<<))<<<))< 
- ))))[))))[)))<]]))<]]))<)]))<)]))))]]))))]))))]))))]])))]])))]]))))]))))]))))]]<)<][))))[))))[)))) 
- <))<)<))<)<))<))<)<))<))))<)))))))<))<)<))<)<))<))<))<)<))<)<))<))<))))<))))<))<)<))<))<)<))<)<))< 
- <))<<<))<<<))<<<<))<<<))<<<))<<<))<<<<)<<<<)<<<<))<<<<)<<<<)<<<<))<<<))<<<<)<<<<))<<<))<<<))<<<))< 
- ))))}))))})))<]]))<)[))<)[)<<)[)<<)]])<)]])<)]]))))]])))]])<)]])<<)[)<<)[)<))[]<)))}))))}))))})))) 
- <))<)<))<)<))<))<)<))<<<)<<)<<<<<<<<><<<<))<<))<))<))<<<)<))<<<<<<<<<<)<<))<<))<))<)<))<)<))<)<))< 
- <))<<<))<<<))<<<<)<<<)))<<<<<<<>>>*>><<<<<<)<<<<))<<<<<)<<<<><>>>>>>><>>><<))<)<))<<<))<<<))<<<))< 
- ))))}))))})))<]])<<][<<<)]<<<<]<]]<])>**<]<)))])<<)]]))<])<<>><<)<)]]<)<])><<[))<<][))))}))))})))) 
- <))<)<))<)<))<))<))<<<))<))]]]}#%%%%##][<<<)))))))))))<<)>*<)[}#%%##}]])))))<<<)))))<))<)<))<)<))< 
- <)<<<<))<<<<)<<<))<<<<)))]}#@#%%}[%@@@%}[]<<<<<<<))<<))<<<##@@@@%%@%%@@%}[<)<)<<<)<<<))<<<))<<<))< 
- )))]}))))}]))<[[<)<][))[}%}]<><>***<}@@%}[<)<][))<)[]<<)[[[}@@}<)+*>*><[###[)]]<<<]}))))}))))#]<)) 
- <))<<<))<<<))<<<<<)<)]}}]<><<><<<<>><}}#})))<<<)))<<<<<))]##%[>>><<><)><<)}}[))))<<<)<)<<<))<<<))< 
- <))<)<))<)<)<)<<<)))[[[]<<<))))<<)<<[#]<<><<)<<)))))<<)<<<<)}})<<<<)))<<<<)][[]))<<<)<)<)<))<)<))< 
- ))))}))))}))<)]])))]}])<<)))))))<<)]}[)<])<))]]<))<]]))<]))]][[<))<))))))<<<[}[]<))[)<<)}))))})))) 
- <))<<<))<<<<)<<)))]}]<)<))))))<))]}[]<<<<<)))))))))<)))))<><)[[[])<<))))))<<)]]]]))<<))<<<))<<<))< 
- <))<<<))<<<<)<<<<)][))<<))))))<))][])<<<<<<<<<))))<)))<<<<<<>)[[]))))))))))<))][]<<<<)<<<<))<<<))< 
- ))))}))))})))<[])][]]<)))])))<])[[[])><))]))))]))))]))))]))<<))[[])]))))])))))[[))][<)))}))))}]<)) 
- <))<<<))<<<))<<<)][])<)))))))<))][]<><))<<<<<<<<))<<<<))<<<<<><)][))<)))))))<)][)]<)<)))<<))<<<))< 
- <))<)<))<)))<<)<))[))<))))))<]])]}]><<))))<)<))<<)<)))))))<))<<<}]))))))))))<)<[))<)<))<)<))<)<))< 
- ))))]))))])))<[])][]))))))))<<))[[))<<))))))))))<)))))<)))))))<)]])]))))))))))][)])]<)<)]))))])))) 
- <))<<<))<<)))<<<))[])<))))))))))]})*><)))<<<<<<<))<)))))<<<<<<>][[])))))))))<<][)]<<<))<<<))<<<))< 
- )))))))))))))<)))][[<))))))))<<][}}])<<<))))))))))))))<)))))<<<[[[))))))))))<)]}]))]<)<))))))))))) 
- <))<]<))<]<))))))][}))<<)))))))))[}]<<>)))))))))))))))<<))<<>)][[))])))))))<)][[]))]<))<]<))<]<))< 
- <))<<<))<<<<)<<)<))[])<<))))))<<)<[]]])<<)))))))))<))))))<<))][[])<<))))))<<)][]))<<)))<<<))<<<))) 
- <))<]<))<]<<)))<))][[])<<))<)))<)<[}]]<<))<))))<)))))<)<<<<<)[[]))<)))))<<<)[}]]))<))<<<]<))<]<))< 
- ))))]))))])))))<)))][}[<<<<<<<<<<*<[]]]<<)))))))))))))))]))])[]>><<<<<<<<<)}[]]))<)))<))]))))])))) 
- <)<<<<)<<<<<<))<<)<)][##]<>><<<<>>>}@%}[]<<))<<)))<<<))<<)]}%%]<>>)<<<<>)[#[]))<<<<<)<)<<<)<<<<)<< 
- ))))]))))])))<])<<)))<]##%#})<))<]}@@%#[)]<)))])<<)]))<)][]#@@}><>*><[}}%[[])))<)))]))))]))))])))) 
- <))<)<))<)<))<)))<<))<)]][#%%%@@@@@@#][<<)<)<))))))))))<<<)}%@@@@@@%@##[[))<))<<))))<))<)<))<)<))< 
- <))<<<))<<<))<<<<)<<<><<<<))]}[[}[]]]><<<<<)<<))))<<<))<<<>)][}%%%}[))<<<<<<<<<))<<<<))<<<))<<<))< 
- ))))}))))})))<[])<))[<<<)]<<<>)<<>>))><<)]))))])<<)[]))<])<<*)<<>*)[))<)[)<<<[]<)<]}))))}))))})))) 
- <))<)<))<)<))<))<)<)))))<<<><><><>>>><<<)))<<))<))<))<))<<<<>>>><<><>><<<<)))))<)<))<))<)<))<)<))< 
- <))<<<))<<<))<<<<))<<<<<<))))<<<<<<<<))<<<<)<<<<))<<<<<<<<<)<<<<<<<<<))<<<<<<<<)))<<<))<<<))<<<))< 
- ))))}))))})))<]]))))]))))])<<)])<<))])<))]))))]))))]))))]])<)]))<<)])<<)]))))])))<)]))))[))))[)))) 
- <))<)<))<)<))<))<))))<)))*   ++>=          ::  -=:  ==: ::   -+-  :-==+*><))<))<))))<))<)<))<)<))< 
- <)<<<<))<<<))<<<<)<<<<)<>-@@:@ )>@@@+@@@*@@#:@@< @@@] @@]@@@@%:>@@@ @# }]+<)<<<<)<<<<))<<<))<<<<)< 
- )))]#))))}]))<}])))]})))>]@[ @ #[@ [@@]]+@ @+@ @@   @ @) @ @ @@[  >@@-@@#+)))}])))]}))))}))))}]))) 
- <))<<<))<<<<)<<<<)<<<<)<*]@ @@ @%@ - @: }@@=[@  @@=-@}@-@@ @ @@@:=@#@ *@@=<)<<<<)<<<<))<<<))<<<))< 
- <))<)<))<)<))<))<)<))<)<<++    -   <=--+-   :=+- :*-  :    :    -*:      ><)<))<)<))<))<)<))<)<))<
-<))<)<))<)<))<))<)<))<)<<      SUPERPOSITION           DEVELOPMENT        ><)<))<)<))<))<)<))<)<))<
- ))))}))))})))<[]))<][))))]=+= : =>+>+-= *>:*-+=+)  -*   -+:  :>> : +-:++]))))[]<)<][))))}))))})))) 
- <))<<<))<<<))<<<<))<<<))<*)@@@@@@#)@< @ @) @ <@@%@@@@<@@@  @@@@[<@<:@+@*<<))<<<)))<<<))<<<))<<<))< 
- <)<<<<))<<<))<<<<))<<<))<++@  *@)  -@@< @  @ =@   @@@[-@@]@ @<:  @#@@ @ ><<)<<<))<<<<))<<<))<<<))< 
- )))]}))))})))<}[))<]}))))]>@@@+>@@@ @@: @@}@@@[@@@ }>  @:@= @@@@=@ }@ @:}])))}]<))]}))))}))))}]))) 
- <))<<<))<<<))<<<<)<<<<)<<>-   :    -==*-          -++>**:==+:    *+==-**<<<)<<<<)<<<<))<<<))<<<<)< 
- <))<)<))<)<))<))<))))<))))<)))))))<))<)<))<)<))<))<))<)<))<)<))<))<))))<))))<))<)<))<))<)<))<)<))< 
- ))))[))))[)))<]]))<)]))))]))))]))))]]))))]))))]))))]])))]])))]]))))]))))]))))]]<))]]))))[))))[)))) 
- <))<<<))<<<))<<<<))<<<))<<<))<<<))<<<<)<<<<)<<<<))<<<<)<<<<)<<<<))<<<))<<<))<<<<)<<<<))<<<))<<<))< 
- <))<)<))<)<))))))))))<))))<)))))))))))))))))))))))))))))))))))))))<))))<))))<)))))))<))<))))<))))< 
- <))<]<))<]<))<))))<)]<)))]<)))])<))))))))))))))))))))))<))))<)))))<])))<])))<])))))]<))<]<))<]<))) 
- <))<<<))<<<))<<<<))<<<))<<<))<<<))<<<<)<<<<)<<<<))<<<<)<<<<)<<<<))<<<))<<<))<<<))<<<<))<<<))<<<))<-->
