Start supporting phones.

master
Zed A. Shaw 3 years ago
parent 0a282cddaa
commit c1873ab1bd
  1. 6
      public/build/bundle.css
  2. 15392
      public/build/bundle.js
  3. 2
      public/build/bundle.js.map
  4. 21
      public/global.css
  5. 1
      src/components/CodeView.svelte
  6. 14
      src/components/PhoneWarn.svelte
  7. 2
      src/demos/Twitter.svelte

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -43,7 +43,6 @@
--color-bg-inverted: #fff;
}
/* Layout */
article aside {
background: var(--color-secondary-accent);
@ -450,3 +449,23 @@ blockquote footer {
line-height: var(--line-height);
padding: 1.5rem 0;
}
/* Have to place this here because svelte's global parsing doesn't work on sub-CSS inside media. */
@media only screen and (max-width: 600px) {
code-view {
flex-direction: column !important;
}
code-view html-view {
max-width: 100% !important;
}
content {
display: none !important;
}
phone-warn {
display: flex !important;
}
}

@ -43,6 +43,7 @@
flex: 2;
max-width: 50%;
}
</style>
<code-view>

@ -0,0 +1,14 @@
<style>
phone-warn {
display: none;
}
</style>
<phone-warn>
<section>
<aside>
<h2>Not Ready For Phones</h2>
<p>If you want to view this layout use a real computer, and don't complain if your real computer has some insane 16:9 aspect ratio gaming screen owned by only 1% of the world's population. Use a normal monitor or just suck it up weirdo.</p>
</aside>
</section>
</phone-warn>

@ -4,6 +4,7 @@
import { onMount } from 'svelte';
let tweets = [1,2,3,4,5];
import CodeView from '../components/CodeView.svelte';
import PhoneWarn from '../components/PhoneWarn.svelte';
import { holder } from '../../lib/imgholder.js';
</script>
@ -197,6 +198,7 @@
}
</style>
<PhoneWarn />
<content>
<left>

Loading…
Cancel
Save