Skip to content

Commit

Permalink
Update getStarted files
Browse files Browse the repository at this point in the history
  • Loading branch information
@edmishchenko
edmishchenko authored Jan 24, 2024
1 parent f48373c commit 55d6f26
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 37 deletions.
36 changes: 30 additions & 6 deletions docs/css/getStarted.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ body {

header {
padding: 40px 5%;
width: 100%;
margin: 0 auto;
max-width: 1400px;
display: flex;
justify-content: space-between;
align-content: end;
Expand Down Expand Up @@ -104,6 +107,8 @@ header .logo-red {

main {
padding: 20px 5%;
margin: 0 auto;
max-width: 1400px;
display: flex;
}

Expand All @@ -115,13 +120,16 @@ main .second-column {
width: 70%;
padding-right: 5%;
margin-left: 22%;
font-family: 'Inter', sans-serif;
font-family: 'Mona Sans', sans-serif;
}

main .third-column {
width: 20%;
max-width: 500px;
display: flex;
position: fixed;
font-family: 'Mona Sans', sans-serif;
font-weight: 400;
}

main .third-column .tree-container {
Expand All @@ -131,30 +139,32 @@ main .third-column .tree-container {
font-weight: 400;
color: rgba(130, 130, 130, 1);
line-height: 38px;
font-family: 'Mona Sans', sans-serif;
}

main .third-column .tree-container p {
line-height: 30px;
font-family: 'Mona-Sans', sans-serif;
font-weight: 400;
}

main .third-column .tree-container p a{
font-weight: 400;
margin: 0 0 18px;
color: rgba(81, 81, 81, 1);
padding-left: 16px;

}

main .third-column .tree-container p a .current-dot {
position: absolute;
left: 0;
padding-top: 5px;
padding-right: 12px;
color: transparent;
}

main .third-column .tree-container a {
text-decoration: none;
font-size: 16px;
font-family: 'Inter', sans-serif;
font-family: 'Mona Sans', sans-serif;
font-weight: 500;
line-height: 19px;
color: rgba(51, 51, 51, 1);
Expand Down Expand Up @@ -330,6 +340,8 @@ main .second-column .container .article-block{
border-radius: 12px;
margin-bottom: 16px;
margin-right: 16px;
display: flex;
flex-direction: column;
}

main .second-column .container .article-block img {
Expand All @@ -344,7 +356,8 @@ main .second-column .container .article-block p {
font-size: 20px;
line-height: 24px;
margin-top: 0;
margin-bottom: 38px;
padding-bottom: 28px;
margin-bottom: auto;
}

main .second-column .container .article-block button {
Expand All @@ -358,6 +371,8 @@ main .second-column .container .article-block button {
line-height: 19px;
width: 100%;
font-family: 'Inter', sans-serif;
margin-top: auto;
margin-bottom: 18px;
}

main .second-column .container .article-block button:hover {
Expand Down Expand Up @@ -427,7 +442,16 @@ footer .social-media-container svg {
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.04);
transition: opacity 0.5s ease, transform 0.5s ease;
display: block;
margin-left: -5%;
padding-left: 5%;
}

main .third-column .tree-container {
padding-left: 15%;
}

main .third-column .tree-container p a {
line-height: 50px;
}

main .second-column .container {
Expand Down
68 changes: 37 additions & 31 deletions docs/getStarted.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,9 @@ <h3 id="prerequisites">1. Prerequisites</h3>
<ol>
<li>Xcode (For macOS): <span class="inter-regular">If you don't have Xcode installed, it is recommended to install it from the Mac App Store. Xcode includes Swift, and the installation of Xcode will automatically include Swift as part of the development tools.</span></li>
<li>Android Studio: <span class="inter-regular">Android Studio is the official integrated development environment (IDE) for Android app development. You can download Android Studio from the official website: <a
href=""> Android Studio Download.</a></span></li>
href="https://developer.android.com/studio"> Android Studio Download.</a></span></li>
<li>SCADE IDE <span class="inter-regular">(Optional): If you are interested in using Scade for Swift development, you can download it from SCADE's official website: <a
href="">Scade Download.</a></span></li>
href="https://www.scade.io/download">Scade Download.</a></span></li>
</ol>
<h3 id="install">2. How to Install Swift for Android</h3>
<h4>For macOS</h4>
Expand All @@ -57,7 +57,7 @@ <h4>For macOS</h4>
<li class="inter-regular">Run the downloaded installer and follow the setup instructions.</li>
<li class="inter-regular">Launch Android Studio eand complete the initial configuration, including the installation of the Android SDK.</li>
<li class="inter-regular">Install Android NDK, by clicking on Tools -> SDK Manager -> SDK Tools tab. Select the NDK(side by side) and CMake checkboxes. Click OK to download and install.</li>
<li class="inter-regular">Install Android Emulator if you want to run on Android emulators</li>
<li class="inter-regular"><a href="https://developer.android.com/studio/run/emulator">Install Android Emulator</a> if you want to run on Android emulators</li>
</ol>

<ol class="dots">
Expand Down Expand Up @@ -88,7 +88,7 @@ <h4>For Linux</h4>
<pre>Currently Swift for Android is available for macOS only. It will be available for Linux very soon.</pre>

<h3>3. Next Steps: Create a Hello World App on Android Studio using Swift</h3>
<pre class="bottom-border">Refer <a href="">here</a> to quickly create and run the app on Android Studio using Swift.</pre>
<pre class="bottom-border">Refer <a href="https://github.com/6vedant/swift-for-android-docs/blob/main/HowToCreateHelloWorldApp.md">here</a> to quickly create and run the app on Android Studio using Swift.</pre>

<h2 id="helloWorld">How to Create a Hello World Application</h2>
<ol class="dots">
Expand Down Expand Up @@ -337,7 +337,7 @@ <h3>Run the Hello World App</h3>

<img src="img/mobile-code-example.jpg" alt="" class="mobile-code-example">

<p>Source Code: Please find the source code of Hello World App(Swift for Android) <a href="">here</a></p>
<p>Source Code: Please find the source code of Hello World App(Swift for Android) <a href="https://github.com/6vedant/swift-for-android-hello-world">here</a></p>
<div class="bottom-border"></div>

<h2 id="goFurther">Go Further</h2>
Expand All @@ -347,38 +347,44 @@ <h2 id="goFurther">Go Further</h2>
<div class="article-block">
<img src="img/article-image.jpg" alt="">
<p>Implement RecyclerView using Swift PM libraries</p>
<button>
Read article
</button>
<a href="https://medium.com/@SCADE/implement-recyclerview-using-swift-pm-libraries-eacc1efd48af">
<button>
Read article
</button>
</a>
</div>
<div class="article-block">
<img src="img/article-image.jpg" alt="">
<p>Implement RecyclerView using Swift PM libraries</p>
<button>
Read article
</button>
</div>
<div class="article-block">
<img src="img/article-image.jpg" alt="">
<p>Implement RecyclerView using Swift PM libraries</p>
<button>
Read article
</button>
<p>Swift for Android: How to use Swift-Crypto with Android Studio</p>
<a href="https://medium.com/@SCADE/swift-for-android-how-to-use-swift-crypto-with-android-studio-5dd7ecaf47ac">
<button>
Read article
</button>
</a>
</div>
<div class="article-block">
<img src="img/article-image.jpg" alt="">
<p>Implement RecyclerView using Swift PM libraries</p>
<button>
Read article
</button>
</div>
<div class="article-block">
<img src="img/article-image.jpg" alt="">
<p>Implement RecyclerView using Swift PM libraries</p>
<button>
Read article
</button>
<p>Using Swift PM libraries in the Android Studio projects</p>
<a href="https://medium.com/@SCADE/using-swift-pm-libraries-in-the-android-studio-projects-7cef47c300bf">
<button>
Read article
</button>
</a>
</div>
<!-- <div class="article-block">-->
<!-- <img src="img/article-image.jpg" alt="">-->
<!-- <p>Implement RecyclerView using Swift PM libraries</p>-->
<!-- <button>-->
<!-- Read article-->
<!-- </button>-->
<!-- </div>-->
<!-- <div class="article-block">-->
<!-- <img src="img/article-image.jpg" alt="">-->
<!-- <p>Implement RecyclerView using Swift PM libraries</p>-->
<!-- <button>-->
<!-- Read article-->
<!-- </button>-->
<!-- </div>-->
</div>
</div>
<div class="first-column"></div>
Expand Down Expand Up @@ -532,7 +538,7 @@ <h2 id="goFurther">Go Further</h2>
const targetId = link.getAttribute('href').substring(1);
const targetElement = document.getElementById(targetId);
if (targetElement) {
observer = new IntersectionObserver(handleIntersection, { threshold: 0.5 });
observer = new IntersectionObserver(handleIntersection, { threshold: 1 });
observer.observe(targetElement);
}

Expand Down

0 comments on commit 55d6f26

Please sign in to comment.