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

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

@ -1,29 +1,34 @@
import { style } from '@vanilla-extract/css' import { style } from '@vanilla-extract/css'
export const beeg_container = style({ export const beeg_container = style({
position: 'relative', position: 'relative',
width: 'max-content', width: 'max-content',
height: 'max-content', height: 'max-content',
}) })
const beeg = style({ const beeg = style({
position: 'absolute', position: 'absolute',
fontSize: '3em', fontSize: '1.75em',
}) '@media': {
'screen and (min-width: 768px)': {
export const beeg_dummy = style([beeg, { fontSize: '3em',
position: 'static', }
color: 'transparent', }
}]) })
export const beeg_foreground = style([beeg, { export const beeg_dummy = style([beeg, {
background: 'linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,255,0,1) 16%, rgba(0,255,0,1) 33%, rgba(0,255,255,1) 50%, rgba(0,0,255,1) 66%, rgba(255,0,255,1) 83%, rgba(255,0,0,1) 100%)', position: 'static',
backgroundClip: 'text', color: 'transparent',
color: 'transparent', }])
}])
export const beeg_foreground = style([beeg, {
export const beeg_background = style([beeg, { background: 'linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,255,0,1) 16%, rgba(0,255,0,1) 33%, rgba(0,255,255,1) 50%, rgba(0,0,255,1) 66%, rgba(255,0,255,1) 83%, rgba(255,0,0,1) 100%)',
left: '-0.1em', backgroundClip: 'text',
top: ' 0.1em', color: 'transparent',
color: 'black', }])
export const beeg_background = style([beeg, {
left: '-0.1em',
top: ' 0.1em',
color: 'black',
}]) }])

30
src/app/airstrip_one/0/components/BeegText.tsx
View file

@ -1,16 +1,16 @@
import { import {
beeg_container, beeg_container,
beeg_dummy, beeg_dummy,
beeg_foreground, beeg_foreground,
beeg_background, beeg_background,
} from './BeegText.css' } from './BeegText.css'
export default function BeegText({ children }: { children: React.ReactNode }) { export default function BeegText({ children }: { children: React.ReactNode }) {
return ( return (
<div className={beeg_container}> <div className={beeg_container}>
<p className={beeg_background}>{children}</p> <p className={beeg_background}>{children}</p>
<p className={beeg_foreground}>{children}</p> <p className={beeg_foreground}>{children}</p>
<p className={beeg_dummy} >{children}</p> <p className={beeg_dummy} >{children}</p>
</div> </div>
) )
} }

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

@ -1,25 +1,30 @@
import { style, keyframes } from '@vanilla-extract/css' import { style, keyframes } from '@vanilla-extract/css'
export const marquee_container = style({ export const marquee_container = style({
display: 'flex', display: 'flex',
width: '100%', width: '100%',
height: 'max-content', height: 'max-content',
overflow: 'hidden', overflow: 'hidden',
backgroundColor: 'black', backgroundColor: 'black',
}) })
const scroll_marquee = keyframes({ const scroll_marquee = keyframes({
'0%': { left: ' 0%' }, '0%': { left: ' 0%' },
'100%': { left: '-100%' }, '100%': { left: '-100%' },
}) })
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',
}
}
})

24
src/app/airstrip_one/0/components/Marquee.tsx
View file

@ -1,13 +1,13 @@
import { import {
marquee_container, marquee_container,
marquee_content, marquee_content,
} from './Marquee.css' } from './Marquee.css'
export default function Marquee({ children }: { children: React.ReactNode }) { export default function Marquee({ children }: { children: React.ReactNode }) {
return ( return (
<div className={marquee_container}> <div className={marquee_container}>
<p className={marquee_content}>{children}</p> <p className={marquee_content}>{children}</p>
<p className={marquee_content}>{children}</p> <p className={marquee_content}>{children}</p>
</div> </div>
) )
} }

18
src/app/airstrip_one/0/ministry_of_truth/layout.tsx
View file

@ -1,10 +1,10 @@
import { Metadata } from 'next' import { Metadata } from 'next'
export const metadata: Metadata = { export const metadata: Metadata = {
title: 'The Ministry of Truth', title: 'The Ministry of Truth',
description: 'The Ministry of Truth', description: 'The Ministry of Truth',
} }
export default function Layout({ children }: { children: React.ReactNode }) { export default function Layout({ children }: { children: React.ReactNode }) {
return <>{children}</> return <>{children}</>
} }

