fix mobile view
This commit is contained in:
Ruben
parent
5b974fef61
commit
6c3a074605
1 changed files with 71 additions and 268 deletions
339
style.css
339
style.css
|
|
@ -619,76 +619,6 @@ footer > .dot {
|
|||
}
|
||||
/* -- end of styling the rest of the elements -- */
|
||||
|
||||
/* -- shrink cards if screen is small -- */
|
||||
@media screen and (max-width: 1000px) {
|
||||
.main {
|
||||
width: 100%;
|
||||
max-width: 90%;
|
||||
transform: translate(6%, 0%);
|
||||
margin-left: unset;
|
||||
margin-right: unset;
|
||||
}
|
||||
|
||||
.intro-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.pfp, .pixel-corners--wrapper {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.pixel-corners--wrapper {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.fedi, .messaging, .platforms, .misc {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.messaging {
|
||||
margin-left: unset;
|
||||
}
|
||||
|
||||
.fedi > .dot, .messaging > .dot, .platforms > .dot, .misc > .dot {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.quotes {
|
||||
grid-template-columns: unset;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.quote > small::before {
|
||||
padding-left: unset;
|
||||
}
|
||||
|
||||
.buttons-img:first-child, .buttons-img:nth-child(2), .buttons-img:nth-child(4), .buttons-img {
|
||||
display: flow-root;
|
||||
margin: 1em 0px 1px 0px;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
footer {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer > p, footer > a, footer > p > a {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
footer > .dot {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
/* -- yea -- */
|
||||
|
||||
/* -- the entire css repasted for light theme enjoyers -- */
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
|
|
@ -705,203 +635,6 @@ footer > .dot {
|
|||
html {
|
||||
background: var(--page-bg);
|
||||
}
|
||||
|
||||
/* -- pixelated border radius -- */
|
||||
.pixel-corners,
|
||||
.pixel-corners--wrapper {
|
||||
clip-path: polygon(0px calc(100% - 28px),
|
||||
4px calc(100% - 28px),
|
||||
4px calc(100% - 20px),
|
||||
8px calc(100% - 20px),
|
||||
8px calc(100% - 12px),
|
||||
12px calc(100% - 12px),
|
||||
12px calc(100% - 8px),
|
||||
20px calc(100% - 8px),
|
||||
20px calc(100% - 4px),
|
||||
28px calc(100% - 4px),
|
||||
28px 100%,
|
||||
calc(100% - 28px) 100%,
|
||||
calc(100% - 28px) calc(100% - 4px),
|
||||
calc(100% - 20px) calc(100% - 4px),
|
||||
calc(100% - 20px) calc(100% - 8px),
|
||||
calc(100% - 12px) calc(100% - 8px),
|
||||
calc(100% - 12px) calc(100% - 12px),
|
||||
calc(100% - 8px) calc(100% - 12px),
|
||||
calc(100% - 8px) calc(100% - 20px),
|
||||
calc(100% - 4px) calc(100% - 20px),
|
||||
calc(100% - 4px) calc(100% - 28px),
|
||||
100% calc(100% - 28px),
|
||||
100% 28px,
|
||||
calc(100% - 4px) 28px,
|
||||
calc(100% - 4px) 20px,
|
||||
calc(100% - 8px) 20px,
|
||||
calc(100% - 8px) 12px,
|
||||
calc(100% - 12px) 12px,
|
||||
calc(100% - 12px) 8px,
|
||||
calc(100% - 20px) 8px,
|
||||
calc(100% - 20px) 4px,
|
||||
calc(100% - 28px) 4px,
|
||||
calc(100% - 28px) 0px,
|
||||
28px 0px,
|
||||
28px 4px,
|
||||
20px 4px,
|
||||
20px 8px,
|
||||
12px 8px,
|
||||
12px 12px,
|
||||
8px 12px,
|
||||
8px 20px,
|
||||
4px 20px,
|
||||
4px 28px,
|
||||
0px 28px);
|
||||
position: relative;
|
||||
}
|
||||
.pixel-corners {
|
||||
border: 4px solid transparent;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.pixel-corners--wrapper {
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
}
|
||||
.pixel-corners--wrapper .pixel-corners {
|
||||
display: block;
|
||||
clip-path: polygon(4px 28px,
|
||||
8px 28px,
|
||||
8px 20px,
|
||||
12px 20px,
|
||||
12px 12px,
|
||||
20px 12px,
|
||||
20px 8px,
|
||||
28px 8px,
|
||||
28px 4px,
|
||||
calc(100% - 28px) 4px,
|
||||
calc(100% - 28px) 8px,
|
||||
calc(100% - 20px) 8px,
|
||||
calc(100% - 20px) 12px,
|
||||
calc(100% - 12px) 12px,
|
||||
calc(100% - 12px) 20px,
|
||||
calc(100% - 8px) 20px,
|
||||
calc(100% - 8px) 28px,
|
||||
calc(100% - 4px) 28px,
|
||||
calc(100% - 4px) calc(100% - 28px),
|
||||
calc(100% - 8px) calc(100% - 28px),
|
||||
calc(100% - 8px) calc(100% - 20px),
|
||||
calc(100% - 12px) calc(100% - 20px),
|
||||
calc(100% - 12px) calc(100% - 12px),
|
||||
calc(100% - 20px) calc(100% - 12px),
|
||||
calc(100% - 20px) calc(100% - 8px),
|
||||
calc(100% - 28px) calc(100% - 8px),
|
||||
calc(100% - 28px) calc(100% - 4px),
|
||||
28px calc(100% - 4px),
|
||||
28px calc(100% - 8px),
|
||||
20px calc(100% - 8px),
|
||||
20px calc(100% - 12px),
|
||||
12px calc(100% - 12px),
|
||||
12px calc(100% - 20px),
|
||||
8px calc(100% - 20px),
|
||||
8px calc(100% - 28px),
|
||||
4px calc(100% - 28px));
|
||||
}
|
||||
.pixel-corners::after,
|
||||
.pixel-corners--wrapper::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
clip-path: polygon(0px calc(100% - 28px),
|
||||
4px calc(100% - 28px),
|
||||
4px calc(100% - 20px),
|
||||
8px calc(100% - 20px),
|
||||
8px calc(100% - 12px),
|
||||
12px calc(100% - 12px),
|
||||
12px calc(100% - 8px),
|
||||
20px calc(100% - 8px),
|
||||
20px calc(100% - 4px),
|
||||
28px calc(100% - 4px),
|
||||
28px 100%,
|
||||
calc(100% - 28px) 100%,
|
||||
calc(100% - 28px) calc(100% - 4px),
|
||||
calc(100% - 20px) calc(100% - 4px),
|
||||
calc(100% - 20px) calc(100% - 8px),
|
||||
calc(100% - 12px) calc(100% - 8px),
|
||||
calc(100% - 12px) calc(100% - 12px),
|
||||
calc(100% - 8px) calc(100% - 12px),
|
||||
calc(100% - 8px) calc(100% - 20px),
|
||||
calc(100% - 4px) calc(100% - 20px),
|
||||
calc(100% - 4px) calc(100% - 28px),
|
||||
100% calc(100% - 28px),
|
||||
100% 28px,
|
||||
calc(100% - 4px) 28px,
|
||||
calc(100% - 4px) 20px,
|
||||
calc(100% - 8px) 20px,
|
||||
calc(100% - 8px) 12px,
|
||||
calc(100% - 12px) 12px,
|
||||
calc(100% - 12px) 8px,
|
||||
calc(100% - 20px) 8px,
|
||||
calc(100% - 20px) 4px,
|
||||
calc(100% - 28px) 4px,
|
||||
calc(100% - 28px) 0px,
|
||||
28px 0px,
|
||||
28px 4px,
|
||||
20px 4px,
|
||||
20px 8px,
|
||||
12px 8px,
|
||||
12px 12px,
|
||||
8px 12px,
|
||||
8px 20px,
|
||||
4px 20px,
|
||||
4px 28px,
|
||||
0px 28px,
|
||||
0px 50%,
|
||||
4px 50%,
|
||||
4px 28px,
|
||||
8px 28px,
|
||||
8px 20px,
|
||||
12px 20px,
|
||||
12px 12px,
|
||||
20px 12px,
|
||||
20px 8px,
|
||||
28px 8px,
|
||||
28px 4px,
|
||||
calc(100% - 28px) 4px,
|
||||
calc(100% - 28px) 8px,
|
||||
calc(100% - 20px) 8px,
|
||||
calc(100% - 20px) 12px,
|
||||
calc(100% - 12px) 12px,
|
||||
calc(100% - 12px) 20px,
|
||||
calc(100% - 8px) 20px,
|
||||
calc(100% - 8px) 28px,
|
||||
calc(100% - 4px) 28px,
|
||||
calc(100% - 4px) calc(100% - 28px),
|
||||
calc(100% - 8px) calc(100% - 28px),
|
||||
calc(100% - 8px) calc(100% - 20px),
|
||||
calc(100% - 12px) calc(100% - 20px),
|
||||
calc(100% - 12px) calc(100% - 12px),
|
||||
calc(100% - 20px) calc(100% - 12px),
|
||||
calc(100% - 20px) calc(100% - 8px),
|
||||
calc(100% - 28px) calc(100% - 8px),
|
||||
calc(100% - 28px) calc(100% - 4px),
|
||||
28px calc(100% - 4px),
|
||||
28px calc(100% - 8px),
|
||||
20px calc(100% - 8px),
|
||||
20px calc(100% - 12px),
|
||||
12px calc(100% - 12px),
|
||||
12px calc(100% - 20px),
|
||||
8px calc(100% - 20px),
|
||||
8px calc(100% - 28px),
|
||||
4px calc(100% - 28px),
|
||||
4px 50%,
|
||||
0px 50%);
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #36ffc4;
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
}
|
||||
.pixel-corners::after {
|
||||
margin: -4px;
|
||||
}
|
||||
/* -- end of pixelated borders -- */
|
||||
|
||||
/* -- usual css things -- */
|
||||
h1 {
|
||||
|
|
@ -1056,4 +789,74 @@ footer > .dot {
|
|||
color: var(--fg);
|
||||
}
|
||||
/* -- end of styling the rest of the elements -- */
|
||||
}
|
||||
}
|
||||
|
||||
/* -- shrink cards if screen is small -- */
|
||||
@media screen and (max-width: 1000px) {
|
||||
.main {
|
||||
width: 100%;
|
||||
max-width: 90%;
|
||||
transform: translate(6%, 0%);
|
||||
margin-left: unset;
|
||||
margin-right: unset;
|
||||
}
|
||||
|
||||
.intro-box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.pfp, .pixel-corners--wrapper {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.pixel-corners--wrapper {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.fedi, .messaging, .platforms, .misc {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.messaging {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.fedi > .dot, .messaging > .dot, .platforms > .dot, .misc > .dot {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.quotes {
|
||||
grid-template-columns: unset;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.quote > small::before {
|
||||
padding-left: unset;
|
||||
}
|
||||
|
||||
.buttons-img:first-child, .buttons-img:nth-child(2), .buttons-img:nth-child(4), .buttons-img {
|
||||
display: flow-root;
|
||||
margin: 1em 0px 1px 0px;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
footer {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer > p, footer > a, footer > p > a {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
footer > .dot {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
/* -- yea -- */
|
||||
Loading…
Add table
Add a link
Reference in a new issue