projects / jkinsey.net.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (initial)
initial file structure & basic html/css
authorJack Kinsey <j.jameskinsey@gmail.com>
Sat, 22 Apr 2017 21:00:12 +0000 (17:00 -0400)
committerJack Kinsey <j.jameskinsey@gmail.com>
Sat, 22 Apr 2017 21:00:12 +0000 (17:00 -0400)
index.html [new file with mode: 0644] patch | blob
js/script.js [new file with mode: 0644] patch | blob
res/reset.css [new file with mode: 0644] patch | blob
res/style.css [new file with mode: 0644] patch | blob

diff --git a/index.html b/index.html
new file mode 100644 (file)
index 0000000..83cd334
--- /dev/null
+++ b/index.html
@@ -0,0 +1,29 @@
+<html>
+    <head>
+        <link rel="stylesheet" href="res/reset.css" />
+        <link rel="stylesheet" href="res/style.css" />
+
+        <script src="js/script.js"></script>
+
+        <title>Jack Kinsey</title>
+    </head>
+    <body>
+
+        <menu>
+            <div><img></img></div>
+            <nav>
+                <ul>
+                    <li><a href="">Words</a></li>
+                    <li><a href="">Code</a></li>
+                    <li><a href="">About</a></li>
+                    <li><a href="">R&eacute;sum&eacute;</a></li>
+                </ul>
+            </nav>
+        </menu>
+
+        <article></article>
+        <article></article>
+        <article></article>
+
+    </body>
+</html>
diff --git a/js/script.js b/js/script.js
new file mode 100644 (file)
index 0000000..e69de29
diff --git a/res/reset.css b/res/reset.css
new file mode 100644 (file)
index 0000000..e29c0f5
--- /dev/null
+++ b/res/reset.css
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+       margin: 0;
+       padding: 0;
+       border: 0;
+       font-size: 100%;
+       font: inherit;
+       vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+       display: block;
+}
+body {
+       line-height: 1;
+}
+ol, ul {
+       list-style: none;
+}
+blockquote, q {
+       quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+       content: '';
+       content: none;
+}
+table {
+       border-collapse: collapse;
+       border-spacing: 0;
+}
diff --git a/res/style.css b/res/style.css
new file mode 100644 (file)
index 0000000..2f3e444
--- /dev/null
+++ b/res/style.css
@@ -0,0 +1,59 @@
+@import url('https://fonts.googleapis.com/css?family=Cutive+Mono|Source+Code+Pro:300');
+
+body {
+    background-color:grey;
+    width:100%;
+    height:100%;
+    overflow-x:hidden;
+    font-family:'Cutive Mono';
+    color:#FFF1FF;
+}
+
+menu {
+    position:absolute;
+    width:400px;
+    height:400px;
+    left:calc(50% - 200px);
+    top:calc(50% - 200px);
+    font-smooth:never;
+    -webkit-font-smoothing:none;
+    background-color:black;
+}
+
+menu nav {
+    display:flex;
+    flex-direction:column;
+}
+
+menu div {
+    display:block;
+    width:300px;
+    height:300px;
+    margin-left:50px;
+    margin-right:50px;
+    background-color:lightgrey;
+}
+
+menu div img {
+    width:256px;
+    height:256px;
+    margin:22px;
+}
+
+menu nav ul {
+    display:flex;
+    flex-direction:row;
+    width:350px;
+    margin-left:25px;
+    margin-right:25px;
+    height:100px;
+}
+
+menu nav ul li {
+    display:inline-block;
+    text-align:center;
+    width:25%;
+    height:100px;
+    font-size:1.25em;
+    line-height:100px;
+}