Some more inline documentation, added social-preview.png

Author: maxvoltar

_config.yml

@@ -25,7 +25,7 @@ author:
   email: [email protected] #optional
   website: https://maxvoltar.com
 description: >- # this means to ignore newlines until "baseurl:"
-  @maxvoltar's minimalistic photo stream.
+  @maxvoltar's minimalistic, self-hosted photo stream.
 baseurl: "" # the subpath of your site, e.g. /blog
 url: "https://maxvoltar.photo" # the base hostname & protocol for your site, e.g. http://example.com
 twitter_username: maxvoltar

css/master.scss

@@ -31,23 +31,23 @@
 	-moz-backdrop-filter: blur(20px);
 	backdrop-filter: blur(20px);
 	background-color: rgba(200, 200, 200, .25);
-	
+	// Disable until Safari supports `prefers-color-scheme` in SVG's
 	// @include dark {
 	// 	background-color: rgba(0, 0, 0, .25);
 	// }
 
 	&:hover,
 	&:focus {
 		background-color: rgba(200, 200, 200, .5);
-		
+		// Disable until Safari supports `prefers-color-scheme` in SVG's
 		// @include dark {
 		// 	background-color: rgba(0, 0, 0, .5);
 		// }
 	}
 
 	&:active {
 		background-color: rgba(200, 200, 200, .25);
-		
+		// Disable until Safari supports `prefers-color-scheme` in SVG's
 		// @include dark {
 		// 	background-color: rgba(0, 0, 0, .75);
 		// }
@@ -162,7 +162,7 @@ body {
 			&:focus {
 				span {
 					background-color: rgba(200, 200, 200, .5);
-					
+					// Disable until Safari supports `prefers-color-scheme` in SVG's
 					// @include dark {
 					// 	background-color: rgba(0, 0, 0, .5);
 					// }
@@ -172,7 +172,7 @@ body {
 			&:active {
 				span {
 					background-color: rgba(200, 200, 200, .25);
-					
+					// Disable until Safari supports `prefers-color-scheme` in SVG's
 					// @include dark {
 					// 	background-color: rgba(0, 0, 0, .75);
 					// }
@@ -267,6 +267,7 @@ body {
 	right: 24px;
 	display: flex;
 	flex-wrap: wrap;
+	margin-left: 16px;
 
 	li {
 		margin-left: 8px;
@@ -281,22 +282,17 @@ body {
 			}
 		}
 
-		&.twitter {
+		&:not(.github) {
 			a {
 				text-indent: 0;
 				width: auto;
 				font-size: 13px;
 				line-height: 32px;
 				text-transform: uppercase;
-				padding: 0 12px 0 28px;
+				padding: 0 12px;
 				color: rgba(0, 0, 0, .75);
 				font-weight: 600;
 				text-decoration: none;
-				background-image: url(../img/icon-twitter.svg);
-				
-				// @include dark {
-				// 	color: #fff;
-				// }
 			}
 		}
 	}

index.html

@@ -12,8 +12,11 @@
 		{% endfor %}
 	</ul>
 	<ul class="links">
+		<!-- You can add links (to your social media profiles for example) below -->	
 		<li class="github"><a rel="me" href="https://github.com/maxvoltar/photo-stream" title="Fork on Github">Github</a></li>
-		<li class="twitter"><a rel="me" href="https://twitter.com/{{ site.twitter_username }}" title="@{{ site.twitter_username }} on Twitter">{{ site.twitter_username }}</a></li>
+		<li><a rel="me" href="https://twitter.com/{{ site.twitter_username }}" title="@{{ site.twitter_username }} on Twitter">Twitter</a></li>
+		<li><a rel="me" href="https://github.com/{{ site.github_username }}" title="@{{ site.github_username }} on Github">Github</a></li>
+		<!-- <li><a rel="me" href="https://instagram.com/{{ site.instagram_username }}" title="@{{ site.instagram_username }} on Instagram">Instagram</a></li> -->
 	</ul>
 	{% include javascript.html %}
 </body>