Merge pull request #19 from EveSa/Eve_CSS

templates/index.html.jinja

@@ -4,7 +4,481 @@
         <title>Text summarization API</title>
         <meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
-		<link rel="stylesheet" href="{{ url_for('templates', path='templates/site_style/css/main.css') }}" />
+		<style>
+html, body, div, h1, h2, p, blockquote,
+a, code, em, img, strong, u, ul, li,
+label, legend, caption, tr, th, td,
+header, menu, nav, section, summary {
+margin: 0;
+padding: 0;
+border: 0;
+font-size: 100%;
+font: inherit;
+vertical-align: baseline;}
+
+header, menu, nav, section {
+display: block;}
+
+div {
+margin-bottom: 20px;
+}
+
+body {
+line-height: 1;
+}
+
+ul {
+list-style: none;
+}
+
+body {
+-webkit-text-size-adjust: none;
+}
+
+input::-moz-focus-inner {
+border: 0;
+padding: 0;
+}
+
+
+/* Basic */
+
+html {
+	box-sizing: border-box;
+}
+
+*, *:before, *:after {
+	box-sizing: inherit;
+}
+
+body {
+	color: #5b5b5b;
+	font-size: 15pt;
+	line-height: 1.85em;
+	font-family: 'Source Sans Pro', sans-serif;
+	font-weight: 300;
+	background-image: url("site_style/images/background.jpg");
+	background-size: cover;
+	background-position: center center;
+	background-attachment: fixed;
+}
+
+h1, h2, h3 {
+	font-weight: 400;
+	color: #483949;
+	line-height: 1.25em;
+}
+
+h1 a, h2 a, h3 a {
+	color: inherit;
+	text-decoration: none;
+	border-bottom-color: transparent;
+}
+
+h1 strong, h2 strong, h3 strong {
+	font-weight: 600;
+}
+
+h2 {
+	font-size: 2.85em;
+}
+
+h3 {
+	font-size: 1.25em;
+}
+
+strong, b {
+	font-weight: 400;
+	color: #483949;
+}
+
+em, i {
+	font-style: italic;
+}
+
+a {
+	color: inherit;
+	border-bottom: solid 1px rgba(128, 128, 128, 0.15);
+	text-decoration: none;
+	-moz-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
+	-webkit-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
+	-ms-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
+	transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
+}
+
+	a:hover {
+		color: #ef8376;
+		border-bottom-color: transparent;
+	}
+
+p, ul {
+	margin-bottom: 1em;
+}
+
+p {
+	text-align: justify;
+}
+
+hr {
+	position: relative;
+	display: block;
+	border: 0;
+	top: 4.5em;
+	margin-bottom: 9em;
+	height: 6px;
+	border-top: solid 1px rgba(128, 128, 128, 0.2);
+	border-bottom: solid 1px rgba(128, 128, 128, 0.2);
+}
+
+	hr:before, hr:after {
+		content: '';
+		position: absolute;
+		top: -8px;
+		display: block;
+		width: 1px;
+		height: 21px;
+		background: rgba(128, 128, 128, 0.2);
+	}
+
+	hr:before {
+		left: -1px;
+	}
+
+	hr:after {
+		right: -1px;
+	}
+
+/* List */
+
+ul {
+	list-style: disc;
+	padding-left: 1em;
+}
+
+	ul li {
+		padding-left: 0.5em;
+		font-size: 85%;
+		list-style: none;
+	}
+
+/* Form */
+textarea {
+border-radius: 10px;
+resize: none;
+padding: 10px;
+line-height: 20px;
+word-spacing: 1px;
+font-size: 16px;
+width: 85%;
+height: 100%;
+}
+
+/* WebKit, Edge */
+::-webkit-input-placeholder {
+font-size: 17px;
+word-spacing: 1px;
+}
+
+/* Table */
+
+table {
+	width: 100%;
+}
+
+	table.default {
+		width: 100%;
+	}
+
+			table.default tbody tr:first-child {
+				border-top: 0;
+			}
+
+			table.default tbody tr:nth-child(2n+1) {
+				background: #fafafa;
+			}
+
+		table.default th {
+			text-align: left;
+			font-weight: 400;
+			padding: 0.5em 1em 0.5em 1em;
+		}
+
+/* Button */
+
+input[type="button"],
+input[type="submit"],
+input[type="reset"],
+button,
+.button {
+	position: relative;
+	display: inline-block;
+	background: #df7366;
+	color: #fff;
+	text-align: center;
+	border-radius: 0.5em;
+	text-decoration: none;
+	padding: 0.65em 3em 0.65em 3em;
+	border: 0;
+	cursor: pointer;
+	outline: 0;
+	font-weight: 300;
+	-moz-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
+	-webkit-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
+	-ms-transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
+	transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out, border-bottom-color 0.35s ease-in-out;
+}
+
+	input[type="button"]:hover,
+	input[type="submit"]:hover,
+	input[type="reset"]:hover,
+	button:hover,
+	.button:hover {
+		color: #fff;
+		background: #ef8376;
+	}
+
+	input[type="button"].alt,
+	input[type="submit"].alt,
+	input[type="reset"].alt,
+	button.alt,
+	.button.alt {
+		background: #2B252C;
+	}
+
+		input[type="button"].alt:hover,
+		input[type="submit"].alt:hover,
+		input[type="reset"].alt:hover,
+		button.alt:hover,
+		.button.alt:hover {
+			background: #3B353C;
+		}
+
+/* Header */
+
+#header {
+	position: relative;
+	background-size: cover;
+	background-position: center center;
+	background-attachment: fixed;
+	color: #fff;
+	text-align: center;
+	padding: 5em 0 2em 0;
+	cursor: default;
+	height: 100%;
+}
+
+	#header:before {
+		content: '';
+		display: inline-block;
+		vertical-align: middle;
+		height: 100%;
+	}
+
+	#header .inner {
+		position: relative;
+		z-index: 1;
+		margin: 0;
+		display: inline-block;
+		vertical-align: middle;
+	}
+
+	#header header {
+		display: inline-block;
+	}
+
+		#header header > p {
+			font-size: 1.25em;
+			margin: 0;
+		}
+
+	#header h1 {
+		color: #fff;
+		font-size: 3em;
+		line-height: 1em;
+	}
+
+		#header h1 a {
+			color: inherit;
+		}
+
+	#header .button {
+		display: inline-block;
+		border-radius: 100%;
+		width: 4.5em;
+		height: 4.5em;
+		line-height: 4.5em;
+		text-align: center;
+		font-size: 1.25em;
+		padding: 0;
+	}
+
+	#header hr {
+		top: 1.5em;
+		margin-bottom: 3em;
+		border-bottom-color: rgba(192, 192, 192, 0.35);
+		box-shadow: inset 0 1px 0 0 rgba(192, 192, 192, 0.35);
+	}
+
+		#header hr:before, #header hr:after {
+			background: rgba(192, 192, 192, 0.35);
+		}
+
+/* Nav */
+
+#nav {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	text-align: center;
+	padding: 1.5em 0 1.5em 0;
+	z-index: 1;
+	overflow: hidden;
+}
+
+	#nav > hr {
+		top: 0.5em;
+		margin-bottom: 6em;
+	}
+
+/* Footer */
+
+	.copyright{
+		margin-top: 50px;
+	}
+
+/* Wide */
+
+@media screen and (max-width: 1680px) {
+
+	/* Basic */
+
+		body, input, select {
+			font-size: 14pt;
+			line-height: 1.75em;
+		}
+}
+
+/* Normal */
+
+@media screen and (max-width: 1280px) {
+
+	/* Basic */
+
+		body, input, select {
+			font-size: 12pt;
+			line-height: 1.5em;
+		}
+
+	/* Header */
+
+		#header {
+			background-attachment: scroll;
+		}
+
+			#header .inner {
+				padding-left: 2em;
+				padding-right: 2em;
+			}
+}
+
+/* Narrow */
+
+/* Narrower */
+
+@media screen and (max-width: 840px) {
+
+	/* Basic */
+
+		body, input, select {
+			font-size: 13pt;
+			line-height: 1.65em;
+		}
+}
+
+/* Mobile */
+
+#navPanel, #titleBar {
+	display: none;
+}
+
+@media screen and (max-width: 736px) {
+
+	/* Basic */
+
+		html, body {
+			overflow-x: hidden;
+		}
+
+		body, input, select {
+			font-size: 12.5pt;
+			line-height: 1.5em;
+		}
+
+		h2 {
+			font-size: 1.75em;
+		}
+
+		h3 {
+			font-size: 1.25em;
+		}
+
+		hr {
+			top: 3em;
+			margin-bottom: 6em;
+		}
+
+#header {
+	background-attachment: scroll;
+	padding: 2.5em 0 0 0;
+}
+
+#header .inner {
+	padding-top: 1.5em;
+	padding-left: 1em;
+	padding-right: 1em;
+}
+
+#header header > p {
+	font-size: 1em;
+}
+
+#header h1 {
+	font-size: 1.75em;
+}
+
+#header hr {
+	top: 1em;
+	margin-bottom: 2.5em;
+}
+
+#nav {
+	display: none;
+}
+
+#main > header {
+	text-align: center;
+}
+
+div.copyright {
+margin-top: 10px;
+}
+
+label, textarea {
+font-size: 0.8rem;
+letter-spacing: 1px;
+font-family: Georgia, 'Times New Roman', Times, serif;
+}
+
+	.buttons {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	margin-top: 20px;
+	}
+}
+
+        </style>
         <script>
             function customReset()
             {