Workshops page

style/_font-awesome.scss

@@ -12,14 +12,18 @@ $fa-css-prefix: fa;
 @import 'fa/rotated-flipped';
 @import 'fa/stacked';
 
+//Logon
 .#{$fa-css-prefix}-user:before { content: fa-content($fa-var-user); }
 .#{$fa-css-prefix}-password:before { content: fa-content($fa-var-key); }
 
 //Menu
-.#{$fa-css-prefix}-write:before { content: fa-content($fa-var-pen); }
+.#{$fa-css-prefix}-home:before { content: fa-content($fa-var-home); }
 .#{$fa-css-prefix}-settings:before { content: fa-content($fa-var-cog); }
 .#{$fa-css-prefix}-logoff:before { content: fa-content($fa-var-sign-out); }
 
+//Workshops
+.#{$fa-css-prefix}-previous:before { content: fa-content($fa-var-chevron-left); }
+
 //Writer
 .#{$fa-css-prefix}-bold:before { content: fa-content($fa-var-bold); }
 .#{$fa-css-prefix}-underline:before { content: fa-content($fa-var-underline); }

style/_page_workshops.scss

@@ -0,0 +1,96 @@
+#workshops {
+	max-width: 800px;
+	margin: auto;
+	text-align: center;
+
+	.ws_title {
+		border-bottom: 2px solid $col_main_1;
+		margin-bottom: 1em;
+	}
+	
+	#ws_data .ws_list {
+		.ws_item {
+			color: $col_main_1;
+			background: $gray-400;
+			border-radius: 3px;
+			margin-bottom: 1em;
+			margin-right: 1em;
+			width: 100px;
+			height: 100px;
+			display: inline-block;
+			overflow: hidden;
+			position: relative;
+			
+			&:not(.opened):hover {
+				background: $col_main_2;
+				color: $gray-300;
+			}
+		
+			span {
+				display: inline-block;
+				text-align: center;
+				width: 100%;
+				
+				&.title {
+					border-bottom: 1px solid $gray-300;
+					font-weight: bold;
+				}
+			
+				&.previous {
+					display: none;
+				}
+			}
+		
+			.courses {
+				display: none;
+				width: 100%;
+				text-align: left;
+			}
+		
+			&.opened {
+				width: auto;
+				height: auto;
+				
+				span.title {
+					color: $gray-300;
+					background: $col_main_1;
+				}
+			
+				span.previous {
+					display: block;
+					position: absolute;
+					top: 0;
+					left: 5px;
+					width: auto;
+					color: $gray-300;
+					
+					&:hover {
+						color: $col_main_2;
+					}
+				}
+				
+				span.dates {
+					display: none;
+				}
+				
+				.courses {
+					display: inline-block;
+					
+					.course {
+						border-bottom: 1px solid $gray-300;
+						padding: 1em;
+
+						&:last-child {
+							border-bottom: none;
+						}
+					
+						&:hover {
+							background: $col_main_2;
+							color: $gray-300;
+						}
+					}
+				}
+			}
+		}
+	} 
+}

style/_template.scss

@@ -31,8 +31,8 @@ a:hover {
 	transition: all 0.3s ease 0s !important;
 }
 
-.bold {
-	font-weight: bold;
+.clickable {
+	cursor: pointer;
 }
 
 /* Common Classes - Containers */
@@ -48,22 +48,23 @@ a:hover {
 /* Common Classes - Inputs */
 
 a.button {
-	font-weight:normal;
-	height:50px;
-	width:50px;
-	line-height:50px;
+	font-weight: normal;
+	height: 40px;
+	width: 40px;
+	line-height: 40px;
 	font-size: 1.0em;
-	text-align:center;
-	background:	url("../images/minicloud.png") 0 0 no-repeat;
+	text-align: center;
 	color: $gray-600;
+	border-radius: 3px;
+	background-color: $gray-400;
 }
 a.button:hover {
-	color:white;
-	background-position:0 -50px; 
+	color: white;
+	background-color: $col_main_2;
 }
 a.button:active {
 	color:white;
-	background-position:0 -100px; 
+	background-color: $col_main_2;
 }
 
 .input-group-text i.fal {
@@ -87,10 +88,12 @@ a.button:active {
 
 #header {
 	position: relative;
+	height: 138px;
+	width: 50%;
 	
 	#logo_box {
-		height: 138px;
 		width: 100%;
+		height: 100%;
 		background: url('../images/logo.png') 0 0 no-repeat;
 	}
 
@@ -124,32 +127,40 @@ a.button:active {
 	display: none;
 	top: 0;
 	right: 0;
+	width: 50%;
+	height: 111px;
+	text-align: right;
+	
+	a.button {
+		margin-top: calc( ( 110px - 40px ) /2 );
+	}
 	
 	ul {
 		list-style: none;
 		
 		li {
 			display: inline;
+			margin-left: 1em;
 		}
 	}
 }
 
 /* Main */
 
+#main_title {
+	margin-top: 1em;
+}
+
 #main {
 	display: none;
-	margin-top: 1em;
 	position: absolute;
-	top:203px;
+	top: 138px;
 	bottom: 2rem;
 	right:0;
 	left:0;
 	border-radius: 0.5em;
 	padding: 1em;
-
-	&:not(.no_frame) {
-		@extend .shadow;
-	}
+	overflow: auto;
 }
 
 /* Side */

style/catc.scss

@@ -18,4 +18,5 @@
 
 /* Pages */
 
-@import 'logon';
+@import 'page_logon';
+@import 'page_workshops';