Redesigned to simplicity
This commit is contained in:
Marcus Noble
parent
eacf94c896
commit
16288ee961
|
|
@ -1,14 +1,14 @@
|
|||
$border-color: rgba(9, 39, 64, 0.72);
|
||||
$link-color: #AD4E4E;
|
||||
$nav-height: 40px;
|
||||
$selectionColor: #D2D2D2;
|
||||
$background-color: #F4F5F6;
|
||||
$background-color: #FFF;
|
||||
|
||||
@import "_underlines.scss";
|
||||
|
||||
|
||||
body {
|
||||
padding-top: $nav-height;
|
||||
background: $background-color;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: none;
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
@ -21,9 +21,8 @@ body {
|
|||
}
|
||||
|
||||
a {
|
||||
color: #4a4a4a;
|
||||
color: $link-color;
|
||||
transition: color ease .3s;
|
||||
margin: 0 3px;
|
||||
|
||||
&:hover {
|
||||
color: $link-color;
|
||||
|
|
@ -40,8 +39,17 @@ pre code {
|
|||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
figure p {
|
||||
margin: 0;
|
||||
figure {
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
iframe {
|
||||
|
|
@ -55,250 +63,79 @@ iframe {
|
|||
margin: 0 !important;
|
||||
}
|
||||
|
||||
nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
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;
|
||||
.container {
|
||||
max-width: 732px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.post-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.post, .page {
|
||||
padding: 0 7px;
|
||||
|
||||
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;
|
||||
}
|
||||
.post-preview {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
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) {
|
||||
nav {
|
||||
display: block;
|
||||
height: auto;
|
||||
|
||||
.nav-right {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
a {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.card {
|
||||
display:block;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 0.3em;
|
||||
padding: 10px;
|
||||
box-shadow: 1px 1px 2px $border-color;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.experience-list {
|
||||
h3 {
|
||||
font-size: 2em;
|
||||
.post-meta {
|
||||
color: #79828B;
|
||||
font-size: 15px;
|
||||
line-height: 17px;
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.project-image {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
footer {
|
||||
margin: 20px 0 10px;
|
||||
color: #79828B;
|
||||
text-align: center;
|
||||
}
|
||||
.social-icons {
|
||||
a {
|
||||
text-decoration: none !important;
|
||||
background: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
a svg {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
|
@ -13,6 +13,10 @@
|
|||
{{#each pagination.files }}
|
||||
<li>
|
||||
<article class="post">
|
||||
<h2 class="post-title">
|
||||
<a class="post-link" href="/{{ this.path }}">{{ this.title }}</a>
|
||||
</h2>
|
||||
|
||||
<div class="post-meta feather_type">
|
||||
<span>
|
||||
<time datetime="{{moment this.date 'YYY-MM-DD' }}">
|
||||
|
|
@ -21,10 +25,7 @@
|
|||
</span>
|
||||
</div>
|
||||
|
||||
<h2>
|
||||
<a class="post-link" href="/{{ this.path }}">{{ this.title }}</a>
|
||||
</h2>
|
||||
<div>{{{ markdown this.summary }}}</div>
|
||||
<div class="post-preview">{{{ markdown this.summary }}}</div>
|
||||
</article>
|
||||
</li>
|
||||
{{/each}}
|
||||
|
|
@ -44,6 +45,7 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
{{> footer }}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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>hljs.initHighlightingOnLoad();</script>
|
||||
<script id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,6 @@
|
|||
<meta name="msapplication-TileImage" content="/images/favico/ms-icon-144x144.png">
|
||||
<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="/css/main.css?{{moment date 'YYYYMMDDHHMM'}}">
|
||||
<link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ site.url }}/feed.xml">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -6,6 +6,11 @@
|
|||
<div class="container">
|
||||
<section>
|
||||
<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">
|
||||
<span>
|
||||
|
|
@ -15,17 +20,14 @@
|
|||
</span>
|
||||
</div>
|
||||
|
||||
<h2 itemprop="name headline">
|
||||
<a class="post-link" href="{{ path }}">{{ title }}</a>
|
||||
</h2>
|
||||
<div class="post-body" itemprop="articleBody">
|
||||
{{{ contents }}}
|
||||
</div>
|
||||
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{{> footer }}
|
||||
{{> footer }}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue