Skip to content

Commit

Permalink
Update screenshots
Browse files Browse the repository at this point in the history
  • Loading branch information
davidmyersdev committed Oct 7, 2024
1 parent ed1fbf3 commit 875fe1d
Show file tree
Hide file tree
Showing 7 changed files with 24 additions and 26 deletions.
6 changes: 3 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ Get started for free at [octo.app](https://octo.app).

<a href="https://octo.app">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="assets/screenshot-dark.png">
<source media="(prefers-color-scheme: light)" srcset="assets/screenshot-light.png">
<img alt="Shows the Octo app with an open tab containing a markdown document." src="assets/screenshot-dark.png">
<source media="(prefers-color-scheme: dark)" srcset="assets/screenshot-desktop-dark.png">
<source media="(prefers-color-scheme: light)" srcset="assets/screenshot-desktop-light.png">
<img alt="Shows the Octo app with an open tab containing a markdown document." src="assets/screenshot-desktop-dark.png">
</picture>
</a>

Expand Down
Binary file removed assets/screenshot-dark.png
Binary file not shown.
Binary file added assets/screenshot-desktop-dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/screenshot-desktop-light.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified assets/screenshot-mobile-dark.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified assets/screenshot-mobile-light.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
44 changes: 21 additions & 23 deletions pages/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -50,29 +50,27 @@ onMounted(() => {
</div>
</div>
</section>
<section class="hero">
<section class="p-4 lg:p-8">
<div class="container mx-auto max-w-6xl">
<picture v-if="isDark">
<source alt="The powerful web-based, responsive note-taking app, Octo, with an open markdown document being edited." media="(orientation: portrait)" srcset="~/assets/screenshot-mobile-dark.png" width="1080" height="2400">
<img alt="The powerful web-based, responsive note-taking app, Octo, with an open markdown document being edited." src="~/assets/screenshot-desktop-dark.png" width="1600" height="900" class="w-full">
</picture>
<picture v-else-if="isLight">
<source alt="The powerful web-based, responsive note-taking app, Octo, with an open markdown document being edited." media="(orientation: portrait)" srcset="~/assets/screenshot-mobile-light.png" width="1080" height="2400">
<img alt="The powerful web-based, responsive note-taking app, Octo, with an open markdown document being edited." src="~/assets/screenshot-desktop-light.png" width="1600" height="900" class="w-full">
</picture>
<picture v-else>
<!-- mobile -->
<source alt="The powerful web-based, responsive note-taking app, Octo, with an open markdown document being edited." media="(orientation: portrait) and (prefers-color-scheme: dark)" srcset="~/assets/screenshot-mobile-dark.png" width="1080" height="2400">
<source alt="The powerful web-based, responsive note-taking app, Octo, with an open markdown document being edited." media="(orientation: portrait) and (prefers-color-scheme: light)" srcset="~/assets/screenshot-mobile-light.png" width="1080" height="2400">
<!-- desktop -->
<source alt="The powerful web-based, responsive note-taking app, Octo, with an open markdown document being edited." media="(prefers-color-scheme: dark)" srcset="~/assets/screenshot-desktop-dark.png" width="1600" height="900">
<source alt="The powerful web-based, responsive note-taking app, Octo, with an open markdown document being edited." media="(prefers-color-scheme: light)" srcset="~/assets/screenshot-desktop-light.png" width="1600" height="900">
<!-- fallback -->
<img alt="The powerful web-based, responsive note-taking app, Octo, with an open markdown document being edited." src="~/assets/screenshot-desktop-dark.png" width="1600" height="900" class="w-full">
</picture>
</div>
</section>
<section class="p-4 lg:p-8">
<div class="container mx-auto max-w-6xl">
<picture v-if="isDark">
<source alt="The powerful web-based, responsive note-taking app, Octo, with an open markdown document being edited." media="(orientation: portrait)" srcset="~/assets/screenshot-mobile-dark.png" width="1080" height="2400">
<img alt="The powerful web-based, responsive note-taking app, Octo, with an open markdown document being edited." src="~/assets/screenshot-desktop-dark.png" width="1600" height="900" class="w-full">
</picture>
<picture v-else-if="isLight">
<source alt="The powerful web-based, responsive note-taking app, Octo, with an open markdown document being edited." media="(orientation: portrait)" srcset="~/assets/screenshot-mobile-light.png" width="1080" height="2400">
<img alt="The powerful web-based, responsive note-taking app, Octo, with an open markdown document being edited." src="~/assets/screenshot-desktop-light.png" width="1600" height="900" class="w-full">
</picture>
<picture v-else>
<!-- mobile -->
<source alt="The powerful web-based, responsive note-taking app, Octo, with an open markdown document being edited." media="(orientation: portrait) and (prefers-color-scheme: dark)" srcset="~/assets/screenshot-mobile-dark.png" width="1080" height="2400">
<source alt="The powerful web-based, responsive note-taking app, Octo, with an open markdown document being edited." media="(orientation: portrait) and (prefers-color-scheme: light)" srcset="~/assets/screenshot-mobile-light.png" width="1080" height="2400">
<!-- desktop -->
<source alt="The powerful web-based, responsive note-taking app, Octo, with an open markdown document being edited." media="(prefers-color-scheme: dark)" srcset="~/assets/screenshot-desktop-dark.png" width="1600" height="900">
<source alt="The powerful web-based, responsive note-taking app, Octo, with an open markdown document being edited." media="(prefers-color-scheme: light)" srcset="~/assets/screenshot-desktop-light.png" width="1600" height="900">
<!-- fallback -->
<img alt="The powerful web-based, responsive note-taking app, Octo, with an open markdown document being edited." src="~/assets/screenshot-desktop-dark.png" width="1600" height="900" class="w-full">
</picture>
</div>
</section>
<section>
<CoreContainer class="p-4 lg:p-8">
Expand Down

0 comments on commit 875fe1d

Please sign in to comment.