Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: improve website texts #141

Merged
merged 1 commit into from
Apr 29, 2024
+145 −97
Merged

feat: improve website texts #141

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/src/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const Footer: React.FC = () => {
<p className="hr-like">
<br />
All we have to decide is what to do with the time that is given to us.{" "}
<b>Built with &hearts; in {new Date().getFullYear()}</b> <br />
<b>Built with &hearts; 2019-{new Date().getFullYear()}</b> <br />
</p>
</footer>
);
Expand Down
89 changes: 55 additions & 34 deletions frontend/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,20 @@
@charset "UTF-8";
html, body {
html,
body {
max-width: 100%;
overflow-x: hidden;

}

.card {
/* margin-bottom: 3rem; */
border: 1rem solid var(--card-border-color)
border: 1rem solid var(--card-border-color);
}

.logo {
font-size: 1.0rem !important;
font-size: 1rem !important;
padding: 25px !important;
/* font-family: 'Just Another Hand', cursive; */
color: var(--a-visited-color) !important;

}

table {
Expand All @@ -24,23 +23,21 @@ table {

.logo a:hover {
text-decoration: none;
color: var(--card-border-color)
color: var(--card-border-color);
}

a:hover {
text-decoration: none;
color: var(--header-fore-color)
color: var(--header-fore-color);
}


header {
color: var(--card-border-color);
background-color: var(--fore-color) !important;
height: unset;
overflow-x: hidden;
}


.drawer-toggle:before {
color: var(--card-border-color);
font-size: 80px;
Expand All @@ -55,18 +52,39 @@ header {
}
}

p, li, ul, th, td, tr, em, a, b, input, label, button {
font-family: 'Work Sans', sans-serif !important;
p,
li,
ul,
th,
td,
tr,
em,
a,
b,
input,
label,
button {
font-family: "Work Sans", sans-serif !important;
color: #4c4c4c;
font-size: 16px;
line-height: 2.1rem;
}

@media screen and (min-width: 1000px) {
p, li, ul, th, td, tr, em, a, b, input, label, button {
p,
li,
ul,
th,
td,
tr,
em,
a,
b,
input,
label,
button {
font-size: 20px;
line-height: 2.8rem;

}
}

Expand All @@ -87,7 +105,6 @@ h1 {
}
}


.subtitle {
margin-top: -1.7rem;
margin-left: 1rem;
Expand All @@ -97,7 +114,6 @@ h1 {
@media screen and (max-width: 576px) {
.subtitle {
font-size: 35px;

}
}

Expand All @@ -110,23 +126,23 @@ h2 {
h2 {
font-size: 28px;
line-height: 3.5rem;

}
}

h3 {
font-size: 36px !important;
}


h2 > smaller {
top: -1rem;
font-size: 1.5rem !important;

}

h1, h2, h3, .subtitle {
font-family: 'Martel', serif;
h1,
h2,
h3,
.subtitle {
font-family: "Martel", serif;
}

.container {
Expand All @@ -135,9 +151,8 @@ h1, h2, h3, .subtitle {
padding: 0;
}
#content-wrap {
padding-bottom: 4rem;
padding-bottom: 4rem;
margin-bottom: 70px;

}

#flexy {
Expand All @@ -155,41 +170,46 @@ footer {
text-align: center;
bottom: 0;
width: 100%;
height: 3rem;
height: 4rem;
}

footer > p, footer b {
footer > p,
footer b {
font-size: 20px;
line-height: 35px;
color: var(--fore-color) !important;
}

.hr-like {
border: none;
border-top: 1px solid transparent;
background-image: linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent);
height: 1px;
margin: 1em 0;
border: none;
border-top: 1px solid transparent;
background-image: linear-gradient(
to right,
transparent,
var(--border-color) 20%,
var(--border-color) 80%,
transparent
);
height: 1px;
margin: 1em 0;
}

@media screen and (max-width: 1000px) {
footer > p, footer b {
footer > p,
footer b {
font-size: small;
line-height: 25px;
}
}

#drawer {
border: 1rem solid var(--card-border-color);

}

#drawer a {
font-size: 20px !important;

}


nav {
line-height: 0.2rem;
border: unset;
Expand All @@ -206,7 +226,8 @@ nav {
margin-bottom: 3rem;
}

nav a, nav a:visited {
nav a,
nav a:visited {
color: unset;
}

Expand Down
38 changes: 20 additions & 18 deletions frontend/src/pages/About.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,27 +11,21 @@ const About: React.FC = () => {
</Helmet>
<p>
<br />
The <strong>one API to rule them all</strong> is a project by{" "}
The <strong>one API to rule them all</strong> is a non-commercial,
open-source project maintained by{" "}
<a href="https://rike.dev" rel="noopener noreferrer" target="_blank">
Rike
</a>{" "}
started during the{" "}
and{" "}
<a
href="https://www.100daysofcode.com/"
href="https://github.com/MateuszKikmunter"
rel="noopener noreferrer"
target="_blank"
>
#100DaysOfCode challenge
</a>{" "}
and is brought to you via{" "}
<a
href="https://www.digitalocean.com/"
rel="noopener noreferrer"
target="_blank"
>
DigitalOcean
Mateusz
</a>
. You have some questions or suggestions? Find me on Twitter (
, which has been around since 2019. If you have any quick questions or
suggestions, feel free to reach out to Rike on X (
<a
href="https://twitter.com/rikecodes"
rel="noopener noreferrer"
Expand Down Expand Up @@ -92,6 +86,14 @@ const About: React.FC = () => {
Express.js
</a>{" "}
-{" "}
<a
href="https://azure.com/"
rel="noopener noreferrer"
target="_blank"
>
Azure
</a>{" "}
-{" "}
<a
href="https://www.mongodb.com/de"
rel="noopener noreferrer"
Expand Down Expand Up @@ -125,8 +127,8 @@ const About: React.FC = () => {
</a>{" "}
and more.
<br /> <br />
It could not have been made without the scraping work of Moko Sharma
(
This project would not have been possible without the invaluable
scraping contributions of Moko Sharma (
<a
href="https://www.kaggle.com/mokosan/lord-of-the-rings-character-data"
rel="noopener noreferrer"
Expand All @@ -142,7 +144,7 @@ const About: React.FC = () => {
>
Kaggle
</a>
) .
).
</p>
</div>
</div>
Expand All @@ -152,7 +154,7 @@ const About: React.FC = () => {
<p>
Have a look into some great projects based on this API. You would
like to get listed?{" "}
<a href="mailto:hello@rike.dev">Drop me a line.</a>
<a href="mailto:hello@rike.dev">Drop Rike a line.</a>
</p>

<ul>
Expand Down Expand Up @@ -271,6 +273,6 @@ const About: React.FC = () => {
</div>
</div>
);
}
};

export default About;
Loading