101 lines
2.0 KiB
SCSS
101 lines
2.0 KiB
SCSS
@use "vars" as *;
|
|
|
|
.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');
|
|
}
|
|
|
|
.content {
|
|
text-align: left;
|
|
margin-left: -30rem;
|
|
|
|
.portrait {
|
|
text-align: right;
|
|
margin-top: 0;
|
|
margin-right: -25rem;
|
|
|
|
img {
|
|
width: 350px;
|
|
height: 350px;
|
|
object-fit: cover;
|
|
border-radius: 50%;
|
|
box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
font-size: 4rem;
|
|
margin: -6rem 0 1rem;
|
|
color: #5488bf;
|
|
text-shadow: 0 0 9px #373737;
|
|
|
|
.myname {
|
|
font-style: normal;
|
|
color: $text-color;
|
|
}
|
|
}
|
|
|
|
.tagline {
|
|
font-size: 1.7rem;
|
|
text-align: left;
|
|
|
|
.tagline-item {
|
|
display: inline;
|
|
margin-right: 0.7ch;
|
|
|
|
.cursor {
|
|
display: inline-block;
|
|
animation: blink 1s steps(2, start) infinite;
|
|
margin-left: 0.2ch;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.content {
|
|
margin: 0;
|
|
|
|
.portrait {
|
|
text-align: center;
|
|
margin: 0;
|
|
|
|
img {
|
|
width: 200px;
|
|
height: 200px;
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
text-align: left;
|
|
margin: 0 0 1ch 1.5rem;
|
|
font-size: 2.7rem;
|
|
}
|
|
|
|
.tagline {
|
|
display: block;
|
|
margin-left: 1.5rem;
|
|
|
|
.tagline-item {
|
|
display: block;
|
|
margin-bottom: 0.3rem;
|
|
}
|
|
|
|
.tagline-item:last-child {
|
|
margin-bottom: 0;
|
|
.cursor {
|
|
margin-left: 0.4ch;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Blinking cursor animation
|
|
@keyframes blink {
|
|
0%, 100% { color: #fff0; }
|
|
50% { color: #fff; }
|
|
} |