vlog styles

templates/styles/decoration.css

@@ -0,0 +1,192 @@
+:root {
+
+	--rouge: hsl(0, 98.8%, 33.5%);
+	--rouge-fonce: hsl(0, 75%, 33.5%);
+	
+	--noir-complet: black;
+	--noir-fonce: hsl(0, 30%, 2.1%);
+	--noir-moyen: hsl(0, 15%, 3.1%);
+	--noir-clair: hsl(0, 5%, 7.1%);
+	
+	--blanc: hsla(0, 0%, 100%, 1);
+	--blanc-fort: hsla(0, 0%, 100%, 0.75);
+	--blanc-semi-transparent: hsla(0, 0%, 100%, 0.25);
+}
+
+
+body {
+
+	background: var(--noir-fonce);
+	color: white;
+	font-family: Roboto,sans-serif;
+}
+
+header {
+
+	background: var(--noir-clair);
+}
+
+
+header * {
+
+	color: var(--rouge);
+	text-decoration: none;
+}
+
+header span {
+
+	color: white;
+}
+
+#pinFilter ul li a {
+
+	background-color: var(--blanc);
+}
+
+#pinFilter ul li.selected a {
+
+	background-color: var(--rouge);
+}
+
+
+ul#tagsList,
+ul#narrowingTags {
+
+	list-style: none;
+	margin-left: 0;
+	padding-left: 0;
+}
+
+ul#tagsList li,
+ul#narrowingTags li {
+	
+	display: inline-block;
+}
+
+ul#tagsList a,
+ul#tagsList a:visited {
+
+	text-decoration: none;
+	color: var(--rouge-fonce);
+}
+
+#narrowingTags a, 
+#narrowingTags a:visited {
+
+	text-decoration: none;
+	color: inherit;
+}
+
+#narrowingTags li {
+
+	border-radius: 1rem;
+}
+
+#narrowingTags li.selected {
+
+	background-color: var(--rouge-fonce);
+	color: var(--blanc);
+	border: 0.125rem solid var(--noir-clair);
+}
+
+#tagsList, 
+#narrowingTags {
+	
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+}
+
+#tagsList li.station, 
+#narrowingTags li.station {
+	
+	order: 1;
+}
+
+#tagsList li.station, 
+#narrowingTags li.station {
+
+	background-image: url("logo.png");
+	background-repeat: no-repeat;
+	background-position: left middle;
+	background-size: contain;
+	padding-left: 2em;
+	order: 1;
+}
+
+#narrowingTags li.selectable {
+
+	background-color: var(--noir-fonce);
+	color: var(--rouge-fonce);
+	border: 0.125rem solid var(--noir-clair);
+}
+
+#videosList > li {
+
+	background: var(--noir-clair);
+	border-color: var(--rouge);
+	border-style: solid;
+}
+
+.video-title,
+.video-title a,
+.video-title a:visited {
+
+	color: white;
+	font-weight: bold;
+	text-decoration: none;
+	word-break: break-all;
+}
+
+#videosList .thumbnail {
+	
+	background-color: var(--noir-complet);
+}
+
+#videosList > li ul.tags li a, 
+#videosList > li ul.tags li a:visited {
+	
+	text-decoration: none;
+}
+
+#videosList > li ul.tags li.selectable a, 
+#videosList > li ul.tags li.selectable a:visited {
+
+	color: var(--blanc-semi-transparent);
+}
+
+#videosList > li ul.tags li.selectable a:hover {
+
+	color: var(--blanc-fort);
+}
+
+#videosList > li ul.tags li.selected a, 
+#videosList > li ul.tags li.selected a:visited {
+	
+	color: var(--blanc-fort);
+}
+
+article {
+
+	background: var(--noir-clair);
+}
+
+article video {
+
+	background: black;
+}
+
+
+article .video-title {
+
+	font-weight: bold;
+}
+
+#successMsg {
+	
+	opacity: 0;
+	transition: opacity 1s; 
+}
+
+
+

templates/styles/layout.css

