HTML and CSS refactor, now using divs instead of custom elements

parent 40436ca4
wordcard {
.wordcard {
text-decoration: none;
display: grid;
grid-auto-rows: min-content;
......@@ -38,34 +38,34 @@ a {
transition: box-shadow 0.3s;
}
word {
.word {
grid-area: word;
font-size: 4em;
align-self: end;
}
fromlang {
.fromlang {
grid-area: fromlang;
align-self: end;
}
wordclass {
.wordclass {
grid-area: wclass;
}
listtrans {
.listtrans {
grid-area: translations;
}
transdetails {
.transdetails {
grid-area: details;
}
etymology {
.etymology {
grid-area: etymology;
}
gender {
.gender {
grid-area: gender;
}
......
content {
.content {
display: grid;
grid-template-columns: auto;
grid-template-rows: 100px auto;
grid-auto-rows: min-content;
grid-template-areas: 'message' 'form';
}
form {
grid-area: form;
display: inline-grid;
grid-template-rows: 64px 100px;
display: grid;
grid-template-rows: auto 70px;
grid-template-areas:
'source dest'
'submition submition';
margin: 20px 0;
}
sourcelang {
.sourcelang {
grid-area: source;
}
destlang {
.destlang {
grid-area: dest;
}
sourcelang, destlang {
.sourcelang, .destlang {
display: grid;
grid-template-rows: 24px 40px;;
grid-template-areas: 'label' 'select';
}
......@@ -39,18 +39,16 @@ label {
width: 120px;
border-radius: 3px;
overflow: hidden;
/* background: #edf0f2; */
margin: auto;
}
.form-style select, .form-style input {
padding: 5px 8px;
padding: 5px 10px;
width: 100%;
border: none;
box-shadow: none;
background: transparent;
background-image: none;
text-align: center;
-webkit-appearance: none;
}
......@@ -58,33 +56,32 @@ label {
outline: none;
}
.index-title {
grid-area: message;
margin: 0 20px;
}
submit {
margin: auto;
width: 50%;
grid-area: submition;
}
message {
grid-area: message;
margin: 0 20px;
}
h2 {
padding: 20px;
}
sidebar {
.sidebar {
display: block;
}
sidebar ul {
.sidebar ul {
padding-inline-start: 0;
margin: 40px;
display: block;
list-style: none;
}
sidebar ul li {
.sidebar ul li {
font-size: 1.1em;
margin: 20px;
}
......@@ -2,18 +2,18 @@ h2 {
text-align: center;
}
content {
.content {
display: grid;
grid-template-areas:
'natw conw';
}
natlangw {
.natlangw {
grid-area: natw;
overflow-y: auto;
}
conlangw {
.conlangw {
grid-area: conw;
overflow-y: auto;
}
......@@ -38,17 +38,17 @@ conlangw {
transition: box-shadow 0.3s;
}
word {
.word {
margin: 10px;
grid-area: word;
font-size: 2em;
}
wclass {
.wclass {
grid-area: wclass;
}
gender {
.gender {
grid-area: gender;
}
......
......@@ -19,7 +19,7 @@ body {
grid-template-columns: 300px auto;
}
sidebar {
.sidebar {
grid-area: sidebar;
display: grid;
grid-template-areas:
......@@ -32,7 +32,7 @@ sidebar {
color: #fcfcfc;
}
content {
.content {
margin: 10px;
padding: 20px;
grid-area: content;
......@@ -41,14 +41,14 @@ content {
overflow-x: hidden;
}
errormessage {
.errormessage {
color: red;
text-align: center;
font-size: 1.5em;
font-family: "DoulosSIL", "Lato", "proxima-nova", "Helvetica Neue", Arial, sans-serif;
}
.h1 {
h1 {
margin-bottom: .2em;
font-size: 175%;
font-family: "Roboto Slab", "ff-tisa-web-pro", "Georgia", Arial, sans-serif;
......@@ -56,9 +56,10 @@ errormessage {
text-align: center;
}
.p {
font-size: inherit;
p, label {
line-height: 24px;
font-size: 18px;
font-weight: normal;
margin: 0 0 24px 0;
box-sizing: border-box;
display: block;
......
......@@ -19,16 +19,18 @@
</head>
<body>
<sidebar>{% block sidebarcontent %}{% endblock %}</sidebar>
<content>
<errormessage>
<div class="sidebar">
{% block sidebarcontent %}{% endblock %}
</div>
<div class="content">
<div class="errormessage">
{% if error_message %}
<p><strong>{{ error_message }}</strong></p>
{% endif %}
</errormessage>
</div>
{% block body %}
{% endblock %}
</content>
</div>
</body>
</html>
......@@ -24,51 +24,51 @@
<!-- BODY -------------------------------------------------------------------->
{% block body %}
<wordcard>
<word>{{ word.word }}</word>
<fromlang>
<div class="wordcard">
<div class="word">{{ word.word }}</div>
<div class="fromlang">
<p class="title">Language: </p>
<p>{{ from_lang.name }}</p>
</fromlang>
<gender>
</div>
<div class="gender">
{% if word.gender %}
<p class="title">Gender:</p>
<p>{{ word.gender }}</p>
{% endif %}
</gender>
<wordclass>
</div>
<div class="wordclass">
<p class="title">Word class:</p>
<p>{{word.wordclass}}</p>
</wordclass>
<listtrans>
</div>
<div class="listtrans">
{% if translations %}
<p class="title">Translations of “{{ word.word }}” in {{ to_lang.name }}:</p>
{% for translation in translations %}
<a href="{% url 'dictionary:details' to_lang.code from_lang.code translation.slug %}"><p class="card">{{ translation.word }} ({{translation.wordclass.name}})</p></a>
{% endfor %}
{% endif %}
</listtrans>
<transdetails>
</div>
<div class="transdetails">
{% if word.details %}
<p class="title">Details:</p>
<p>{{ word.details }}</p>
{% endif %}
</transdetails>
<etymology>
</div>
<div class="etymology">
{% if word.etymology %}
<p class="title">Etymology: </p>
<p>{{word.etymology}}</p>
{% if word.roots.all %}
<roots>
<div class="roots">
<p class="title">Etymological roots:</p>
{% for root in word.roots.all %}
<a href="{% url 'dictionary:details' from_lang.code to_lang.code root.slug %}">
<p class="card">{{root.word}} ({{root.wordclass.name}})</p>
</a>
{% endfor %}
</roots>
</div>
{% endif %}
{% endif %}
</etymology>
</wordcard>
</div>
</div>
{% endblock %}
......@@ -30,11 +30,11 @@
{% endblock %}
{% block body %}
<message class="h1">Please select the languages you want to translate from and to</message>
<h1 class="index-title">Please select the languages you want to translate from and to</h1>
<form method="post" id="langselect" action="/" enctype="multipart/form-data">
{% csrf_token %}
<sourcelang>
<label for="source" class="p">Natural Language:</label>
<div class="sourcelang">
<label for="source">Natural Language:</label>
<div class="form-style">
<select id="source" name="natlang">
{% for lang in natlangs %}
......@@ -42,9 +42,9 @@
{% endfor %}
</select>
</div>
</sourcelang>
<destlang>
<label for="dest" class="p">Constructed Language:</label>
</div>
<div class="destlang">
<label for="dest">Constructed Language:</label>
<div class="form-style">
<select id="dest" name="conlang">
{% for lang in conlangs %}
......@@ -52,10 +52,9 @@
{% endfor %}
</select>
</div>
</destlang>
</div>
<submit class="form-style">
<input type="submit" value="Let’s Go!">
</submit>
</div>
</form>
{% endblock %}
......@@ -17,18 +17,18 @@
<!-- BODY -------------------------------------------------------------------->
{% block body %}
<natlangw>
<div class="natlangw">
<h2>{{natlang.name}}</h2>
<wordlist>
<div class="wordlist">
{% for word in natwords %}
<a href="{% url 'dictionary:details' natlang.code conlang.code word.slug %}" class="wordblock">
<word>{{word.word}}</word>
<wclass>
<div class="word">{{word.word}}</div>
<div class="wclass">
{% if word.wordclass %}
{{word.wordclass}}
{% endif %}
</wclass>
<gender>{{word.gender}}</gender>
</div>
<div class="gender">{{word.gender}}</div>
<ul class="translations">
{% for trans in word.translation.all %}
{% if trans.language.code == conlang.code %}
......@@ -38,20 +38,20 @@
</ul>
</a>
{% endfor %}
</wordlist>
</natlangw>
<conlangw>
</div>
</div>
<div class="conlangw">
<h2>{{conlang.name}}</h2>
<wordlist>
<div class="wordlist">
{% for word in conwords %}
<a href="{% url 'dictionary:details' conlang.code natlang.code word.slug %}" class="wordblock">
<word>{{word.word}}</word>
<wclass>
<div class="word">{{word.word}}</div>
<div class="wclass">
{% if word.wordclass %}
{{word.wordclass}}
{% endif %}
</wclass>
<gender>{{word.gender}}</gender>
</div>
<div class="gender">{{word.gender}}</div>
<ul class="translations">
{% for trans in word.translation.all %}
{% if trans.language.code == natlang.code %}
......@@ -61,6 +61,6 @@
</ul>
</a>
{% endfor %}
</wordlist>
</conlangw>
</div>
</div>
{% endblock %}
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