Landing Page!

docs_for_landing/assets/css/custom.css

@@ -0,0 +1,225 @@
+/* =============VALUES============== */
+:root {
+    --header-height: 46px;
+    --header-font-size: 1.75rem;
+    --header-font-padding: 10px 20px;
+    --header-icon-padding: 5px;
+    --border-color: #DDDDDD;
+    --header-background: rgba(255,255,255,0.9);
+}
+
+/* =============HEADER============== */
+.header{
+    border-bottom: 1px solid var(--border-color);
+    height: var(--header-height);
+    width: 80%;
+    max-width: 960px;
+    white-space: nowrap;
+    background: var(--header-background);
+    top: 0px;
+    left: 0;
+    right: 0;
+    display: inline-block;
+}
+
+#headerContainer {
+    position: fixed;
+    width: 100vw;
+    max-width: 100%;
+    text-align: center;
+    padding: 0;
+    z-index: 100;
+}
+
+a {
+    color: #5625BA;
+}
+
+.centered {
+    text-align: center;
+    display: block;
+}
+
+h1 {
+    text-align: center;
+}
+
+h2 {
+    border-top: 1px solid lightgray;
+    margin-top: 5rem;
+}
+
+h4 {
+    margin-top: 5rem;
+    margin-bottom: 1rem;
+}
+
+.header *{
+    max-height: var(--header-height);
+    box-sizing: border-box;
+    display: inline-block;
+    vertical-align: middle;
+    font-size: var(--header-font-size);
+}
+
+.right_side{
+    float: right;
+    text-align: right;
+}
+
+.left_side{
+    float: left;
+    text-align: left;
+}
+
+.header a{
+    text-decoration: none;
+}
+
+.header_title, .header nav a{
+    padding: calc(2*var(--header-icon-padding));
+}
+
+.header_button{
+    padding: 0 !important;
+}
+
+.header_button img{
+    padding: var(--header-icon-padding);
+    height: var(--header-height);
+    margin-left: var(--header-icon-padding);
+}
+
+#header_toggle_mobile{
+    display: none;
+}
+
+
+/* Desktop mode */
+@media (min-width: 610px) {
+    #header_main_nav{
+        display: inline-block !important;
+    }
+}
+
+/* Mobile mode */
+@media (max-width: 610px) {
+
+    .header {
+        width: 100%
+    }
+
+    #titleColumn{
+        text-align: center;
+    }
+
+    #banner {
+        width: 100% !important;
+        max-width: 100% !important;
+    }
+
+    #screenshot {
+        max-width: calc(100vw - 4rem) !important;
+    }
+
+    #header_main_nav{
+        display: none;
+        position: absolute;
+        top: var(--header-height);
+        left: 0px;
+        background: var(--header-background);
+        width: 100vw;
+        max-height: none;
+        border-bottom: 1px solid var(--border-color);
+        text-align: left;
+    }
+
+    #header_main_nav a{
+        display: block;
+    }
+
+    /* Visible by default */
+    #header_toggle_mobile{
+        display: inherit;
+    }
+}
+
+
+/* =============CONTENT============== */
+#content{
+    z-index: 0;
+    min-height: calc( 100vh - var(--header-height) );
+    padding-top: var(--header-height);
+}
+
+#banner {
+    width: 80%;
+    max-width: 960px;
+    margin: 0 auto;
+    display: block;
+}
+
+.article_image{
+    max-width: 100%;
+}
+
+.buttonImage{
+    width: 20rem;
+    transition: box-shadow 0.3s;
+}
+
+.buttonImage:hover, #browserbutton:hover{
+    box-shadow: 0px 0px 6px 1px rgba(0,0,0,0.5);
+}
+
+.spacer {
+    height: 10rem;
+}
+
+.paddingColumn{
+    padding: 2rem 0;
+}
+.gridItem{
+    text-align: center;
+}
+
+#screenshot {
+    width: 30rem;
+    max-width: calc(50vw - 10rem);
+    border-radius: 13px;
+    box-shadow: 0px 8px 8px 3px rgba(0,0,0,0.25);
+}
+
+#footer{
+    border-top: 1px solid var(--border-color);
+    text-align: center;
+}
+
+pre {
+    font-family: "Courier 10 Pitch", Courier, monospace;
+    font-size: 95%;
+    line-height: 140%;
+}
+
+#browserbutton {
+    background-color: #000;
+    display: inline-block;
+    height: 50px;
+    width: 160px;
+    border-radius: 6px;
+    transition: box-shadow 0.3s;
+    text-decoration: none;
+    font-size: 1.5rem;
+    color: #fff;
+}
+
+#browserbutton img {
+    float: left;
+}
+
+code {
+    font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
+    font-size: 95%;
+    line-height: 140%;
+    background: #faf8f0;
+}

docs_for_landing/assets/css/font.css

@@ -0,0 +1,63 @@
+@font-face{
+    font-family: 'Ubuntu';
+    src: local('Ubuntu Light'),
+         url('fonts/Ubuntu-Light.ttf') format('truetype');
+    font-weight: 300;
+    font-style: normal;
+}
+
+@font-face{
+    font-family: 'Ubuntu';
+    src: local('Ubuntu Light Italic'),
+         url('fonts/Ubuntu-LightItalic.ttf') format('truetype');
+    font-weight: 300;
+    font-style: italic;
+}
+
+@font-face{
+    font-family: 'Ubuntu';
+    src: local('Ubuntu Regular'),
+         url('fonts/Ubuntu-Regular.ttf') format('truetype');
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face{
+    font-family: 'Ubuntu';
+    src: local('Ubuntu Regular Italic'),
+         url('fonts/Ubuntu-Italic.ttf') format('truetype');
+    font-weight: 400;
+    font-style: italic;
+}
+
+@font-face{
+    font-family: 'Ubuntu';
+    src: local('Ubuntu Medium'),
+         url('fonts/Ubuntu-Medium.ttf') format('truetype');
+    font-weight: 500;
+    font-style: normal;
+}
+
+@font-face{
+    font-family: 'Ubuntu';
+    src: local('Ubuntu Medium Italic'),
+         url('fonts/Ubuntu-MediumItalic.ttf') format('truetype');
+    font-weight: 500;
+    font-style: italic;
+}
+
+@font-face{
+    font-family: 'Ubuntu';
+    src: local('Ubuntu Bold'),
+         url('fonts/Ubuntu-Bold.ttf') format('truetype');
+    font-weight: 700;
+    font-style: normal;
+}
+
+@font-face{
+    font-family: 'Ubuntu';
+    src: local('Ubuntu Bold Italic'),
+         url('fonts/Ubuntu-BoldItalic.ttf') format('truetype');
+    font-weight: 700;
+    font-style: italic;
+}