add bootstrap

style/_template.scss

@@ -0,0 +1,241 @@
+/* Containers */
+
+body {
+	min-width: 700px;
+	font-family: $font_para, sans-serif;
+	font-size:1em;
+	background-color:#e2ccb2;
+	margin:0;
+	color:#584127;
+}
+
+/* Typography */
+
+a:visited, a {
+	color:#584127;
+	text-decoration: none;
+	font-weight: bold;
+}
+
+a:active, a:focus, input:active, input:focus  {
+	outline: none;
+}
+
+a:hover {
+	text-decoration: none;
+}
+
+/* Common Classes */
+
+.transition {
+	transition: all 0.3s ease 0s !important;
+}
+
+.bold {
+	font-weight: bold;
+}
+
+/* Common Classes - Containers */
+
+#container {
+	position:absolute;
+	left:0;
+	right:0;
+	top:1em;
+	bottom:1em;
+	width:40em;
+	margin:auto;
+}
+
+/* Common Classes - Inputs */
+
+a.button {
+	font-weight:normal;
+	height:50px;
+	width:50px;
+	line-height:50px;
+	font-size: 1.1em;
+	text-align:center;
+	background:	url("../images/minicloud.png") 0 0 no-repeat;
+	color: $col_main_2;
+}
+a.button:hover {
+	color:white;
+	background-position:0 -50px; 
+}
+a.button:active {
+	color:white;
+	background-position:0 -100px; 
+}
+
+.input-group-text i.fal {
+	@extend .fa-fw; 
+}
+
+/* Common Classes - Feedback */
+
+#feedback {
+	position: absolute;
+	width: 100%;
+	z-index: 1000;
+}
+
+#feedback .alert {
+	top: 1em;
+}
+
+/* Header */
+
+#header {
+	margin-left:-100px;
+	height:203px;
+	background:url('../images/logo.png') 0 0 no-repeat;
+}
+
+/* Menu */
+
+#menu {
+	position: absolute;
+	display: none;
+	top: 0;
+	right: 0;
+	
+	ul {
+		list-style: none;
+		
+		li {
+			display: inline;
+		}
+	}
+}
+
+/* Main */
+
+#main {
+	display: none;
+	margin-top:1em;
+	position: absolute;
+	top:203px;
+	bottom:2em;
+	right:0;
+	left:0;
+	border-radius: 0.5em;
+	padding: 1em;
+
+	&:not(.no_frame) {
+		box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
+	}
+}
+
+/* Read */
+
+div.read {
+	position:relative;
+	padding-bottom:30px;
+}
+
+div.thought {
+	font-size:16px;
+	line-height:20px;
+}
+
+p.date {
+	font-size:20px;
+}
+
+div.time {
+	position:absolute;
+	margin-left:-100px;
+}
+
+div.paragraphs p {
+	margin:0 0 20px 0;
+}
+
+div.paragraphs p:first-letter {
+	font-size:59px;
+	line-height:16px;
+	margin-right:5px;
+	font-weight:400;
+	float:left;
+	text-transform:uppercase;
+}
+
+div.paragraphs p + p, div.paragraphs p + p:first-letter {
+	font-size:inherit;
+	line-height:inherit;
+	margin-right:inherit;
+	font-weight:normal;
+	float:none;
+	text-indent:40px;
+}
+
+/* Settings */
+
+#settings table tr td {
+	text-align:left;
+} 
+
+/* Errors */
+
+#errors {
+	position:fixed;
+	bottom:-2px;
+	background-color:white;
+	width:696px;
+	border:2px solid red;
+}
+#errors ul li {
+	list-style-image: url(../images/error.png);
+	color:red;
+	font-weight: bold;
+	font-size:24px;
+}
+
+fieldset {
+	margin:20px auto;
+	width:90%;
+}
+
+fieldset p {
+	text-align: justify;
+}
+
+/* Feedback */
+
+.notice {
+	padding:0;
+	color:#997E60;
+}
+
+.error {
+	padding:0 0.5em;
+	color: red;
+	background:#FFB2B2;
+}
+.warning {
+	padding:0 0.5em;
+	color:orange;
+	background:#FFE4B2;
+}
+.success {
+	padding:0 0.5em;
+	color:green;
+	background:#B2D9B2;
+}
+
+/* Footer */
+
+footer {
+	position: absolute;
+	bottom: 0;
+	text-align:center;
+	color: $gray-400;
+	font-size:0.9em;
+	width:100%;
+	height:2em;
+}
+
+footer a {
+	color: $gray-500;
+}