Redesigned to simplicity

This commit is contained in:
Marcus Noble 2017-06-03 11:55:30 +01:00
parent eacf94c896
commit 16288ee961
6 changed files with 100 additions and 262 deletions

View File

@ -1,14 +1,14 @@
$border-color: rgba(9, 39, 64, 0.72);
$link-color: #AD4E4E; $link-color: #AD4E4E;
$nav-height: 40px;
$selectionColor: #D2D2D2; $selectionColor: #D2D2D2;
$background-color: #F4F5F6; $background-color: #FFF;
@import "_underlines.scss"; @import "_underlines.scss";
body { body {
padding-top: $nav-height; margin: 0;
background: $background-color; padding: 0;
overflow: none;
} }
* { * {
@ -21,9 +21,8 @@ body {
} }
a { a {
color: #4a4a4a; color: $link-color;
transition: color ease .3s; transition: color ease .3s;
margin: 0 3px;
&:hover { &:hover {
color: $link-color; color: $link-color;
@ -40,8 +39,17 @@ pre code {
padding-bottom: 15px; padding-bottom: 15px;
} }
figure p { figure {
margin: 0; max-width: 100%;
margin: 0 auto;
img {
max-width: 100%;
}
p {
margin: 0;
}
} }
iframe { iframe {
@ -55,250 +63,79 @@ iframe {
margin: 0 !important; margin: 0 !important;
} }
nav { .container {
position: fixed; max-width: 732px;
top: 0; margin: 0 auto;
left: 0;
width: 100%;
height: $nav-height;
display: block;
font-size: 1.2em;
background: $border-color;
border-bottom: 2px solid saturate($border-color, 60%);
z-index: 10;
text-align: center;
.github-icon {
position: fixed;
top: 0;
right: 10px;
}
.twitter-icon {
position: fixed;
top: 0;
right: 40px;
}
a {
line-height: $nav-height;
height: $nav-height;
padding: 0 5px;
color: #fff;
display: inline-block;
border: none;
svg {
height: $nav-height / 2;
vertical-align: text-bottom;
margin: 10px auto;
}
}
a:hover {
background: #fff;
color: $border-color;
border-bottom: 2px solid saturate($border-color, 60%);
svg path {
fill: $border-color;
}
}
}
#logo {
text-align: center;
img {
width: 200px;
border: 2px solid $border-color;
border-radius: 100px;
padding: 0;
margin: 0 auto;
box-shadow: 3px 3px 5px 3px #ccc;
}
}
.header, .post-list li article {
border-bottom: 1px solid rgba($border-color, .2);
position: relative;
}
.header::after, .post-list li article::after {
display: block;
content: "";
width: 7px;
height: 7px;
border: 1px solid $border-color;
position: absolute;
bottom: -5px;
left: 50%;
margin-left: -5px;
background: #fff;
border-radius: 100%;
box-shadow: rgba(232,232,232,.5) 0 0 0 5px;
}
.right {
float: right !important;
}
.center {
text-align: center;
} }
.post-list { .post-list {
list-style: none; list-style: none;
padding: 0;
} }
.post, .page { .post-preview {
padding: 0 7px; opacity: 0.6;
a {
@include linkUnderlines($background-color, #4a4a4a, $link-color);
}
}
.post-meta {
display: inline-block;
margin: 15px -7px 5px -7px;
font-size: 1.5rem;
color: #fff;
padding:4px 20px 4px 20px;
position: relative;
box-shadow: inset 0px 1px 0px rgba(255,255,255,.3),
inset 0px 0px 20px rgba(0,0,0,0.1),
0px 1px 1px rgba(0,0,0,0.4);
background: $border-color;
width: 100%;
text-align: left;
a {
color: #9EABB3;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
&::before {
content: "";
width: .2em;
bottom: -.45em;
position: absolute;
display: block;
border: .9em solid $border-color;
box-shadow: 0.1px 1px 0px rgba(0,0,0,0.4);
z-index: -2;
left: -1.2em;
border-right-width: .75em;
border-left-color: transparent;
}
&::after {
content: "";
width: .2em;
bottom: -.45em;
position: absolute;
display: block;
border: 0.9em solid rgba(9, 39, 64, 0.72);
box-shadow: -0.1px 1px 0px rgba(0, 0, 0, 0.4);
z-index: -2;
right: -1.2em;
border-left-width: .75em;
border-right-color: transparent;
}
span::before{
content:"";
bottom:-.5em;
position:absolute;
display:block;
border-style:solid;
border-color: #000 transparent transparent transparent;
z-index:-1;
left: 0;
border-width: .55em 0 0 .4em;
}
span::after{
content: "";
bottom: -.5em;
position: absolute;
display: block;
border-style: solid;
border-color: #000 transparent transparent transparent;
z-index: -1;
right: 0;
border-width: .55em .4em 0 0;
}
}
.post-body {
margin-bottom: 100px;
a {
font-size: 1.2em;
}
img{
display: block;
max-width: 100%;
margin: 0 auto;
}
p > code {
border: 1px dotted;
}
} }
.pagination { .pagination {
text-align: center; text-align: center;
margin: 30px; }
.pagination a {
font-size: 1.4mem;
color: #000;
} }
.back-to-blog {
font-size: 2.5em;
text-decoration: none !important;
background: none !important;
text-shadow: none !important;
}
.post {
font-family: 'Lucida Grande', Arial, sans-serif;
font-size: 18px;
line-height: 28px;
padding: 2px 8px;
a {
@include linkUnderlines($background-color, #4a4a4a, $link-color);
}
.post-title {
color: #000;
font-size: 32px;
line-height: 34px;
margin: 21px 0 0;
font-weight: 700;
@media (max-width: 768px) { a {
nav { color: #000;
display: block; text-decoration: none;
height: auto; margin: 0;
.nav-right {
position: fixed;
top: 0;
right: 0;
span {
display: none;
}
} }
} }
}
.post-meta {
.card { color: #79828B;
display:block; font-size: 15px;
border: 1px solid $border-color; line-height: 17px;
border-radius: 0.3em; margin: 0 0 12px 0;
padding: 10px;
box-shadow: 1px 1px 2px $border-color;
background-size: cover;
background-position: center center;
position: relative;
}
.experience-list {
h3 {
font-size: 2em;
} }
} }
.project-image { footer {
width: 100%; margin: 20px 0 10px;
height: 100px; color: #79828B;
background-size: cover; text-align: center;
background-position: center;
} }
.social-icons {
a {
text-decoration: none !important;
background: none !important;
text-shadow: none !important;
}
a svg {
height: 40px;
}
}

View File

@ -13,6 +13,10 @@
{{#each pagination.files }} {{#each pagination.files }}
<li> <li>
<article class="post"> <article class="post">
<h2 class="post-title">
<a class="post-link" href="/{{ this.path }}">{{ this.title }}</a>
</h2>
<div class="post-meta feather_type"> <div class="post-meta feather_type">
<span> <span>
<time datetime="{{moment this.date 'YYY-MM-DD' }}"> <time datetime="{{moment this.date 'YYY-MM-DD' }}">
@ -21,10 +25,7 @@
</span> </span>
</div> </div>
<h2> <div class="post-preview">{{{ markdown this.summary }}}</div>
<a class="post-link" href="/{{ this.path }}">{{ this.title }}</a>
</h2>
<div>{{{ markdown this.summary }}}</div>
</article> </article>
</li> </li>
{{/each}} {{/each}}
@ -44,6 +45,7 @@
</div> </div>
</div> </div>
{{> footer }}
</div> </div>
</body> </body>
</html> </html>

View File

@ -1,3 +1,20 @@
<footer>
<div>
- Marcus Noble -
</div>
<div class="social-icons">
<a href="https://www.github.com/AverageMarcus" class="github-icon">
<svg viewBox="0 0 16 16"><path fill="#000" d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"></path></svg>
</a>
<a href="https://twitter.com/Marcus_Noble_" class="twitter-icon">
<svg viewBox="0 0 16 16"><path fill="#000" d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"></path></svg>
</a>
</div>
</footer>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/highlight.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script> <script>hljs.initHighlightingOnLoad();</script>
<script id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script> <script id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>

View File

@ -28,7 +28,6 @@
<meta name="msapplication-TileImage" content="/images/favico/ms-icon-144x144.png"> <meta name="msapplication-TileImage" content="/images/favico/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.1.0/milligram.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/styles/zenburn.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/styles/zenburn.min.css">
<link rel="stylesheet" href="/css/main.css?{{moment date 'YYYYMMDDHHMM'}}"> <link rel="stylesheet" href="/css/main.css?{{moment date 'YYYYMMDDHHMM'}}">
<link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ site.url }}/feed.xml"> <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ site.url }}/feed.xml">

View File

@ -1,19 +0,0 @@
<nav>
<a href="/about">About</a>
<a href="/">Blog</a>
<!--<a href="/projects">Projects</a>-->
<a href="https://www.github.com/AverageMarcus" class="github-icon">
<svg viewBox="0 0 16 16"><path fill="#fff" d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"/></svg>
</a>
<a href="https://twitter.com/Marcus_Noble_" class="twitter-icon">
<svg viewBox="0 0 16 16"><path fill="#fff" d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"/></svg>
</a>
</nav>
<section class="header">
<div id="logo">
<img src="/images/marcus.jpg?{{moment date 'YYYYMMDDHHMM'}}" />
<h1>Marcus Noble</h1>
</div>
</section>

View File

@ -6,6 +6,11 @@
<div class="container"> <div class="container">
<section> <section>
<article class="post" itemscope itemtype="http://schema.org/BlogPosting"> <article class="post" itemscope itemtype="http://schema.org/BlogPosting">
<a href="/" class="back-to-blog" title="Return to all posts"></a>
<h2 class="post-title" itemprop="name headline">
<a class="post-link" href="{{ path }}">{{ title }}</a>
</h2>
<div class="post-meta feather_type"> <div class="post-meta feather_type">
<span> <span>
@ -15,17 +20,14 @@
</span> </span>
</div> </div>
<h2 itemprop="name headline">
<a class="post-link" href="{{ path }}">{{ title }}</a>
</h2>
<div class="post-body" itemprop="articleBody"> <div class="post-body" itemprop="articleBody">
{{{ contents }}} {{{ contents }}}
</div> </div>
</article> </article>
</section> </section>
</div>
{{> footer }} {{> footer }}
</div>
</body> </body>
</html> </html>