sites/abdullahtarawneh.com
1
Fork 0
Code Issues Pull requests Releases Wiki Activity

cleanup home page a bit

Browse source
This commit is contained in:
a 2022-07-04 02:39:32 -05:00
parent f790d6ee7c
commit b2ab793596
2 changed files with 34 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
assets/scss/content/index.scss
View file

@ -45,31 +45,34 @@
background: black;
color: white;
text-align: center;
> img {
.container {
display: flex;
flex-flow: column;
align-items: center;
}
.photo {
max-height: 100vh;
height: 100%;
max-width: 100%;
object-fit: contain;
object-position: center bottom;
}
> div {
.info {
display: flex;
flex-flow: column;
align-items: center;
}
div img {
.logo {
margin: 2rem 0;
}
display: flex;
flex-flow: column;
align-items: center;
@media (min-width: 40rem) {
> img {
.photo {
height: 20rem;
}
flex-flow: row-reverse;
justify-content: space-between;
max-width: 40rem;
.container {
flex-flow: row-reverse;
justify-content: space-between;
}
}
a {
color: white;
@ -86,5 +89,16 @@
#updates {
line-height: 1.5;
font-size: 1.25rem;
.heading {
font-size: 1.5em;
font-weight: 700;
margin-bottom: 1em;
}
p + p {
margin: 1em 0;
}
p {
max-width: 55ch;
}
}
}

17
layouts/index.html
View file

@ -32,17 +32,20 @@
</div>
</div>
</header>
<section class="container" id="birdsounds">
<div class="">
<img src="/images/logos/koken_y.png" alt="birdsounds.media logo">
<a href="https://birdsounds.media" class="">view my photos</a>
<section class="" id="birdsounds">
<div class="container">
<div class="info">
<img class="logo" src="/images/logos/koken_y.png" alt="birdsounds.media logo">
<a href="https://birdsounds.media" class="">view my photos</a>
</div>
<img class="photo" src="/images/soulpunx.jpg" alt="#soulpunx">
</div>
<img src="/images/soulpunx.jpg" alt="#soulpunx">
</section>
<section class="section" id="updates">
<div class="container">
<p>currently: working on my websites, trying to do some documentation for an untitled social app project, and looking for work. check out the "work" tab of this site for my elevator pitch.</p>
<h2 class="heading">latest updates</h2>
<p>2022-07-04: currently working on my websites, trying to do some documentation for a personal project, and looking for work. check out the "work" tab of this site for my elevator pitch.</p>
</div>
</section>
</main>
{{ end }}
{{ end }}