ilog 0.2.0

data/src/sass/log/grid.scss

@@ -0,0 +1,82 @@
+.log {
+	grid-template-rows: max-content 1fr max-content;
+	max-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	@include breakpoint(md) {
+		box-shadow: 0px 0px .2rem black;
+		margin: 2vh 2vw;
+		max-height: 96vh;
+	}
+	@include breakpoint(lg) {
+		margin: 5vh 3vw;
+		max-height: 90vh;
+		max-width: 94vw;
+		display: flex;
+		flex-wrap: wrap;
+		flex-direction: column;
+		justify-content: space-between;
+	}
+	@include breakpoint(xl) {
+		display: flex;
+		flex-wrap: wrap;
+		flex-direction: row;
+	}
+	
+	> * {
+		width: 100%;
+		max-height: 100%;
+	}
+	> main {
+		flex-grow: 1;
+		height: calc(100% - 3rem);
+	}
+	> header {
+	}
+	> footer {
+	}
+	@include breakpoint(md) {
+	}
+	@include breakpoint(lg) {
+		> header, > footer {
+			order: 1;
+			width: 40%;
+		}
+		> main {
+			order: 2;
+			width: 60%;
+			height: 90vh;
+			max-height: 90vh;
+			padding-bottom: 0px;
+		}
+		> header {
+			height: calc(90vh - 3.6rem);
+		}
+		> footer {
+		}
+	}
+	@include breakpoint(xl) {
+		> * {
+			flex-grow: 1;
+			max-height: 90vh;
+			overflow: scroll;
+		}
+		> main {
+			width: 58%;
+		}
+		> header {
+			height: auto;
+			width: 24%;
+		}
+		> footer {
+			width: 18%;
+			order: 3;
+		}
+	}
+	
+	> main {
+		overflow-y: scroll;
+		-webkit-overflow-scrolling: touch;
+		box-sizing: border-box;
+	}
+}

data/src/sass/log/instagram-header.scss

@@ -0,0 +1,123 @@
+.log { 
+	
+	> header {
+		display: grid;
+		grid-template-areas: "information avatar" "status status" "tunekit tunekit";
+		grid-template-columns: 2fr 1fr;
+		@include breakpoint(sm) {
+			grid-template-areas: "information avatar" "status status" "tunekit tunekit";
+		}
+		@include breakpoint(md) {
+			grid-template-areas: "information avatar"
+								"status avatar"
+								"tunekit tunekit";
+		}
+		@include breakpoint(lg) {
+			grid-template-areas: "avatar information information tunekit"
+								 "avatar status status tunekit";
+			grid-template-columns: 1fr 2fr 1fr 2fr;
+		}
+		
+		
+		margin: .9rem .0px 0px 0px;
+		padding: 0px;
+		
+		@include breakpoint(md) {
+			margin: 2rem auto 0px auto;
+			max-width: 90vw;
+		}
+		
+		overflow: visible;
+		
+		box-shadow: 0px 0px .2rem black;
+		
+		> .avatar {
+			min-height: 10vh;
+			height: 100%;
+			grid-area: avatar;
+			
+			background-position: center;
+			background-repeat: no-repeat;
+			background-size: cover;
+		}
+		
+		> .status {
+			grid-area: status;
+			
+			padding: .4rem 1rem;
+			font-size: 1.1em;
+			background-color: rgba($second-color, 1);
+		}
+		
+		> .information {
+			grid-area: information;
+			
+			overflow: visible;
+			
+			margin: 0px;
+			padding: .4rem 1rem;
+			
+			background-color: rgba($second-color, 1);
+			.author {
+			}
+			> * {
+				margin: .2rem 0px;
+			}
+			.detail {
+				> .addresses {
+					font-size: 0.85em;
+				}
+			}
+		}
+		
+		> .tunekit {
+			grid-area: tunekit;
+			padding: .4rem;
+			@include breakpoint(sm) {
+				padding: 0px;
+			}
+			background-color: rgba($second-color, 1);
+			
+			> .contact {
+				display: flex;
+				flex-direction: row;
+				text-align: center;
+				> * {
+					flex-grow: 1;
+				}
+			}
+			
+			form {
+				padding: .5rem;
+				display: flex;
+				flex-direction: row;
+				overflow: visible;
+				.multiselect.input-multiselect {
+					flex-grow: 1;
+					width: calc(100% - 4rem);
+	// 				z-index: 20;
+				}
+				button {
+					width: 2rem;
+					background: none;
+					border: none;
+				}
+			}
+			
+		}
+	}
+	
+	> footer {
+		margin: 0px 0px .9rem 0px;
+		@include breakpoint(md) {
+			margin: 0px auto 2rem auto;
+			max-width: 90vw;
+		}
+		
+		padding: 2rem;
+		box-shadow: 0px 0px .4rem black;
+		
+		color: white;
+		background-color: rgba($second-color, 1);
+	}
+}

