Welcome to Apollo 2.0

Welcome to Apollo version 2.0, template for creating microsite.

How to start?

To start, you can download index.html file and open it in some text editor. Then you can change content by following instructions:

There are some editors for html you can use: PSPad, Notepad

Apollo config

The first thing that should be done when creating a new Apollo project is to setup the configuration.


              <script id="apollo-config">

              ...

              var apolloConfig = {

                setupWizard: true,

                projectSite: "en",

                ...

setupWizard is helping you to setup the main config correctly with the messages in the console. Before publishing your project, choose 'false' to turn it off.

projectSite - Put the abbreviation of your site here (e.g. en for RFE English). See the list of all abbreviations here: List of abbreviations

projectTitle - Put the title of your story here.

projectDescription - Here you can add the description or introduction of your story for social media.

projectImage - Place a URL leading to the image that you would like to have as the main image of your story for social media.

heroStyle - Here you can define the style of the so-called Hero page (first screen of the story). This is there you would see the title, the description and the main media(picture or video) of the story. You can choose the style of the Hero page from these values: cover-left, cover-right, cover, tabloid, fixed

heroMedia - Here you can put the URL of the media that you choose for the first screen of the story, which can be in these formats: mp4, jpg, jpeg, gif, png

heroMediaMobile - Here you can put smaller version of your video for mobile devices.

heroMediaPoster - In case the media for the Hero page is mp4, you can choose poster for the video (the image that will be shown while the video is being loaded).

heroOverlay - This is a dark overlay for hero media, so that the title and info about your project will be more visible. Possible values: true, false

heroByline - Here you can place the author's of your story name.

pageTheme - Possible values: light, dark

shareMenu - You can turn on or off sharing menu: true, false

footerBlockTitle - This is the title of the footer.

footerBlockContent - This is the content text of the footer.

You can now start adding the content of your story.

When your story will be ready, you can copy whole content of html file and paste it into CMS like dynamic infographics with layout Template 1 (Blank page).

Content

Whole content should be inside this tag:


              <main class="content" id="main">
              


              </div>

Containers:

All content should be placed inside of these divs with a class name '.container'. There are five possibilities. The first container is mandatory, it is being used for technical purposes. 'Big', 'Jumbo' and 'Full' can be added to a regular container class name. Using one of them makes the content placed inside wider and is good for media content like images and videos. See more in the images chapter.

The 'Aside' container is being used for making the content stand out

Don't use container inside container!


              <div class="container">
              


              </div>


              <div class="container container--big">  </div>

              <div class="container container--jumbo">  </div>

              <div class="container container--full">  </div>

              <div class="container container--aside">  </div>

Please, don't use big, jumbo and full containers for the texts for design reasons.

Navigation

On the top right corner of the page there is a menu with navigation. You can add to container a 'navigation-title' tag attribute and and it will appear in the navigation menu.


              <div class="container" navigation-title="Menu item">  </div>

Typography

Headlines:

You can use 6 different types of headlines in your project:

<h1>Your Headline</h1>

h1 - Welcome to Iceland

h2 - Welcome to Iceland

h3 - Welcome to Iceland

h4 - Welcome to Iceland

h5 - Welcome to Iceland

h6 - Welcome to Iceland

Paragraphs

All texts should be in paragraph tags:


                <p>This is my paragraph.</p>

Lead paragraph:

For introduction or important text, you can use lead paragraph when you add class:

<p class="p--lead">Iceland is a Nordic island country...

Iceland is a Nordic island country of Europe located in the North Atlantic Ocean. It has a population of 332,529 and an area of 103,000 km2 (40,000 sq mi), making it the most sparsely populated country in Europe.[8] The capital and largest city is Reykjavík. Reykjavík and the surrounding areas in the southwest of the country are home to over two-thirds of the population.

Divider lines:


                  <div class="divider--solid divider--short"></div>

                  <div class="divider--dotted"></div>

                  <div class="divider--dashed"></div>

Drop caps:

<p class="p--dropcap">The establishment of the Kalmar Union...

The establishment of the Kalmar Union in 1397 united the kingdoms of Norway, Denmark, and Sweden. Iceland thus followed Norway's integration to that union and came under Danish rule, after Sweden's secession from that union in 1523. Although the Danish kingdom introduced Lutheranism forcefully in 1550, Iceland remained a distant semi-colonial territory in which Danish institutions and infrastructures were conspicuous by their absence.

You can also combine lead paragraph with dropcap like this:

<p class="p--lead p--dropcap">The establishment of the Kalmar Union...

Links:

<a href="your url">Reykjavik</a>

Reykjavik

Iceland is volcanically and geologically active. Reykjavik The interior consists of a plateau characterised by sand and lava fields, mountains, and glaciers, while many glacial rivers flow to the sea through the lowlands. Iceland is warmed by the Gulf Stream and has a temperate climate, despite a high latitude just outside the Arctic Circle. Its high latitude and marine influence keep summers chilly, with most of the archipelago having a tundra climate.

Other text styles - Interview text

Here is an example of the interview paragraphs:


              <div class="container interview">

                <p><span>Interrogator:</span><p>

                <p><span>Answerer:</span><p>

              </div>

The Middle Ages

Question: Carbon dating indicates that it was abandoned sometime between 770 and 880.

A: In 2016.

Question: Archeologists uncovered a longhouse in Stöðvarfjörður that has been dated to as early as 800.

A: Swedish Viking explorer Garðar Svavarsson was the first to circumnavigate Iceland in 870 and establish that it was an island.

Question: He stayed over winter and built a house in Húsavík.

A: Garðar departed the following summer but one of his men.

Question: Have you ever been in an institution? Cells.

A: Náttfari decided to stay behind with two slaves.

Question: Náttfari settled in what is now known as Náttfaravík.

A: He and his slaves became the first permanent residents of Iceland.

Question: The Norwegian-Norse chieftain Ingólfr Arnarson.

A: Ingólfr Arnarson built his homestead in present-day Reykjavík in 874.

Other text styles - Tables

You can create tables with this code. There are two possibilities: with and without class name "float-left"


              <table class="float-left">

                <thead>

                  <tr>

                    <th colspan="100%">Head of table</th>

                  </tr>

                </thead>

                <tbody>

                  <tr>

                    <th>First column</th>

                  </tr>

                  <tr>

                    <th>Second column</th>

                  </tr>

                  <tr>

                    <th>Third column</th>

                  </tr>

                </tbody>

              </table>

Reformation and the Early Modern period

List of Escaped Replicants
Physical-A	Mental-A	N6MAA10816
Physical-A	Mental-B	N6FAB21416
Physical-A	Mental-B	N6FAB61216
Physical-A	Mental-C	N6MAC41717

Ingólfr was followed by many other emigrant settlers, largely Scandinavians and their thralls, many of whom were Irish or Scottish. By 930, most arable land on the island had been claimed; the Althing, a legislative and judicial assembly, was initiated to regulate the Icelandic Commonwealth.

Lack of arable land also served impetus to the settlement of Greenland starting in 986. The period of these early settlements coincided with the Medieval Warm Period, when temperatures were similar to those of the early 20th century.

List of Escaped Replicants
Physical-A	Mental-A	N6MAA10816
Physical-A	Mental-B	N6FAB21416
Physical-A	Mental-B	N6FAB61216
Physical-A	Mental-C	N6MAC41717

At this time, about 25% of Iceland was covered with forest, compared to 1% in the present day. Christianity was adopted by consensus around 999–1000, although Norse paganism persisted among some segments of the population for some years afterwards.

Other text styles - Quotes


              <bloquote>

                <cite>Some quote</cite>

                <footer>Author</footer>

              </bloquote>

Here you can see example of a quote, which is placed inside of the 'container--big'.

Then came a Viking named Flóki Vilgerðarson; his daughter drowned en route, then his livestock starved to death.
The Saga

The sagas say that the rather despondent Flóki climbed a mountain and saw a fjord (Ísafjörður) full of icebergs, which led him to give the island its new and present name.[17] The notion that Iceland’s Viking settlers chose that name to discourage oversettlement of their verdant isle is merely a myth.

Images

The simplest code:


              <figure data-source="url_of_the_image.jpg"></figure>

Code with all possibilities:


              <figure data-source="image.jpg" data-caption="Caption." data-thumb="small_image.jpg" data-thumb-caption="true" data-gallery="true"></figure>

data-source - Mandatory. Here you can fill in url of your image from gdb (https://gdb.rferl.org/...)

data-caption - Here you can write caption for an image. If it is empty or not use, image is without caption.

data-thumb - If image is not from gdb, you can fill in here its smaller version.

data-thumb-caption - true/false, if it is false, on page there will be no caption, only in gallery, if it is on.

data-gallery - false/true, here you can choose, if picture will be in gallery. If it is missing default is true and picture will be in gallery.

Here you can see examples of images (<figures>) in different containers:


                <div class="container container--jumbo">

                  <figure data...

                </div>


                <div class="container container--full"></div>

                  <figure data...

                </div>


                <div class="container container--aside"></div>

                  <p>Some text...</p>

                  <figure data...

                  <p>Some text...</p>

                </div>

According to the ancient manuscript Landnámabók, the settlement of Iceland began in 874 AD when the Norwegian chieftain Ingólfr Arnarson became the first permanent settler on the island.

In the following centuries, Norwegians, and to a lesser extent other Scandinavians, emigrated to Iceland, bringing with them thralls (i.e., slaves or serfs) of Gaelic origin.

The island was governed as an independent commonwealth under the Althing, one of the world's oldest functioning legislative assemblies. Following a period of civil strife, Iceland acceded to Norwegian rule in the 13th century. The establishment of the Kalmar Union in 1397 united the kingdoms of Norway, Denmark, and Sweden. Iceland thus followed Norway's integration into that union, coming under Danish rule after Sweden's secession from the union in 1523.

Images in columns


              <div class="container columns">

                <figure data-source="first_image.jpg"></figure>

                <figure data-source="second_image.jpg"></figure>

                <figure data-source="third_image.jpg"></figure>

              </div>

Videos - Youtube

<div class="video" data-type="youtube" data-video-id="R7lDuUaRD-4"></div>

Videos - mp4 video link

<div class="video" data-type="link" data-video-poster="url_of_poster.jpg" data-video-id="url_of_video.mp4"></div>

Videos - embedded from CMS

If your video is already in CMS, you can copy "Embedded Code iframe" and paste it into one of containers.

<iframe src="https://test.rferl.org/embed/player/article/29699199.html" scrolling="no" allowfullscreen="" width="640" height="363" frameborder="0"></iframe>

Videos can be also in different containers:

Audios - mp3 audio

<div class="audio" data-audio-id="url_of_audio.mp3"></div>

Scroll effect

In the begining of this html document you can see this code:


              <script id="apollo-config">

              var scrollEffectConfig = {

                  scrollEffect: true,

                  scrollEffectDynamic: false

              }

              </script>

Here you can try changing scrollEffect value to 'true' or 'false'. It is turning the scrolling effect on/off for the whole document.

Second variable, 'scrollEffectDynamic' will change behavior of the scrolling images.

If you want to use scroll efect for different images you can add following class ('scroll--container') for containers. This containers should contain only one picture (<figure> element). Only 'container--aside's can contain both text and more images.

See examples below:


              <div class="container container--big scroll--container"> </div>

              <div class="container container--jumbo scroll--container"> </div>

              <div class="container container--full scroll--container"> </div>

              <div class="container container--aside scroll--container"> </div>

Container--aside with scroll effect

Geography

Iceland is at the juncture of the North Atlantic and Arctic Oceans. The main island is entirely south of the Arctic Circle, which passes through the small Icelandic island of Grímsey off the main island's northern coast. The country lies between latitudes 63 and 68°N, and longitudes 25 and 13°W.

Iceland is closer to continental Europe than to mainland North America; thus, the island is generally included in Europe for historical, political, cultural, geographical, and practical reasons.[52][53][54][55] Geologically, the island includes parts of both continental plates. The closest body of land is Greenland (290 km, 180 mi).

The closest bodies of land in Europe are the Faroe Islands (420 km, 260 mi); Jan Mayen Island (570 km, 350 mi); Shetland and the Outer Hebrides, both about 740 km (460 mi); and the Scottish mainland and Orkney, both about 750 km (470 mi). The mainland of Norway is about 970 km (600 mi) away.

Iceland is the world's 18th largest island, and Europe's second-largest island after Great Britain. The main island is 101,826 km2 (39,315 sq mi), but the entire country is 103,000 km2 (39,768.5 sq mi) in size, of which 62.7% is tundra.

About 30 minor islands are in Iceland, including the lightly populated Grímsey and the Vestmannaeyjar archipelago. Lakes and glaciers cover 14.3% of its surface; only 23% is vegetated.

The largest lakes are Þórisvatn reservoir: 83–88 km2 (32–34 sq mi) and Þingvallavatn: 82 km2 (32 sq mi); other important lakes include Lagarfljót and Mývatn. Jökulsárlón is the deepest lake, at 248 m (814 ft).

Container--aside without scroll effect

Geography

About 30 minor islands are in Iceland, including the lightly populated Grímsey and the Vestmannaeyjar archipelago. Lakes and glaciers cover 14.3% of its surface; only 23% is vegetated.