aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorNoah Loomans <noahloomans@gmail.com>2017-01-26 17:09:56 +0100
committerNoah Loomans <noahloomans@gmail.com>2017-01-26 17:09:56 +0100
commit1c02ee2f5136fd56bb480344af59e735974697ff (patch)
tree043e2903929788aeefb92ed74ef299b9bc87cc25
parent30763fce71e58248be4a5f2e3a43d2dc7d8410b5 (diff)
Create new layout
Signed-off-by: Noah Loomans <noahloomans@gmail.com>
Diffstat
-rw-r--r--_includes/header.html19
-rw-r--r--_layouts/layout.html11
-rw-r--r--assets/dots.svg53
-rw-r--r--assets/face.jpgbin0 -> 429857 bytes
-rw-r--r--style/_header.scss48
-rw-r--r--style/_markdown.scss16
-rw-r--r--style/_normalize.scss2
-rw-r--r--style/_projects.scss27
-rw-r--r--style/_responsive.scss25
-rw-r--r--style/main.scss144
10 files changed, 204 insertions, 141 deletions
diff --git a/_includes/header.html b/_includes/header.html
index 59076e2..df044e1 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -1,5 +1,16 @@
<header>
- <a href="/">
- <div class="logo"></div>
- </a>
-</header> \ No newline at end of file
+ <div class="logo-container">
+ <a href="/">
+ <img src="/assets/face.jpg" alt="Noah Loomans" class="logo">
+ </a>
+ <div class="dotted-line"></div>
+ </div>
+ <div class="title">
+ <div class="name">Noah Loomans</div>
+ <div class="menu">const menu = [
+ <a href="/">"Home"</a>,&nbsp;
+ <a href="/projects/">"Projects"</a>,&nbsp;
+ <a href="/badges/">"Badges"</a>
+ ];</div>
+ </div>
+</header>
diff --git a/_layouts/layout.html b/_layouts/layout.html
index 7a80c91..c60dc63 100644
--- a/_layouts/layout.html
+++ b/_layouts/layout.html
@@ -6,19 +6,10 @@
<body>
{% include header.html %}
<div class="page">
- <nav>
- <ul>
- <li><a href="/">About</a></li>
- <li class='seperator'>•</li>
- <li><a href="/projects/">Projects</a></li>
- <li class='seperator'>•</li>
- <li><a href="/badges/">Badges</a></li>
- </ul>
- </nav>
<main>
{{ content }}
</main>
</div>
{% include footer.html %}
</body>
-</html> \ No newline at end of file
+</html>
diff --git a/assets/dots.svg b/assets/dots.svg
new file mode 100644
index 0000000..ac39087
--- /dev/null
+++ b/assets/dots.svg
@@ -0,0 +1,53 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="25px" height="25px" viewBox="0 0 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+ <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
+ <title>dots</title>
+ <desc>Created with Sketch.</desc>
+ <defs></defs>
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+ <g id="Artboard-1" sketch:type="MSArtboardGroup" transform="translate(-140.000000, -154.000000)" fill="#BDBDBD">
+ <g id="dots" sketch:type="MSLayerGroup" transform="translate(140.000000, 154.000000)">
+ <g id="dot" sketch:type="MSShapeGroup">
+ <g>
+ <circle cx="2.5" cy="2.5" r="2.5"></circle>
+ </g>
+ </g>
+ <g id="dot" transform="translate(0.000000, 20.000000)" sketch:type="MSShapeGroup">
+ <g>
+ <circle cx="2.5" cy="2.5" r="2.5"></circle>
+ </g>
+ </g>
+ <g id="dot" transform="translate(0.000000, 10.000000)" sketch:type="MSShapeGroup">
+ <g>
+ <circle cx="2.5" cy="2.5" r="2.5"></circle>
+ </g>
+ </g>
+ <g id="dot" transform="translate(10.000000, 0.000000)" sketch:type="MSShapeGroup">
+ <g>
+ <circle cx="2.5" cy="2.5" r="2.5"></circle>
+ </g>
+ </g>
+ <g id="dot" transform="translate(10.000000, 20.000000)" sketch:type="MSShapeGroup">
+ <g>
+ <circle cx="2.5" cy="2.5" r="2.5"></circle>
+ </g>
+ </g>
+ <g id="dot" transform="translate(20.000000, 0.000000)" sketch:type="MSShapeGroup">
+ <g>
+ <circle cx="2.5" cy="2.5" r="2.5"></circle>
+ </g>
+ </g>
+ <g id="dot" transform="translate(20.000000, 20.000000)" sketch:type="MSShapeGroup">
+ <g>
+ <circle cx="2.5" cy="2.5" r="2.5"></circle>
+ </g>
+ </g>
+ <g id="dot" transform="translate(20.000000, 10.000000)" sketch:type="MSShapeGroup">
+ <g>
+ <circle cx="2.5" cy="2.5" r="2.5"></circle>
+ </g>
+ </g>
+ </g>
+ </g>
+ </g>
+</svg>
diff --git a/assets/face.jpg b/assets/face.jpg
new file mode 100644
index 0000000..037f31f
--- /dev/null
+++ b/assets/face.jpg
Binary files differ
diff --git a/style/_header.scss b/style/_header.scss
new file mode 100644
index 0000000..a5a33d4
--- /dev/null
+++ b/style/_header.scss
@@ -0,0 +1,48 @@
+header {
+ display: flex;
+ max-width: $page-width;
+ margin: 0 auto;
+
+ .logo-container {
+ max-width: $page-width;
+ height: 100%;
+ margin: 0 auto;
+ position: fixed;
+ display: flex;
+ flex-direction: column;
+
+ .dotted-line {
+ border-style: dotted;
+ border-image-source: url('/assets/dots.svg');
+ border-image-slice: 33% 33%;
+ border-image-repeat: round;
+ border-width: 0 8px 0 0;
+ margin-top: 32px;
+ width: 50%;
+ flex-grow: 1;
+ }
+ }
+
+ a {
+ text-decoration: none;
+ }
+
+ .logo {
+ width: $logo-width;
+ height: $logo-width;
+ border-radius: 50%;
+ }
+
+ .title {
+ padding-left: $logo-width + $page-padding-between;
+ height: $logo-width;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+
+ .name {
+ font-weight: bold;
+ font-size: 1.5em;
+ }
+ }
+}
diff --git a/style/_markdown.scss b/style/_markdown.scss
new file mode 100644
index 0000000..57d17dd
--- /dev/null
+++ b/style/_markdown.scss
@@ -0,0 +1,16 @@
+h1, h2, h3 {
+ font-size: 1em;
+ font-weight: bold;
+}
+
+h1::before {
+ content: '# ';
+}
+
+h2::before {
+ content: '## ';
+}
+
+h3::before {
+ content: '### ';
+}
diff --git a/style/_normalize.scss b/style/_normalize.scss
index 01ee697..9b77e0e 100644
--- a/style/_normalize.scss
+++ b/style/_normalize.scss
@@ -458,4 +458,4 @@ template {
[hidden] {
display: none;
-} \ No newline at end of file
+}
diff --git a/style/_projects.scss b/style/_projects.scss
new file mode 100644
index 0000000..fa0ba51
--- /dev/null
+++ b/style/_projects.scss
@@ -0,0 +1,27 @@
+.projects {
+ display: flex;
+ .project {
+ padding: 8px;
+ color: black;
+ text-decoration: none;
+ background-color: #ececec;
+ margin: 8px;
+ outline: none;
+ border-radius: 2px;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+ transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+
+ &:hover, &:focus {
+ box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
+ }
+
+ img {
+ width: 100%;
+ }
+
+ header {
+ padding: 8px;
+ font-style: italic;
+ }
+ }
+}
diff --git a/style/_responsive.scss b/style/_responsive.scss
new file mode 100644
index 0000000..bf35644
--- /dev/null
+++ b/style/_responsive.scss
@@ -0,0 +1,25 @@
+@media screen and (max-width: 750px) {
+ main, footer {
+ padding-left: 0 !important;
+ }
+
+ .dotted-line {
+ display: none;
+ }
+
+ header {
+ .logo {
+ width: 100px;
+ height: 100px;
+ }
+
+ .title {
+ height: 100px;
+ padding-left: 140px;
+ }
+
+ .logo-container {
+ position: absolute;
+ }
+ }
+}
diff --git a/style/main.scss b/style/main.scss
index 884713c..9641e7a 100644
--- a/style/main.scss
+++ b/style/main.scss
@@ -1,148 +1,40 @@
---
---
+$page-width: 840px;
+$logo-width: 150px;
+$page-padding-between: 40px;
+
@import 'normalize';
+@import 'header';
+@import 'markdown';
+@import 'projects';
+@import 'responsive';
* {
box-sizing: border-box;
}
body {
- background-color: #31363b;
font-family: 'Roboto Mono', monospace;
margin: 16px;
+ color: #212121;
word-wrap: break-word;
}
-.logo {
- background-image: url(/assets/logo.png);
- height: 144px;
- background-repeat: no-repeat;
- background-position: center center;
- background-size: contain;
- zoom: 0.6;
- margin-top: 64px;
- margin-bottom: 64px;
-}
-
-.page {
- max-width: 700px;
+main, footer {
+ padding-left: $logo-width + $page-padding-between;
+ max-width: $page-width;
margin: 0 auto;
- background-color: white;
-}
-
-nav {
- background-color: #93a1a1;
- overflow-y: auto;
-
- ul {
- display: flex;
- margin: 0;
- padding: 0;
- }
-
- ul::before, ul::after {
- content: '';
- margin: auto;
- }
-
- li {
- list-style: none;
- padding: 8px;
-
- a {
- text-decoration: none;
- color: black;
- padding: 8px;
- display: inline-block;
- &:hover, &:focus {
- background-color: #b8c5c5;
- outline: none;
- }
- }
- }
-
- li.seperator {
- padding: 16px;
- display: inline-block;
- }
}
main {
- padding: 16px;
-}
-
-h1, h2, h3 {
- font-size: 1em;
- font-weight: bold;
-}
-
-h1::before {
- content: '# ';
-}
-
-h2::before {
- content: '## ';
-}
-
-h3::before {
- content: '### ';
-}
-
-main ul {
- padding: 0;
-
- li {
- list-style: none;
- padding-left: 30px;
- position: relative;
-
- &::before {
- content: "\00a0- ";
- position: absolute;
- top: 0;
- left: 0;
- }
- }
-}
-
-.projects {
- display: flex;
-
- .project {
- padding: 8px;
- color: black;
- text-decoration: none;
- background-color: #93a1a1;
- margin: 8px;
- outline: none;
-
- &:hover, &:focus {
- background-color: #b8c5c5;
- }
-
- img {
- width: 100%;
- }
-
- header {
- padding: 8px;
- font-style: italic;
- }
- }
-}
-
-@media screen and (max-width: 425px) {
- .projects {
- flex-wrap: wrap;
- }
+ margin-top: 32px;
}
footer {
- color: rgba(147, 161, 161, 0.5);
- font-size: 0.8em;
- max-width: 300px;
- margin: 0 auto;
- margin-top: 16px;
- padding: 16px;
-} \ No newline at end of file
+ color: #757575;
+ font-style: italic;
+ padding-top: 16px;
+ padding-bottom: 16px;
+}
generated by cgit v1.1 at 2024-05-19 14:37:59 +0000