Plume/static/css/main.css

/* color palette: https://coolors.co/23f0c7-ef767a-7765e3-6457a6-ffe347 */

@import url('/static/fonts/Route159/Route159.css');
@import url('/static/fonts/Lora/Lora.css');
@import url('/static/fonts/Playfair_Display/PlayfairDisplay.css');

/*
 * == Global ==
 */

 html, body {
 	margin: 0;
 	padding: 0;
 	background: #F4F4F4;
 	color: #242424;
 	font-family: "Route159", serif;
 }

 a, a:visited {
 	color: #7765E3;
 	text-decoration: none;
 }

 small {
 	margin-left: 1em;
 	color: rgba(36, 36, 36, 0.6);
 	font-size: 0.75em;
 	word-wrap: break-word;
 	word-break: break-all;
 }

 .center {
 	text-align: center;
 	font-weight: bold;
 	opacity: 0.6;
 	padding: 5em;
 }

 .spaced {
 	margin: 4rem 0;
 }

 .cards.spaced {
     margin: 1rem 0 5rem;
 }

 .banner {
 	background: #DADADA;
 	padding-top: 2em;
 	padding-bottom: 1em;
 	margin: 3em 0px;
 }

/*
 * == Header ==
 */

 header {
 	background: #ECECEC;
 }
 header #content {
 	display: flex;
 	align-content: center;
 	justify-content: space-between;
 }

 header nav#menu {
 	position: relative;
 	display: none;
 	transform: skewX(-15deg);
 	left: -1em;
 	padding: 1em 1em 1em 2em;
 	background: #7765E3;
 	align-self: flex-start;
 }
 header nav#menu a {
 	transform: skewX(15deg);
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
 	width: 1.4em;
 	height: 1.4em;
 	margin: 0;
 	padding: 0;
 	color: #ECECEC;
 	font-size: 1.33em;
 }

 header nav {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
 }
 header nav hr {
 	height: 100%;
 	width: 0.2em;
 	background: #7765E3;
 	border: none;
 	transform: skewX(-15deg);
 }
 header nav a {
 	display: flex;
 	align-items: center;
 	position: relative;
 	align-self: stretch;
 	margin: 0;
 	padding: 0 2em;
 	font-size: 1em;
 }
header nav a.title {
    margin: 0;
    text-align: center;
    padding: 0.5em 1em;
    font-size: 1.75em;
}
header nav a.title img {
    height: 1.75em;
    width: 1.75em;
}
header nav a.title p {
    margin: 0;
    padding-left: 0.5em;
}

 header nav a i { font-size: 1.2em; }

 /* Only enable label animations on normal screens. */
 @media screen and (min-width: 900px) {
 	header nav a i {
 		transition: all 0.2s ease;
 		margin: 0;
 	}

 	header nav a:hover i { margin-bottom: 0.75em; }

 	header nav a .mobile-label {
 		transition: all 0.2s ease;
 		display: block;
 		position: absolute;
 		left: 50%;
 		transform: translate(-50%, 0);
 		opacity: 0;
 		font-size: 0.9em;
 		white-space: nowrap;
 	}
 	header nav a:hover .mobile-label {
 		opacity: 1;
 		transform: translate(-50%, 80%);
 	}
 	header nav a img + .mobile-label { display: none; }
 }

/*
 * == Main ==
 */

 body > main > * {
 	padding: 0 20%;
 }

 main h1 {
 	font-family: "Route159";
 	font-size: 2.5em;
 	font-weight: 300;
 }
 main h1.article {
 	max-width: 40rem;
 	margin: 1em auto 0.5em;
 	font-family: "Playfair Display", serif;
 	font-size: 2.5em;
 	font-weight: normal;
 }

 main h2 {
 	font-family: "Route159";
 	font-size: 1.75em;
 	font-weight: 300;
 }

 main h2.article {
    max-width: 40rem;
    margin: auto;
    font-size: 1.25em;
    margin-bottom: 0.5em;
 }