data/src/sass/log/list.scss

@@ -0,0 +1,242 @@
+.log-list {
+	> header {
+		background: linear-gradient(rgba($main-color, 1), rgba($main-color, .9));
+		max-height: fit-content;
+		
+		.profile {
+			display: flex;
+			> * {
+				padding: .8rem;
+				display: inline-block;
+			}
+			.avatar-container {
+				padding: 0px;
+				background-color: $main-color !important;
+			}
+			img {
+				max-width: 45vw;
+				max-height: 50vh;
+				padding: 0px;
+			}
+		}
+		> .tunekit {
+			padding: .4rem;
+			display: flex;
+			flex-direction: column;
+			@include breakpoint(md) {
+				flex-flow: row;
+			}
+			justify-content: space-around;
+			form {
+				padding: .4rem;
+				display: flex;
+				flex-grow: 2;
+				.multiselect__tags {
+					background-color: transparent;
+				}
+				.multiselect {
+					.input {
+						box-sizing: border-box;
+						padding: .1rem .4rem;
+					}
+					flex-grow: 2;
+					margin: 0px .4rem;
+					font-size: 1rem;
+				}
+				button {
+					margin: .1rem;
+					flex-grow: 1;
+					line-height: 1;
+					padding: 0rem .4rem;
+					font-size: .8rem;
+					border: 1px solid gray;
+					background-color: #FFFAFA;
+					border-radius: .2rem;
+					color: gray;
+					box-shadow: 0px 0px .15rem rgba(0, 0, 0, .4);
+					&:hover {
+						background-color: white;
+						border: 1px solid $main-color;
+						color: $main-color;
+					}
+				}
+			}
+		}
+	}
+	> header, > footer {
+		nav {
+			text-align: center;
+			background-color: rgba($second-color, .9);
+			.button {
+				display: block;
+				cursor: hand;
+				color: $second-color-op;
+				&:hover {
+					background-color: #333;
+					color: white;
+				}
+			}
+		}
+	}
+	> .item {
+		margin: .3rem 0px;
+		box-shadow: 0px 0px 2px rgba(0, 0, 0, .2);
+		padding: .4rem 0px .8rem 0px;
+		
+		.link {
+			display: block;
+			cursor: pointer;
+		}
+		
+		> .stuff {
+			color: $main-color;
+		}
+		> .entry > footer {
+			margin: 0px 1.4rem;
+			line-height: 1;
+		}
+		.tags, .date {
+			display: inline;
+		}
+		.tags {
+			color: #eee;
+		}
+		.date {
+			margin: 0px .4rem;
+			padding: .1rem .6rem;
+			border-radius: .2rem;
+			background-color: lightgray;
+			color: black;
+			font-size: .7rem;
+		}
+		.content {
+			margin: 0px;
+		}
+		.title {
+			padding: .4rem 1rem;
+			display: block;
+			font-size: 1.6em;
+		}
+		
+		img {
+			display: block;
+			margin: 0px auto;
+			padding: 0px;
+			max-height: 75vh;
+		}
+		.tag {
+			display: content;
+			> a {
+				font-size: .8rem;
+				margin: 0px .5rem;
+				padding: 0px;
+				color: $second-color;
+				background-color: transparent !important;
+				box-shadow: none;
+			}
+		}
+	}
+}
+
+@keyframes colorup {
+	from {background-color:rgba($main-color, 1);}
+    to {background-color:rgba($main-color, .9);}
+}
+@keyframes fade {
+    from {background-color:rgba($main-color, .9);}
+    to {background-color:rgba($main-color, 1);}
+}
+.log-list {
+	> .post {
+		animation: colorup .5s forwards;
+		background-color: rgba($main-color, .9);
+		color: white;
+		&:hover {
+			animation: fade .5s forwards;
+			background-color: rgba($main-color, 1);
+		}
+		.post-body {
+			background-color: white;
+			color: black;
+			> * {
+				margin: 0px;
+				padding: 0px;
+				width: 100%;
+			}
+			.timestamps {
+				margin: .4rem;
+				padding: 0x;
+				font-size: .8rem;
+				color: white;
+				list-style: none !important;
+				li {
+					margin: .2rem;
+					padding: 0px .4rem;
+					border-radius: .2rem;
+					background-color: $second-color;
+					display: inline-block;
+					color: $second-color-op;
+					.label {
+						color: #333;
+					}
+				}
+			}
+		}
+	}
+	> .stuff {
+		padding: 0px;
+		
+		> a {
+			margin: 0px;
+			padding: 0px;
+			display: flex;
+			> header, > footer {
+				writing-mode: vertical-lr;
+				color: $second-color-op;
+				> * {
+					padding: 1rem 0px;
+					margin: auto;
+					width: fit-content;
+					height: fit-content;
+				}
+			}
+			background-color: rgba($second-color, .9);
+			color: #eee;
+			> header, > footer {
+				background-color: rgba($second-color, .4);
+			}
+			&:hover {
+				animation: stuffup2 .5s forwards;
+				background-color: rgba($second-color, 1);
+				color: black;
+				> header, > footer {
+					animation: stuffup .5s forwards;
+				}
+			}
+			
+		}
+	}
+}
+@keyframes stuffup2 {
+	from {color:#eee;
+		background-color: rgba($second-color, .9);
+	}
+    to {color: white;
+	    background-color: rgba($second-color, 1);
+    }
+}
+@keyframes stuffup {
+	from {background-color:rgba($second-color, 4);}
+    to {background-color:rgba($second-color, .9);}
+}
+
+
+.display-content {
+	> * {
+		transition: addcontent transform 1s;
+	}
+}
+@keyframes addcontent {
+	from {opacity: 0;}
+    to {opacity: 1;}
+}

