Some clean up, started the large content area.

10 years ago · 030ba0b41f
2 changed files with 143 additions and 121 deletions
--- a/cv.css
+++ b/cv.css
@ -0,0 +1,134 @@
+/* -------------------------------------------------- */
+/*  Element styles */
+/* -------------------------------------------------- */
+body {
+    padding: 20px;
+    font-family: 'Open Sans', sans-serif;
+    font-weight: 300;
+}
+
+a {
+    color: black;
+    text-decoration: underline black;
+}
+
+/* -------------------------------------------------- */
+/*  The header */
+/* -------------------------------------------------- */
+#header {
+    text-transform: uppercase;
+}
+
+#header .username {
+    float: left;
+    width: 75%;
+}
+
+#header .name {
+    font-size: 60px;
+}
+
+#header .title {
+    font-size: 30px;
+    font-style: italic;
+}
+
+#header .contact {
+    padding-top: 10px;
+    /*float: right;*/
+    font-size: 13px;
+}
+
+#header .contact .entry {
+    margin-bottom: 15px;
+}
+
+#header .contact .icon {
+    float: left;
+    font-size: 20px;
+    margin-right: 10px;
+    width: 26px;
+    height: 26px;
+    text-align: center;
+    border: 1px solid black;
+    padding: 4px;
+    border-radius: 20px;
+}
+
+#header .contact .value {
+    text-transform: none;
+}
+
+/* -------------------------------------------------- */
+/*  Bio section */
+/* -------------------------------------------------- */
+#bio {
+    margin-top: 30px;
+    margin-bottom: 30px;
+    margin-right: 10%;
+    margin-left: 10%;
+    text-align: center;
+}
+
+#bio .title {
+    font-weight: 600;
+    font-size: 110%;
+}
+
+/* -------------------------------------------------- */
+/*  The large content holder */
+/* -------------------------------------------------- */
+#info .title {
+    text-transform: uppercase;
+}
+
+#info .pre-title {
+    color: #19bafe;
+}
+
+/* -------------------------------------------------- */
+/*   Large descriptive area */
+/* -------------------------------------------------- */
+#complex-info {
+    width: 80%;
+    float: left;
+}
+
+/* -------------------------------------------------- */
+/*   The sidebar with the power gauges */
+/* -------------------------------------------------- */
+#quantitative-info table {
+    font-size: 12px;
+}
+
+#quantitative-info td {
+    width: 25%;
+}
+
+#quantitative-info .power {
+    border-color: #19bafe;
+    border-width: 1px;
+    border-top-style: solid;
+    border-bottom-style: solid;
+}
+
+#quantitative-info .power:first-of-type {
+    border-left-style: solid;
+    background-color: green;
+}
+
+#quantitative-info .power:last-of-type {
+    border-right-style: solid;
+    background-color: red;
+}
+
+/* -------------------------------------------------- */
+/*  Generic styles
+/* -------------------------------------------------- */
+.blue {
+    color: #19bafe;
+}
+
+.clear {
+    clear:both;
+}
--- a/cv.html
+++ b/cv.html
@ -6,127 +6,8 @@
        <meta charset="utf-8" />

        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
+        <link rel="stylesheet" href="cv.css" media="screen" title="master-css" charset="utf-8">
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic' rel='stylesheet' type='text/css'>
-
-        <style media="screen">
-            body {
-                padding: 20px;
-                font-family: 'Open Sans', sans-serif;
-                font-weight: 300;
-            }
-
-            a {
-                color: black;
-                text-decoration: underline black;
-            }
-
-            #header {
-                text-transform: uppercase;
-            }
-
-            #header .username {
-                float: left;
-                width: 75%;
-            }
-
-
-            #header .name {
-                font-size: 60px;
-            }
-
-            #header .title {
-                font-size: 30px;
-                font-style: italic;
-            }
-
-            #header .contact {
-                padding-top: 10px;
-                /*float: right;*/
-                font-size: 13px;
-            }
-
-            #header .contact .entry {
-                margin-bottom: 15px;
-            }
-
-            #header .contact .icon {
-                float: left;
-                font-size: 20px;
-                margin-right: 10px;
-                width: 26px;
-                height: 26px;
-                text-align: center;
-                border: 1px solid black;
-                padding: 4px;
-                border-radius: 20px;
-            }
-
-            #header .contact .value {
-                text-transform: none;
-            }
-
-            #bio {
-                margin-top: 30px;
-                margin-bottom: 30px;
-                margin-right: 10%;
-                margin-left: 10%;
-                text-align: center;
-            }
-
-            #bio .title {
-                font-weight: 600;
-                font-size: 110%;
-            }
-
-            /*#bio .content {
-                font-weight: 400;
-            }*/
-
-            #info .title {
-                text-transform: uppercase;
-            }
-
-            #info .pre-title {
-                color: #19bafe;
-            }
-
-            /*#quantitative-info .power {
-                border: 1px solid #19bafe;
-            }*/
-
-            #quantitative-info table {
-                font-size: 12px;
-            }
-
-            #quantitative-info td {
-                width: 25%;
-            }
-
-            #quantitative-info .power {
-                border-color: #19bafe;
-                border-width: 1px;
-                border-top-style: solid;
-                border-bottom-style: solid;
-            }
-
-            #quantitative-info .power:first-of-type {
-                border-left-style: solid;
-                background-color: green;
-            }
-
-            #quantitative-info .power:last-of-type {
-                border-right-style: solid;
-                background-color: red;
-            }
-
-            .blue {
-                color: #19bafe;
-            }
-
-            .clear {
-                clear:both;
-            }
-        </style>
    </head>

    <body>
@ -219,7 +100,14 @@

        <div id="info">
            <div id="complex-info">
-
+                <ul>
+                    <li>
+                        <div class="company">CWI Software</div>
+                        <div class="position">Software Engineer</div>
+                        <div class="timetable">Sep 2012-Present</div>
+                        <div class="description">Doing stuff</div>
+                    </li>
+                </ul>
            </div>

            <div id="quantitative-info">