Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 0ba3155

Browse files
fix: content width of algorithm page
1 parent a898e75 commit 0ba3155

File tree

2 files changed

+105
-68
lines changed

2 files changed

+105
-68
lines changed

‎src/pages/About/index.tsx‎

Lines changed: 50 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,58 @@
11
import { FC } from 'react'
22

3+
const githubURL = 'https://github.com/bkrmadtya/sorting-algorithm-visualizer'
4+
const thesisURL = 'https://www.theseus.fi/handle/10024/507342'
35
const About: FC = () => {
4-
const url = 'https://github.com/bkrmadtya/sorting-algorithm-visualizer'
56
return (
67
<div className='aboutPage'>
7-
<div>
8-
<section>
9-
<h1 className='header'>About the project</h1>
10-
<p className='description'>
11-
This is project is part of the thesis project done for my Bachelor
12-
thesis in Helsinki Metropolia University of Applied Sciences. The
13-
thesis aims to visualize sorting process of different sorting
14-
algorithms and observe how visualization assists in understanding
15-
different ideas, in this case, sorting algorithms. This is project
16-
is part of the thesis project done for my Bachelor thesis in
17-
Helsinki Metropolia University of Applied Sciences. The thesis aims
18-
to visualize sorting process of different sorting algorithms and
19-
observe how visualization assists in understanding different ideas,
20-
in this case, sorting algorithms.
21-
</p>
22-
<table className='details-table'>
23-
<tr>
24-
<td>Tech stack</td>
25-
<td>
26-
<ul>
27-
<li>React</li>
28-
<li>TypeScript</li>
29-
<li>Redux</li>
30-
<li>React-Router</li>
31-
<li>SASS</li>
32-
<li>Webpack</li>
33-
<li>Babel</li>
34-
<li>Eslint</li>
35-
</ul>
36-
</td>
37-
</tr>
38-
<tr>
39-
<td>Github link</td>
40-
<td>
41-
<a className='link' href={url}>
42-
{url}
43-
</a>
44-
</td>
45-
</tr>
46-
</table>
47-
</section>
48-
</div>
8+
<section>
9+
<h1 className='aboutPage__header'>About the project</h1>
10+
<p className='aboutPage__description'>
11+
This is project is part of the thesis project done for my Bachelor
12+
thesis in Helsinki Metropolia University of Applied Sciences. The
13+
thesis aims to visualize sorting process of different sorting
14+
algorithms and observe how visualization assists in understanding
15+
different ideas, in this case, sorting algorithms. This is project is
16+
part of the thesis project done for my Bachelor thesis in Helsinki
17+
Metropolia University of Applied Sciences. The thesis aims to
18+
visualize sorting process of different sorting algorithms and observe
19+
how visualization assists in understanding different ideas, in this
20+
case, sorting algorithms.
21+
</p>
22+
<table className='aboutPage__details'>
23+
<tr>
24+
<td>Tech stack</td>
25+
<td>
26+
<ul>
27+
<li>React</li>
28+
<li>TypeScript</li>
29+
<li>Redux</li>
30+
<li>React-Router</li>
31+
<li>SASS</li>
32+
<li>Vite</li>
33+
<li>Eslint</li>
34+
</ul>
35+
</td>
36+
</tr>
37+
<tr>
38+
<td>Github link</td>
39+
<td>
40+
<a className='aboutPage__details-link' href={githubURL}>
41+
{githubURL}
42+
</a>
43+
</td>
44+
</tr>
45+
<tr>
46+
<td>Thesis link</td>
47+
<td>
48+
<a className='aboutPage__details-link' href={thesisURL}>
49+
{thesisURL}
50+
</a>
51+
</td>
52+
</tr>
53+
</table>
54+
</section>
55+
<footer className='aboutPage__footer'>@bkrmadtya 2021, 2022</footer>
4956
</div>
5057
)
5158
}

‎src/styles/pages/about/index.scss‎

Lines changed: 55 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,85 @@
11
.aboutPage {
2+
max-width: 900px;
23
width: 70%;
4+
height: 100vh;
35
margin: 0 auto;
46
padding: 40px;
5-
font-size: 18px;
7+
position: relative;
8+
display: flex;
9+
flex-direction: column;
610

7-
@media (max-width: 600px) {
8-
width: 80%;
9-
}
10-
11-
.header {
12-
font-size: 40px;
11+
&__header {
12+
font-size: 30px;
1313
font-weight: 300;
14-
padding: 20px0;
14+
padding: 20px;
1515
text-transform: uppercase;
16+
text-align: center;
1617
}
1718

18-
.description {
19-
font-size: 20px;
19+
&__description {
20+
font-size: 16px;
2021
font-weight: 300;
2122
text-align: justify;
22-
padding-bottom: 20px;
23+
padding: 50px0px;
2324
}
2425

25-
.details-table {
26+
&__details {
2627
width: 100%;
2728
border-collapse: collapse;
2829

2930
td {
3031
padding: 10px;
32+
font-size: 16px;
33+
font-weight: 300;
34+
3135
li {
3236
list-style: none;
33-
margin-bottom: 0.2px;
37+
margin-bottom: 2px;
3438
}
39+
40+
&:first-child {
41+
width: 65px;
42+
white-space: nowrap;
43+
text-align: left;
44+
vertical-align: top;
45+
font-weight: bold;
46+
}
47+
}
48+
49+
&-link {
50+
text-decoration: underline;
51+
color: rgb(90, 90, 251);
52+
word-break: break-all;
3553
}
54+
}
3655

37-
td:first-child {
38-
width: 1%;
39-
white-space: nowrap;
40-
text-align: left;
41-
vertical-align: top;
56+
&__footer {
57+
text-align: center;
58+
position: absolute;
59+
bottom: 10px;
60+
right: 0;
61+
left: 0;
62+
font-size: 14px;
63+
font-style: italic;
64+
font-weight: bold;
65+
}
66+
67+
@media screen and (max-width: 768px) {
68+
width: 100%;
69+
padding: 20px;
70+
71+
&__header {
4272
font-size: 20px;
4373
}
4474

45-
td:nth-child(2) {
46-
font-weight: 300;
75+
&__description {
76+
font-size: 14px;
4777
}
48-
}
4978

50-
.link {
51-
margin: 20px 0;
52-
text-decoration: underline;
53-
color: blue;
79+
&__details {
80+
td {
81+
font-size: 14px;
82+
}
83+
}
5484
}
5585
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /