Difference between revisions of "Shirley.css"
Jump to navigation
Jump to search
m |
m |
||
| (15 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
| + | #borderdiv { | ||
| + | width: calc( 100vw - 250px); | ||
| + | height: 70vh; | ||
| + | padding: 5px 0px 0px 0px; | ||
| + | border-radius: 38px; | ||
| + | background: linear-gradient(to bottom, #888888, #dddddd); | ||
| + | box-shadow: 0px -5px 30px #000; | ||
| + | } | ||
| + | |||
#shirleydiv { | #shirleydiv { | ||
| − | width: | + | width: calc( 100vw - 270px); |
| − | height: 70vh; | + | height: calc(70vh - 20px); |
| − | background- | + | background: linear-gradient(10deg, #fa5, #fe9); |
border-radius: 30px; | border-radius: 30px; | ||
| − | + | margin: auto; | |
} | } | ||
#artuslogo { | #artuslogo { | ||
| Line 57: | Line 66: | ||
display: block; | display: block; | ||
color: #ffffff; | color: #ffffff; | ||
| − | text-shadow: 1px 1px 4px # | + | text-shadow: 1px 0px 4px #444, -1px 0px 4px #444, 0px 1px 1px #444, 0px -1px 4px #444, 1px -3px 10px #444; |
font-weight: bold; | font-weight: bold; | ||
font-family: "courier new"; | font-family: "courier new"; | ||
| Line 82: | Line 91: | ||
height: auto; | height: auto; | ||
max-height: 70vh; | max-height: 70vh; | ||
| − | right: | + | right: -20px; |
bottom: 0px; | bottom: 0px; | ||
position: absolute; | position: absolute; | ||
| Line 90: | Line 99: | ||
#quote1 { | #quote1 { | ||
max-width: 55vw; | max-width: 55vw; | ||
| + | } | ||
| + | #quote2 { | ||
| + | max-width: 50vw; | ||
| + | } | ||
| + | #quote2 { | ||
| + | max-width: 45vw; | ||
| + | } | ||
| + | #quote2 { | ||
| + | max-width: 40vw; | ||
} | } | ||
img.theshirley { | img.theshirley { | ||
| Line 96: | Line 114: | ||
} | } | ||
| − | @media (max-aspect-ratio: | + | @media (max-aspect-ratio: 1 / 2 ) { |
#quote1 { | #quote1 { | ||
| + | max-width: 60vw; | ||
| + | } | ||
| + | #quote2 { | ||
max-width: 55vw; | max-width: 55vw; | ||
| + | } | ||
| + | #quote2 { | ||
| + | max-width: 50vw; | ||
| + | } | ||
| + | #quote2 { | ||
| + | max-width: 45vw; | ||
} | } | ||
img.theshirley { | img.theshirley { | ||
| Line 105: | Line 132: | ||
} | } | ||
| − | @media (max-aspect-ratio: | + | @media (max-aspect-ratio: 1 / 3 ) { |
#quote1 { | #quote1 { | ||
max-width: 65vw; | max-width: 65vw; | ||
| + | } | ||
| + | #quote2 { | ||
| + | max-width: 60vw; | ||
| + | } | ||
| + | #quote2 { | ||
| + | max-width: 55vw; | ||
| + | } | ||
| + | #quote2 { | ||
| + | max-width: 50vw; | ||
} | } | ||
img.theshirley { | img.theshirley { | ||
Latest revision as of 10:11, 5 October 2025
- borderdiv {
width: calc( 100vw - 250px); height: 70vh; padding: 5px 0px 0px 0px; border-radius: 38px; background: linear-gradient(to bottom, #888888, #dddddd); box-shadow: 0px -5px 30px #000;
}
- shirleydiv {
width: calc( 100vw - 270px); height: calc(70vh - 20px); background: linear-gradient(10deg, #fa5, #fe9); border-radius: 30px; margin: auto;
}
- artuslogo {
position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} img.artuslogo2 {
width: auto; max-height: 60vh;
}
- quote1 {
top: 3vh; left: 2vw; position: relative; max-width: 45vw;
}
- quote2 {
top: 7vh; left: 2vw; position: relative; max-width: 40vw;
}
- quote3 {
top: 11vh; left: 2vw; position: relative; max-width: 35vw;
}
- quote4 {
top: 15vh; left: 2vw; position: relative; max-width: 30vw;
}
- quote5 {
top: 19vh; left: 2vw; position: relative; max-width: 25vw;
}
.news {
font-size: 0.75vw; line-height: 3vh; display: block; color: #ffffff; text-shadow: 1px 0px 4px #444, -1px 0px 4px #444, 0px 1px 1px #444, 0px -1px 4px #444, 1px -3px 10px #444; font-weight: bold; font-family: "courier new";
}
@media (max-aspect-ratio: 3 / 1) {
.news {
font-size: 1vw;
line-height: 2.75vh;
}
} @media (max-aspect-ratio: 2 / 1) {
.news {
font-size: 1.25vw;
line-height: 2.75vh;
}
}
img.theshirley {
width: auto; height: auto; max-height: 70vh; right: -20px; bottom: 0px; position: absolute;
}
@media (max-aspect-ratio: 1 / 1 ) {
#quote1 {
max-width: 55vw;
}
#quote2 {
max-width: 50vw;
}
#quote2 {
max-width: 45vw;
}
#quote2 {
max-width: 40vw;
}
img.theshirley {
right: -50px;
}
}
@media (max-aspect-ratio: 1 / 2 ) {
#quote1 {
max-width: 60vw;
}
#quote2 {
max-width: 55vw;
}
#quote2 {
max-width: 50vw;
}
#quote2 {
max-width: 45vw;
}
img.theshirley {
right: -10px;
}
}
@media (max-aspect-ratio: 1 / 3 ) {
#quote1 {
max-width: 65vw;
}
#quote2 {
max-width: 60vw;
}
#quote2 {
max-width: 55vw;
}
#quote2 {
max-width: 50vw;
}
img.theshirley {
right: -150px;
}
}