Smol style changes

* Corrected recipes' archive headings
* Improved rendering of footnotes
* Stylistic changes to landing page: smaller font, bigger horizontal
padding
* Background attachment no longer fixed

2 files changed, 116 insertions, 98 deletions

diff --git a/sass/css/_fonts.scss b/sass/css/_fonts.scss
index f2d9a6d..f40cad3 100644
--- a/sass/css/_fonts.scss
+++ b/sass/css/_fonts.scss
@@ -1,3 +1,4 @@
-$font_sans: Verdana, Geneva, sans-serif;
+$font_sans: Helvetica, Verdana, sans-serif;
 $font_serif: Georgia, serif;
 $font_mono: monospace;
+
diff --git a/sass/css/yaroslavps.scss b/sass/css/yaroslavps.scss
index 46d22b0..38e49cb 100644
--- a/sass/css/yaroslavps.scss
+++ b/sass/css/yaroslavps.scss
@@ -3,12 +3,11 @@
 @import "fonts";
 
 html, body {
-  width: 100%;
-  min-height: 100vh;
-  background-color: $bg1;
-  background-image: url("/img/star_pattern.jpg");
-  background-attachment: fixed;
-  background-size: 25%;
+	width: 100%;
+	min-height: 100vh;
+	background-color: $bg1;
+	background-image: url("/img/star_pattern.jpg");
+	background-size: 25%;
 }
 
 h1,
@@ -20,8 +19,10 @@ h6,
 ul,
 ol,
 li,
