styiling bckplcs

master
ada 1 month ago
parent d0e2653715
commit bbfe4c0f39

@ -53,6 +53,8 @@ body {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding-left: 6rem; padding-left: 6rem;
padding-right: 2rem;
margin-top: -20px;
text-decoration: none; text-decoration: none;
} }
@ -203,6 +205,10 @@ body {
} }
.img-container {
padding: 0;
}
.photos img { .photos img {
margin: 20px; margin: 20px;
margin-top: 20px; margin-top: 20px;

@ -17,17 +17,17 @@ body {
position: absolute; position: absolute;
background-color: #f9b0c5; background-color: #f9b0c5;
color: #1E33FAff; color: #1E33FAff;
font-size: 20px; font-size: 1.4rem;
border: 1px solid #1E33FAff; border: 1px solid #1E33FAff;
border-radius: 5px; border-radius: 5px;
width: 300px; width: 360px;
height: 560px; height: 660px;
padding: 20px; padding: 30px;
transition: 0.25s; transition: 0.25s;
cursor: pointer; cursor: pointer;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
z-index: 0; z-index: 0;
/* margin-top: 150px; */ margin-top: 150px;
} }
.card.top { .card.top {
@ -69,20 +69,24 @@ body {
} }
.letterBox { .letterBox {
position: fixed;
font-size: 18px; font-size: 18px;
padding: 20px; padding: 20px;
margin: auto; margin: auto;
margin-top: 2rem; top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden; overflow: hidden;
background-color: #adc4f0; background-color: #adc4f0;
border: 1px solid #1E33FAff; border: 1px solid #1E33FA;
color: #1E33FAff; border-radius: 5px;
color: #1E33FA;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: right; justify-content: right;
max-width: 70%; max-width: 70%;
z-index: 1000; z-index: 9999;
} }
.letterContents { .letterContents {
@ -115,12 +119,13 @@ body {
font-size: 20px; font-size: 20px;
position: fixed; position: fixed;
padding: 25px; padding: 25px;
right: 5px; right: 20px;
top: 5px; top: 20px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
border: none; border: none;
background: transparent; background: transparent;
z-index: 9999;
} }
#mute-btn:hover { #mute-btn:hover {

@ -5,35 +5,51 @@
font-size: 18px; font-size: 18px;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.content { .content {
margin: 40px; margin: 1rem auto;
max-width: 1000px;
display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
max-width: 1000px;
position: relative;
}
.content-item {width: 100%;display: flex;flex-direction: column;} }
.content-item {
max-width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.content-item > * { .content-item > * {
width: 50%; max-width: 60%;
} }
.content-item:nth-child(odd) > * {align-self: flex-end;text-align: right;float: right;} .content-item:nth-child(odd) > * {
align-self: flex-end;
text-align: right;
float: right;
}
.content-item:nth-child(even) > * { .content-item:nth-child(even) > * {
align-self: flex-start; align-self: flex-start;
position: static; position: static;
right: 0; right: 0;
text-align: left; text-align: left;
} }
.content-item img { .content-item img {
height: auto; height: auto;
} }
.content-item p {margin: 10px 0;font-family: 'Redaction-Regular';line-height: 24px;font-size: 18px;/* width: 200px; */} .content-item p {
margin: 10px 0;
font-family: 'Redaction-Regular';
line-height: 2rem;
font-size: 1.5rem;
}
p::selection { p::selection {
color: #ee98b1; color: #ee98b1;
@ -43,7 +59,7 @@
position: relative; position: relative;
top: 40px; top: 40px;
left: 40px; left: 40px;
width: 100px; width: 130px;
height: auto; height: auto;
opacity: 1; opacity: 1;
} }
@ -65,7 +81,6 @@
justify-content: right; justify-content: right;
z-index: 1000; z-index: 1000;
margin: auto; margin: auto;
/* margin-top: 150px; */
} }
.letterContents { .letterContents {
@ -81,9 +96,9 @@
#about { #about {
position: relative; position: relative;
top: -30px; top: -44px;
left: 70px; left: 80px;
width: 80px; width: 100px;
height: auto; height: auto;
opacity: 1; opacity: 1;
} }
@ -99,8 +114,8 @@
font-size: 20px; font-size: 20px;
position: fixed; position: fixed;
padding: 25px; padding: 25px;
right: 5px; right: 20px;
top: 5px; top: 20px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
border: none; border: none;
@ -114,64 +129,77 @@
} }
@media only screen and (max-width: 767px) { @media only screen and (max-width: 767px) {
body { body {
font-size: 18px; font-size: 1rem;
} }
#about { #about {
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 40px; left: 40px;
width: 70px; width: 70px;
height: auto; height: auto;
z-index: 1000; z-index: 1000;
opacity: 1; opacity: 1;
} }
#home { #home {
position: absolute; position: absolute;
top: 20px; top: 20px;
left: 20px; left: 20px;
width: 70px; width: 70px;
height: auto; height: auto;
opacity: 1; opacity: 1;
} }
.content-item { .content-item {
width: 100%; font-size: 1rem;
line-height: 25px; width: 100%;
} line-height: 25px;
}
.content-item:first-of-type img { .content-item > * {
margin-top: 100px; width: 60%;
} }
.content-item:last-child { .content-item p {
margin-bottom: 200px; margin: 10px 0;
} font-family: 'Redaction-Regular';
line-height: 24px;
.content-item:nth-child(odd) { font-size: 1rem;
align-self: flex-end; width: 200px;
/* margin-left: 50px; */
text-align: right; .content-item:first-of-type img {
} margin-top: 100px;
.content-item:nth-child(even) { }
align-items: flex-start;
margin-right: 50px; .content-item:last-child {
} margin-bottom: 200px;
.letterBox { }
font-size: 16px;
padding: 18px; .content-item:nth-child(odd) {
max-width: 70%; align-self: flex-end;
border-radius: 10px; text-align: right;
overflow: hidden; }
border: 1px solid black;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); .content-item:nth-child(even) {
display: flex; align-items: flex-start;
flex-wrap: wrap; margin-right: 50px;
justify-content: right; }
z-index: 1000;
margin: auto; .letterBox {
margin-top: 110px; font-size: 16px;
} padding: 18px;
} max-width: 70%;
border-radius: 10px;
overflow: hidden;
border: 1px solid black;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
display: flex;
flex-wrap: wrap;
justify-content: right;
z-index: 1000;
margin: auto;
margin-top: 110px;
}
}
}

@ -14,8 +14,8 @@ body {
color: #e26d3f; color: #e26d3f;
position: fixed; position: fixed;
padding: 25px; padding: 25px;
right: 5px; right: 20px;
top: 5px; top: 20px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
border: none; border: none;

Loading…
Cancel
Save