Code adjustments

src/scripts/contextMenu.js

@@ -282,7 +282,7 @@ contextMenu.sharePhoto = function(photoID, e) {
 		iconClass = 'ionicons'
 
 	let items = [
-		{ title: `<input readonly id="link" value="${ link }">`, fn: () => {}, class: 'noHover' },
+		{ title: `<input readonly id="link" value="${ link }">`, fn: () => {}, class: 'basicContext__item--noHover' },
 		{ },
 		{ title: build.iconic('twitter', iconClass) + 'Twitter', fn: () => photo.share(photoID, 'twitter') },
 		{ title: build.iconic('facebook', iconClass) + 'Facebook', fn: () => photo.share(photoID, 'facebook') },
@@ -303,7 +303,7 @@ contextMenu.shareAlbum = function(albumID, e) {
 	let iconClass = 'ionicons'
 
 	let items = [
-		{ title: `<input readonly id="link" value="${ location.href }">`, fn: () => {}, class: 'noHover' },
+		{ title: `<input readonly id="link" value="${ location.href }">`, fn: () => {}, class: 'basicContext__item--noHover' },
 		{ },
 		{ title: build.iconic('twitter', iconClass) + 'Twitter', fn: () => album.share('twitter') },
 		{ title: build.iconic('facebook', iconClass) + 'Facebook', fn: () => album.share('facebook') },

src/styles/_animations.scss

@@ -1,4 +1,4 @@
-/* Animation Setter ------------------------------------------------*/
+// Animation Setter ---------------------------------------------------- //
 .fadeIn {
 	animation-name: fadeIn;
 	animation-duration: .3s;
@@ -13,19 +13,7 @@
 	animation-timing-function: $timing;
 }
 
-/* moveUp ------------------------------------------------*/
-@keyframes moveUp {
-	0% {
-		transform: translateY(100px);
-		opacity: 0;
-	}
-	100% {
-		transform: translateY(0);
-		opacity: 1;
-	}
-}
-
-/* fadeIn ------------------------------------------------*/
+// Fade -------------------------------------------------------------- //
 @keyframes fadeIn {
 	0% {
 		opacity: 0;
@@ -35,7 +23,6 @@
 	}
 }
 
-/* fadeOut ------------------------------------------------*/
 @keyframes fadeOut {
 	0% {
 		opacity: 1;
@@ -45,7 +32,7 @@
 	}
 }
 
-/* moveBackground ------------------------------------------------*/
+// Move -------------------------------------------------------------- //
 @keyframes moveBackground {
 	0% {
 		background-position-x: 0px;
@@ -55,7 +42,7 @@
 	}
 }
 
-/* zoomIn ------------------------------------------------*/
+// Zoom -------------------------------------------------------------- //
 @keyframes zoomIn {
 	0% {
 		opacity: 0;
@@ -67,7 +54,6 @@
 	}
 }
 
-/* zoomOut ------------------------------------------------*/
 @keyframes zoomOut {
 	0% {
 		opacity: 1;
@@ -79,7 +65,7 @@
 	}
 }
 
-/* popIn ------------------------------------------------*/
+// PopIn -------------------------------------------------------------- //
 @keyframes popIn {
 	0% {
 		opacity: 0;
@@ -91,7 +77,7 @@
 	}
 }
 
-/* pulse ------------------------------------------------*/
+// Pulse -------------------------------------------------------------- //
 @keyframes pulse {
 	0% {
 		opacity: 1;

src/styles/_basicContext.extended.scss

@@ -1,4 +1,4 @@
-/* Context ------------------------------------------------*/
+// Extended Theme -------------------------------------------------------------- //
 .basicContext {
 
 	&__data .cover {
@@ -27,7 +27,7 @@
 		height: 14px;
 	}
 
-	/* Link ------------------------------------------------*/
+	// Link -------------------------------------------------------------- //
 	&__data input#link {
 		margin: -2px 0;
 		padding: 5px 7px 6px;
@@ -40,13 +40,13 @@
 		outline: none;
 	}
 
-	/* No Hover ------------------------------------------------*/
-	&__item.noHover &__data {
+	// No hover -------------------------------------------------------------- //
+	&__item--noHover &__data {
 		padding-right: 12px;
 	}
 
-	&__item.noHover:hover &__data {
-		background: none;
+	&__item--noHover:hover &__data {
+		background: none !important;
 	}
 
 }

src/styles/_content.scss

@@ -16,9 +16,11 @@
 		background: white(.02);
 	}
 
-	&--sidebar { width: calc(100% - 300px); }
+	&--sidebar {
+		width: calc(100% - 300px);
+	}
 
-	/* Animations ------------------------------------------------------------------- */
+	// Animations -------------------------------------------------------------- //
 	&.contentZoomIn .album,
 	&.contentZoomIn .photo {
 		animation-name: zoomIn;
@@ -37,7 +39,7 @@
 		animation-name: fadeOut;
 	}
 
-	/* Albums and Photos ------------------------------------------------*/
+	// Albums and Photos ------------------------------------------------------ //
 	.album,
 	.photo {
 		position: relative;
@@ -54,7 +56,7 @@
 			position: absolute;
 			width: 200px;
 			height: 200px;
-			background-color: #222;
+			background: #222;
 			box-shadow: 0 2px 5px black(.5);
 			border: 1px solid white(.5);
 			transition: opacity .3s ease-out, transform .3s ease-out, border-color .3s ease-out;
@@ -72,7 +74,7 @@
 		}
 	}
 
-	/* Album ------------------------------------------------*/
+	// Album -------------------------------------------------------------- //
 	.album  {
 		img:first-child,
 		img:nth-child(2) {
@@ -81,20 +83,25 @@
 		}
 
 		&:hover img:nth-child(1),
-		&:hover img:nth-child(2) { opacity: 1; }
+		&:hover img:nth-child(2) {
+			opacity: 1;
+		}
 
-		&:hover img:nth-child(1) { transform: rotate(-2deg) translateY(10px) translateX(-12px); }
+		&:hover img:nth-child(1) {
+			transform: rotate(-2deg) translateY(10px) translateX(-12px);
+		}
 
-		&:hover img:nth-child(2) { transform: rotate(5deg) translateY(-8px) translateX(12px); }
+		&:hover img:nth-child(2) {
+			transform: rotate(5deg) translateY(-8px) translateX(12px);
+		}
 	}
 
-	/* Album/Photo Overlay ------------------------------------------------*/
+	// Overlay -------------------------------------------------------------- //
 	.album .overlay,
 	.photo .overlay {
 		position: absolute;
 		margin: 0 1px;
 		width: 200px;
-		background: black(.6);
 		background: linear-gradient(to bottom, black(0), black(.6));
 		bottom: 1px;
 	}
@@ -143,9 +150,11 @@
 	}
 
 	.album img[data-overlay='false'] + .overlay h1,
-	.album img[data-overlay='false'] + .overlay a  { text-shadow: none; }
+	.album img[data-overlay='false'] + .overlay a {
+		text-shadow: none;
+	}
 
-	/* Badges ------------------------------------------------*/
+	// Badge -------------------------------------------------------------- //
 	.album .badges,
 	.photo .badges {
 		position: relative;
@@ -168,7 +177,9 @@
 		text-shadow: 0 1px 0 black(.4);
 		opacity: .9;
 
-		&--visible { display: inline-block; }
+		&--visible {
+			display: inline-block;
+		}
 
 		.iconic {
 			fill: #fff;
@@ -178,7 +189,7 @@
 		}
 	}
 
-	/* Divider ------------------------------------------------*/
+	// Divider -------------------------------------------------------------- //
 	.divider {
 		margin: 50px 0 0;
 		padding: 10px 0 0;
@@ -207,7 +218,7 @@
 
 }
 
-/* No Content ------------------------------------------------*/
+// No content -------------------------------------------------------------- //
 .no_content {
 	position: absolute;
 	top: 50%;

src/styles/_imageview.scss

@@ -9,26 +9,28 @@
 	background-color: rgba(10, 10, 10, .98);
 	transition: background-color .3s;
 
-	/* Modes ------------------------------------------------*/
+	// Modes -------------------------------------------------------------- //
 	&.view { background-color: inherit; }
 
 	&.full { background-color: black(1); }
 
-	/* ImageView ------------------------------------------------*/
+	// ImageView -------------------------------------------------------------- //
 	#image {
 		position: absolute;
 		top: 60px;
 		right: 30px;
 		bottom: 30px;
 		left: 30px;
+		transition: top .3s, right .3s, bottom .3s, left .3s, margin-top .3s, opacity .2s, transform .3s $timingBounce;
+		will-change: transform;
+
 		background-repeat: no-repeat;
 		background-position: 50% 50%;
 		background-size: contain;
-		transition: top .3s, right .3s, bottom .3s, left .3s, margin-top .3s, opacity .2s, transform .3s $timingBounce;
+
 		animation-name: zoomIn;
 		animation-duration: .3s;
 		animation-timing-function: $timingBounce;
-		will-change: transform;
 
 		&.small {
 			top: 50%;
@@ -45,7 +47,7 @@
 		}
 	}
 
-	/* Previous/Next Buttons ------------------------------------------------*/
+	// Previous/Next Buttons -------------------------------------------------------------- //
 	.arrow_wrapper {
 		position: fixed;
 		width: 15%;
@@ -84,9 +86,13 @@
 		}
 
 		&:hover a#previous,
-		&:hover a#next { transform: translateX(0); }
+		&:hover a#next {
+			transform: translateX(0);
+		}
 
-		a:hover { opacity: 1; }
+		a:hover {
+			opacity: 1;
+		}
 
 		.iconic {
 			fill: white(.8);

src/styles/_loading.scss

@@ -1,23 +1,25 @@
 #loading {
 
+	display: none;
 	position: fixed;
 	width: 100%;
 	height: 3px;
 	background-size: 100px 3px;
 	background-repeat: repeat-x;
 	border-bottom: 1px solid black(.3);
-	display: none;
+
 	animation-name: moveBackground;
 	animation-duration: .3s;
 	animation-iteration-count: infinite;
 	animation-timing-function: linear;
 
-	/* Modes ------------------------------------------------*/
+	// Modes -------------------------------------------------------------- //
 	&.loading {
 		height: 3px;
 		background-image: linear-gradient(to right, #153674 0%, #153674 47%, #2651AE 53%, #2651AE 100%);
 		z-index: 2;
 	}
+
 	&.error {
 		height: 40px;
 		background-color: #2f0d0e;
@@ -25,7 +27,7 @@
 		z-index: 1;
 	}
 
-	/* Content ------------------------------------------------*/
+	// Content -------------------------------------------------------------- //
 	h1 {
 		margin: 13px 13px 0 13px;
 		color: #ddd;

src/styles/_message.scss

@@ -7,12 +7,20 @@
 	background: linear-gradient(to bottom, #444, #333);
 	box-shadow: 0 1px 4px black(.2), inset 0 1px 0 white(.05);
 
-	/* Reset default styles ------------------------------------------------*/
-	.basicModal__content { padding: 0; }
-	.basicModal__content p { margin: 0; }
-	.basicModal__buttons { box-shadow: none; }
+	// Reset -------------------------------------------------------------- //
+	&__content {
+		padding: 0;
+	}
+
+	&__content p {
+		margin: 0;
+	}
+
+	&__buttons {
+		box-shadow: none;
+	}
 
-	/* Text ------------------------------------------------*/
+	// Text -------------------------------------------------------------- //
 	p {
 		padding: 10px 30px;
 		color: white(.9);
@@ -43,8 +51,8 @@
 		&.less { padding-bottom: 30px; }
 	}
 
-	/* Buttons ------------------------------------------------*/
-	.basicModal__button {
+	// Buttons -------------------------------------------------------------- //
+	&__button {
 		padding: 13px 0 15px;
 		background: black(.02);
 		color: white(.5);
@@ -71,7 +79,7 @@
 		&.hidden { display: none; }
 	}
 
-	/* Inputs ------------------------------------------------*/
+	// Inputs -------------------------------------------------------------- //
 	input.text {
 		padding: 9px 2px;
 		width: 100%;
@@ -95,7 +103,7 @@
 		&:last-child { margin-bottom: 10px; }
 	}
 
-	/* Radio Buttons ------------------------------------------------*/
+	// Radio Buttons ----------------------------------------------------------- //
 	.choice {
 		padding: 0 30px 15px;
 		width: 100%;
@@ -136,7 +144,7 @@
 			}
 		}
 
-		/* Checked */
+		// Checked
 		label input:checked ~ .checkbox {
 			background: black(.5);
 			.iconic {
@@ -145,7 +153,7 @@
 			}
 		}
 
-		/* Active */
+		// Active
 		label input:active ~ .checkbox {
 			background: black(.3);
 			.iconic { opacity: .8; }
@@ -170,7 +178,7 @@
 		}
 	}
 
-	/* Select ------------------------------------------------*/
+	// Select -------------------------------------------------------------- //
 	.select {
 		display: inline-block;
 		position: relative;
@@ -229,7 +237,7 @@
 		}
 	}
 
-	/* Version ------------------------------------------------*/
+	// Version -------------------------------------------------------------- //
 	.version {
 		margin: -5px 0 0;
 		padding: 0 30px 30px !important;
@@ -242,7 +250,7 @@
 		span a { color: white(.3); }
 	}
 
-	/* Title ------------------------------------------------*/
+	// Title -------------------------------------------------------------- //
 	h1 {
 		float: left;
 		width: 100%;
@@ -254,7 +262,7 @@
 		text-align: center;
 	}
 
-	/* Rows ------------------------------------------------*/
+	// Rows -------------------------------------------------------------- //
 	.rows {
 		margin: 0 8px 8px;
 		width: calc(100% - 16px);
@@ -266,7 +274,7 @@
 		box-shadow: inset 0 0 3px black(.4);
 	}
 
-	/* Row ------------------------------------------------*/
+	// Row -------------------------------------------------------------- //
 	.rows .row {
 		float: left;
 		padding: 8px 0;

src/styles/_sidebar.scss

@@ -18,7 +18,7 @@
 		user-select: none !important;
 	}
 
-	/* Header ------------------------------------------------*/
+	// Header -------------------------------------------------------------- //
 	&__header {
 		float: left;
 		height: 49px;
@@ -37,7 +37,7 @@
 		text-align: center;
 	}
 
-	/* Wrapper ------------------------------------------------*/
+	// Wrapper -------------------------------------------------------------- //
 	&__wrapper {
 		float: left;
 		height: calc(100% - 49px);
@@ -46,7 +46,7 @@
 		-webkit-overflow-scrolling: touch;
 	}
 
-	/* Divider ------------------------------------------------*/
+	// Divider -------------------------------------------------------------- //
 	&__divider {
 		float: left;
 		padding: 12px 0 8px;
@@ -67,7 +67,7 @@
 		}
 	}
 
-	/* Edit ------------------------------------------------*/
+	// Edit -------------------------------------------------------------- //
 	.edit {
 		display: inline-block;
 		margin-left: 3px;
@@ -88,7 +88,7 @@
 		}
 	}
 
-	/* Table ------------------------------------------------*/
+	// Table -------------------------------------------------------------- //
 	table {
 		float: left;
 		margin: 10px 0 15px 20px;
@@ -110,7 +110,7 @@
 		}
 	}
 
-	/* Tags ------------------------------------------------*/
+	// Tags -------------------------------------------------------------- //
 	#tags {
 		width: calc(100% - 40px);
 		margin: 16px 20px 12px 20px;