@charset “UTF-8”;

// use the style reset @import “reset”; @import url('fonts.googleapis.com/css?family=Oswald|Roboto+Condensed|Roboto+Mono');

// fonts $font-title: 'Oswald', sans-serif; $font-main: 'Roboto Condensed', sans-serif !important; $font-mono: 'Roboto Mono', monospace;

// colors $background-color: #142B51 !default; $text-background-color: #263037; $code-background-color: #D9D9D9; $code-foreground-color: black; $foreground-color: #E2E4E9 !default; $highlight-color: d2f9e6;

// fonts, only the body $body-font-size: 12pt !default; $body-li-size: 12pt;

$line-style: 0.5px dotted $foreground-color;

body {

color: $foreground-color;
background-color: $background-color;
font-family: $font-main;

}

body p {

font-size: $body-font-size;
line-height: 15pt;

margin-top: 7pt;
margin-bottom: 7pt;

}

body li {

font-size: $body-li-size;
line-height: $body-li-size + 2pt;

margin-top: 2pt;
margin-bottom: 2pt;

}

.site-header {

// margin-top: 20pt;
padding-top: 20pt;
padding-bottom: 10pt;
background-color: darken($background-color, 10%);
color: $foreground-color;
font-family: $font-title;
white-space: nowrap;

}

.site-title, .site-link {

display: inline-block;

}

.site-title {

margin: 2pt 10pt;
font-size: 40pt;
text-decoration: underline;

}

.github-link, .site-link {

font-size: 15pt;
margin: 5pt;
text-decoration: none;

}

.home {

padding-left: 20pt;
padding-right: 20pt;

}

.content-wrapper {

padding-top: 10pt;
display: grid;
grid-template-columns: 1fr 700px 1fr;

}

.content-wrapper>* {

grid-column: 2;

}

.post-wrapper {

border-top: $line-style;
padding-top: 10pt;
padding-bottom: 5pt;
border-bottom: $line-style;
height: 10pt;
overflow: hidden;
display: block;
margin-right: 175px;

}

.site-header-tall>.post-wrapper {

border: 0;
padding-top: 0;
position: absolute;
top: 50pt;
left: 10pt;
font-size: 12pt;

}

.site-header-tall>.post-wrapper>.post-list-heading {

font-size: 12pt;

}

.post-list-heading {

display: inline;

}

.post-list {

margin-left: 1pt;
display: inline;
overflow: hidden;

}

.post-element {

display: inline;
margin-left: 5pt;

}

.page-title {

font-size: 40pt;
font-weight: 100;
display: inline-block;

}

.page-description {

font-size: 18pt;
font-weight: 100;
color: darken($color: $foreground-color, $amount: 20%);

}

.page-date {

margin-left: 5pt;
display: inline;
color: darken($foreground-color, 30%);

}

.page-footer {

height: 10pt;
text-align: center;
width: auto;
padding: 5pt;

}

.footer-copyright {

text-align: center;

}

a {

color: $highlight-color;

&:visited {
  color: darken($highlight-color, 10%);
}

&:hover {
  color: $highlight-color;
  text-decoration: underline;
}

}

.project-date, .post-date {

font-size: medium;
margin-left: 5pt;
display: inline;
color: darken($foreground-color, 30%);

}

.post-list a, .project-list a {

color: darken($foreground-color, 30%);

.project-title, .post-title
{
  color: $foreground-color;
}

text-decoration: none;

&:hover {
  color: $highlight-color;
  .project-title, .post-title,
  .post-date, .project-date
  {
    text-decoration: underline;
    color: $highlight-color;
  }
}

}

.project, .post {

display: block;
margin-bottom: 25pt;

}

.project-gh::before {

content: "GitHub: ";

}

.project-gh {

display: block;
padding-top: 4pt;
color: darken($color: $foreground-color, $amount: 30%);

&:hover
{
  text-decoration: underline;
}

}

.project-description, .post-description {

display: inline-block;
padding-top: 8pt;
padding-bottom: 10px;
border-bottom: 1px dashed darken($color: $foreground-color, $amount: 30%);

}

.page-gh {

font-size: 15pt;

}

.project-image, .post-image {

max-height: 300px;
border: 0.5px dashed darken($color: $foreground-color, $amount: 30%);

}

.title-wrapper {

margin-top: 30pt;
margin-bottom: 20pt;

}

.site-title, .github-link {

color: $highlight-color;
text-decoration: none;

}

h1, h2, h3, h4, h5, h6 {

font-weight: bold;
margin-top: 10pt;
margin-bottom: 8pt;

}

h1 {

font-size: 25pt;

}

h2 {

font-size: 22pt;

}

h3 {

font-size: 20pt;

}

h4 {

font-size: 18pt;

}

h5 {

font-size: 15pt;

}

h6 {

font-size: 12pt;

}

b, strong, i, em {

color: $highlight-color;

}

b, strong {

font-weight: bold;

}

i, em {

font-style: italic;

}

ul {

margin-left: 15pt;
list-style-type: disc;

}

ol {

margin-left: 15pt;
list-style: decimal;

}

li {

>ul,
>ol {
  margin-bottom: 0;
}

}

// pre > code is a code block // code is inline

// code block pre.highlight {

background-color: $code-background-color;
color: $code-foreground-color;
font-family: $font-mono;
border: 1px solid black;

}

// inline code code {

background-color: $code-background-color;
color: $code-foreground-color;
font-family: $font-mono;

padding-left: 3px;
padding-right: 3px;

overflow: scroll;

}

pre.highlight>code {

display: block;
padding: 5pt;

}

iframe {

margin: 10pt auto;
display: block;
width: 80%;

}

img {

margin-top: 10pt;
margin-bottom: 10pt;
margin-left: auto;
margin-right: auto;
display: block;
width: auto;
height: auto;
max-width: 80%;
vertical-align: middle;

}

blockquote {

display: block;
padding: 8pt;
background: lighten($background-color, 10%);

}

table {

margin-bottom: 5pt;
width: 100%;
text-align: left;
border-collapse: collapse;
border: 1px solid $foreground-color;

tr {
  &:nth-child(even) {
    background-color: lighten($background-color, 10%);
  }
}

th,
td {
  padding: 2pt;
}

th {
  background-color: lighten($background-color, 15%);
  border: 1px solid $foreground-color;
  border-bottom-color: darken($foreground-color, 35%);
}

td {
  border: 1px solid darken($foreground-color, 35%);
}

}

@media screen and (max-width: 400px) {

.site-header a
{
  display: block;
}

}

@media screen and (max-width: 750px) {

.site-title
{
  position: static;
  display: block;
  margin: 10px;
  margin-bottom: 15px;
  width: auto;
  height: auto;
  top: auto;
  bottom: auto;
  left: auto;
  font-size: 30pt;
}

.site-header .site-link 
{
  position: static;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
  width: auto;
  height: auto;
  top: auto;
  bottom: auto;
  left: auto;
}

.site-header-tall > .post-wrapper {
  margin: 5px 10px;
  position: static;
  display: block;
  width: auto;
  height: auto;
  top: auto;
  bottom: auto;
  left: auto;
}

.content-wrapper
{
  display: block;
}

.project-list
{
  max-width: 95%;
}

.project,
.post
{
  .project-title, .page-title, .post-title
  {
    display: block;
    margin-bottom: 2pt;
    color: $foreground-color;
  }
  .project-date, .project-gh, .project-description
  {
    display: block;
    margin: 2pt;
  }
}
.page-date, .page-description
{
  display: block;
  margin: 2pt;
}

}

@import “syntax”;