Skip to content

Commit 9dd8e49

Browse files
VBproDevVBproDev
authored
Merge pull request #2 from AvinashYerra/main
CSS changes
2 parents 630999e + 1baed21 commit 9dd8e49

File tree

3 files changed

+143
-29
lines changed

3 files changed

+143
-29
lines changed

‎src/pages/index.astro

Lines changed: 34 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
---
22
import "../styles/stylesheet.scss";
3+
import '../styles/global.css';
34
---
45

56
<html lang="en">
67
<head>
8+
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
79
<meta charset="UTF-8" />
810
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
911
<meta
@@ -74,31 +76,32 @@ import "../styles/stylesheet.scss";
7476
"isAccessibleForFree": true
7577
}
7678
</script>
79+
<div class="container">
80+
<h1>Convert between Balanced Ternary and Decimal</h1>
81+
<div class="info-box">
82+
<ul class="info-list">
83+
<li>
84+
Don't know about Balanced Ternary Operator?. Here -
85+
<a target="_blank" href="https://en.wikipedia.org/wiki/Balanced_ternary">Balanced ternary</a>
86+
</li>
87+
<li>
88+
To convert a single number, enter it into the input field.
89+
</li>
90+
<li>
91+
For bulk conversions, specify a range using the format <code>x, y</code> (e.g., <code>1,100</code> or <code>T10,1T11</code>).
92+
</li>
93+
<li>
94+
When entering balanced ternary numbers, remember that the digits -1 and 1 are represented by <code>T</code> and <code>1</code>, respectively.
95+
</li>
96+
</ul>
97+
</div>
7798

78-
<h1>Convert between balanced ternary and decimal</h1>
79-
<p>
80-
If you're here, you likely already know what <a
81-
target="_blank"
82-
href="https://en.wikipedia.org/wiki/Balanced_ternary">Balanced ternary</a
83-
> is, so we won't redefine it here.
84-
</p>
85-
86-
<p>
87-
To convert a single number, simply enter it into the input field. For bulk
88-
conversions, you can specify a range using the format <code>x, y</code> (e.g.,
89-
<code>1, 100</code> or <code>T10, 1T11</code>).
90-
</p>
91-
92-
<p>
93-
When entering balanced ternary numbers, remember that the digit -1 and 1 is
94-
represented by <code>T</code> and <code>1</code>.
95-
</p>
9699

97100
<input
98101
id="numeric-input"
99102
aria-label="Enter decimal"
100103
class="numeric-input"
101-
placeholder="Enter decimal"
104+
placeholder="Enter Decimal"
102105
/>
103106

104107
<label for="numeric-base-select">Convert to</label>
@@ -126,25 +129,28 @@ import "../styles/stylesheet.scss";
126129
</div>
127130

128131
<script src="../scripts/script.ts"></script>
129-
<footer>
130-
Consider starring ⭐ us on <a
131-
target="_blank"
132-
href="https://github.com/VBproDev/decimal-and-balanced-ternary-converter"
133-
>Github!</a
134-
>
132+
<footer class="site-footer">
135133
<p>
136-
Made by <a target="_blank" href="https://github.com/VBproDev"
137-
>Viraj Bijpuria</a
134+
Consider starring ⭐ us on
135+
<a
136+
target="_blank"
137+
href="https://github.com/VBproDev/decimal-and-balanced-ternary-converter"
138+
>GitHub!</a
138139
>
139140
</p>
141+
<p>
142+
Made by
143+
<a target="_blank" href="https://github.com/VBproDev">Viraj Bijpuria</a>
144+
</p>
140145
</footer>
146+
141147
<div class="banner-container">
142148
<h4 id="error-banner" class="disabled-banner"></h4>
143149
</div>
144150

145151
<div class="banner-container">
146152
<h4 id="success-banner" class="disabled-banner"></h4>
147153
</div>
148-
154+
</div>
149155

150156
</html>

‎src/styles/global.css

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
html, body {
2+
height: 100%;
3+
margin: 0;
4+
}
5+
6+
.container {
7+
display: flex;
8+
flex-direction: column;
9+
justify-content: center;
10+
align-items: center;
11+
min-height: 100vh;
12+
padding: 1rem;
13+
box-sizing: border-box;
14+
}

‎src/styles/stylesheet.scss

Lines changed: 95 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ $margin: clamp(2%, 1rem, 3%);
8484
user-select: none;
8585
-webkit-user-select: none;
8686
white-space: nowrap;
87+
font-size: 20px
8788
}
8889

8990
.conversion-container {
@@ -157,4 +158,97 @@ footer {
157158
cursor: pointer;
158159
width: 2rem;
159160
height: 100%;
160-
}
161+
}
162+
163+
body {
164+
font-family: 'Roboto', sans-serif;
165+
}
166+
167+
.numeric-input {
168+
width: 300px;
169+
padding: 12px 16px;
170+
font-size: 1rem;
171+
border: 2px solid #ccc;
172+
border-radius: 6px;
173+
background-color: #f9f9f9;
174+
color: #333;
175+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
176+
transition: border-color 0.3s ease, box-shadow 0.3s ease;
177+
}
178+
179+
.numeric-input:focus {
180+
border-color: #007BFF;
181+
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
182+
outline: none;
183+
}
184+
185+
.numeric-base-select {
186+
appearance: none;
187+
-webkit-appearance: none;
188+
-moz-appearance: none;
189+
background-color: #f9f9f9;
190+
border: 2px solid #ccc;
191+
border-radius: 6px;
192+
padding: 12px 16px;
193+
font-size: 1rem;
194+
color: #333;
195+
cursor: pointer;
196+
width: 300px;
197+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
198+
background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23333" class="bi bi-caret-down-fill" viewBox="0 0 16 16"><path d="M7.247 11.14l-4.796-5.481c-.566-.648-.106-1.659.753-1.659h9.592c.86 0 1.319 1.01.753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>');
199+
background-repeat: no-repeat;
200+
background-position: right 1rem center;
201+
background-size: 1rem;
202+
}
203+
204+
.info-box {
205+
background-color: #f9f9f9;
206+
border: 2px solid #ccc;
207+
border-radius: 8px;
208+
padding: 1rem;
209+
margin: 1.5rem auto;
210+
max-width: 800px;
211+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
212+
}
213+
214+
.info-list {
215+
list-style-type: disc;
216+
list-style-position: inside;
217+
padding-left: 1rem;
218+
margin: 0;
219+
color: #333;
220+
font-size: 1rem;
221+
line-height: 1.6;
222+
}
223+
224+
.info-list li {
225+
margin-bottom: 0.5rem;
226+
line-height: 1.4;
227+
228+
}
229+
230+
.site-footer {
231+
background-color: #f8f9fa;
232+
padding: 1.5rem 1rem;
233+
text-align: center;
234+
font-size: 0.95rem;
235+
color: #6c757d;
236+
border-top: 1px solid #dee2e6;
237+
margin-top: 2rem;
238+
}
239+
240+
.site-footer a {
241+
color: #007bff;
242+
text-decoration: none;
243+
font-weight: 500;
244+
}
245+
246+
.site-footer a:hover {
247+
text-decoration: underline;
248+
}
249+
250+
.site-footer p {
251+
margin: 0.5rem 0;
252+
}
253+
254+

0 commit comments

Comments
 (0)