michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

improve mobile layout

Browse source
This commit is contained in:
Dan Jutan 2022-09-02 17:04:06 -04:00
parent 15f14711a6
commit cb3209958d
2 changed files with 52 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
examples/portfolio/src/components/Nav.astro
View file

@ -4,6 +4,7 @@
</a>
<a class="link" href="/projects"> Portfolio</a>
<a class="link" href="/about"> About</a>
<div class="socials">
<a class="social" href="https://twitter.com/me">
<svg class="socialIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path
@ -34,22 +35,20 @@
></path>
</svg>
</a>
</div>
</nav>
<style>
nav {
display: flex;
gap: 1rem;
align-items: center;
padding-top: 1rem;
padding-right: 2rem;
padding-bottom: 1rem;
padding-left: 2rem;
padding: 1rem;
}
.link {
color: var(--t-subdue);
display: block;
margin-left: 1rem;
text-decoration: none;
font-size: var(--f-d1);
text-transform: uppercase;
@ -76,13 +75,14 @@
border-radius: 50%;
}
.social {
display: block;
.socials {
display: flex;
gap: 0.75em;
margin-left: auto;
}
.social + .social {
margin-left: 0.75rem;
.social {
display: block;
}
.socialIcon {

22
examples/portfolio/src/pages/index.astro
View file

@ -83,7 +83,7 @@ const featuredProject = projects[0];
.title {
font-weight: 900;
font-size: var(--f-u8);
font-size: var(--f-u6);
margin-bottom: 0.5rem;
margin-top: 0;
}
@ -112,9 +112,17 @@ const featuredProject = projects[0];
margin-bottom: 2rem;
}
.roles {
display: flex;
flex-wrap: wrap;
gap: 0.5em;
font-size: var(--f-d1);
}
.role {
position: relative;
display: inline-block;
white-space: nowrap;
font-weight: 900;
color: var(--t-bg);
background-color: var(--t-fg);
@ -122,10 +130,6 @@ const featuredProject = projects[0];
z-index: 2;
}
.role + .role {
margin-left: 1em;
}
@media (min-width: 750px) {
.role {
font-size: var(--f-u3);
@ -164,7 +168,7 @@ const featuredProject = projects[0];
}
.desc {
font-size: var(--f-u2);
font-size: var(--f-u1);
margin-top: 1.5rem;
margin-bottom: 0;
}
@ -212,9 +216,9 @@ const featuredProject = projects[0];
<h1 class="title">
<small class="subtitle">The personal site of</small>Jeanine White
</h1>
<div>
<span class="role">👩‍💻 Developer <span class="invert">👩‍💻 Developer</span></span>&nbsp;
<span class="role">🎤 Speaker <span class="invert">🎤 Speaker</span></span>&nbsp;
<div class="roles">
<span class="role">👩‍💻 Developer <span class="invert">👩‍💻 Developer</span></span>
<span class="role">🎤 Speaker <span class="invert">🎤 Speaker</span></span>
<span class="role">✏️ Writer <span class="invert">✏️ Writer</span></span>
</div>
<p class="desc">Lover of dogs, roadtrips, and poetry.</p>