data/src/sass/log/style.scss

@@ -0,0 +1,3 @@
+@import "/grid";
+@import "/list";
+@import "/base";

data/src/sass/log/treestyle-addons.scss

@@ -0,0 +1,102 @@
+.log-list {
+	position: relative;
+	padding: 2em 0;
+	min-height: calc(100vh - 5rem);
+	
+	&:before {
+		content: '';
+		position: absolute;
+		top: 0;
+		left: 25px;
+		height: 100%;
+		width: 4px;
+		
+		z-index: -1; // to fix the issue with headers inside the container
+		
+		background: rgba(77, 171, 171, 1);
+	    box-shadow: 0 0px 0.4rem rgba(0, 0, 0, 0.4);
+	    
+	    @include breakpoint(md) {
+			left: 50%;
+			margin-left: -2px;
+		}
+	}
+}
+
+
+.log-list > .item {
+
+	position: relative;
+	margin: 2em 0;
+	
+	@include breakpoint(md) {
+		margin: 4em 0;
+	}
+	
+	&:after {
+		content: "";
+		display: table;
+		clear: both;
+	}
+	&:first-child {
+		margin-top: 0;
+	}
+	&:last-child {
+		margin-bottom: 0;
+	}
+	
+	@include breakpoint(md) {
+	
+		&:nth-child(even) .entry {
+			float: right;
+		}
+		&:nth-child(even) .blog-read-more {
+			float: right;
+		}
+		&:nth-child(even) .blog-aside {
+			left: auto;
+			right: 52%;
+	// 		width: 48%;
+			text-align: right;
+		}
+		&:nth-child(even) .blog-aside > * {
+			float: right;
+		}
+	}
+	> .entry {
+		position: relative;
+		margin: 0px auto;
+		
+		box-sizing: border-box;
+		
+		-webkit-background-clip: padding-box; /* for Safari */
+		background-clip: padding-box; 
+			
+		width: calc(100% - 2rem);
+	
+		@include breakpoint(sm) {
+			width:100%; 
+		}
+	
+		
+		@include breakpoint(md) {
+			margin-left: 0;
+			width: 75%;
+			margin: 0 4.8%;
+			
+			&:before {
+				top: 34px;
+				width: 9.3%;
+				left: 100%;
+				border-color: transparent;
+				border-left-color: white;
+			}
+			.blog-aside {
+				margin: 0px;
+				position: absolute;
+				left: 52%;
+				top: 6px;
+			}
+		}
+	}
+}

