Gnarwhal/ode_to_snack
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixed for mobile

Browse source
This commit is contained in:
Gnarwhal 2024-07-05 16:06:03 +00:00
parent 3b70bda92c
commit 361aa93330
Signed by: Gnarwhal
GPG key ID: 0989A73D8C421174
8 changed files with 211 additions and 180 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/app/airstrip_one/0/components/BeegText.css.ts
View file

@ -8,7 +8,12 @@ export const beeg_container = style({
const beeg = style({ const beeg = style({
position: 'absolute', position: 'absolute',
fontSize: '3em', fontSize: '1.75em',
'@media': {
'screen and (min-width: 768px)': {
fontSize: '3em',
}
}
}) })
export const beeg_dummy = style([beeg, { export const beeg_dummy = style([beeg, {

7
src/app/airstrip_one/0/components/Marquee.css.ts
View file

@ -15,11 +15,16 @@ const scroll_marquee = keyframes({
export const marquee_content = style({ export const marquee_content = style({
position: 'relative', position: 'relative',
fontSize: '1em', fontSize: '0.75em',
color: 'magenta', color: 'magenta',
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
animationName: scroll_marquee, animationName: scroll_marquee,
animationDuration: '8s', animationDuration: '8s',
animationTimingFunction: 'linear', animationTimingFunction: 'linear',
animationIterationCount: 'infinite', animationIterationCount: 'infinite',
'@media': {
'screen and (min-width: 768px)': {
fontSize: '1em',
}
}
}) })

43
src/app/airstrip_one/0/ministry_of_truth/page.css.ts
View file

@ -1,40 +1,51 @@
import { keyframes, style } from "@vanilla-extract/css"; import { keyframes, style } from "@vanilla-extract/css";
export const center_vertical = style({ export const center_vertical = style({
boxSizing: 'border-box',
position: 'relative', position: 'relative',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
margin: 'auto', margin: 'auto',
width: '50%', width: '100%',
border: '0.3em solid purple' border: '0.3em solid purple',
'@media': {
'screen and (min-width: 768px)': {
width: '50%',
}
}
}) })
export const border = style({ export const border = style({
width: '60%', width: '61%',
marginBottom: '4em', marginBottom: '4em',
border: '0.3em solid purple', border: '0.3em solid purple',
}) })
export const big_brother_style = style({ export const big_brother_style = style({
display: 'block', display: 'block',
width: '100%', width: '100%',
height: 'auto', height: 'auto',
}) })
export const message_style = style({ export const message_style = style({
boxSizing: 'border-box', boxSizing: 'border-box',
width: '100%', width: '100%',
height: 'max-content', height: 'max-content',
margin: 0, margin: 0,
border: 'none', border: 'none',
padding: '0.5em', padding: '0.5em',
fontSize: '2em', fontSize: '1em',
color: 'magenta', color: 'magenta',
backgroundColor: 'black', backgroundColor: 'black',
overflowWrap: 'break-word', overflowWrap: 'break-word',
textAlign: 'center', textAlign: 'center',
':focus': { ':focus': {
outline: 'none', outline: 'none',
},
'@media': {
'screen and (min-width: 768px)': {
fontSize: '2em'
}
} }
}) })

18
src/app/airstrip_one/0/page.css.ts
View file

@ -6,14 +6,24 @@ export const center_vertical = style({
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
margin: 'auto', margin: 'auto',
width: '50%', width: '100%',
border: '0.3em solid purple' border: '0.3em solid purple',
'@media': {
'screen and (min-width: 768px)': {
width: '50%',
}
}
}) })
export const big_brother_style = style({ export const big_brother_style = style({
width: '40%', width: '60%',
height: 'auto', height: 'auto',
border: '0.3em solid purple' border: '0.3em solid purple',
'@media': {
'screen and (min-width: 768px)': {
width: '40%',
}
}
}) })
export const cats_div = style({ export const cats_div = style({