AverageMarcus/blog
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Initial commit

Browse Source
This commit is contained in:
Marcus Noble
2016-05-21 10:42:57 +01:00
commit a2e3afb01d
1689 changed files with 2262 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/css/_underlines.scss Normal file
View File

@@ -0,0 +1,64 @@
@mixin textShadowToCropUnderline($color) {
text-shadow:
.01em 0 $color,
-.01em 0 $color,
0 .01em $color,
0 -.01em $color,
.06em 0 $color,
-.06em 0 $color,
.09em 0 $color,
-.09em 0 $color,
.12em 0 $color,
-.12em 0 $color,
.15em 0 $color,
-.15em 0 $color;
}
@mixin linkUnderlines($background, $color, $hoverColor) {
color: $color;
text-decoration: none;
@include textShadowToCropUnderline($background);
background-image:
linear-gradient($background, $background),
linear-gradient($background, $background),
linear-gradient($color, $color);
background-size:
.05em 2px,
.05em 2px,
2px 2px;
background-repeat:
no-repeat,
no-repeat,
repeat-x;
background-position: 0% 1.08em, 100% 1.08em, 0% 1.08em;
&::selection {
@include textShadowToCropUnderline($selectionColor);
background-color: $selectionColor;
}
&::-moz-selection {
@include textShadowToCropUnderline($selectionColor);
background-color: $selectionColor;
}
&:before,
&:after,
*,
*:before,
*:after {
text-shadow: none;
}
&:visited {
color: $color;
}
&:hover {
color: $hoverColor;
background-image:
linear-gradient($background, $background),
linear-gradient($background, $background),
linear-gradient($hoverColor, $hoverColor);
}
}

299
src/css/main.scss Normal file
View File

@@ -0,0 +1,299 @@
$border-color: rgba(9, 39, 64, 0.72);
$link-color: #AD4E4E;
$nav-height: 40px;
$selectionColor: #D2D2D2;
$background-color: #F4F5F6;
@import "_underlines.scss";
body {
padding-top: $nav-height;
background: $background-color;
}
* {
&::selection {
background-color: $selectionColor;
}
&::-moz-selection {
background-color: $selectionColor;
}
}
a {
color: #4a4a4a;
transition: color ease .3s;
margin: 0 3px;
&:hover {
color: $link-color;
text-decoration: none;
}
&+img {
border-bottom: none;
}
}
pre code {
overflow: scroll;
}
figure p {
margin: 0;
}
iframe {
max-width: 100%;
border: 0;
overflow: scroll;
}
.emoji {
display: inline !important;
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;
}
.post-list {
list-style: none;
}
.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: 0px 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: 0px 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: .5em 0 0 .5em;
}
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: .5em .5em 0 0;
}
}
.post-body {
margin-bottom: 100px;
a {
font-size: 1.3em;
}
img{
display: block;
max-width: 100%;
margin: 0 auto;
}
}
.pagination {
text-align: center;
margin: 30px;
}
@media (max-width: 768px) {
nav {
display: block;
height: auto;
.nav-right {
position: fixed;
top: 0;
right: 0;
span {
display: none;
}
}
}
}
.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;
}
}
.project-image {
width: 100%;
height: 100px;
background-size: cover;
background-position: center;
}