Skip to content

Commit c58be6a

Browse files
ctrl-victrl-vi
committed
Improve compatibility with mobile
1 parent f3e543b commit c58be6a

16 files changed

Lines changed: 196 additions & 190 deletions

‎src/components/Footer.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ footer {
77
background-color:#7213ad;
88
width: 100%;
99
padding: 0.5em;
10+
box-shadow: 0em 1em 2em black;
1011
}
1112

1213
footer p {

‎src/components/Header.astro‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,21 @@
55
<style>
66
.header {
77
background-color: #7213ad;
8-
padding: 20px;
8+
padding-top: 1em;
9+
padding-bottom: 0.5em;
910
width: 100%;
11+
box-sizing: border-box;
1012
height: auto;
13+
box-shadow: 0em 2em 2em black;
14+
display: flex;
15+
justify-content: center;
1116
}
1217
img {
1318
width: 5em;
14-
height: auto;
15-
display: block;
16-
margin: auto;
1719
background-color: #7213ad;
1820
}
1921
</style>
2022
<div class="header">
21-
<img src="/favicon.svg" alt="Personal logo." />
23+
<a href="/"><img src="/favicon.svg" alt="Personal logo." /></a>
2224
</div>
2325
<!-- TODO: WRITE PROPER ALT TEXT, REPLACE WITH PROPER HEADER -->

‎src/components/Layout.astro‎

Lines changed: 30 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,39 @@
11
---
2-
import Header from './Header.astro';
3-
import Footer from './Footer.astro';
4-
import Navigation from './Navigation.astro';
5-
import './Layout.css';
2+
import Header from "./Header.astro";
3+
import Footer from "./Footer.astro";
4+
import Navigation from "./Navigation.astro";
5+
import "./Layout.css";
66
7-
const {pageTitle} = Astro.props;
7+
const { pageTitle } = Astro.props;
88
---
9-
<style>
109

10+
<html lang="en">
11+
<style>
12+
.content {
13+
flex: 1 0 auto;
14+
}
15+
</style>
1116

12-
.content {
13-
flex: 1 0 auto;
14-
15-
}
16-
</style>
17-
<head>
1817
<meta charset="utf-8" />
19-
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
20-
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
21-
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
22-
<link rel="manifest" href="/site.webmanifest">
23-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
18+
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
19+
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
20+
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
21+
<link rel="manifest" href="/site.webmanifest" />
22+
<link
23+
rel="stylesheet"
24+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
25+
/>
2426
<meta name="viewport" content="width=device-width" />
2527
<meta name="generator" content={Astro.generator} />
2628
<title>{pageTitle}</title>
27-
</head>
28-
<body>
29-
<Header />
30-
<Navigation />
31-
<div class="content">
32-
<slot /> <!-- This is where the page-specific content will go -->
33-
</div>
34-
<Footer class="footer"/>
35-
</body>
29+
30+
<body>
31+
<Header />
32+
<Navigation />
33+
<div class="content">
34+
<slot />
35+
<!-- This is where the page-specific content will go -->
36+
</div>
37+
<Footer class="footer" />
38+
</body>
39+
</html>

‎src/components/MarkdownProjectLayout.astro‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
import Layout from "./Layout.astro";
3+
4+
const { frontmatter } = Astro.props;
5+
---
6+
<Layout pageTitle={frontmatter.title}>
7+
<h1>{frontmatter.title}</h1>
8+
<p>{frontmatter.pubDate.toString().slice(0,10)}</p>
9+
<p><em>{frontmatter.description}</em></p>
10+
<p>Written by: {frontmatter.author}</p>
11+
<img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
12+
<slot />
13+
14+
</Layout>

‎src/components/NavDropdown.astro‎

Lines changed: 7 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,16 @@
11
---
2-
const { title, link } = Astro.props;
3-
---
4-
5-
<style>
6-
/* Navbar container */
7-
.navbar {
8-
overflow: hidden;
9-
background-color: #333;
10-
font-family: Arial;
11-
}
12-
13-
/* Links inside the navbar */
14-
.navbar a {
15-
float: left;
16-
font-size: 16px;
17-
color: white;
18-
text-align: center;
19-
padding: 14px 16px;
20-
text-decoration: none;
21-
}
22-
23-
/* The dropdown container */
24-
.dropdown {
25-
float: left;
26-
overflow: hidden;
27-
}
28-
29-
/* Dropdown button */
30-
.dropdown .dropbtn {
31-
font-size: 16px;
32-
border: none;
33-
outline: none;
34-
color: white;
35-
padding: 14px 16px;
36-
background-color: inherit;
37-
font-family: inherit; /* Important for vertical align on mobile phones */
38-
margin: 0; /* Important for vertical align on mobile phones */
39-
}
2+
import "./NavDropdown.css";
3+
import "./Navlink.css";
404
41-
/* Add a red background color to navbar links on hover */
42-
.navbar a:hover,
43-
.dropdown:hover .dropbtn {
44-
background-color: red;
45-
}
46-
47-
/* Dropdown content (hidden by default) */
48-
.dropdown-content {
49-
display: none;
50-
position: absolute;
51-
background-color: #f9f9f9;
52-
min-width: 160px;
53-
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
54-
z-index: 1;
55-
}
56-
57-
/* Links inside the dropdown */
58-
.dropdown-content a {
59-
float: none;
60-
color: black;
61-
padding: 12px 16px;
62-
text-decoration: none;
63-
display: block;
64-
text-align: left;
65-
}
66-
67-
/* Add a grey background color to dropdown links on hover */
68-
.dropdown-content a:hover {
69-
background-color: #ddd;
70-
}
5+
const { title, link } = Astro.props;
716
72-
/* Show the dropdown menu on hover */
73-
.dropdown:hover .dropdown-content {
74-
display: block;
75-
}
76-
</style>
7+
---
778

78-
<li>
9+
<li class="link">
7910
<div class="dropdown">
80-
<a href={link}>{title} <i class="fa fa-caret-down"></i></a>
11+
<a href={link}>{title} ▾</a>
8112
<div class="dropdown-content">
82-
<slot></slot>
13+
<slot />
8314
</div>
8415
</div>
8516
</li>

‎src/components/NavDropdown.css‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/* Dropdown container */
2+
.dropdown {
3+
position: relative; /* Ensure dropdown-content is positioned relative to this container */
4+
}
5+
6+
/* Dropdown content (hidden by default) */
7+
.dropdown-content {
8+
display: none;
9+
position: absolute;
10+
background-color: #f9f9f9;
11+
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
12+
z-index: 1;
13+
left: 0;
14+
width: 100%;
15+
box-sizing: border-box;
16+
}
17+
18+
/* Links inside the dropdown */
19+
.dropdown-content a {
20+
float: none;
21+
color: black;
22+
padding: 12px 16px;
23+
text-decoration: none;
24+
display: block;
25+
text-align: left;
26+
text-wrap: break-word;
27+
}
28+
29+
/* Add a grey background color to dropdown links on hover */
30+
.dropdown-content a:hover {
31+
background-color: #ddd;
32+
}
33+
34+
/* Show the dropdown menu on hover */
35+
.dropdown:hover .dropdown-content {
36+
display: block;
37+
}

‎src/components/Navigation.astro‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,11 @@ import "./Navigation.css";
88
<Navlink title="Home" link="/"/>
99
<Navlink title="About" link="/about"/>
1010
<Navlink title="Projects" link="/projects"/>
11+
<Navlink title="Resume" link="/resume"/>
1112
<Navlink title="Blog" link="/blog"/>
1213
<NavDropdown title="Contact" link="/contact">
13-
<a href="mailto:violetmonserate@gmail.com">Send an Email</a>
14-
<a href="tel:425-970-5779">Call</a>
14+
<a href="mailto:violetmonserate@gmail.com">Email</a>
15+
<a href="tel:425-970-5779">Phone</a>
1516
<a href="https://www.linkedin.com/in/violet-monserate/">Linkedin</a>
1617
</NavDropdown>
1718
</ul></nav>

‎src/components/Navigation.css‎

Lines changed: 3 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,27 +5,8 @@ nav {
55
nav > ul {
66
list-style-type: none;
77
margin: 0;
8-
padding-left: 1em;
8+
padding-left: 0.5em;
9+
padding-right: 0.5em;
910
overflow: visible;
1011
background-color: #7213ad;
11-
}
12-
13-
nav > ul > li {
14-
float: left;
15-
}
16-
17-
nav > ul > li a {
18-
display: block;
19-
color: black;
20-
text-align: center;
21-
padding: 14px 16px;
22-
text-decoration: none;
23-
}
24-
25-
nav > ul > li > a, nav > ul > li > div > a {
26-
color: white;
27-
}
28-
29-
nav > ul > li a:hover {
30-
background-color: #b236ff;
31-
}
12+
}

‎src/components/Navlink.astro‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
---
2-
const {title, link} = Astro.props;
2+
import "./Navlink.css";
3+
4+
const { title, link } = Astro.props;
35
---
4-
<li>
5-
<a href={link}>{title}</a>
6-
</li>
6+
7+
<li class="link">
8+
<a href={link}>{title}</a>
9+
</li>

‎src/components/Navlink.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.link {
2+
float: left;
3+
4+
}
5+
6+
.link a {
7+
display: block;
8+
color: white;
9+
text-align: center;
10+
padding: 14px 16px;
11+
text-decoration: none;
12+
height: 100%;
13+
line-height: 1em;
14+
}
15+
16+
.link a:hover,
17+
.dropdown:hover {
18+
background-color: #b236ff;
19+
}

0 commit comments

Comments
 (0)