Cleanup code
Remove redundant verbosity Keep same layout Fix html classes
This commit is contained in:
parent
b3d6a2d202
commit
56f69c01d6
@ -77,6 +77,9 @@ footer {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.section1 {
|
||||
padding: 1rem;
|
||||
}
|
||||
.section1::before {
|
||||
background-image: url("https://static.vecteezy.com/system/resources/thumbnails/013/384/142/small_2x/fabric-texture-abstract-pattern-black-and-white-textiles-backgrounds-photo.jpg");
|
||||
}
|
||||
@ -98,8 +101,7 @@ footer {
|
||||
}
|
||||
.section1 .content h1 {
|
||||
font-size: 4rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-top: -5rem;
|
||||
margin: -5rem 0 1rem;
|
||||
color: #5488bf;
|
||||
text-shadow: 0 0 9px #373737;
|
||||
}
|
||||
@ -131,15 +133,10 @@ footer {
|
||||
.section1 .content .portrait img {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
margin: 0;
|
||||
}
|
||||
.section1 .content h1 {
|
||||
text-align: left;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1ch;
|
||||
margin-left: 1.5rem;
|
||||
margin: 0 0 1ch 1.5rem;
|
||||
font-size: 2.7rem;
|
||||
}
|
||||
.section1 .content .tagline {
|
||||
|
@ -16,10 +16,10 @@
|
||||
<h1>
|
||||
Hello, I'm <span class="myname">[My Name]</span>
|
||||
</h1>
|
||||
<p>
|
||||
<span class="tagline">Code Wizard. </span>
|
||||
<span class="tagline">Terminal Fanatic. </span>
|
||||
<span class="tagline">Amateur Artist. <span class="cursor">_</span></span>
|
||||
<p class="tagline">
|
||||
<span class="tagline-item">Code Wizard.</span>
|
||||
<span class="tagline-item">Terminal Fanatic.</span>
|
||||
<span class="tagline-item">Amateur Artist.<span class="cursor">_</span></span>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
@ -85,6 +85,8 @@ footer {
|
||||
|
||||
// Example background images per section
|
||||
.section1 {
|
||||
padding: 1rem;
|
||||
|
||||
&::before {
|
||||
background-image: url('https://static.vecteezy.com/system/resources/thumbnails/013/384/142/small_2x/fabric-texture-abstract-pattern-black-and-white-textiles-backgrounds-photo.jpg');
|
||||
}
|
||||
@ -99,7 +101,6 @@ footer {
|
||||
height: 350px;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
//border: 3px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
}
|
||||
@ -107,10 +108,10 @@ footer {
|
||||
.content {
|
||||
text-align: left;
|
||||
margin-left: -30rem;
|
||||
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-top: -5rem;
|
||||
margin: -5rem 0 1rem;
|
||||
color: #5488bf;
|
||||
text-shadow: 0 0 9px #373737;
|
||||
|
||||
@ -122,7 +123,6 @@ footer {
|
||||
|
||||
.tagline {
|
||||
font-size: 1.7rem;
|
||||
//color: #ccc;
|
||||
text-align: left;
|
||||
|
||||
.tagline-item {
|
||||
@ -141,6 +141,7 @@ footer {
|
||||
@media (max-width: 600px) {
|
||||
.content {
|
||||
margin: 0;
|
||||
|
||||
.portrait {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
@ -148,40 +149,33 @@ footer {
|
||||
img {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
margin: 0;
|
||||
//border: 3px solid rgba(255, 255, 255, 0.3);
|
||||
//box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: left;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1ch;
|
||||
margin-left: 1.5rem;
|
||||
font-size: 2.7rem;
|
||||
margin: 0 0 1ch 1.5rem;
|
||||
font-size: 2.7rem;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
display: block;
|
||||
display: block;
|
||||
margin-left: 1.5rem;
|
||||
|
||||
.tagline-item {
|
||||
display: block;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.tagline-item {
|
||||
display: block;
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.tagline-item:last-child {
|
||||
margin-bottom: 0; // remove extra space after last line
|
||||
}
|
||||
.tagline-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.cursor {
|
||||
margin-left: 0.4ch; // keep close to text
|
||||
.cursor {
|
||||
margin-left: 0.4ch;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -192,6 +186,7 @@ footer {
|
||||
}
|
||||
|
||||
|
||||
|
||||
.section2 {
|
||||
&::before {
|
||||
background-image: url('https://wallpapers.com/images/hd/integral-project-management-cover-erpo8ef1af3wuquu.jpg');
|
||||
|
Loading…
x
Reference in New Issue
Block a user