Skip to content

Visual improvements #111

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aalemayhu merged 4 commits into from
Aug 15, 2020
Merged

Visual improvements #111

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
679030d
Update upload-page.imba
alpkaanaksu Aug 12, 2020
c3ea058
Merge branch 'dev' of https://github.com/alemayhu/notion2anki into dev
alpkaanaksu Aug 15, 2020
907ab90
Made responsiveness improvements.
alpkaanaksu Aug 15, 2020
19af3ab
Fixed top margin
alpkaanaksu Aug 15, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 10 additions & 8 deletions src/pages/home-page.imba
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ tag home-page
prop patreon = "https://patreon.com/alemayhu"

css .cta bg: #83C9F5 c: white fw: bold
css .column m: 16px

def render
<self[d: block my: 2rem]>
Expand All @@ -27,13 +28,14 @@ tag home-page
<.column>
<p> "{<strong[fw: bold]> "notion2Anki"} is 100% free and open source with no limitations on file size 🆓 It's a passion project 🕺🏾💃🏾 We are going to make this a good way to make Anki flashcards easier, better and faster for anyone anywhere around the world 🌎"

<div[d: flex j: center a: center mt: 2rem]>
<div[mx: 2rem]>
<div[d: flex j: center a: center mt: 2rem flex-wrap: wrap].columns>
<div.column>
<a.button[fw: bold] .is-primary .is-large href="/upload"> "Get Started"
<a.button.is-light .is-large href="https://www.youtube.com/playlist?list=PLzOAzzqpDqukOtwH3IYWiOhr_sjBjfgCd" target="_blank">
<span.icon[c: red]>
<i.fab.fa-youtube>
<span[fw: bold]> "Tutorials"
<div.column>
<a.button.is-light .is-large href="https://www.youtube.com/playlist?list=PLzOAzzqpDqukOtwH3IYWiOhr_sjBjfgCd" target="_blank">
<span.icon[c: red]>
<i.fab.fa-youtube>
<span[fw: bold]> "Tutorials"
<.column>
<.has-text-centered>
<youtube-embed video=pitch inline=false title="Video Tutorial: How to use notion2anki">
Expand Down Expand Up @@ -81,15 +83,15 @@ tag home-page
<.column .has-text-centered> for i in [1...13]
<img[m: 2rem w: 296px @sm: 320px @md:700px] .image loading="lazy" src="/user-feedback/{i}.png">
<.has-text-centered>
<a .button .is-large .is-danger[bg: #3273dc] target="_blank" href="https://discord.gg/PSKC3uS"> "Join the community of winners on Discord 💪🏾"
<a .is-large .is-danger[c: #3273dc fw: bold white-space: normal p: 16px fs: 18pt] target="_blank" href="https://discord.gg/PSKC3uS"> "Join the community of winners on Discord 💪🏾"

<.section .bd-easy .is-medium>
<.container>
<h3 .title .is-3> "Save your {<span[c: #00D1B2]> "time"} today ⏳"
<h4 .subtitle .is-4> "Let notion2anki do it in 10 seconds for you"
# Stop wasting your time Instead of copy pasting or typing in for hours and hours,
<.has-text-centered>
<a[mt: 2rem fw: bold].button.is-info.is-medium href="/features"> "Learn more about notion2anki features"
<a[mt: 2rem fw: bold fs: 16pt].button.is-info.is-medium href="/features"> "notion2anki features"
<.section>
<.container>
<h2.title> "Video Tutorial: How to use notion2anki"
Expand Down
3 changes: 2 additions & 1 deletion src/pages/upload-page.imba
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,8 @@ tag upload-page
<div[bd: 1px solid lightgray br: 5px p: 0]>
<p> for fontPreset in [32, 26, 20, 12, 10]
<span[fs: {fontPreset}px p: 3px br: 5px m: 0 8px] [c: #00d1b2]=(fontPreset == fontSize) @click.{fontSize = fontPreset}> "Aa"
<p[fs: {fontSize}px white-space: nowrap mt: 1rem]> "👁 font size preview..."
<div[h: 50px]>
<p[fs: {fontSize}px white-space: nowrap mt: 1rem]> "👁 font size preview..."
<h3[mt: 2rem] .title .is-3> "Card Types"
<div[mt: 1rem].control.has-icons-left>
<div.select.is-medium>
Expand Down