@@ -0,0 +1,250 @@
+body {
+
+	margin: 0;
+	padding: 0;
+}
+
+header {
+
+	overflow: hidden;
+	padding: 1rem 0.666rem 1.333rem;
+	margin-bottom: 2rem;
+
+}
+
+header > * {
+
+	font-size: 1.5rem;
+	margin: 0;
+	padding: 0;
+}
+
+header > .sitetitle {
+
+	margin-bottom: 0.25rem;
+}
+
+header > .sitetitle span {
+
+	border-bottom-style: solid;
+	border-bottom-color: var(--pink);
+}
+
+header .usp {
+
+	font-size: 0.95rem;
+}
+
+main {
+
+	width: 95%;
+	margin: auto;
+}
+
+body.home main {
+	
+	display: grid;
+	grid-gap: 1rem 1rem;
+	grid-auto-flow: row;
+	grid-template-columns: 998px auto;
+	grid-template-areas: "c m";
+}
+
+body.home main > #menu {
+	
+	grid-area: m;
+}
+
+body.home main > ul#videosList {
+
+	grid-area: c;
+}
+
+
+aside#menu > div {
+	
+	position: sticky;
+	top: 2rem;
+}
+
+#pinFilter ul {
+	
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	font-size: 3rem;
+	display: flex;
+}
+
+#pinFilter ul li a span {
+	
+	display: none;
+}
+
+#pinFilter ul li a {
+	
+	display: inline-block;
+	height: 3rem;
+	width: 3rem;
+	border: 1px solid red;
+	background-repeat: no-repeat;
+}
+
+#pinFilter ul li#filter_pinned a {
+	
+	background-image: url("font-awesome/hdd.svg");
+	background-position: center center;
+	background-size: 2.5rem;
+}
+
+#pinFilter ul li#filter_notpinned a {
+
+	background-image: url("font-awesome/cloud.svg");
+	background-position: center center;
+	background-size: 2.5rem;
+}
+
+#pinFilter ul li#filter_both a {
+
+	background-image: url("font-awesome/hdd.svg"), 
+	                  url("font-awesome/cloud.svg");
+	background-position: bottom 0.25rem left 0.25rem, 
+	                     top 0.25rem right 0.25rem;
+	background-size: 1.75rem, 
+	                 1.75rem;
+
+}
+
+#tagsList li, 
+#narrowingTags li {
+	
+	padding: 0.125rem 0.5rem;
+	margin: 0.25rem 0.25rem;
+}
+
+#videosList {
+
+	display: grid;
+	grid-gap: 1rem 1rem;
+	grid-auto-flow: row;
+	grid-template-columns: 322px 322px 322px;
+
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	justify-content: center;
+	align-content: start
+}
+
+#videosList > li {
+	
+	border-radius: 0.25rem;
+	border-width: 1px;
+	overflow: hidden;
+}
+
+#videosList .thumbnail {
+	
+	text-align: center;
+	height: 180px;
+	margin-top: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+#videosList .thumbnail img {
+
+	max-height: 180px;
+	width: auto;
+}
+
+#videosList .video-title {
+
+	padding: 0.5rem 1rem;
+}
+
+#videosList > li ul.tags {
+	
+	padding: 0;
+	margin: 0;
+	list-style: none;
+}
+
+#videosList > li ul.tags li {
+	
+	display: inline-block;
+}
+
+#videosList > li ul.tags li:after {
+	
+	content: ", ";
+}
+
+#videosList > li ul.tags li:last-of-type:after {
+	
+	content: "";
+}
+
+article {
+
+	border-radius: 0.25rem;
+	width: 58.3%;
+	margin: auto;
+	overflow: hidden;
+
+}
+
+article video {
+
+	width: 100%;
+	max-height: calc(100vh - 14rem);
+}
+
+article .video-title {
+
+	padding: 1rem 1rem;
+	font-size: 1.25rem;
+	margin: 0;
+}
+
+form.add-video {
+
+	position: absolute;
+	top: 0.50rem;
+	right: 0.50rem;
+}
+
+
+form.add-video input {
+
+	height: 2rem;
+	padding: 0.25rem 0.5rem;
+	box-sizing: border-box;
+	border-width: 0.125rem;
+	border-radius: 0.5rem;
+
+}
+
+form label {
+
+	display: none;
+
+}
+
+form label input {
+
+	width: 50%;
+}
+
+form.add-video .confirmation {
+
+	margin: 0.5rem 0;
+	font-size: 0.85rem;
+	text-align: center;
+}
+
+footer {
+
+	display: none;
+}