mirror of
https://github.com/tachiyomiorg/website.git
synced 2024-12-21 07:31:58 +01:00
Changed text-align and div structure
This commit is contained in:
Simon Mattila
parent
0cd1b85d5a
commit
2be94adcb3
Binary file not shown.
|
Before Width: | Height: | Size: 700 KiB After Width: | Height: | Size: 591 KiB |
@ -10,86 +10,12 @@ body {
|
|||||||
padding-bottom: 40px;
|
padding-bottom: 40px;
|
||||||
background-color: #f5f5f5;
|
background-color: #f5f5f5;
|
||||||
}
|
}
|
||||||
.form-signin {
|
.tachiyomi-guide {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 525px;
|
max-width: 560px;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
.form-label-group {
|
|
||||||
position: relative;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
.form-label-group>input, .form-label-group>label {
|
|
||||||
height: 3.125rem;
|
|
||||||
padding: .75rem;
|
|
||||||
}
|
|
||||||
.form-label-group>label {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 0;
|
|
||||||
/* Override default `<label>` margin */
|
|
||||||
line-height: 1.5;
|
|
||||||
color: #495057;
|
|
||||||
pointer-events: none;
|
|
||||||
cursor: text;
|
|
||||||
/* Match the input under the label */
|
|
||||||
border: 1px solid transparent;
|
|
||||||
border-radius: .25rem;
|
|
||||||
transition: all .1s ease-in-out;
|
|
||||||
}
|
|
||||||
.form-label-group input::-webkit-input-placeholder {
|
|
||||||
color: transparent;
|
|
||||||
}
|
|
||||||
.form-label-group input:-ms-input-placeholder {
|
|
||||||
color: transparent;
|
|
||||||
}
|
|
||||||
.form-label-group input::-ms-input-placeholder {
|
|
||||||
color: transparent;
|
|
||||||
}
|
|
||||||
.form-label-group input::-moz-placeholder {
|
|
||||||
color: transparent;
|
|
||||||
}
|
|
||||||
.form-label-group input::placeholder {
|
|
||||||
color: transparent;
|
|
||||||
}
|
|
||||||
.form-label-group input:not(:placeholder-shown) {
|
|
||||||
padding-top: 1.25rem;
|
|
||||||
padding-bottom: .25rem;
|
|
||||||
}
|
|
||||||
.form-label-group input:not(:placeholder-shown)~label {
|
|
||||||
padding-top: .25rem;
|
|
||||||
padding-bottom: .25rem;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #777;
|
|
||||||
}
|
|
||||||
/* Fallback for Edge
|
|
||||||
-------------------------------------------------- */
|
|
||||||
|
|
||||||
@supports (-ms-ime-align: auto) {
|
|
||||||
.form-label-group>label {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.form-label-group input::-ms-input-placeholder {
|
|
||||||
color: #777;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* Fallback for IE
|
|
||||||
-------------------------------------------------- */
|
|
||||||
|
|
||||||
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
|
||||||
.form-label-group>label {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.form-label-group input:-ms-input-placeholder {
|
|
||||||
color: #777;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* Custom
|
|
||||||
-------------------------------------------------- */
|
|
||||||
|
|
||||||
.mainstep {
|
.mainstep {
|
||||||
color: #000;
|
color: #000;
|
||||||
@ -183,4 +109,8 @@ hr {
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-style: inset;
|
border-style: inset;
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
margin: 2px;
|
||||||
}
|
}
|
||||||
128
index.html
128
index.html
@ -10,82 +10,98 @@
|
|||||||
<link href="assets/style.css" rel="stylesheet">
|
<link href="assets/style.css" rel="stylesheet">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<form class="form-signin">
|
<form class="tachiyomi-guide">
|
||||||
<div class="text-center mb-4">
|
<div class="text-center mb-4">
|
||||||
<img class="mb-4" src="assets/app-icon.png">
|
<img class="mb-4" src="assets/app-icon.png">
|
||||||
<h1 class="h3 mb-3 font-weight-normal">Getting started with Tachiyomi</h1>
|
<h1 class="h3 mb-3 font-weight-normal">Getting started with Tachiyomi</h1>
|
||||||
<p><a href="https://github.com/inorichi/tachiyomi" target="_blank">Tachiyomi</a> is a free and open source manga reader for Android.</p>
|
<p><a href="https://github.com/inorichi/tachiyomi" target="_blank">Tachiyomi</a> is a free and open source manga reader for Android.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-center mb-4">
|
<div class="text-left">
|
||||||
<div id="installation">
|
<div id="installation">
|
||||||
<a href="#installation">
|
<a href="#installation">
|
||||||
<h1 class="h5 mb-3 font-weight-normal mainstep">Installation</h1></a>
|
<h1 class="h5 font-weight-normal mainstep">Installation</h1></a>
|
||||||
<p class="step" id="step1"><a class="step-number" href="#step1">1</a> Get the latest stable release from <a href="https://github.com/inorichi/tachiyomi/releases/tag/v0.8.4">GitHub.</a><br>
|
<div class="step" id="step1">
|
||||||
<code>tachiyomi-vX.Y.Z.apk</code></p>
|
<p><a class="step-number" href="#step1">1</a> Download the latest stable release from <a href="https://github.com/inorichi/tachiyomi/releases/tag/v0.8.4">GitHub.</a></p>
|
||||||
<p class="step" id="step2"><a class="step-number" href="#step2">2</a> Install the <code>.apk</code> file you just downloaded from GitHub.<br>
|
<p class="text-center"><code>tachiyomi-vX.Y.Z.apk</code></p>
|
||||||
<img class="lazyload step-img" data-src="assets/step-install.jpg"></p>
|
</div>
|
||||||
|
<div class="step" id="step2">
|
||||||
|
<p><a class="step-number" href="#step2">2</a> Open and install the <code>.apk</code> file you just downloaded from GitHub.</p>
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<a href="assets/step-install.jpg"><img class="lazyload step-img" data-src="assets/step-install.jpg"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<hr>
|
<hr>
|
||||||
</div>
|
</div>
|
||||||
<div id="extensions">
|
<div id="extensions">
|
||||||
<a href="#extensions">
|
<a href="#extensions">
|
||||||
<h1 class="h5 mb-3 font-weight-normal mainstep">Extensions</h1></a>
|
<h1 class="h5 font-weight-normal mainstep">Extensions</h1></a>
|
||||||
<p class="step" id="step3"><a class="step-number" href="#step3">3</a> Now that Tachiyomi is installed, open the app and navigate to the <code>Extensions</code> tab.<br>
|
<div class="step" id="step3">
|
||||||
<img class="lazyload step-img" data-src="assets/step-extensions.gif"></p>
|
<p><a class="step-number" href="#step3">3</a> Now that Tachiyomi is installed, open the app and navigate to the <code>Extensions</code> tab.</p>
|
||||||
<p class="step" id="step4"><a class="step-number" href="#step4">4</a> In this guide we will use <code>MangaDex</code>, our most popular extension. Press the <code>Install</code> button and it will bring up the extension installer. If your phone does not allow third-party installations, follow <a href="#how-do-i-allow-third-party-installations-on-my-phone">this</a> guide.<br>
|
<div class="d-flex justify-content-center">
|
||||||
<br>
|
<a href="assets/step-extensions.gif"><img class="lazyload step-img" data-src="assets/step-extensions.gif"></a>
|
||||||
If you successfully installed MangaDex then it should now show up in the <code>Catalogues</code> tab.<br>
|
</div>
|
||||||
<br>
|
</div>
|
||||||
The items appearing here are called <code>Sources</code>, an extension can contain multiple sources.<br>
|
<div class="step" id="step4">
|
||||||
<img class="lazyload step-img" data-src="assets/step-catalogues.png"></p>
|
<p><a class="step-number" href="#step4">4</a> In this guide we will use MangaDex, our most popular extension. Press the <code>Install</code> button and it will bring up the extension installer. If your phone does not allow third-party installations, follow <a href="#how-do-i-allow-third-party-installations-on-my-phone">this</a> guide.</p>
|
||||||
|
<p>If you successfully installed MangaDex then it should now show up in the <code>Catalogues</code> tab. The items appearing here are called <code>Sources</code>, an extension can contain multiple sources.</p>
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<a href="assets/step-catalogues.png"><img class="lazyload step-img" data-src="assets/step-catalogues.png"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<hr>
|
<hr>
|
||||||
</div>
|
</div>
|
||||||
<div id="library">
|
<div id="library">
|
||||||
<a href="#library">
|
<a href="#library">
|
||||||
<h1 class="h5 mb-3 font-weight-normal mainstep">Library</h1></a>
|
<h1 class="h5 font-weight-normal mainstep">Library</h1></a>
|
||||||
<p class="step" id="step5"><a class="step-number" href="#step5">5</a> To find manga, you can now either use the <code>Latest</code> button on your source, or you can use <code>Browse</code> and search for it.</p>
|
<div class="step" id="step5">
|
||||||
<p class="step" id="step6"><a class="step-number" href="#step6">6</a> Now that you've found manga that you want to add to your library, click on it and then press the blue bookmark button.<br>
|
<p><a class="step-number" href="#step5">5</a> To find manga, you can now either use the <code>Latest</code> button on your source, or you can use <code>Browse</code> and search for it.</p>
|
||||||
<br>
|
</div>
|
||||||
It should now appear in your <code>My library</code> tab, ready to be read!<br>
|
<div class="step" id="step6">
|
||||||
<img class="lazyload step-img" data-src="assets/step-save.gif"></p>
|
<p><a class="step-number" href="#step6">6</a> Now that you've found manga that you want to add to your library, click on it and then press the blue bookmark button.</p>
|
||||||
|
<p>It should now appear in your <code>My library</code> tab, ready to be read!</p>
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<a href="assets/step-save.gif"><img class="lazyload step-img" data-src="assets/step-save.gif"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
</div>
|
||||||
|
<h1 class="h3 font-weight-normal">Frequently Asked Questions</h1>
|
||||||
|
<div class="faq" id="what-are-some-good-extensions">
|
||||||
|
<p><a class="faq-question" href="#what-are-some-good-extensions">Q</a> What are some good extensions?</p>
|
||||||
|
<p><a class="faq-answer" href="#what-are-some-good-extensions">A</a> The most popular is MangaDex, MangaRock and MangaSee, these are large sites which host content from scanlators, there's also extensions like Genkan, Madara, FoolSlide and ComiCake which contains sources which hosts directly from the scanlators own websites.</p>
|
||||||
|
<p><a href="https://docs.google.com/spreadsheets/d/1TyJEUg78WWH4zgnf3g6M2lkbWpBWbd40FYiPVQhW8IU/edit#gid=0" target="_blank">Here</a>'s a good spreadsheet showing the different extensions and their sources.</p>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
<div class="faq" id="how-do-i-allow-third-party-installations-on-my-phone">
|
||||||
|
<p><a class="faq-question" href="#how-do-i-allow-third-party-installations-on-my-phone">Q</a> How do I allow third-party installations on my phone?</p>
|
||||||
|
<p><a class="faq-answer" href="#how-do-i-allow-third-party-installations-on-my-phone">A</a> When installing your first extension and are promted that your phone isn't allowed to install unknown apps from that source, simply press the <code>Settings</code> button and then allow it.</p>
|
||||||
|
<p>Two example videos, left one is for newer Androids.</p>
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<a href="assets/step-unknownapps-post8.gif"><img class="lazyload" data-src="assets/step-unknownapps-post8.gif" width="180"></a>
|
||||||
|
<a href="assets/step-unknownapps-pre8.gif"><img class="lazyload" data-src="assets/step-unknownapps-pre8.gif" width="180"></a>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
|
</div>
|
||||||
|
<div class="faq" id="im-not-getting-any-results-when-browsing-mangadex">
|
||||||
|
<p><a class="faq-question" href="#im-not-getting-any-results-when-browsing-mangadex">Q</a> I'm not getting any results when browsing MangaDex.</p>
|
||||||
|
<p><a class="faq-answer" href="#im-not-getting-any-results-when-browsing-mangadex">A</a> Go to <code>Browse</code>/<code>Latest</code> for MangaDex under <code>Catalogues</code>, enter a random manga and then press the three-dot button in the top-right corner and then the <code>Open in web view</code> button. Now go to the hamburger menu, press the <code>Manga</code> drop-down and then choose either <code>Sign up</code> or <code>Log in</code>.</p>
|
||||||
|
<hr>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="faq" id="im-getting-no-results-found-when-trying-to-browse-mangadex-after-logging-in"><a class="faq-question" href="#im-getting-no-results-found-when-trying-to-browse-mangadex-after-logging-in">Q</a> I'm getting "No results found" when trying to browse MangaDex after logging in.</p>
|
||||||
|
<p><a class="faq-answer" href="#im-getting-no-results-found-when-trying-to-browse-mangadex-after-logging-in">A</a> Go to <code>Browse</code>/<code>Latest</code> for MangaDex under <code>Catalogues</code>, enter a random manga and then press the three-dot button in the top-right corner and then the <code>Open in web view</code> button. Now go to the hamburger menu, press the <code>Manga</code> drop-down and then <code>Titles</code>. The last step is to go to the icon in the upper right that looks like four-boxes and select <code>Detailed</code></p>
|
||||||
<hr>
|
<hr>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-center mb-4">
|
<div>
|
||||||
<h1 class="h3 mb-3 font-weight-normal">Frequently Asked Questions</h1>
|
<p class="mt-5 text-muted text-center">More frequently asked questions can be found <a href="https://github.com/inorichi/tachiyomi/wiki/FAQ#frequently-asked-questions" target="_blank">here</a></p>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-center mb-4">
|
|
||||||
<!-- <p class="faq" id="X"><a class="faq-question" href="#X">Q</a> Y<br>
|
|
||||||
<br><a class="faq-answer" href="#X">A</a> Z</p> -->
|
|
||||||
<p class="faq" id="what-are-some-other-good-extensions"><a class="faq-question" href="#what-are-some-good-extensions">Q</a> What are some good extensions?<br>
|
|
||||||
<br>
|
|
||||||
<a class="faq-answer" href="#what-are-some-other-good-extensions">A</a> The most popular is MangaDex, MangaRock and MangaSee, these are large sites which host content from scanlators, there's also extensions like Genkan, Madara, FoolSlide and ComiCake which contains sources which hosts directly from the scanlators own websites.<br><br><a target="_blank" href="https://docs.google.com/spreadsheets/d/1TyJEUg78WWH4zgnf3g6M2lkbWpBWbd40FYiPVQhW8IU/edit#gid=0">Here</a>'s a good spreadsheet showing the different extensions and their sources.</p>
|
|
||||||
<hr>
|
|
||||||
<p class="faq" id="how-do-i-allow-third-party-installations-on-my-phone"><a class="faq-question" href="#how-do-i-allow-third-party-installations-on-my-phone">Q</a> How do I allow third-party installations on my phone?<br>
|
|
||||||
<br>
|
|
||||||
<a class="faq-answer" href="#how-do-i-allow-third-party-installations-on-my-phone">A</a> When installing your first extension and are promted that your phone isn't allowed to install unknown apps from that source, simply press the <code>Settings</code> button and then allow it.<br>
|
|
||||||
<br>
|
|
||||||
Two example videos, left one is for newer Androids.<br>
|
|
||||||
<a class="col-sm-4" data-gallery="example-gallery" data-toggle="lightbox" href="assets/step-unknownapps-post8.gif"><img class="lazyload" data-src="assets/step-unknownapps-post8.gif" width="200" height="325"></a> <a class="col-sm-4" data-gallery="example-gallery" data-toggle="lightbox" href="assets/step-unknownapps-pre8.gif"><img class="lazyload" data-src="assets/step-unknownapps-pre8.gif" width="200" height="325"></a></p>
|
|
||||||
<hr>
|
|
||||||
<p class="faq" id="im-not-getting-any-results-when-browsing-mangadex"><a class="faq-question" href="#im-not-getting-any-results-when-browsing-mangadex">Q</a> I'm not getting any results when browsing MangaDex<br>
|
|
||||||
<br>
|
|
||||||
<a class="faq-answer" href="#im-not-getting-any-results-when-browsing-mangadex">A</a> Go to <code>Browse</code> for MangaDex under <code>Catalogues</code>, press the three-dot button in the top-right corner and press the <code>Open in web view</code> button. Now go to the hamburger menu, press the <code>Manga</code> drop-down and then choose either <code>Sign up</code> or <code>Log in</code>.</p>
|
|
||||||
<hr>
|
|
||||||
<p class="faq" id="im-getting-no-results-found-when-trying-to-browse-mangadex-after-logging-in"><a class="faq-question" href="#im-getting-no-results-found-when-trying-to-browse-mangadex-after-logging-in">Q</a> I'm getting "No results found" when trying to browse MangaDex after logging in<br>
|
|
||||||
<br>
|
|
||||||
<a class="faq-answer" href="#im-getting-no-results-found-when-trying-to-browse-mangadex-after-logging-in">A</a> Go to <code>Browse</code> for MangaDex under <code>Catalogues</code>, press the three-dot button in the top-right corner and press the <code>Open in web view</code> button. Now go to the hamburger menu, press the <code>Manga</code> drop-down and then <code>Titles</code>. The last step is to go to the icon in the upper right that looks like four-boxes and select <code>Detailed</code></p>
|
|
||||||
<hr>
|
|
||||||
</div>
|
|
||||||
<p class="mt-5 mb-3 text-muted text-center">More frequently asked questions can be found <a href="https://github.com/inorichi/tachiyomi/wiki/FAQ#frequently-asked-questions" target="_blank">here</a></p>
|
|
||||||
</form>
|
</form>
|
||||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js">
|
<!-- Scripts -->
|
||||||
</script>
|
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
|
||||||
</script>
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
|
||||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
|
<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>
|
||||||
</script>
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js">
|
|
||||||
</script>
|
|
||||||
<script>$("img.lazyload").lazyload();</script>
|
<script>$("img.lazyload").lazyload();</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
38
index2.html
Normal file
38
index2.html
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<title>Tachiyomi Installation</title>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
|
||||||
|
<meta content="" name="description">
|
||||||
|
<link href="favicon.ico" rel="icon">
|
||||||
|
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<link href="assets/style.css" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<form class="form-signin">
|
||||||
|
<div class="text-center mb-4">
|
||||||
|
<a class="faq-answer" href="#how-do-i-allow-third-party-installations-on-my-phone">A</a> When installing your first extension and are promted that your phone isn't allowed to install unknown apps from that source, simply press the <code>Settings</code> button and then allow it.<br>
|
||||||
|
<br>
|
||||||
|
Two example videos, left one is for newer Androids.<br>
|
||||||
|
<a class="col-sm-4" gallery="example-gallery" toggle="lightbox" href="assets/step-unknownapps-post8.gif"><img class="lazyload" src="assets/step-unknownapps-post8.gif" width="200" height="325"></a> <a class="col-sm-4" gallery="example-gallery" toggle="lightbox" href="assets/step-unknownapps-pre8.gif"><img class="lazyload" src="assets/step-unknownapps-pre8.gif" width="200" height="325"></a></p>
|
||||||
|
</div>
|
||||||
|
<p class="mt-5 mb-3 text-muted text-center">More frequently asked questions can be found <a href="https://github.com/inorichi/tachiyomi/wiki/FAQ#frequently-asked-questions" target="_blank">here</a></p>
|
||||||
|
|
||||||
|
<div class="d-flex justify-content-center">
|
||||||
|
<a href="assets/step-unknownapps-post8.gif"><img src="assets/step-unknownapps-post8.gif" width="180"></a>
|
||||||
|
<a href="assets/step-unknownapps-pre8.gif"><img src="assets/step-unknownapps-pre8.gif" width="180"></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js">
|
||||||
|
</script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
|
||||||
|
</script>
|
||||||
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
|
||||||
|
</script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js">
|
||||||
|
</script>
|
||||||
|
<script>$("img.lazyload").lazyload();</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user