added style for dictionary

css/dictionary/details.css

@@ -0,0 +1,44 @@
+content {
+    display: grid;
+    grid-auto-rows: min-content;
+    grid-template-areas:
+        'word fromlang'
+        'wclass gender'
+        'translations translations'
+        'details details'
+        'etymology etymology';
+    padding: 40px;
+}
+
+word {
+    grid-area: word;
+    font-size: 3em;
+}
+
+fromlang {
+    grid-area: fromlang;
+    align-self: end;
+}
+
+wordclass {
+    grid-area: wclass;
+}
+
+listtrans {
+    grid-area: translations;
+}
+
+transdetails {
+    grid-area: details;
+}
+
+etymology {
+    grid-area: etymology;
+}
+etymology::before {
+    content: "Etymology: ";
+}
+
+gender {
+    grid-area: gender;
+}

css/dictionary/index.css

@@ -0,0 +1,86 @@
+content {
+    display: grid;
+    grid-template-columns: auto;
+    grid-template-rows: 100px auto;
+    grid-template-areas: 'message' 'form';
+}
+
+form {
+    grid-area: form;
+    display: inline-grid;
+    grid-template-rows: 64px 100px;
+    grid-template-areas:
+        'source dest'
+        'submition submition';
+}
+
+sourcelang {
+    grid-area: source;
+}
+
+destlang {
+    grid-area: dest;
+}
+
+sourcelang, destlang {
+    display: grid;
+    grid-template-rows: 24px 40px;;
+    grid-template-areas: 'label' 'select';
+}
+
+label {
+    grid-area: label;
+    text-align: center;
+}
+
+/* inspired from https://coderwall.com/p/w7npmq/fully-custom-select-box-simple-css-only */
+.form-style {
+    border: 1px solid #ddd;
+    width: 120px;
+    border-radius: 3px;
+    overflow: hidden;
+    /* background: #edf0f2; */
+    margin: auto;
+}
+
+.form-style select, .form-style input {
+    padding: 5px 8px;
+    width: 100%;
+    border: none;
+    box-shadow: none;
+    background: transparent;
+    background-image: none;
+    text-align: center;
+    -webkit-appearance: none;
+}
+
+.form-style select:focus {
+    outline: none;
+}
+
+submit {
+    margin: auto;
+    width: 50%;
+    grid-area: submition;
+}
+
+message {
+    grid-area: message;
+    margin: 0 20px;
+}
+
+sidebar {
+    display: block;
+}
+
+sidebar > ul {
+    padding-inline-start: 0;
+    margin: 40px;
+    display: block;
+    list-style: none;
+}
+
+sidebar > ul >li {
+    font-size: 1.1em;
+    margin: 20px;
+}

css/dictionary/language.css

@@ -0,0 +1,43 @@
+content {
+}
+
+.wordblock {
+    text-decoration: none;
+    margin: 40px;
+    padding: 20px;
+    display: grid;
+    grid-template-areas:
+        'word word'
+        'wclass gender'
+        'translation translation';
+    background: #343131;
+    color: #fcfcfc;
+    box-shadow: 5px 5px 10px #000;
+}
+
+word {
+    margin: 10px;
+    grid-area: word;
+    font-size: 2em;
+}
+
+wclass {
+    grid-area: wclass;
+}
+
+gender {
+    grid-area: gender;
+}
+
+.translations {
+    grid-area: translation;
+    list-style: none;
+}
+
+.translations::before {
+    content: "Translations:";
+}
+
+li {
+    margin: 10px;
+}

css/dictionary/style.css

@@ -0,0 +1,73 @@
+@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic|Roboto+Slab:400,700|Inconsolata:400,700);
+@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
+@font-face {
+    font-family: "DoulosSIL";
+    font-display: swap;
+    src:url("DoulosSIL-R.woff");
+}
+
+body {
+    margin: 0;
+    height: 100%;
+    background: #edf0f2;
+    display: grid;
+    overflow: auto;
+    height: 100vh;
+    grid-template-columns: 300px auto;
+    grid-template-areas:
+        'sidebar content';
+    color: #404040;
+}
+
+.h1 {
+    margin-bottom: .2em;
+    font-size: 175%;
+    font-family: "Roboto Slab","ff-tisa-web-pro","Georgia",Arial,sans-serif;
+    font-weight: 700;
+    text-align: center;
+}
+
+.p {
+    font-size: inherit;
+    line-height: 24px;
+    margin: 0 0 24px 0;
+    box-sizing: border-box;
+    display: block;
+    font-family: "DoulosSIL","Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
+}
+
+sidebar {
+    grid-area: sidebar;
+    width: 300px;
+    background-color: #343131;
+}
+
+content {
+    margin: 10px;
+    grid-area: content;
+}
+
+content {
+    max-width: 900px;
+    background-color: #fcfcfc;
+}
+
+errormessage {
+    color: red;
+    text-align: center;
+    font-size: 1.5em;
+    font-family: "DoulosSIL","Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
+}
+
+sidebar {
+    color: #fcfcfc;
+}
+
+sidebar > h1 {
+    background: #2980b9;
+    padding: 15px;
+    margin-block-start: 0;
+    margin-block-end: 0;
+    text-align: center;
+    font-size: 1.5em;
+}