init

1 files changed, 141 insertions, 0 deletions

diff --git a/static/styles.css b/static/styles.css
new file mode 100644
index 0000000..96b9109
--- /dev/null
+++ b/static/styles.css
@@ -0,0 +1,141 @@
+@font-face {
+    font-family: EBGaramond;
+    src: url(/static/EBGaramond-VariableFont_wght.ttf) format('woff2-variations');
+    font-style: normal;
+}
+
+@font-face {
+    font-family: EBGaramond;
+    src: url(/static/EBGaramond-Italic-VariableFont_wght.ttf) format('woff2-variations');
+    font-style: italic;
+}
+
+body {
+	background: #fdf3f3;
+	color: DarkSlateGrey;
+	font-family: EBGaramond, serif;
+    font-size: large;
+}
+
+a {
+	color: #1a97bf;
+}
+
+a:hover {
+	color: #075d77;
+}
+
+.container {
+    margin: 1em;
+    max-width: 40em;
+}
+
+.title {
+	letter-spacing: -0.5px;
+	font-weight: bold;
+}
+
+div {
+    margin-bottom: 10px;
+}
+
+form {
+	border: 1px DarkSlateGrey solid;
+    padding: 10px;
+    padding-left: 25px;
+}
+
+.sep {
+    margin-left: 6px;
+    margin-right: 6px;
+}
+
+.ingredient {
+    display: inline-block;
+    margin-right: 5px;
+    margin-bottom: 5px;
+}
+
+button {
+    margin-right: 10px;
+}
+
+.box {
+    width: 35px;
+    height: 35px;
+    text-align: center;
+    font-weight: bold;
+    font-size: 22px;
+    border: 2px lightgrey solid;
+    margin-right: 0px;
+    margin-left: 0px;
+    text-transform: uppercase;
+	color: black;
+	box-sizing: border-box;
+	caret-color: transparent;
+	outline:0px none transparent;
+	/* appearance: none; */
+	/* -moz-appearance: none; */
+}
+.box:focus {
+	background-color: #fff079;
+}
+.box::selection {
+	color: none;
+	background: none;
+}
+.syllable .box:not(:first-child) {
+	margin-left: -1px;
+}
+.syllable .box:not(:last-child) {
+	margin-right: -1px;
+}
+
+.syllable {
+    display: inline;
+}
+.syllable-sep {
+    display: inline;
+    font-size: 30px;
+    margin: 1px;
+}
+.word {
+    display: inline-block;
+    margin-right: 40px;
+	margin-bottom: 7px;
+}
+
+.stress>.box {
+    border-color: darkslategrey;
+	/* background-color: lightcyan; */
+}
+
+.green {
+	background-color: rgb(106, 170, 100);
+	color: white;
+	border: 0;
+}
+.yellow {
+	background-color: rgb(201, 180, 88);
+	color: white;
+	border: 0;
+}
+.grey {
+	background-color: rgb(120, 124, 126);
+	color: white;
+	border: 0;
+}
+
+hr {
+    border: .1px DarkSlateGrey dashed;
+	margin-top: 20px;
+}
+
+.poetry {
+	font-family: EBGaramond;
+}
+
+.byline {
+	font-style: italic;
+	font-size: 75%;
+}