/*
 * == Article ==
 */

 /* Author */

 main .article-info {
 	max-width: 40rem;
 	margin: 0 auto 3em;
 	font-size: 0.95em;
 	font-weight: 400;
 }
 main .article-info .author { font-weight: 600; }
 main .article-info .author a { font-weight: 600; }

 /* Cover */

 main > .cover {
    padding: 0px;
    margin: 0px;
    width: auto;
    min-height: 50vh;
    background-position: center;
    background-size: cover;
    overflow: hidden;
 }

 /* Article */

 main article {
 	max-width: 40rem;
 	margin: 2.5em auto;
 	font-family: "Lora", serif;
 	font-size: 1.2em;
 	line-height: 1.7em;
 }

 main a:hover {
         text-decoration: underline;
 }

 article img {
 	display: block;
 	margin: 3em auto;
 	max-width: 100%;
 }

 article pre {
 	padding: 1em;
 	background: #DADADA;
 	overflow: auto;
 	border-radius: 5px;
 }

 /* Article.Meta */

 main .article-meta, main .article-meta button {
 	padding: 0;
 	font-size: 1.1em;
 	margin-top: 10%;
 }
 main .article-meta > * { margin: 0 20%; }

main .article-meta > p {
    margin: 2em 20%;
 	font-size: 0.9em;
}

/** Tags **/

main .article-meta .tags {
    list-style: none;
    display: inline-block;
    padding: 0px;
    margin-bottom: 2em;
}

main .article-meta .tags li {
    display: inline-block;
    background: #DADADA;
    padding: 0px;
    margin-right: 10px;
    border-radius: 3px;
    transition: all 0.2s ease-in;
}

main .article-meta .tags li:hover {
    background: #BBB;
}

