updated CSS and HTML layout

parent 4f1cf64b
content {
wordcard {
text-decoration: none;
display: grid;
grid-auto-rows: min-content;
grid-gap: 10px;
grid-template-areas:
'word fromlang'
'wclass gender'
'translations translations'
'details details'
'etymology etymology';
padding: 40px;
'word word word'
'fromlang wclass gender'
'translations translations translations'
'details details details'
'etymology etymology etymology';
padding: 20px;
margin: 20px;
background: #343131;
color: #fcfcfc;
box-shadow: 8px 8px 16px #000;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
a > p {
color: #fcfcfc;
margin: 20px;
padding: 20px;
background-color: rgba(34,31,31,0.6);
box-shadow: 2px 2px 5px #000;
}
word {
grid-area: word;
font-size: 3em;
font-size: 4em;
align-self: end;
}
fromlang {
......@@ -35,10 +58,13 @@ transdetails {
etymology {
grid-area: etymology;
}
etymology::before {
content: "Etymology: ";
}
gender {
grid-area: gender;
}
.title {
font-size: 1.3em;
text-decoration: underline;
line-height: 0.8em;
}
@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");
src: url("DoulosSIL-R.woff");
}
body {
......@@ -22,7 +23,7 @@ body {
.h1 {
margin-bottom: .2em;
font-size: 175%;
font-family: "Roboto Slab","ff-tisa-web-pro","Georgia",Arial,sans-serif;
font-family: "Roboto Slab", "ff-tisa-web-pro", "Georgia", Arial, sans-serif;
font-weight: 700;
text-align: center;
}
......@@ -33,13 +34,20 @@ body {
margin: 0 0 24px 0;
box-sizing: border-box;
display: block;
font-family: "DoulosSIL","Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
font-family: "DoulosSIL", "Lato", "proxima-nova", "Helvetica Neue", Arial, sans-serif;
}
sidebar {
grid-area: sidebar;
display: grid;
grid-template-areas:
'sidebar-title'
'sidebar-content'
'sidebar-footer';
grid-template-rows: 90px auto 60px;
width: 300px;
background-color: #343131;
color: #fcfcfc;
}
content {
......@@ -50,24 +58,54 @@ content {
content {
max-width: 900px;
background-color: #fcfcfc;
overflow-y: auto;
overflow-x: hidden;
}
errormessage {
color: red;
text-align: center;
font-size: 1.5em;
font-family: "DoulosSIL","Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
font-family: "DoulosSIL", "Lato", "proxima-nova", "Helvetica Neue", Arial, sans-serif;
}
sidebar {
color: #fcfcfc;
}
sidebar > h1 {
.sidebar-title,
.sidebar-footer {
background: #2980b9;
padding: 15px;
margin-block-start: 0;
margin-block-end: 0;
text-align: center;
vertical-align: middle;
font-size: 1.5em;
}
.sidebar-title {
grid-area: sidebar-title;
}
.sidebar-footer {
grid-area: sidebar-footer;
cursor: pointer;
}
.sidebar-content {
overflow: auto;
}
/*****************************************************************************/
/* scrollbar */
/*****************************************************************************/
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
display: none;
}
::-webkit-scrollbar-thumb {
background: #343131;
border-radius: 3px;
}
......@@ -18,41 +18,57 @@
<!-- SIDEBAR ----------------------------------------------------------------->
{% block sidebarcontent %}
<h1>Detailed Translation</h1>
<h1 class="sidebar-title">Detailed Translation</h1>
<h1 class="sidebar-footer" onclick="window.history.go(-1);">Go Back</h1>
{% endblock %}
<!-- BODY -------------------------------------------------------------------->
{% block body %}
<word>{{ word.word }}</word>
<fromlang>Language: {{ from_lang.name }}</fromlang>
<gender>{% if word.gender %}Gender: {{ word.gender }}{% endif %}</gender>
<wordclass>Word class: {{word.wordclass}} </wordclass>
<listtrans>
{% if translations %}
<p>Translations of “{{ word.word }}” in {{ to_lang.name }}:</p>
<ul>
<wordcard>
<word>{{ word.word }}</word>
<fromlang>
<p class="title">Language: </p>
<p>{{ from_lang.name }}</p>
</fromlang>
<gender>
{% if word.gender %}
<p class="title">Gender:</p>
<p>{{ word.gender }}</p>
{% endif %}
</gender>
<wordclass>
<p class="title">Word class:</p>
<p>{{word.wordclass}}</p>
</wordclass>
<listtrans>
{% if translations %}
<p class="title">Translations of “{{ word.word }}” in {{ to_lang.name }}:</p>
{% for translation in translations %}
<li><a href="{% url 'dictionary:details' to_lang.code from_lang.code translation.slug %}">{{ translation.word }}</a></li>
<!--TODO: link to the word's page-->
<a href="{% url 'dictionary:details' to_lang.code from_lang.code translation.slug %}"><p>{{ translation.word }} ({{translation.wordclass.name}})</p></a>
{% endfor %}
</ul>
{% endif %}
</listtrans>
<transdetails>{% if word.details %}{{ word.details }}{% endif %}</transdetails>
<etymology>
{% if word.etymology %}
<p>{{word.etymology}}</p>
{% if word.roots.all %}
<roots>
<p>Etymological roots:</p>
<ul>
{% endif %}
</listtrans>
<transdetails>
{% if word.details %}
<p class="title">Details:</p>
<p>{{ word.details }}</p>
{% endif %}
</transdetails>
<etymology>
{% if word.etymology %}
<p class="title">Etymology: </p>
<p>{{word.etymology}}</p>
{% if word.roots.all %}
<roots>
<p class="title">Etymological roots:</p>
{% for root in word.roots.all %}
<!-- <li>{{ root.word }}</li> -->
<li><a href="{% url 'dictionary:details' from_lang.code to_lang.code root.slug %}">{{root.word}}</a></li>
<a href="{% url 'dictionary:details' from_lang.code to_lang.code root.slug %}">
<p>{{root.word}} ({{root.wordclass.name}})</p>
</a>
{% endfor %}
</ul>
</roots>
{% endif %}
{% endif %}
</etymology>
</roots>
{% endif %}
{% endif %}
</etymology>
</wordcard>
{% endblock %}
......@@ -12,8 +12,8 @@
{% endblock %}
{% block sidebarcontent %}
<h1>List of available languages</h1>
<ul>
<h1 class="sidebar-title">List of available languages</h1>
<ul class="sidebar-content">
{% for lang in all_languages %}
<li>{{lang}}</li>
{% endfor %}
......
......@@ -11,7 +11,8 @@
<!-- SIDEBAR ----------------------------------------------------------------->
{% block sidebarcontent %}
<h1>Translating from {{from_lang.name}} to {{to_lang.name}}</h1>
<h1 class="sidebar-title">Translating from {{from_lang.name}} to {{to_lang.name}}</h1>
<h1 class="sidebar-footer" onclick="window.history.go(-1);">Go Back</h1>
{% endblock %}
<!-- BODY -------------------------------------------------------------------->
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment