Skip to content

Commit e944240

Browse files
mapachurromapachurro
authored
Merge pull request #35 from mapachurro/ui-mod-1
Improve UI Somewhat
2 parents d18d76c + 15fdc39 commit e944240

3 files changed

Lines changed: 181 additions & 31 deletions

File tree

‎css-mods.css‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
/* General styling */
2+
body {
3+
display: flex;
4+
flex-direction: column;
5+
min-height: 100vh;
6+
background-color: #1c1c1c;
7+
color: #a49ceb;
8+
}
9+
10+
main {
11+
flex: 1;
12+
}
13+
14+
footer {
15+
margin-top: auto;
16+
padding: 1rem;
17+
background-color: #2c2934;
18+
color: #a49ceb;
19+
text-align: center;
20+
border-top: 1px solid #54547c;
21+
}
22+
23+
/* Navbar styling */
24+
.navbar {
25+
background-color: #1c1c1c;
26+
color: #a49ceb;
27+
}
28+
29+
/* Card styling */
30+
.card {
31+
background-color: #2c2934;
32+
border: 1px solid #54547c;
33+
border-radius: 8px;
34+
color: #a49ceb;
35+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
36+
}
37+
38+
.card-title, h3, h4 {
39+
color: #ffcc00;
40+
}
41+
42+
p {
43+
color: #ccc;
44+
}
45+
46+
/* Call to action styling */
47+
#call-to-action {
48+
text-align: center;
49+
background-color: #3c344c;
50+
}
51+
52+
#call-to-action a {
53+
color: #ffcc00;
54+
font-weight: bold;
55+
}
56+
57+
#call-to-action a:hover {
58+
text-decoration: underline;
59+
}
60+
61+
/* Responsive adjustments */
62+
@media (max-width: 768px) {
63+
.navbar {
64+
padding: 0.5rem;
65+
}
66+
67+
.card {
68+
margin-bottom: 1rem;
69+
}
70+
}
71+

‎public/assets/css/styles.css‎

Lines changed: 50 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,14 @@
3838
}
3939

4040
@media (max-width: 768px) {
41+
.navbar {
42+
padding: 0.5rem;
43+
}
44+
45+
.card {
46+
margin-bottom: 1rem;
47+
}
48+
4149
.language-selector {
4250
position: fixed !important;
4351
top: 15px;
@@ -52,8 +60,15 @@
5260

5361
/* Body background and default text styling */
5462
body {
55-
background-color: #1c1c1c; /* Deep dark background */
56-
color: #a49ceb; /* Light purple for main text */
63+
display: flex;
64+
flex-direction: column;
65+
min-height: 100vh;
66+
background-color: #1c1c1c;
67+
color: #a49ceb;
68+
}
69+
70+
main {
71+
flex: 1;
5772
}
5873

5974
/* Card styling */
@@ -65,10 +80,21 @@ body {
6580
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Slight shadow for depth */
6681
}
6782

83+
/* Make card titles different color from text */
84+
.card-title,
85+
h3,
86+
h4 {
87+
color: #ffcc00;
88+
}
89+
6890
.card:hover {
6991
background-color: #3c344c; /* Slightly lighter on hover */
7092
}
7193

94+
p {
95+
color: #ccc;
96+
}
97+
7298
/* Results container styling */
7399
#results-container {
74100
margin-top: 1rem;
@@ -104,7 +130,9 @@ body {
104130
background-color: #2e2c3d; /* Dark purple for the link background */
105131
color: #a49ceb; /* Light purple text */
106132
text-decoration: none;
107-
transition: background-color 0.3s, color 0.3s;
133+
transition:
134+
background-color 0.3s,
135+
color 0.3s;
108136
}
109137

110138
.term-link:hover {
@@ -161,14 +189,29 @@ body {
161189
background-color: #484366; /* Darker purple on hover */
162190
}
163191

192+
/* Contribution call to action styling */
193+
#call-to-action {
194+
text-align: center;
195+
background-color: #2596be;
196+
}
197+
198+
#call-to-action a {
199+
color: #ffcc00;
200+
font-weight: bold;
201+
}
202+
203+
#call-to-action a:hover {
204+
text-decoration: underline;
205+
}
206+
164207
/* Footer styling */
165208
footer {
166-
margin-top: 2rem;
209+
margin-top: auto;
167210
padding: 1rem;
168-
background-color: #2c2934; /* Footer background */
169-
color: #a49ceb; /* Light purple for footer text */
211+
background-color: #2c2934;
212+
color: #a49ceb;
170213
text-align: center;
171-
border-top: 1px solid #54547c; /* Subtle border at the top */
214+
border-top: 1px solid #54547c;
172215
}
173216

174217
footer a {

‎utils/template.html‎

Lines changed: 60 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,34 @@
99
<link rel="stylesheet" href="../assets/css/styles.css" />
1010
<title>wordsofweb3 - {{title}}</title>
1111
<script type="module" src="../js/entry-page.js" defer></script>
12+
<style>
13+
body {
14+
display: flex;
15+
flex-direction: column;
16+
min-height: 100vh;
17+
}
18+
main {
19+
flex: 1;
20+
}
21+
footer {
22+
margin-top: auto;
23+
padding: 1rem;
24+
background-color: #222;
25+
color: #fff;
26+
}
27+
.card {
28+
background-color: #2a2a3b;
29+
color: #ddd;
30+
}
31+
.card-title,
32+
h3,
33+
h4 {
34+
color: #ffcc00;
35+
}
36+
p {
37+
color: #ccc;
38+
}
39+
</style>
1240
</head>
1341
<body>
1442
<header id="navbar-container" class="mb-5">
@@ -65,62 +93,70 @@
6593
</header>
6694

6795
<main class="container">
68-
<!-- Term Card -->
69-
<div class="card mb-4">
96+
<!-- Term Info Card -->
97+
<div class="card mb-4" id="term-info">
7098
<div class="card-body">
71-
<h1 class="card-title">{{term}}</h1>
99+
<h1 class="card-title" id="term">{{term}}</h1>
72100
<p id="phonetic"><strong>Phonetic:</strong> {{phonetic}}</p>
73101
<p id="partofspeech">
74102
<strong>Part of Speech:</strong> {{partOfSpeech}}
75103
</p>
76104
<p id="category"><strong>Category:</strong> {{termCategory}}</p>
77-
<h3 id="definitiontitle"><strong>Definition</strong></h3>
105+
</div>
106+
</div>
107+
108+
<!-- Definition Card -->
109+
<div class="card mb-4" id="definition-card">
110+
<div class="card-body">
111+
<h3 id="definitiontitle">Definition</h3>
78112
<p id="definition">{{definition}}</p>
79113
<p id="defsource">
80114
<strong>Definition source:</strong> {{definitionSource}}
81115
</p>
82116
<h4 id="sample">Sample sentence</h4>
83-
<p>{{sampleSentence}}</p>
84-
<h4 id="extended"><strong>Extended definition</strong></h4>
117+
<p id="sampleSentence">{{sampleSentence}}</p>
118+
</div>
119+
</div>
120+
121+
<!-- Extended Info Card -->
122+
<div class="card mb-4" id="extended-info">
123+
<div class="card-body">
124+
<h4 id="extended">Extended definition</h4>
85125
<p>{{extended}}</p>
86126
<h4 id="alternatetitle">Alternate definitions</h4>
87127
<div id="alternate-definitions">{{alternateDef}}</div>
88128
<p id="termsource"><strong>Term source:</strong> {{termSource}}</p>
89129
<p id="date">
90-
<strong>Date first recorded to wordsofweb3:</strong>
91-
{{dateFirstRecorded}}
130+
<strong>Date first recorded:</strong> {{dateFirstRecorded}}
92131
</p>
93132
<h4 id="commentary">Commentary</h4>
94133
<p>{{commentary}}</p>
95-
<br />
96-
<br />
97-
<div id="contribute"></div>
98-
<h2>Does this need to be better?</h2>
134+
</div>
135+
</div>
136+
137+
<!-- Call to Action Card -->
138+
<div class="card mb-4" id="call-to-action">
139+
<div class="card-body text-center">
140+
<h2 id="contribute">Does this need to be better?</h2>
99141
<p>
100-
This glossary only gets good, and stays good, if we all complain. If
101-
you have a suggestion, open an issue
142+
This glossary only gets good if we all complain. If you have a
143+
suggestion, open an issue
102144
<a href="https://github.com/mapachurro/wordsofweb3/issues"
103145
>on this project's GitHub repo.</a
104146
>
105147
</p>
106148
</div>
107149
</div>
108-
109-
<!-- Language Links Card -->
110-
<div class="card mb-4">
111-
<div class="card-body">
112-
<h5 class="card-title">Read this entry in:</h5>
113-
<p>{{languageLinks}}</p>
114-
</div>
115-
</div>
116150
</main>
117151

118152
<!-- Footer -->
119-
<footer class="text-center mt-4">
153+
<footer class="text-center" id="footer">
120154
<p>
121155
wordsofweb3 glossary © 2024 by Education DAO is licensed under CC
122156
BY-NC-ND 4.0. To view a copy of this license, visit
123-
https://creativecommons.org/licenses/by-nc-nd/4.0/
157+
<a href="https://creativecommons.org/licenses/by-nc-nd/4.0/"
158+
>this link</a
159+
>.
124160
</p>
125161
</footer>
126162
</body>

0 commit comments

Comments
 (0)