data/src/sass/log/treestyle.scss

@@ -0,0 +1,163 @@
+.log-list {
+	width: 98%;
+	margin: 0 auto;
+	padding: 0 10%;
+	border-radius: 2px;
+	@include breakpoint(md) {
+		width: 95%;
+	}
+	@include breakpoint(xl) {
+		width: 90%;
+	}
+	@include breakpoint(xx) {
+		width: 85%;
+	}
+
+	&:after {
+		content: '';
+		display: table;
+		clear: both;
+	}
+	> header {
+		@extend .h2;
+		text-align: center;
+		.title {
+			@extend .shadow;
+			display: inline-block;
+			padding: .5rem 1rem;
+			background-color: $second-color;
+			border-radius: .2rem;
+		}
+	}
+	
+	> .item {
+		
+		> .entry {
+			display: flex;
+			flex-direction: column;
+			@include breakpoint(md) {
+				flex-direction: row;
+			}
+		}
+		@include breakpoint(md) {
+			&:nth-child(even) > .entry {
+				flex-direction: row-reverse;
+			}
+		}
+		
+		> .entry {
+			> .tags {
+				flex-basis: 28%;
+			}
+			> .date {
+				margin: .2rem 1rem;
+				text-align: center;
+				font-size: .8rem;
+				@include breakpoint(md) {
+					margin: 0px;
+					text-align: left;
+					flex-basis: 3rem;
+					writing-mode: tb;
+					display: flex;
+					align-items: center;
+				}
+			}
+			> .content {
+				flex-grow: 1;
+				display: flex;
+			    flex-direction: column;
+			    justify-content: center;
+			}
+		}
+	}
+	
+	> footer {
+		text-align: center;
+		> .button, > .status {
+			@extend .shadow;
+			display: inline-block;
+			padding: .5rem 1rem;
+			background-color: $second-color;
+			border-radius: .2rem;
+		}
+		> .status {
+			background-color: $main-color;
+		}
+	}
+}
+
+.log-list > .item > .entry > .content {
+	> .kind {
+		position: relative;
+		
+		align-self: flex-end;
+		top: 0.7rem;
+		right: 1rem;
+		
+		margin: 0px;
+		padding: .1rem .4rem;
+		width: fit-content;
+		
+		border-radius: .2rem;
+		background-color: rgba($second-color, 1);
+		font-size: .9em;
+	}
+	> .link {
+		@extend .shadow;
+		display: block;
+		margin: 0px;
+		padding: 0px;
+		
+		color: black;
+		background-color: white;
+		
+		text-shadow: none;
+		text-decoration: none;
+		
+		border-radius: .4rem;
+// 		border-top: .2rem solid rgba($second-color, .5);
+		
+		opacity: .9;
+		&:hover {
+			opacity: 1;
+// 			border-top: .2rem solid rgba($second-color, 1);
+		}
+		
+		> .thumbnail {
+			margin: 0px;
+			
+			border-top-right-radius: .4rem;
+			border-top-left-radius: .4rem;
+	// 		box-shadow: 0px 0px .1rem rgba(0, 0, 0, .5);
+			
+			width: 100%;
+			max-height: 80vh;
+			height: 30rem;
+			
+			background-size: cover;
+			background-position: center;
+			background-repeat: no-repeat;
+		}
+		> .title {
+			margin: .4rem .7rem;
+			font-weight: 300;
+		}
+	}
+}
+.log-list > .item > .entry.post > .content > .link {
+	> .title {
+		font-size: 1.5em;
+	}
+}
+.log-list > .item > .entry.stuff > .content {
+	> .link {
+		background-color: rgba($main-color, .7);
+		color: $main-color-op;
+		&:hover {
+			background-color: rgba($second-color, 1);
+		}
+		> .title {
+			font-size: 1.3em;
+		}
+	}
+}