From 9d2d26edf91827117cd32cc0c01ecd480ba11bf3 Mon Sep 17 00:00:00 2001 From: Robbie Antenesse Date: Sun, 1 Nov 2015 13:35:59 -0700 Subject: [PATCH] Added lots of styling --- README.md | 6 +- css/lexiconga.css | 122 ++++++++++++++++++++++++++++++ css/styles.css | 69 ++++++++++++----- favicon.ico | Bin 0 -> 4286 bytes images/favicon.svg | 80 ++++++++++++++++++++ images/logo.svg | 182 +++++++++++++++++++++++++++++++++++++++++++++ index.html | 45 +++++------ 7 files changed, 462 insertions(+), 42 deletions(-) create mode 100644 css/lexiconga.css create mode 100644 favicon.ico create mode 100644 images/favicon.svg create mode 100644 images/logo.svg diff --git a/README.md b/README.md index 300ca54..b808962 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,11 @@ -## What is Dictionary Builder? -Dictionary Builder is a tool intended to help build constructed language dictionaries. +## What is Lexiconga Dictionary Builder? +Lexiconga is a tool intended to help build constructed language dictionaries. You can enter words and definitions, and they will appear nicely formatted and in alphabetical order under your dictionary's title, where you can also sort them by part of speech. If the default parts of speech are not adequate for your conlang, you can change them to whatever parts of speech you might need. You can even enter a description or full set of language rules that you can toggle on and off below the dictionary's title! It accepts Unicode characters so you can utilize whatever typable characters you might need and Markdown for formatting long text entries, and if you want to share or even just make a backup of your dictionary, you can export it to a single convenient file that can be easily re-imported. It also saves your dictionary to your browser's localStorage every time you make a change, which means as long as you use the same browser and don't deliberately delete it, your dictionary will always be there when you come back. -## How do I use Dictionary Builder? +## How do I use Lexiconga? ### Getting Started When you have a brand new, empty dictionary, the first thing you'll probably want to do is change the title to whatever your conlang is called and add at least a little description of what your language is like or how to use it. You can do this by clicking on the Settings button, which will open up the settings screen. Here, you will find all the fields you need to update your dictionary's Name and Description/Rules. The Description/Rules text area uses [Markdown](https://help.github.com/articles/markdown-basics/) to format any text you include, so brush up on how to do basic things in Markdown before you get started (NOTE: a line break is done by adding 2 or more spaces to the end of the line and then going to the next line!). Update these fields to what you want them to say and click the "Save" button to keep the Settings menu open, or the "Save and Close" button to close the menu and start adding words! diff --git a/css/lexiconga.css b/css/lexiconga.css new file mode 100644 index 0000000..7ecd056 --- /dev/null +++ b/css/lexiconga.css @@ -0,0 +1,122 @@ +body { + background: #e6cfaa; +} + +header { + height: 50px; + width: 100%; + background: #eacc9d; + margin-bottom: 3px; + border-bottom: 3px solid #e3bb7d; +} + +footer { + background: #d69c42; + border-top: 3px solid #e3bb7d; +} + +@media screen +and (min-device-width : 481px) { + #headerPadder { + padding: 1px; + } + + #loginoutArea { + margin: 16px; + } +} + +/* Smartphones (portrait and landscape) ----------- */ +@media only screen +and (min-device-width : 320px) +and (max-device-width : 480px) { + #siteLogo { + display: block; + text-indent: -9999px; + width: 150px; + height: 30px; + background: url(../images/logo.svg); + background-size: 150px 30px; + float: left; + } + + #loginoutArea { + margin: 16px 8px; + } +} + +#siteLogo { + display: block; + text-indent: -9999px; + width: 242px; + height: 48px; + background: url(../images/logo.svg); + background-size: 242px 48px; + float: left; +} + +#loginoutArea { + float: right; +} + +#loginoutArea a { + color: #000000; + text-decoration: none; + font-size: 13px; +} + +#wordEntryForm { + background: #c05d5d; + border-color: #c08d8d #b00d0d #b00d0d #c08d8d; +} + +input, textarea, select, option, button { + background: #efdfc0; +} + +#dictionaryContainer { + background: #bd7251; + padding: 15px; + border: outset; + border-color: #d09b84 #915237 #915237 #d09b84; +} + +#dictionaryDescription, .management, #settingsOptions, #aboutPage { + background: #f2d5b2; +} + +.management { + border-width: 2px; + border-color: #ebbe87 #f9ecdd #f9ecdd #ebbe87; +} + +#dictionaryName { + text-shadow: 2px 2px 2px #915337; +} + +#dictionaryDescription { + width: 90%; +} + +#loginLink, #logoutLink, +#descriptionToggle, #settingsButton, +#settingsScreenCloseButton, #aboutScreenCloseButton { + background: #e0c19c; +} + +entry { + background: #d7ad7d; + border-color: #e7cfb3 #c78b47 #c78b47 #e7cfb3; +} + +.editButton { + background: #89cb89; +} + +.deleteButton { + background: #cc8888; +} + +#aboutButton { + background: #dcb078; +} \ No newline at end of file diff --git a/css/styles.css b/css/styles.css index fe972d9..ba3f8f9 100644 --- a/css/styles.css +++ b/css/styles.css @@ -5,6 +5,11 @@ font-family: Georgia, 'Times New Roman', Times, serif; } +contents { + display: block; + width: 100%; +} + footer { width: 100%; text-align: center; @@ -17,17 +22,34 @@ footer { max-height: 32px; /* Update Dictionary Container's bottom margin to account for footer */ } +/* Smartphones (portrait and landscape) ----------- */ +@media only screen +and (min-device-width : 320px) +and (max-device-width : 480px) { + footer { + position: relative; + clear: both; + max-height: 100%; + } + + #dictionaryContainer { + margin-bottom: 15px !important; + } +} + #leftColumn { float: left; } form { - margin: 15px; padding: 15px; } #wordEntryForm { + width: 30%; max-width: 400px; + min-width: 260px; + margin: 15px 0 15px 15px; border: outset 3px; } @@ -61,13 +83,18 @@ input[type=checkbox] { } #longDefinition { - width: 350px; - height: 200px; + width: 80%; + min-width: 260px; + height: 150px; +} + +#updateConflict { + width: 260px; } #errorMessage, #updateConflictMessage, #settingsErrorMessage { display: block; - color: red; + color: maroon; font-weight: bold; } @@ -78,8 +105,9 @@ input[type=checkbox] { #dictionaryContainer { margin: 15px 0 36px 15px; /* bottom margin must clear footer */ - width: 50%; - min-width: 350px; + width: 60%; + min-width: 260px; + max-width: 600px; float: left; } @@ -116,8 +144,8 @@ input[type=checkbox] { entry { display: block; - width: 50%; - min-width: 300px; + width: 90%; + min-width: 200px; padding: 10px 10px 3px; border: outset 3px; margin-bottom: 5px; @@ -221,12 +249,12 @@ searchTerm { #settingsOptions, #aboutPage { position: fixed; - top: 10%; - left: 10%; - right: 10%; - bottom: 10%; - min-width: 300px; - min-height: 300px; + top: 6%; + left: 6%; + right: 6%; + bottom: 6%; + min-width: 260px; + min-height: 260px; padding: 5px 5% 5%; overflow-y: auto; overflow-x: hidden; @@ -247,9 +275,14 @@ searchTerm { margin: 0; } +#dictionaryDescriptionEdit, #dictionaryPartsOfSpeechEdit { + width: 100%; + max-width: 360px; + min-width: 200px; +} + #dictionaryDescriptionEdit { - width: 280px; - height: 130px; + height: 200px; } #settingsErrorMessage { @@ -265,6 +298,8 @@ searchTerm { .settingsCol { display: block; float: left; - width: 300px; + width: 30%; + min-width: 260px; + max-width: 400px; margin: 0 30px 0 0; } diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..d2d8f40e3450ac443871e03c9a1087f80009852f GIT binary patch literal 4286 zcmcJSze`(j6va;(X+T7sbZgSVqKhp!l~T-5Ar3+`?;6CpICT<)E;WN7bm}DCJ2Zbl z$>7u?xD@J?p@Xzrbg=;uBK|nNR~m5pUg`BdZXl2Iy`S?E-aGFLK%PLs`WhIy l1d7%@V73cvn(VgJ + + + + + + + + + image/svg+xml + + + + + + + + + + + + diff --git a/images/logo.svg b/images/logo.svg new file mode 100644 index 0000000..3c4888d --- /dev/null +++ b/images/logo.svg @@ -0,0 +1,182 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + EXI + CONGA + + diff --git a/index.html b/index.html index 9c1f2f7..10021a0 100644 --- a/index.html +++ b/index.html @@ -4,9 +4,10 @@ - Dictionary Builder + Lexiconga Dictionary Builder + @@ -17,6 +18,16 @@ +
+ +
+
@@ -57,9 +58,9 @@
Settings -

+

- Show Description + Show Description
@@ -140,15 +141,15 @@
- +
+
+ Close +
+
+
+