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

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

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