oliverbooth/oliverbooth.dev
oliverbooth/oliverbooth.dev
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

style: reduce in-your-face-ness of headshot photo

Browse Source
This commit is contained in:
Oliver Booth 2024-02-27 13:01:10 +00:00
parent d655b46db5
commit f1f711fa1f
Signed by: oliverbooth
GPG Key ID: E60B570D1B7557B5
2 changed files with 40 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
OliverBooth/Pages/Index.cshtml
View File

@ -1,12 +1,15 @@
@page @page
<main class="container"> <main class="container">
<h1 class="display-4">Hi, I'm Oliver.</h1> <div class="row align-items-center mb-3">
<p class="lead">I'm a tech enthusiast, coffee drinker, and software developer.</p> <div id="landing-page-intro" class="col-sm-12 col-md-6">
<h1 class="display-4">Hi, I'm Oliver.</h1>
<p class="text-center"> <p class="lead">I'm a tech enthusiast, coffee drinker, and software developer.</p>
<img src="~/img/headshot_512x512_2023.jpg" style="width: 512px; max-width: 100%;"> </div>
</p> <div id="landing-page-headshot" class="col-sm-12 col-md-6 justify-content-right">
<img src="~/img/headshot_512x512_2023.jpg" class="rounded-circle" style="width: 50%; max-width: 512px;" alt="Headshot">
</div>
</div>
<p> <p>
My primary focus is C#, though I have dabbled in several other languages such as Java, Kotlin, VB, C/C++, My primary focus is C#, though I have dabbled in several other languages such as Java, Kotlin, VB, C/C++,

34
src/scss/app.scss
View File

@ -367,6 +367,7 @@ td.trim-p p:last-child {
background-size: cover; background-size: cover;
border-radius: 10px; border-radius: 10px;
cursor: pointer; cursor: pointer;
* { * {
cursor: pointer; cursor: pointer;
} }
@ -384,6 +385,7 @@ td.trim-p p:last-child {
&:first-child { &:first-child {
border-left: none; border-left: none;
} }
&:last-child { &:last-child {
border-right: none; border-right: none;
} }
@ -392,7 +394,7 @@ td.trim-p p:last-child {
.post-tags a.badge { .post-tags a.badge {
transition: color 250ms, background-color 250ms; transition: color 250ms, background-color 250ms;
&:link, &:visited, &:active { &:link, &:visited, &:active {
background-color: #2D2D2D !important; background-color: #2D2D2D !important;
color: #fff; color: #fff;
@ -407,12 +409,38 @@ td.trim-p p:last-child {
.mastodon-update-card.card { .mastodon-update-card.card {
background-color: desaturate(darken(#6364FF, 50%), 50%); background-color: desaturate(darken(#6364FF, 50%), 50%);
margin-bottom: 50px; margin-bottom: 50px;
p:last-child { p:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
button.btn.btn-mastodon { button.btn.btn-mastodon {
background-color: #6364FF; background-color: #6364FF;
} }
}
#landing-page-intro {
text-align: left;
}
#landing-page-headshot {
text-align: right;
img {
transition: border-radius .4s;
&:hover {
border-radius: 5px !important;
}
}
}
@media (max-width: 768px) {
#landing-page-intro {
text-align: center;
}
#landing-page-headshot {
text-align: center;
}
} }