Skip to content

Commit 04e2140

Browse files
jessicachitasjessicachitas
authored
Merge pull request #92 from jessicachitas/main
Responsiveness fixes - Add responsiveness to the GitHub stars button on the nav - Add hover decorations to buttons and links - Clean up file structure also
2 parents 852c430 + 97ec2ca commit 04e2140

File tree

6 files changed

+161
-164
lines changed

6 files changed

+161
-164
lines changed

‎src/App.jsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
/* -------------------------------------------------------------------------- */
44

55
/* --------------------------------- Imports -------------------------------- */
6-
import "./App.css";
76
import installIcon from "./assets/gravity-ui--arrow-shape-down-to-line.svg";
87
import githubIcon from "./assets/octicon--mark-github-24.svg";
98
import communityIcon from "./assets/gravity-ui--persons.svg";
@@ -189,10 +188,10 @@ function App() {
189188
<div className="footer orange-background">
190189
<footer>
191190
<p>
192-
<a href="https://github.com/containers/ramalama">Github</a> |{" "}
193-
<a href="https://matrix.to/#/#ramalama:fedoraproject.org">Matrix</a>{" "}
191+
<a className="footer-link" href="https://github.com/containers/ramalama">Github</a> |{" "}
192+
<a className="footer-link" href="https://matrix.to/#/#ramalama:fedoraproject.org">Matrix</a>{" "}
194193
|{" "}
195-
<a href="https://github.com/containers/ramalama/blob/main/README.md">
194+
<a className="footer-link" href="https://github.com/containers/ramalama/blob/main/README.md">
196195
Docs
197196
</a>
198197
</p>

‎src/Nav.css

Lines changed: 0 additions & 77 deletions
This file was deleted.

‎src/Nav.jsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
/* JavaScript file for building the navbar */
33
/* -------------------------------------------------------------------------- */
44

5-
import "./Nav.css";
65
import ramalamaText from "./assets/ramalama-logo-text-only.svg";
76
import ramalamaLogo from "./assets/ramalama-logo-llama-only.svg";
87

‎src/App.css renamed to ‎src/css/index.css

Lines changed: 157 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,126 @@
11
/* -------------------------------------------------------------------------- */
2-
/* Style Sheet for App.jsx */
2+
/* Style Sheet for index.html */
33
/* -------------------------------------------------------------------------- */
44

5-
/* ----------------------------- Global Styles ----------------------------- */
5+
@font-face {
6+
font-family: "Red Hat Display";
7+
src: url(assets/RedHatDisplay-VariableFont_wght.ttf);
8+
}
69

710
@font-face {
811
font-family: "Red Hat Mono";
912
src: url(assets/RedHatMono-VariableFont_wght.ttf);
1013
}
1114

15+
:root {
16+
font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
17+
line-height: 1.2;
18+
font-weight: normal;
19+
font-size: 1.2rem;
20+
21+
color-scheme: light dark;
22+
color: black;
23+
background-color: #ececec;
24+
25+
font-synthesis: none;
26+
text-rendering: optimizeLegibility;
27+
-webkit-font-smoothing: antialiased;
28+
-moz-osx-font-smoothing: grayscale;
29+
}
30+
1231
* {
1332
box-sizing: border-box;
1433
}
1534

35+
html,
36+
body {
37+
margin: 0;
38+
padding: 0;
39+
}
40+
41+
a {
42+
color: inherit;
43+
text-decoration: inherit;
44+
}
45+
46+
h1 {
47+
font-size: 3.2em;
48+
line-height: 1.1;
49+
}
50+
51+
/* ----------------------------- Navbar Section ---------------------------- */
52+
53+
.logo-text {
54+
width: 15%;
55+
margin: 1.25rem 2rem;
56+
57+
@media screen and (max-width: 1024px) {
58+
width: 30%;
59+
@media screen and (max-width: 768px) {
60+
display: none;
61+
}
62+
}
63+
}
64+
65+
.logo-mascot {
66+
display: none;
67+
width: 20%;
68+
margin: 1.25rem 2rem;
69+
70+
@media screen and (max-width: 768px) {
71+
display: flex;
72+
@media screen and (max-width: 500px) {
73+
width: 50%;
74+
}
75+
}
76+
}
77+
78+
.navbar {
79+
position: fixed;
80+
display: flex;
81+
justify-content: space-between;
82+
align-items: center;
83+
color: #000;
84+
background-color: #ffffffcc;
85+
width: 100%;
86+
}
87+
88+
.navbar-left {
89+
font-size: 1.5rem;
90+
font-weight: bold;
91+
color: #000;
92+
text-decoration: none;
93+
}
94+
95+
.navbar-right .nav-links {
96+
margin: 0 1rem;
97+
list-style-type: none;
98+
display: flex;
99+
}
100+
101+
.navbar-right .nav-links li {
102+
padding: 0 1rem;
103+
}
104+
105+
.navbar-right .nav-links a {
106+
color: #000;
107+
text-decoration: none;
108+
display: inline-flex;
109+
align-items: center;
110+
}
111+
112+
.nav-links a:hover {
113+
color:#cf3c23
114+
}
115+
116+
.github-stars-badge {
117+
height: 28px;
118+
@media screen and (max-width: 768px) {
119+
align-content: center;
120+
height: 20px;
121+
}
122+
}
123+
16124
.viewport {
17125
width: 100vw;
18126
height: 100vh;
@@ -100,6 +208,49 @@
100208
}
101209
}
102210