91
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({
position: 'relative', boxSizing: 'border-box',
display: 'flex', position: 'relative',
flexDirection: 'column', display: 'flex',
alignItems: 'center', flexDirection: 'column',
margin: 'auto', alignItems: 'center',
width: '50%', margin: 'auto',
border: '0.3em solid purple' width: '100%',
}) border: '0.3em solid purple',
'@media': {
export const border = style({ 'screen and (min-width: 768px)': {
width: '60%', width: '50%',
marginBottom: '4em', }
border: '0.3em solid purple', }
}) })
export const big_brother_style = style({ export const border = style({
display: 'block', width: '61%',
width: '100%', marginBottom: '4em',
height: 'auto', border: '0.3em solid purple',
}) })
export const message_style = style({ export const big_brother_style = style({
boxSizing: 'border-box', display: 'block',
width: '100%', width: '100%',
height: 'max-content', height: 'auto',
margin: 0, })
border: 'none',
padding: '0.5em', export const message_style = style({
fontSize: '2em', boxSizing: 'border-box',
color: 'magenta', width: '100%',
backgroundColor: 'black', height: 'max-content',
overflowWrap: 'break-word', margin: 0,
textAlign: 'center', border: 'none',
':focus': { padding: '0.5em',
outline: 'none', fontSize: '1em',
} color: 'magenta',
}) backgroundColor: 'black',
overflowWrap: 'break-word',
textAlign: 'center',
':focus': {
outline: 'none',
},
'@media': {
'screen and (min-width: 768px)': {
fontSize: '2em'
}
}
})

94
src/app/airstrip_one/0/ministry_of_truth/page.tsx
View file

@ -1,47 +1,47 @@
'use client' 'use client'
import { useEffect, useRef } from 'react' import { useEffect, useRef } from 'react'
import Image from 'next/image' import Image from 'next/image'
import { useSearchParams } from 'next/navigation' import { useSearchParams } from 'next/navigation'
import BeegText from '../components/BeegText' import BeegText from '../components/BeegText'
import Marquee from '../components/Marquee' import Marquee from '../components/Marquee'
import { import {
center_vertical, center_vertical,
border, border,
big_brother_style, big_brother_style,
message_style, message_style,
} from './page.css' } from './page.css'
export default function Home() { export default function Home() {
const search_params = useSearchParams() const search_params = useSearchParams()
const input_ref = useRef<HTMLParagraphElement>(null) const input_ref = useRef<HTMLParagraphElement>(null)
const set_message = (message: string) => { const set_message = (message: string) => {
const encoded = btoa(message) const encoded = btoa(message)
const new_url = `${window.location.protocol}//${window.location.host}${window.location.pathname}?e=${encoded}` const new_url = `${window.location.protocol}//${window.location.host}${window.location.pathname}?e=${encoded}`
window.history.replaceState('', '', new_url) window.history.replaceState('', '', new_url)
} }
const message = search_params.get('e') ? const message = search_params.get('e') ?
atob(search_params.get('e')!) : atob(search_params.get('e')!) :
( (
search_params.get('m') search_params.get('m')
?? 'At the apex of the pyramid comes Big Brother. Big Brother is infallible and all-powerful. Every success, every achievement, every victory, every scientific discovery, all knowledge, all wisdom, all happiness, all virtue, are held to issue directly from his leadership and inspiration.' ?? 'At the apex of the pyramid comes Big Brother. Big Brother is infallible and all-powerful. Every success, every achievement, every victory, every scientific discovery, all knowledge, all wisdom, all happiness, all virtue, are held to issue directly from his leadership and inspiration.'
) )
useEffect(() => { useEffect(() => {
set_message(message) set_message(message)
}) })
return ( return (
<div className={center_vertical}> <div className={center_vertical}>
<Marquee>THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU </Marquee> <Marquee>THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU </Marquee>
<BeegText>THE MINISTRY OF TRUTH</BeegText> <BeegText>THE MINISTRY OF TRUTH</BeegText>
<div className={border}> <div className={border}>
<Image className={big_brother_style} width={400} height={300} src='/big_brother_screen.gif' alt='Big Brother' /> <Image className={big_brother_style} width={400} height={300} src='/big_brother_screen.gif' alt='Big Brother' />
<p ref={input_ref} className={message_style} onInput={() => set_message(input_ref.current!.textContent ?? '')} contentEditable>{message}</p> <p ref={input_ref} className={message_style} onInput={() => set_message(input_ref.current!.textContent ?? '')} contentEditable>{message}</p>
</div> </div>
<Marquee>THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU </Marquee> <Marquee>THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU THE SNACK IS WATCHING YOU </Marquee>
</div> </div>
) )
} }

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({