Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-03-22 05:39:20 +01:00
Code Issues Projects Releases Packages Wiki Activity

Variable-ise the 40em

Browse source
This commit is contained in:
Lim Chee Aun 2023-02-17 20:47:09 +08:00
parent 9fbfc993fd
commit 5ef67fab91
3 changed files with 9 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/app.css
View file

@ -72,7 +72,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
min-height: 100vh; min-height: 100vh;
min-height: 100dvh; min-height: 100dvh;
margin: auto; margin: auto;
width: 40em; width: var(--main-width);
max-width: 100%; max-width: 100%;
border-left: 1px solid rgba(0, 0, 0, 0.1); border-left: 1px solid rgba(0, 0, 0, 0.1);
border-right: 1px solid rgba(0, 0, 0, 0.1); border-right: 1px solid rgba(0, 0, 0, 0.1);
@ -686,14 +686,14 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
} }
} }
.deck-backdrop .deck { .deck-backdrop .deck {
width: 40em; width: var(--main-width);
max-width: 100vw; max-width: 100vw;
background-color: var(--bg-color); background-color: var(--bg-color);
animation: slide-in 0.5s var(--timing-function); animation: slide-in 0.5s var(--timing-function);
box-shadow: -1px 0 var(--bg-color); box-shadow: -1px 0 var(--bg-color);
} }
.deck-backdrop .deck .status { .deck-backdrop .deck .status {
max-width: 40em; max-width: var(--main-width);
} }
.deck-close { .deck-close {
@ -745,7 +745,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
/* BOX */ /* BOX */
.box { .box {
width: 40em; width: var(--main-width);
max-width: 100vw; max-width: 100vw;
padding: 16px; padding: 16px;
} }
@ -951,7 +951,7 @@ button.carousel-dot:is(.active, [disabled].active) {
overflow: hidden; overflow: hidden;
background-color: var(--bg-color); background-color: var(--bg-color);
width: 100%; width: 100%;
max-width: calc(40em - 50px - 16px); max-width: calc(var(--main-width) - 50px - 16px);
border-radius: 16px 16px 0 0; border-radius: 16px 16px 0 0;
box-shadow: 0 -1px 32px var(--divider-color); box-shadow: 0 -1px 32px var(--divider-color);
animation: slide-up 0.3s var(--timing-function); animation: slide-up 0.3s var(--timing-function);
@ -1206,7 +1206,7 @@ meter.donut:is(.danger, .explode):after {
bottom: 16px; bottom: 16px;
bottom: max(16px, env(safe-area-inset-bottom)); bottom: max(16px, env(safe-area-inset-bottom));
width: calc(100% - 32px); width: calc(100% - 32px);
max-width: calc(40em - 32px); max-width: calc(var(--main-width) - 32px);
z-index: 100; z-index: 100;
display: flex; display: flex;
background-color: var(--bg-blur-color); background-color: var(--bg-blur-color);
@ -1370,7 +1370,7 @@ ul.link-list li a .icon {
} }
.deck-backdrop .deck { .deck-backdrop .deck {
width: 50%; width: 50%;
min-width: 40em; min-width: var(--main-width);
border-left: 1px solid var(--divider-color); border-left: 1px solid var(--divider-color);
} }
.timeline-deck { .timeline-deck {

2
src/components/compose.css
View file

@ -1,5 +1,5 @@
#compose-container { #compose-container {
width: 40em; width: var(--main-width);
max-width: 100vw; max-width: 100vw;
align-self: stretch; align-self: stretch;
animation: fade-in 0.2s ease-out; animation: fade-in 0.2s ease-out;

1
src/index.css
View file

@ -1,4 +1,5 @@
:root { :root {
--main-width: 40em;
text-size-adjust: none; text-size-adjust: none;
--hairline-width: 1px; --hairline-width: 1px;