211+
button:hover {
212+
background-color: #f7f7f7;
213+
}
214+
215+
button {
216+
align-items: center;
217+
border-radius: 15px;
218+
border: 1px solid transparent;
219+
margin: 12.5px 0;
220+
padding: 0.5rem 1rem;
221+
font-size: 1rem;
222+
font-weight: 500;
223+
font-family: inherit;
224+
background-color: white;
225+
color: black;
226+
cursor: pointer;
227+
transition: border-color 0.25s;
228+
}
229+
230+
button:not(.install-button, .copy-button) {
231+
display: flex;
232+
align-items: center;
233+
width: 70%;
234+
@media screen and (max-width: 500px) {
235+
padding: 0.3rem 0.75rem;
236+
font-size: 0.7rem;
237+
width: 100%;
238+
}
239+
}
240+
241+
button img {
242+
padding-left: 5%;
243+
}
244+
245+
button p {
246+
padding-left: 10%;
247+
}
248+
249+
ul {
250+
list-style: none;
251+
padding: 0;
252+
}
253+
103254
/* ----------------------------- Install Section ---------------------------- */
104255
.copy-button {
105256
align-content: center;
@@ -297,46 +448,11 @@
297448

298449
/* ------------------------------ Other Styles ------------------------------ */
299450

300-
button {
301-
align-items: center;
302-
border-radius: 15px;
303-
border: 1px solid transparent;
304-
margin: 12.5px 0;
305-
padding: 0.5rem 1rem;
306-
font-size: 1rem;
307-
font-weight: 500;
308-
font-family: inherit;
309-
background-color: white;
310-
color: black;
311-
cursor: pointer;
312-
transition: border-color 0.25s;
313-
}
314-
315-
button:not(.install-button, .copy-button) {
316-
display: flex;
317-
align-items: center;
318-
width: 70%;
319-
@media screen and (max-width: 500px) {
320-
padding: 0.3rem 0.75rem;
321-
font-size: 0.7rem;
322-
width: 100%;
323-
}
324-
}
325-
326-
button img {
327-
padding-left: 5%;
328-
}
329-
330-
button p {
331-
padding-left: 10%;
332-
}
333-
334-
ul {
335-
list-style: none;
336-
padding: 0;
337-
}
338-
339451
footer {
340452
padding: 25px;
341453
text-align: center;
342454
}
455+
456+
.footer-link:hover {
457+
text-decoration: underline;
458+
}

‎src/index.css

Lines changed: 0 additions & 40 deletions
This file was deleted.

‎src/main.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
import { StrictMode } from "react";
66
import { createRoot } from "react-dom/client";
7-
import "./index.css";
7+
import "./css/index.css";
88
import Nav from "./Nav.jsx";
99
import App from "./App.jsx";
1010

0 commit comments

Comments
 (0)