lol javascript is awesome

antonkoetzler · Nov 7, 2024 · 690f455 · 690f455
1 parent d92da03
commit 690f455
Show file tree

Hide file tree

Showing 12 changed files with 139 additions and 3 deletions.
diff --git a/index.css b/index.css
@@ -42,6 +42,8 @@ body {
   font-family: var(--iosevka-regular);
   font-size: var(--medium-font-size);
   color: var(--secondary-color);
+  width: 100%;
+  overflow-x: scroll;
   margin-bottom: 10px;
 }
 
@@ -190,9 +192,7 @@ a:visited {
 }
 
 .horizontal-divider {
-  width: 50%;
-  min-width: 100px;
-  max-width: 300px;
+  width: 100%;
   height: 1px;
   background-color: var(--secondary-color);
   align-self: center;

diff --git a/new/assets/fonts/Ubuntu-Bold.ttf b/new/assets/fonts/Ubuntu-Bold.ttf
diff --git a/new/assets/fonts/Ubuntu-BoldItalic.ttf b/new/assets/fonts/Ubuntu-BoldItalic.ttf
diff --git a/new/assets/fonts/Ubuntu-Italic.ttf b/new/assets/fonts/Ubuntu-Italic.ttf
diff --git a/new/assets/fonts/Ubuntu-Light.ttf b/new/assets/fonts/Ubuntu-Light.ttf
diff --git a/new/assets/fonts/Ubuntu-LightItalic.ttf b/new/assets/fonts/Ubuntu-LightItalic.ttf
diff --git a/new/assets/fonts/Ubuntu-Medium.ttf b/new/assets/fonts/Ubuntu-Medium.ttf
diff --git a/new/assets/fonts/Ubuntu-MediumItalic.ttf b/new/assets/fonts/Ubuntu-MediumItalic.ttf
diff --git a/new/assets/fonts/Ubuntu-Regular.ttf b/new/assets/fonts/Ubuntu-Regular.ttf
diff --git a/new/assets/img/me.jpg b/new/assets/img/me.jpg
diff --git a/new/index.css b/new/index.css
@@ -0,0 +1,97 @@
+/* Constant variables. */
+:root {
+  /* Colors */
+  --primary-color: #181818;
+  --on-primary-color: #EDE6D6;
+
+  /* Font sizes. */
+  --small-font-size: 16px;
+  --medium-font-size: 20px;
+  --large-font-size: 24px;
+}
+
+/* Base elements. */
+body {
+  margin: 0;
+  padding: 0;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background-color: var(--primary-color);
+  font-family: 'Ubuntu';
+  color: var(--on-primary-color);
+  display: flex;
+  flex-direction: column;
+}
+
+header {
+  width: 100%;
+  height: 40px;
+  border-bottom: 2px solid var(--on-primary-color);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+header>h1:before {
+  content: 'Anton Louis Koetzler-Faust';
+}
+
+header>h1 {
+  flex: 1;
+}
+
+main {
+  flex: 1;
+  background-color: pink;
+}
+
+button {
+  background: none;
+  outline: none;
+  border: none;
+  font-family: 'Ubuntu';
+  font-size: var(--medium-font-size);
+  color: var(--on-primary-color);
+  cursor: pointer;
+  height: 100%;
+  padding: 0 10px;
+}
+
+button:hover {
+  background: var(--on-primary-color);
+  color: var(--primary-color);
+}
+
+h1,
+p {
+  margin: 0;
+  padding: 0;
+}
+
+h1 {
+  font-size: var(--large-font-size);
+  text-align: center;
+}
+
+/* Classes. */
+.vertical-divider {
+  height: 100%;
+  width: 2px;
+  background-color: var(--on-primary-color);
+}
+
+/* Media queries. */
+@media screen and (max-width: 540px) {
+  header>h1:before {
+    content: 'Anton Koetzler-Faust';
+  }
+}
+
+@media screen and (max-width: 450px) {
+  header>h1:before {
+    content: 'Anton K-F';
+  }
+}
diff --git a/new/index.html b/new/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+
+<html>
+
+<head>
+  <!-- Tab title. -->
+  <title>Anton Louis Koetzler-Faust</title>
+
+  <!-- Ubuntu Font. -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
+
+  <!-- Better scaling for mobile. -->
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <!-- CSS. -->
+  <link rel='stylesheet' href='./index.css' />
+
+  <!-- Multi-language text. -->
+  <script src='language_control.js' defer></script>
+</head>
+
+<body>
+  <!-- App bar. -->
+  <header>
+    <button>Résumé</button>
+    <div class='vertical-divider'></div>
+    <h1></h1>
+    <div class='vertical-divider'></div>
+    <button>GitHub</button>
+  </header>
+
+  <!-- Body. -->
+  <main>
+  </main>
+</body>
+
+</html>