Modularize SCSS
Divide `about.scss` to smaller modules
This commit is contained in:
parent
56f69c01d6
commit
3d8eb13cc7
@ -45,17 +45,6 @@ main {
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.intro .content h1 {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
text-shadow: 0px 0px 9px #373737;
|
||||
color: #5488bf;
|
||||
}
|
||||
.intro .content h1 .myname {
|
||||
font-style: normal;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
@ -83,25 +72,25 @@ footer {
|
||||
.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");
|
||||
}
|
||||
.section1 .portrait {
|
||||
.section1 .content {
|
||||
text-align: left;
|
||||
margin-left: -30rem;
|
||||
}
|
||||
.section1 .content .portrait {
|
||||
text-align: right;
|
||||
margin-top: 0;
|
||||
margin-right: -25rem;
|
||||
}
|
||||
.section1 .portrait img {
|
||||
.section1 .content .portrait img {
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
.section1 .content {
|
||||
text-align: left;
|
||||
margin-left: -30rem;
|
||||
}
|
||||
.section1 .content h1 {
|
||||
font-size: 4rem;
|
||||
margin: -5rem 0 1rem;
|
||||
margin: -6rem 0 1rem;
|
||||
color: #5488bf;
|
||||
text-shadow: 0 0 9px #373737;
|
||||
}
|
||||
@ -117,7 +106,7 @@ footer {
|
||||
display: inline;
|
||||
margin-right: 0.7ch;
|
||||
}
|
||||
.section1 .content .tagline .cursor {
|
||||
.section1 .content .tagline .tagline-item .cursor {
|
||||
display: inline-block;
|
||||
animation: blink 1s steps(2, start) infinite;
|
||||
margin-left: 0.2ch;
|
||||
@ -150,7 +139,7 @@ footer {
|
||||
.section1 .content .tagline .tagline-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.section1 .content .tagline .cursor {
|
||||
.section1 .content .tagline .tagline-item:last-child .cursor {
|
||||
margin-left: 0.4ch;
|
||||
}
|
||||
}
|
||||
|
||||
190
scss/about.scss
190
scss/about.scss
@ -1,191 +1,5 @@
|
||||
// styles.scss
|
||||
|
||||
$font-stack: sans-serif;
|
||||
$background:#232323;
|
||||
$text-color: #fff;
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
scroll-behavior: smooth;
|
||||
height: 100%;
|
||||
font-family: $font-stack;
|
||||
background: $background;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
main {
|
||||
scroll-snap-type: y mandatory;
|
||||
overflow-y: scroll;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.section {
|
||||
scroll-snap-align: start;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
filter: blur(5px);
|
||||
opacity: 0.2;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
max-width: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
.intro .content h1 {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
text-shadow: 0px 0px 9px #373737;
|
||||
color: #5488bf;
|
||||
|
||||
.myname {
|
||||
font-style: normal;
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: auto;
|
||||
padding: 1rem;
|
||||
font-size: 0.875rem;
|
||||
text-align: center;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
// 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');
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
text-align: left;
|
||||
margin-left: -30rem;
|
||||
|
||||
h1 {
|
||||
font-size: 4rem;
|
||||
margin: -5rem 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; }
|
||||
}
|
||||
|
||||
|
||||
@use "about/base";
|
||||
@use "about/section1";
|
||||
|
||||
.section2 {
|
||||
&::before {
|
||||
|
||||
69
scss/about/_base.scss
Normal file
69
scss/about/_base.scss
Normal file
@ -0,0 +1,69 @@
|
||||
@use "vars" as *;
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
scroll-behavior: smooth;
|
||||
height: 100%;
|
||||
font-family: $font-stack;
|
||||
background: $background;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
main {
|
||||
scroll-snap-type: y mandatory;
|
||||
overflow-y: scroll;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.section {
|
||||
scroll-snap-align: start;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
filter: blur(5px);
|
||||
opacity: 0.2;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
max-width: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: auto;
|
||||
padding: 1rem;
|
||||
font-size: 0.875rem;
|
||||
text-align: center;
|
||||
opacity: 0.5;
|
||||
}
|
||||
101
scss/about/_section1.scss
Normal file
101
scss/about/_section1.scss
Normal file
@ -0,0 +1,101 @@
|
||||
@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; }
|
||||
}
|
||||
3
scss/about/_vars.scss
Normal file
3
scss/about/_vars.scss
Normal file
@ -0,0 +1,3 @@
|
||||
$font-stack: sans-serif;
|
||||
$background:#232323;
|
||||
$text-color: #fff;
|
||||
Loading…
x
Reference in New Issue
Block a user