compilerla · angela-tran · Jun 15, 2022 · Jun 3, 2022 · Jun 10, 2022 · Jun 10, 2022
@@ -16,7 +16,8 @@
         }
     },
     "extensions": [
-        "eamodio.gitlens",
-        "mhutchie.git-graph"
+		"eamodio.gitlens",
+		"mhutchie.git-graph",
+		"redhat.vscode-xml"
 	]
 }
@@ -0,0 +1,36 @@
+---
+---
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Compiler</title>
+    <meta charset="UTF-8">
+    <meta name="description"
+        content="We build open-source, human-centered, secure, agile solutions to support the delivery of government services that increase equity of opportunity.">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link rel="icon" href="/favicon.ico" sizes="any">
+    <link rel="icon" href="/icon.svg" type="image/svg+xml">
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+
+    <link type="text/css" rel="stylesheet" href="/styles/base.css">
+</head>
+
+<body>
+    <header>
+        <img class="logo" src="/assets/compiler_logo_stacked.svg" alt="Compiler logo">
+    </header>
+
+    <main>
+        <span class="main-title">
+            <a href="mailto:[email protected]">[email protected]</a>
+        </span>
+        <p>we build software for the government</p>
+    </main>
+
+    <footer>
+        <img class="brandmark" src="/assets/compiler_brandmark.svg" alt="Compiler brandmark">
+    </footer>
+</body>
+
+</html>
@@ -0,0 +1,114 @@
+@import url("./fonts.css");
+
+:root {
+    --purple: #663190;
+    --green: #88B440;
+    --teal: #01B4CB;
+    --navy: #223061;
+    --off-black: #262626;
+    --grey: #EDEDED;
+    --white: #FFFFFF;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    padding: 20px;
+    background-color: var(--off-black);
+}
+
+p, a {
+    color: var(--white);
+    font-family: 'Roboto', Arial, Helvetica, sans-serif;
+    font-weight: normal;
+    font-size: 1.5rem;
+}
+
+header {
+    margin-bottom: 50px;
+    margin-left: -10px;
+}
+
+.logo {
+    width: 20rem;
+}
+
+main {
+    margin-top: 15px;
+    height: calc(100vh - 380px);
+}
+
+.main-title * {
+    font-family: 'Source Code Pro Bold', 'Courier New', Courier, monospace;
+    font-size: 2rem;
+}
+
+a {
+    text-decoration: underline;
+    transition: 250ms;
+}
+
+a:hover {
+    color: var(--green);
+}
+
+footer {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.brandmark {
+    width: 20rem;
+    margin-right: -15px;
+}
+
+/***** Media Queries *****/
+
+/* - with default font 16px, 48rem = 768px */
+@media (max-width: 48rem) and (max-height: 48rem) {
+    header {
+        margin-left: -5px;
+    }
+
+    .logo {
+        width: 15rem;
+    }
+
+    p, a {
+        font-size: 1.25rem;
+    }
+
+    .main-title * {
+        font-size: 1.75rem;
+    }
+
+    main {
+        height: calc(70vh - 110px);
+    }
+
+    .brandmark {
+        width: 15rem;
+    }
+}
+
+@media (max-height: 30rem) {
+    main {
+        height: calc(40vh - 90px);
+    }
+}
+
+@media (max-height: 40rem) {
+    main {
+        height: calc(55vh - 110px);
+    }
+}
+
+@media (max-height: 25rem) {
+    header {
+        margin-bottom: 10px;
+    }
+
+    main {
+        height: calc(30vh);
+    }
+}
@@ -0,0 +1,17 @@
+@font-face {
+    font-family: 'Roboto';
+    src: url("/fonts/Roboto-Regular.ttf");
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Source Code Pro Bold';
+    src: url("/fonts/SourceCodePro-Bold.ttf");
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'Source Code Pro Regular';
+    src: url("/fonts/SourceCodePro-Regular.ttf");
+    font-display: swap;
+}