main .article-meta .tags li a {
    display: inline-block;
    padding: 10px 20px;
    color: #242424;
}


 /* ~ Likes ~ */

 main .article-meta .likes p,
 main .article-meta .reshares p { display: inline-block; margin: 0; }

 /* Like / Reshare button */

 main .article-meta .actions {
 	display: flex;
 	flex-direction: row;
 	justify-content: space-around;
 }

 main .article-meta .likes,
 main .article-meta .reshares {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	padding: 0.5em 0;
 }

 main .article-meta .likes > p,
 main .article-meta .reshares > p {
 	font-size: 1.5em;
 }

 main .article-meta .likes .action,
 main .article-meta .reshares .action {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
 	margin: 0;
 	padding: 0;
 	background: none;
 	color: #242424;
 	border: none;
 	font-size: 1.1em;
 }

 main .article-meta .likes > p,
 main .article-meta .likes .action:hover { color: #E92F2F; }
 main .article-meta .reshares > p,
 main .article-meta .reshares .action:hover { color: #7765E3; }

 main .article-meta .likes .action svg.feather,
 main .article-meta .reshares .action i {
 	transition: background 0.1s ease-in;
 	display: flex;
 	align-items: center;
 	justify-content: center;

 	margin: 0.5em 0;
 	width: 2.5em;
 	height: 2.5em;

 	border-radius: 50%;
 }

 main .article-meta .likes .action svg.feather {
 	padding: 0.7em;
 	box-sizing: border-box;
 	color: #E92F2F;
 	fill: none;
 	border: solid #E92F2F thin;
 }
 main .article-meta .likes .action:hover svg.feather {
 	background: rgba(233, 47, 47, 0.15);
 }

 main .article-meta .reshares .action i {
 	color: #7765E3;
 	border: solid #7765E3 thin;
 	font-weight: 600;
 }
 main .article-meta .reshares .action:hover i {
 	background: rgba(119, 101, 227, 0.15);
 }

 main .article-meta .likes .action.liked svg.feather { background: #E92F2F; fill: currentColor; }
 main .article-meta .likes .action.liked:hover svg.feather {
 	background: rgba(233, 47, 47, 0.25);
 	color: #E92F2F;
 }
 main .article-meta .reshares .action.reshared i { background: #7765E3; }
 main .article-meta .reshares .action.reshared:hover i {
 	background: rgba(119, 101, 227, 0.25);
 	color: #7765E3;
 }

 main .article-meta .likes .action.liked svg.feather,
 main .article-meta .reshares .action.reshared i {
 	color: #F4F4F4;
 	font-weight: 900;
 }

 /* ~ Comments ~ */

 main .article-meta .comments { margin: 0; }
 main .article-meta .comments > * { margin-left: 20%; margin-right: 20%; }

 .comments h2 {
 	color: #7765E3;
 	font-size: 1.5em;
 	font-weight: 600;
 }

 /* New comment */

 main .article-meta .comments form input[type="submit"]
 { font-size: 1em; }

 /* Comment / Respond button */

 main .article-meta .comments a.button:before {
 	color: #7765E3;
 	padding: 0.5em;
 }
 main .article-meta .comments a.button {
 	display: inline-block;
 	padding: 0;
 	background: none;
 	color: #242424;
 	border: none;
 }
 main .article-meta .comments a.button:hover { color: #7765E3; }

 /* Comment button only */
 main .article-meta .comments > a.button { margin-bottom: 1em; }

 /* == List == */

 main .article-meta .comments .list {
 	display: grid;
 	margin: 0;
 	padding: 0 20%;
 	background: #ECECEC;
 }

 /* ~ Comment ~ */

 .comments .list .comment {
 	padding: 2em;
 	font-size: 1em;
 }

 .comments .list > .comment {
 	border: none;
 }

 .comments .list .comment .author {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
 	align-content: center;
 }
 .comments .list .comment .author * {
 	transition: all 0.1s ease-in;
 }
 .comments .list .comment .author .display-name {
 	color: #242424;
 }
 .comments .list .comment .author:hover .display-name { color: #7765E3; }
 .comments .list .comment .author:hover small { opacity: 1; }

 .comments .list .comment .text {
 	padding: 1.25em 0;
 	font-family: "Lora", serif;
 	font-size: 1.1em;
 	line-height: 1.4em;
 	text-align: left;
 }

/*
 * == Form ==
 */

 label {
 	display: block;
 	margin: 2em auto 1em;
 	font-size: 1.2em;
 	max-width: 40rem;
 }
 input, textarea, select {
 	transition: all 0.1s ease-in;
 	display: block;
 	width: 100%;
 	max-width: 40rem;
 	margin: auto;
 	padding: 1em;
 	box-sizing: border-box;

 	background: #F4F4F4;
 	color: #242424;
 	border: none;
 	border: solid #DADADA thin;
 	border-radius: 0.5em;

 	font-size: 1.2em;
 	font-weight: 400;
 }
 form input[type="submit"] { margin: 2em auto; }
 input:focus, textarea:focus {
 	background: #FAFAFA;
 	border-color: #7765E3;
 }

 textarea {
 	resize: vertical;

 	font-family: "Lora", serif;
 	font-size: 1.1em;
 	line-height: 1.5em;
 }

 input[type="checkbox"] {
 	display: inline;
 	margin: initial;
 	min-width: initial;
 	width: initial;
 }

/** Inline forms (containing only CSRF token and a <submit>, for protected links) **/

form.inline {
    display: inline;
    margin: 0px;
    padding: 0px;
    width: auto;
}

form.inline input[type="submit"] {
    display: inline-block;
    color: #7765E3;
    cursor: pointer;
    font-size: 1em;
    width: auto;
}

form.inline input[type="submit"]:not(.button) {
    margin: 0;
    padding: 0;
    border: none;
}

form.inline input[type="submit"]:not(.button) {
    background: transparent;
    color: #7765E3;
}

 /* Button & Submit */

 .button, input[type="submit"], button {
 	transition: all 0.1s ease-in;
 	display: inline-block;

 	border-radius: 0.5em;
 	margin: 0.5em auto;
 	padding: 0.75em 1em;

 	background: transparent;
 	color: #7765E3;
 	border: 1px solid #7765E3;

 	cursor: pointer;
 }
 input[type="submit"] { display: block; }
 .button:hover, input[type="submit"]:hover {
 	background: #7765E399;
 	color: white;
 }

.button.destructive {
    color: #ef767a;
    border-color: #ef767a;
}

.button.destructive:hover {
    background: #ef767a99;
    color: white;
}

 /* Errors */

 p.error {
 	color: #ef767a;
 	font-weight: bold;
 	max-width: 40rem;
 	margin: 1em auto;
 }

/*
 * == New post ==
 */

 form.new-post .title {
 	margin: 0 auto;
 	padding: 0.75em 0;

 	background: none;
 	border: none;

 	font-family: "Playfair Display", serif;
 	font-size: 2em;
 	text-align: left;
 }
 form.new-post textarea {
 	min-height: 20em;
 	overflow-y: hidden;
 	resize: none;
 	box-sizing: content-box;
 }
 form.new-post input[type="submit"] {
 	background: #ECECEC;
 	color: #242424;
 	border: none;

 	font-family: "Playfair Display", serif;
 	font-size: 1.5em;
 }
 form.new-post input[type="submit"]:hover { background: #DADADA; }

/*
 * == User ==
 */

 .user h1 {
 	display: flex;
 	flex-direction: row;
 	align-items: center;
    margin: 0px;
 }
 .badge {
 	margin-right: 1em;
 	padding: 0.35em 1em;

 	background: #F4F4F4;
 	color: #7765E3;
 	border: 1px solid #7765E3;
 	border-radius: 1em;

 	font-size: 1rem;
 }

/*
 * == Blog index ==
 */

 .cards {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
 	padding: 0 5%;
 }
 .card {
 	flex: 1;
 	display: flex;
 	flex-direction: column;

 	min-width: 17.5em;
 	min-height: 17.5em;
 	margin: 1em;
 	box-sizing: border-box;

 	background: #E3E3E3;

 	text-overflow: ellipsis;
 }
 .card > * {
    margin: 20px;
 }
 .list .card {
 	/* TODO */
 	background: 0;
 	margin: 2em 0;
 	padding: 0;
 	min-height: 0;
 }

 /* ~ Card content ~ */

 /* Cover */
 .card .cover {
    min-height: 10em;
    background-position: center;
    background-size: cover;
    margin: 0px;
 }

 /* Title */

 .card h3 {
 	margin: 0.75em 20px;
 	font-family: "Playfair Display", serif;
 	font-size: 1.75em;
 	font-weight: normal;
 }
 .card h3 a { transition: color 0.1s ease-in; color: #242424; }
 .card h3 a:hover { color: #7765E3; }

 /* Content */

 .card main {
 	flex: 1;

 	font-family: "Lora", serif;
 	font-size: 1em;
 	line-height: 1.25em;
 	text-align: left;
 	overflow: hidden;
 }

 /* Presentation */
 .presentation > h2, .presentation > a {
 	text-align: center;
 }

 .presentation > a {
 	font-size: 1.2em;
 	margin: 1em;
 }

 /* Stats */
 .stats {
 	display: flex;
 	justify-content: space-around;
 	margin: 2em;
 }

 .stats > div {
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
 }

 .stats em {
 	text-align: center;
 	font-weight: bold;
 }

  /*== Pagination ==*/
  .pagination {
    display: flex;
    justify-content: space-evenly;
}

.pagination > * {
    padding: 2em;
}

/*== Flex boxes ==*/
.flex {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.flex .grow {
    flex: 1;
}

.flex.vertical {
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
}

.flex.vertical small {
    margin: initial;
}

.left-icon {
    align-self: center;
    padding: 1em;
    background: #DADADA;
    border-radius: 50px;
    margin: 1em;
    margin-right: 2em;
}

/*== Footer ==*/
body > footer {
    display: flex;
    align-content: center;
    justify-content: space-between;
    background: #ECECEC;
    padding: 0 20%;
    margin-top: 5em;
}

body > footer * {
    margin: 5em 0;
}

/** Medias **/

figure {
    text-align: center;
    margin: 2em;
    max-width: 100%;
    width: auto;
    height: auto;
}

figure > * {
    max-width: 100%;
}

figcaption {
    padding: 1em;
}

.preview {
    display: block;
    max-width: 100px;
    max-height: 100px;
    width: auto;
    height: auto;
    margin-right: 20px;
}

/** Avatars **/

.avatar {
    background-position: center;
    background-size: cover;
    border-radius: 100%;
}

.avatar.small {
    width: 50px;
    height: 50px;
}

.avatar.medium {
    width: 100px;
    height: 100px;
    margin: 20px;
}

.avatar.padded {
    margin-right: 2rem;
}

/** Tabs **/

.tabs {
   border-bottom: 1px solid #DADADA;
   padding: 0px;
   margin: auto 20% 2em;
   overflow: auto;
   display: flex;
}

.tabs a {
   display: inline-block;
   color: #242424;
   padding: 1em;
}

.tabs a.selected {
   color: #7765E3;
   border-bottom: 1px solid #7765E3;
}

.user-summary {
   margin: 2em 0px;
}

/* ================= *
 *   Small Screens   *
 * ================= */

 @media screen and (max-width: 900px) {
 	header {
 		flex-direction: column;
 	}

 	header nav#menu {
 		display: inline-flex;
 	}

 	header #content {
 		display: none;
 		text-align: center;
 	}

 	@keyframes menuOpening {
 		from {
 			transform: scaleX(0);
 			transform-origin: left;
 			opacity: 0;
 		}

 		to {
 			transform: scaleX(1);
 			transform-origin: left;
 			opacity: 1;
 		}
 	}

 	header:focus-within #content, #content.show {
 		position: fixed;
 		display: flex;
 		flex-direction: column;
 		justify-content: flex-start;

 		top: 0;
 		left: 0;
 		width: 100%;
 		height: 100%;
 		box-sizing: border-box;

 		animation: 0.2s menuOpening;
 	}
 	header:focus-within #content::before, #content.show::before {
 		content: "";
 		position: absolute;
 		transform: skewX(-10deg);
 		top: 0;
 		left: -20%;
 		width: 100%;
 		height: 100%;

 		z-index: -10;

 		background: #7765E3;
 	}
 	header:focus-within #content > nav, #content.show > nav {
 		flex-direction: column;
 		align-items: flex-start;
 	}
 	header:focus-within #content > nav a, #content.show > nav a {
 		display: flex;
 		flex-direction: row;
 		align-items: center;
 		margin: 0;
 		padding: 1rem 1.5rem;
 		color: #F4F4F4;
 		font-size: 1.4em;
 		font-weight: 300;
 	}
    header:focus-within #content > nav a > *:first-child,
    #content.show > nav a > *:first-child { width: 3rem; }
    header:focus-within #content > nav a > img:first-child,
    #content.show > nav a > img:first-child { height: 3rem; }
    header:focus-within #content > nav a > *:last-child,
    #content.show > nav a > *:last-child { margin-left: 1rem; }
 	header:focus-within #content > nav a.title, #content.show > nav a.title {
 		font-size: 1.8em;
 	}
 	header:focus-within #content > nav hr, #content.show > nav hr {
 		display: block;
 		margin: 0;
 		width: 100%;
 		border: solid #F4F4F4 0.1rem;
 	}
 	header:focus-within #content > nav a .mobile-label, #content.show > nav a .mobile-label {
 		display: initial;
 	}

 	body > main > * {
 		padding: 0 5%;
 	}
 	main .article-meta > * { margin: 0 5%; }

 	main .article-meta > p {
 		margin: 2em 5%;
 		font-size: 0.9em;
 	}
 	main .article-meta .comments > * { margin-left: 5%; margin-right: 5%; }

 	.card {
 		min-width: 80%;
 		min-height: 80%;
    }

    .tabs {
        margin: auto 0px 2em;
    }

    .stats { flex-direction: column; }
    body > footer {
        flex-direction: column;
        align-items: center;
    }
    body > footer * { margin: 1em auto; }

    .flex.wrap { flex-direction: column; }
 }