-p {
-    color: $white;
+p,
+sup,
+sub {
+	  color: $white;
 }
 
 ol,
@@ -29,8 +30,8 @@ ul,
 li,
 a,
 p {
-  line-height: 1.4;
-  font-family: $font_sans;
+	line-height: 1.4;
+	font-family: $font_sans;
 }
 
 h2,
@@ -43,8 +44,8 @@ h3 > a,
 h4 > a,
 h5 > a,
 h6 > a {
-  font-family: $font_serif;
-  font-weight: 500;
+	font-family: $font_serif;
+	font-weight: 500;
 }
 
 h2,
@@ -52,173 +53,189 @@ h3,
 h4,
 h5,
 h6 {
-  color: $red1;
+	color: $red1;
 }
 
 a, a:visited {
-  color: $blue1;
+	color: $blue1;
 }
 
 a:hover {
-  color: $blue;
+	color: $blue;
 }
 
 h1 {
-  color: $red;
-  font-family: $font_serif;
-  font-variant-caps: small-caps;
-  font-weight: 500;
-  font-size: 2.5em;
+	color: $red;
+	font-family: $font_serif;
+	font-variant-caps: small-caps;
+	font-weight: 500;
+	font-size: 2.5em;
+}
+
+h2 {
+	font-size: 1.6em;
+}
+
+h3 { 
+	font-size: 1.3em;
 }
 
 hr {
-  border-style: solid;
-  border-color: $white;
-  border-width: 1px 0 0 0;
+	border-style: solid;
+	border-color: $white;
+	border-width: 1px 0 0 0;
 }
 
 pre {
-  padding: 1em 0;
-  overflow-x: auto;
-  font-family: $font_mono;
-  color: $gray;
+	padding: 1em 0;
+	overflow-x: auto;
+	font-family: $font_mono;
+	color: $gray;
 }
 
 code {
-  color: $gray;
-  font-family: $font_mono;
+	color: $gray;
+	font-family: $font_mono;
 }
 
 span.icon {
-  height: 1em;
+	height: 1em;
 }
 
 span.icon > img {
-  height: 1em;
-  width: 1em;
+	height: 1em;
+	width: 1em;
 }
 
 .publish-date {
-  color: $gray;
-  font-family: $font_sans;
-  font-weight: normal;
-  font-style: italic;
+	color: $gray;
+	font-family: $font_sans;
+	font-weight: normal;
+	font-style: italic;
 }
 
 h2 > span.publish-date {
-  display: inline-block;
-  font-size: 0.8em;
+	display: inline-block;
+	font-size: 0.8em;
 }
 
 .main-container {
-  display: grid;
-  grid-template-columns: minmax(0, 5fr) 2fr;
-  grid-template-rows: min-content auto;
-  max-width: 1180px;
-  margin: 0 auto;
-  min-height: 100vh;
-  height: auto;
-  background-color: $bg0;
+	display: grid;
+	grid-template-columns: minmax(0, 5fr) 2fr;
+	grid-template-rows: min-content auto;
+	max-width: 1180px;
+	margin: 0 auto;
+	min-height: 100vh;
+	height: auto;
+	background-color: $bg0;
 }
 
 .landing-page-container {
-  grid-column-start: 1;
-  grid-column-end: 3;
-  padding: 2em;
-  font-size: 1.3em;
+	grid-column-start: 1;
+	grid-column-end: 3;
+	padding: 2em 4em;
 }
 
 .landing-page-container > h1 {
-  text-align: center;
-  font-size: 3em;
+	text-align: center;
+	font-size: 3em;
 }
 
 .landing-page-container > .links-container {
-  padding: 0.5em;
+	padding: 0.5em;
 }
 
 .landing-page-container > .links-container > a {
-  display: inline-block;
-  font-size: 1.5em;
-  margin: auto 1em;
+	display: inline-block;
+	font-size: 1.5em;
+	margin: auto 1em;
 }
 
 .landing-page-container > .links-container > a > span.icon {
-  font-size: 1.5em;
+	font-size: 1.5em;
 }
 
 .header-container {
-  padding: 0 2em;
+	padding: 0 2em;
 }
 
 .sidebar-container {
-  grid-row-start: 1;
-  grid-row-end: 3;
-  grid-column-start: 2;
-  grid-column-end: 3;
-  background-color: $bg1;
+	grid-row-start: 1;
+	grid-row-end: 3;
+	grid-column-start: 2;
+	grid-column-end: 3;
+	background-color: $bg1;
 }
 
 .sidebar-container span.icon {
-  font-size: 2em;
-  margin: auto 0.5em;
+	font-size: 2em;
+	margin: auto 0.5em;
 }
 
 .sticky-wrapper {
-  padding: 1em 2em;
-  position: sticky;
-  top: 1em;
-  max-height: 100vh;
+	padding: 1em 2em;
+	position: sticky;
+	top: 1em;
+	max-height: 100vh;
 }
 
 .links-container {
-  text-align: center;
+	text-align: center;
 }
 
 .links-container a {
-  text-decoration: none;
+	text-decoration: none;
 }
 
 .post-container {
-  padding: 1em 2em;
+	padding: 1em 2em;
 }
 
 .post-container img {
-  max-width: 100%;
+	max-width: 100%;
+}
+
+.footnote-definition:first-of-type {
+	border-top: 1px solid $gray;
+	padding-top: 1em;
+}
+
+.footnote-definition p {
+	display: inline-block;
 }
 
 .paginator {
-  padding: 2em;
-  text-align: center;
+	padding: 2em;
+	text-align: center;
 }
 
 .paginator a {
-  display: inline-block;
-  padding: 0.5em;
-  background-color: $blue1;
-  color: $bg0;
-  text-decoration: none;
+	display: inline-block;
+	padding: 0.5em;
+	background-color: $blue1;
+	color: $bg0;
+	text-decoration: none;
 }
 
 .paginator a:hover {
-  background-color: $blue;
-  color: $white;
+	background-color: $blue;
+	color: $white;
 }
 
 @media (max-width: 768px){
-  .landing-page-container {
-    font-size: 1em;
-  }
-
-  .header-container,
-  .content-container,
-  .sidebar-container {
-    grid-column-start: 1;
-    grid-column-end: 3;
-  }
-
-  .sidebar-container {
-    grid-row-start: auto;
-    grid-row-end: auto;
-  }
+	.landing-page-container {
+	  font-size: 1em;
+	}
+
+	.header-container,
+	.content-container,
+	.sidebar-container {
+	  grid-column-start: 1;
+	  grid-column-end: 3;
+	}
+
+	.sidebar-container {
+	  grid-row-start: auto;
+	  grid-row-end: auto;
+	}
 }