RanchiMall/articles
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Basic homepage/article switching

Browse Source
This commit is contained in:
Vivek Teega 2020-06-26 01:28:05 +05:30
parent 176b95835a
commit 3253cb125e
2 changed files with 168 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
helperFns.html
View File

@ -3,7 +3,7 @@
(async () => {
let repourl = "https://api.github.com/repos/ranchimall/articles/contents";
let repocontent = null;
let articles = {}
let window.articles = {}
repocontent = await (await fetch(repourl)).json();
for (var i = 0; i < repocontent.length; i++) {

265
index.html
View File

@ -5,6 +5,10 @@
<title>RanchiMall Times</title>
<style>
hide{
display: none;
}
body {
font-family: 'Droid Serif', serif;
font-size: 14px;
@ -326,112 +330,177 @@
</script>
</head>
<script>
// helper functions
(async () => {
let repourl = "https://api.github.com/repos/ranchimall/articles/contents"
let repocontent = null
window.articles = {}
repocontent = await (await fetch(repourl)).json();
for (var i = 0; i < repocontent.length; i++) {
if (repocontent[i]['name'] == 'articles') {
var articlefolder = await (await fetch(repocontent[i]['url'])).json()
}
}
for (var i = 0; i < articlefolder.length; i++) {
articlehtml = await (await fetch(articlefolder[i]["download_url"])).text()
articles[articlefolder[i]['name'].slice(0,articlefolder[i]['name'].length - 5)] = articlehtml
}
})();
</script>
<body translate="no">
<link
href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900,400italic,700italic,900italic|Droid+Serif:400,700,400italic,700italic"
rel="stylesheet" type="text/css">
<title>Newspaper Style Design Experiment</title>
<meta name="viewport" content="width=device-width">
<div class="head">
<div class="headerobjectswrapper">
<div class="weatherforcastbox"><span style="font-style: italic;">Weatherforcast for the next 24 hours:
Plenty of Sunshine</span><br><span>Wind: 7km/h SSE; Ther: 21°C; Hum: 82%</span></div>
<header>RanchiMall Times</header>
<div id='homepage'>
<title>Newspaper Style Design Experiment</title>
<meta name="viewport" content="width=device-width">
<div class="head">
<div class="headerobjectswrapper">
<div class="weatherforcastbox"><span style="font-style: italic;">Weatherforcast for the next 24 hours:
Plenty of Sunshine</span><br><span>Wind: 7km/h SSE; Ther: 21°C; Hum: 82%</span></div>
<header>RanchiMall Times</header>
</div>
<div class="subhead">Thursday April 30, 2020</div>
</div>
<div class="content">
<div class="collumns">
<div class="collumn">
<div class="head"><span class="headline hl3">When darkness overspreads my eyes</span>
<p><span class="headline hl4">by JOHANN WOLFGANG VON GOETHE</span></p>
</div>
When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper
surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner
sanctuary, I throw myself down among the tall grass by the trickling stream;<p>and, as I lie close
to
the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world
among the stalks, and grow familiar with the countless indescribable forms of the insects and
flies,
then I feel the presence of the Almighty, who formed us in his own image, and the breath of that
universal love which bears and sustains us, as it floats around us in an eternity of bliss; and
then, my friend, when darkness overspreads my eyes, and heaven and earth seem to dwell in my
soul
and absorb its power, like the form of a beloved mistress, then I often think with longing, Oh,
would I could describe these conceptions, could impress upon paper all that is living so full
and
warm within me, that it might be the mirror of my soul, as my soul is the mirror of the infinite
God!</p>
</div>
<div class="collumn">
<div class="head"><span class="headline hl5">Give people courage</span>
<p><span class="headline hl6">The crowd seemed to grow</span></p>
</div>
The sunset faded to twilight before anything further happened. The crowd far away on the left,
towards
Woking, seemed to grow, and I heard now a faint murmur from it. The little knot of people towards
Chobham dispersed. There was scarcely an intimation of movement from the pit.<p></p>
<figure class="figure">
<img class="media" src="https://i.giphy.com/PW7MoTD2d9pJK.gif" alt="">
<figcaption class="figcaption">Hermine hoping for courage.</figcaption>
</figure>
<p>It was this, as much as anything, that gave people courage, and I suppose the new arrivals from
Woking also helped to restore confidence. At any rate, as the dusk came on a slow, intermittent
movement upon the sand pits began, a movement that seemed to gather force as the stillness of
the
evening about the cylinder remained unbroken. Vertical black figures in twos and threes would
advance, stop, watch, and advance again, spreading out as they did so in a thin irregular
crescent
that promised to enclose the pit in its attenuated horns. I, too, on my side began to move
towards
the pit.</p>
<p>Then I saw some cabmen and others had walked boldly into the sand pits, and heard the clatter of
hoofs and the gride of wheels. I saw a lad trundling off the barrow of apples. And then, within
thirty yards of the pit, advancing from the direction of Horsell, I noted a little black knot of
men, the foremost of whom was waving a white flag.</p>
</div>
<div class="collumn">
<div class="head"><span class="headline hl1">May the Force be with you</span>
<p><span class="headline hl2">Let go your conscious self and act on instinct</span></p>
</div>Partially, but it also obeys your commands. Hey, Luke! May the Force be with you. I have
traced
the Rebel spies to her. Now she is my only link to finding their secret base.<p></p>
<figure class="figure">
<img class="media" src="https://i.giphy.com/4fDWVPMoSyhgc.gif" alt="">
<figcaption class="figcaption">"This time, let go your conscious self and act on instinct."
</figcaption>
</figure>
<p>Leave that to me. Send a distress signal, and inform the Senate that all on board were killed.
<span class="citation">"Don't under­estimate the Force. I suggest you try it again,
Luke."</span> This
time, let go your conscious self and act on instinct. In my experience, there is no such thing
as
luck. You're all clear, kid. Let's blow this thing and go home!</p>
<p>You don't believe in the Force, do you? Partially, but it also obeys your commands. The plans you
refer to will soon be back in our hands. As you wish.</p>
</div>
<div class="collumn">
<div class="head"><span class="headline hl3">The buzz of the little world </span>
<p><span class="headline hl4">A thousand unknown plants</span></p>
</div>
<p>I should be incapable of drawing a single stroke at the present moment; and yet I feel that I
never
was a greater artist than now. When, while the lovely valley teems with vapour around me, and
the
meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few
stray
gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling
stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I
hear
the buzz of the little world among the stalks, and grow familiar with the countless
indescribable
forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his
own
image, and the breath</p>
</div>
<div class="collumn">
<div class="head"><span class="headline hl1">It wasn't a dream </span>
<p><span class="headline hl4">by FRANZ KAFKA</span></p>
</div>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed
into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he
could
see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was
hardly able to cover it and seemed ready to slide off any moment. </p>
<p>His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly
as he
looked. "What's happened to me?" he thought. It wasn't a dream. His room, a proper human room
although a little too small, lay peacefully between its four familiar walls. A collection of
textile
samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung
a
picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded
frame.
It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff
that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the
window at the dull weather. </p>
</div>
</div>
</div>
<div class="subhead">Thursday April 30, 2020</div>
</div>
<div class="content">
<div class="collumns">
<div class="collumn">
<div class="head"><span class="headline hl3">When darkness overspreads my eyes</span>
<p><span class="headline hl4">by JOHANN WOLFGANG VON GOETHE</span></p>
</div>
When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper
surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner
sanctuary, I throw myself down among the tall grass by the trickling stream;<p>and, as I lie close to
the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world
among the stalks, and grow familiar with the countless indescribable forms of the insects and flies,
then I feel the presence of the Almighty, who formed us in his own image, and the breath of that
universal love which bears and sustains us, as it floats around us in an eternity of bliss; and
then, my friend, when darkness overspreads my eyes, and heaven and earth seem to dwell in my soul
and absorb its power, like the form of a beloved mistress, then I often think with longing, Oh,
would I could describe these conceptions, could impress upon paper all that is living so full and
warm within me, that it might be the mirror of my soul, as my soul is the mirror of the infinite
God!</p>
</div>
<div class="collumn">
<div class="head"><span class="headline hl5">Give people courage</span>
<p><span class="headline hl6">The crowd seemed to grow</span></p>
</div>
The sunset faded to twilight before anything further happened. The crowd far away on the left, towards
Woking, seemed to grow, and I heard now a faint murmur from it. The little knot of people towards
Chobham dispersed. There was scarcely an intimation of movement from the pit.<p></p>
<figure class="figure">
<img class="media" src="https://i.giphy.com/PW7MoTD2d9pJK.gif" alt="">
<figcaption class="figcaption">Hermine hoping for courage.</figcaption>
</figure>
<p>It was this, as much as anything, that gave people courage, and I suppose the new arrivals from
Woking also helped to restore confidence. At any rate, as the dusk came on a slow, intermittent
movement upon the sand pits began, a movement that seemed to gather force as the stillness of the
evening about the cylinder remained unbroken. Vertical black figures in twos and threes would
advance, stop, watch, and advance again, spreading out as they did so in a thin irregular crescent
that promised to enclose the pit in its attenuated horns. I, too, on my side began to move towards
the pit.</p>
<p>Then I saw some cabmen and others had walked boldly into the sand pits, and heard the clatter of
hoofs and the gride of wheels. I saw a lad trundling off the barrow of apples. And then, within
thirty yards of the pit, advancing from the direction of Horsell, I noted a little black knot of
men, the foremost of whom was waving a white flag.</p>
</div>
<div class="collumn">
<div class="head"><span class="headline hl1">May the Force be with you</span>
<p><span class="headline hl2">Let go your conscious self and act on instinct</span></p>
</div>Partially, but it also obeys your commands. Hey, Luke! May the Force be with you. I have traced
the Rebel spies to her. Now she is my only link to finding their secret base.<p></p>
<figure class="figure">
<img class="media" src="https://i.giphy.com/4fDWVPMoSyhgc.gif" alt="">
<figcaption class="figcaption">"This time, let go your conscious self and act on instinct."
</figcaption>
</figure>
<p>Leave that to me. Send a distress signal, and inform the Senate that all on board were killed. <span
class="citation">"Don't under­estimate the Force. I suggest you try it again, Luke."</span> This
time, let go your conscious self and act on instinct. In my experience, there is no such thing as
luck. You're all clear, kid. Let's blow this thing and go home!</p>
<p>You don't believe in the Force, do you? Partially, but it also obeys your commands. The plans you
refer to will soon be back in our hands. As you wish.</p>
</div>
<div class="collumn">
<div class="head"><span class="headline hl3">The buzz of the little world </span>
<p><span class="headline hl4">A thousand unknown plants</span></p>
</div>
<p>I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never
was a greater artist than now. When, while the lovely valley teems with vapour around me, and the
meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray
gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling
stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear
the buzz of the little world among the stalks, and grow familiar with the countless indescribable
forms of the insects and flies, then I feel the presence of the Almighty, who formed us in his own
image, and the breath</p>
</div>
<div class="collumn">
<div class="head"><span class="headline hl1">It wasn't a dream </span>
<p><span class="headline hl4">by FRANZ KAFKA</span></p>
</div>
<p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed
into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could
see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was
hardly able to cover it and seemed ready to slide off any moment. </p>
<p>His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he
looked. "What's happened to me?" he thought. It wasn't a dream. His room, a proper human room
although a little too small, lay peacefully between its four familiar walls. A collection of textile
samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a
picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame.
It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff
that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the
window at the dull weather. </p>
</div>
</div>
<div id=displaypage>
</div>
</body>
<script>
window.addEventListener("click", function(){
console.log("Registered a click")
if(document.getElementById("homepage").style.display == "none"){
document.getElementById("homepage").style.display = "initial"
document.getElementById("displaypage").style.display = "none"
}
else{
document.getElementById("homepage").style.display = "none"
document.getElementById("displaypage").innerHTML = articles.bengal
document.getElementById("displaypage").style.display = "initial"
}
});
</script>
</html>