Huge html+css revamp

* Plus added links to new photo gallery and donate page.
* Title fix

2 files changed, 95 insertions, 25 deletions

diff --git a/sass/css/_colors.scss b/sass/css/_colors.scss
index 6ce5373..72adc47 100644
--- a/sass/css/_colors.scss
+++ b/sass/css/_colors.scss
@@ -2,11 +2,12 @@ $bg0: #000000;
 $bg1: #0a0a0f;
 $white: #e5e9f0;
 $gray: #a1a6b2;
+$gray1: #33333a;
 $red: #b73030;
 $red1: #c45c5c;
 $yellow: #b2872f;
 $blue: #3f6e90;
 $blue1: #63a9cc;
-$green: #7ea95a;
+$green: #6d974b;
 $cyan: #7fac96;
 $cyan1: #5b8277;
diff --git a/sass/css/yaroslavps.scss b/sass/css/yaroslavps.scss
index 8f6e89b..6f134e9 100644
--- a/sass/css/yaroslavps.scss
+++ b/sass/css/yaroslavps.scss
@@ -11,17 +11,12 @@ html, body {
 	padding: 0;
 	width: 100%;
 	min-height: 100vh;
-	background-color: $bg1;
-	background-image: url("/img/star_pattern.jpg");
-	background-size: 25%;
+	background-color: #000;
+	background-image: url("/img/snowfall.gif");
+	font-size: 14px;
+	/*background-size: 25%;*/
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
 ul,
 ol,
 li,
@@ -37,7 +32,7 @@ li,
 a,
 p {
 	line-height: 1.4;
-	font-family: $font_sans;
+	font-family: $font_mono;
 }
 
 h2,
@@ -63,13 +58,15 @@ h6 {
 }
 
 a, a:visited {
-	color: $blue1;
+	color: $cyan1;
 }
 
-a:hover {
-	color: $blue;
+a:hover,
+a:hover:visited {
+	color: $cyan;
 }
 
+.new-year,
 h1 {
 	color: $red;
 	font-family: $font_serif;
@@ -90,6 +87,7 @@ hr {
 	border-style: solid;
 	border-color: $white;
 	border-width: 1px 0 0 0;
+	margin: 2em 0;
 }
 
 pre {
@@ -97,6 +95,7 @@ pre {
 	overflow-x: auto;
 	font-family: $font_mono;
 	color: $gray;
+	background-color: $bg0;
 }
 
 code {
@@ -106,7 +105,7 @@ code {
 
 figcaption {
 	color: $gray;
-	font-family: $font_sans;
+	font-family: $font_mono;
 	text-align: center;
 }
 
@@ -114,8 +113,26 @@ video {
 	max-width: 90%;
 }
 
+span.extra-link {
+	color: $gray;
+}
+
+h2 > span.extra-link {
+	font-size: 0.7em;
+}
+
+span.extra-link > a ~ a::before {
+	display: inline-block;
+	color: $white;
+	content: "|";
+	margin: 0 0.2em;
+	text-decoration: none;
+}
+
 span.icon {
+	display: inline-block;
 	height: 1em;
+	text-decoration: none;
 }
 
 span.icon > img {
@@ -125,7 +142,7 @@ span.icon > img {
 
 .publish-date {
 	color: $gray;
-	font-family: $font_sans;
+	font-family: $font_mono;
 	font-weight: normal;
 	font-style: italic;
 }
@@ -140,16 +157,18 @@ h2 > span.publish-date {
 	grid-template-columns: minmax(0, 5fr) 2fr;
 	grid-template-rows: min-content auto;
 	max-width: 1180px;
-	margin: 0 auto;
-	min-height: 100vh;
+	margin: 1em auto;
+	min-height: 90vh;
 	height: auto;
-	background-color: $bg0;
+	background-color: $bg1;
+	padding: 1px;
+	border: 2px solid $gray1;
 }
 
 .landing-page-container {
 	grid-column-start: 1;
 	grid-column-end: 3;
-	padding: 2em 4em;
+	padding: 2em 2em;
 }
 
 .landing-page-container > h1 {
@@ -175,12 +194,57 @@ h2 > span.publish-date {
 	padding: 0 2em;
 }
 
+.landing-page-container,
+.content-container,
+.sidebar-container {
+	border: 2px solid $gray;
+}
+
+.new-year {
+	text-align: center;
+	color: $green;
+	font-size: 2em;
+}
+
+.nav-container {
+	text-align: center;
+}
+
+.nav-container > a ~ a::before {
+	display: inline-block;
+	color: $white;
+	content: " · ";
+	margin: 0 0.4em;
+	text-decoration: none;
+}
+
+.content-container {
+	min-height: 90vh;
+}
+
+.album-container {
+	padding: 1em 2em;
+}
+
+.album-container a {
+	text-decoration: none;
+}
+
+.album-container a img {
+	max-height: 180px;
+}
+
+a.see-more {
+	display: inline-block;
+	text-align: center;
+	font-weight: bold;
+}
+
 .sidebar-container {
 	grid-row-start: 1;
 	grid-row-end: 3;
 	grid-column-start: 2;
 	grid-column-end: 3;
-	background-color: $bg1;
 }
 
 .sidebar-container span.icon {
@@ -246,14 +310,14 @@ h2 > span.publish-date {
 .paginator a {
 	display: inline-block;
 	padding: 0.5em;
-	background-color: $blue1;
+	background-color: $cyan1;
 	color: $bg0;
 	text-decoration: none;
 }
 
 .paginator a:hover {
-	background-color: $blue;
-	color: $white;
+	background-color: $cyan;
+	color: $bg0;
 }
 
 .cryptoqr {
@@ -276,7 +340,6 @@ h2 > span.publish-date {
 	.sidebar-container {
 		grid-row-start: auto;
 		grid-row-end: auto;
-		background-color: #00000000;
 	}
 }
 
@@ -309,6 +372,12 @@ h2 > span.publish-date {
 		text-decoration: none;
 	}
 
+	.main-container,
+	.header-container,
+	.content-container {
+		border: none;
+	}
+
 	.sidebar-container {
 		display: none;
 	}