source for lucas.co
refine style
projects/simulations.html | 38 ++++++++++++++++--
styles.css | 100 +++++++++++++++++++++++++++++++++++++++++++++-
2 files changed, 133 insertions(+), 5 deletions(-)
diff --git a/projects/simulations.html b/projects/simulations.html
index b539198..73aa62a 100644
--- a/projects/simulations.html
+++ b/projects/simulations.html
@@ -1,4 +1,34 @@
-<video controls width="640" height="360" preload="metadata">
- <source src="https://pub-83b605455fe741e380a2140c8bb1f763.r2.dev/1.mp4" type="video/mp4">
- Video not working sorry
-</video>
+<!DOCTYPE html>
+
+<html>
+
+ <head>
+ <meta charset="UTF-8">
+ <link rel="stylesheet" href="../styles.css">
+ <!-- Something to do with iphones -->
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <!-- Browser tab label -->
+ <title>lucas.co/simulations</title>
+ </head>
+
+
+ <body>
+ <div class="background-rectangle"></div>
+ <div class="content-container">
+
+ <h1> <a href="../index.html">Up</a> </h1>
+ <h1>Simulations</h1>
+
+ <hr>
+
+ <!-- Video -->
+ <div style="max-width:500px;">
+ <video style="width:100%; height:auto;">
+ <source src="https://pub-83b605455fe741e380a2140c8bb1f763.r2.dev/1.mp4" type="video/mp4">
+ </video>
+ </div>
+
+ </div
+ </body>
+
+</html>
diff --git a/styles.css b/styles.css
index d660c3a..649387d 100644
--- a/styles.css
+++ b/styles.css
@@ -2,17 +2,85 @@
body {
background-color: #000000;
color: #ffffff;
+ font-size: 16px; /* base size */
+}
+
+@font-face {
+ font-family: "Terminus";
+ src: url("./font/TerminusTTF.woff2") format("woff2"),
+ url("./font/TerminusTTF.woff") format("woff");
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: "Geist";
+ src: url("./font/Geist-Regular.woff2") format("woff2");
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: "GeistMono";
+ src: url("./font/GeistMono-Regular.woff2") format("woff2");
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: "CourierPrime";
+ src: url("./font/CourierPrime-Rndexegular.woff2") format("woff2");
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: "Lekton";
+ src: url("./font/Lekton-Regular.woff2") format("woff2");
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: "Inconsolata";
+ src: url("./font/Inconsolata-Regular.woff2") format("woff2");
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: "DraftingMono";
+ src: url("./font/DraftingMono-Regular.woff2") format("woff2");
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: "BPmono";
+ src: url("./font/BPmono.woff2") format("woff2");
+ font-weight: normal;
+ font-style: normal;
+}
+
+@font-face {
+ font-family: "0xProto";
+ src: url("./font/0xProto-regular.woff2") format("woff2");
+ font-weight: normal;
+ font-style: normal;
}
/* Global font settings */
:root {
- font-family: monospace;
+ /* font-family: monospace; */
+ font-family: "Lekton";
}
+
/* Header styling */
h1 {
color: #ffffff;
font-size: 1.2em;
+ /* font-weight: 800; */
}
/* Link styling */
@@ -27,3 +95,33 @@ a:hover {
text-decoration: underline;
}
+/* .your-style { */
+ /* font-family: 'Terminus (TTF)'; */
+ /* font-weight: 500; */
+ /* font-style: normal; */
+/* } */
+.background-rectangle {
+ position: absolute;
+ left: 2.5%;
+ top: 2.5%;
+ border-color: #404040;
+ border-width: 2px;
+ border-style: solid;
+ width: 95%;
+ height: 95%;
+}
+
+.content-container {
+ position: absolute;
+ top: 5%;
+ left: 5%;
+ width: 90%;
+ height: 90%;
+}
+
+/* Video box */
+.responsive-video {
+ aspect-ratio: 16/9;
+ width: 100%;
+ height: auto;
+}