-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.php
255 lines (223 loc) · 11.4 KB
/
index.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
<!--
This site was built using the Tachyons CSS framework - https://tachyons.io/
Do not change anything unless you know what you're doing!
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>SOVIET LINUX</title>
<meta charset="utf-8">
<meta name="description" content="Soviet Linux, a source based Linux Distribution">
<meta name="keywords" content="Linux, Soviet, source based, LFS">
<meta name="author" content="Trevor Beckerson, https://github.com/tbeckerson">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- stylesheets
don't mess with this unless you intend to move the .css file, or use a different, additional framework.
If you add another stylesheet, remember that the priority is bottom to top!
-->
<link rel="stylesheet" href="./assets/tachyons.css">
<link rel="stylesheet" href="./assets/tachyons-custom.css">
<!-- favicon
the little icon in the browser tab
-->
<link rel="icon" type="image/svg+xml" href="./assets/star-favicon.svg">
<!--
any extra styles can be put here between the <style> tags, or in the stylesheet directly. Any duplicate content put here will override content in the stylesheet. Use with caution.
-->
<!-- the font calls are in the main page instead of the style sheet to speed up load times. -->
<style>
@font-face {
font-family: 'Teko';
src: url('../assets/Teko-Regular.ttf');
}
.font-teko {
font-family: 'Teko', sans-serif;
}
@font-face {
font-family: 'Hind';
src: url('../assets/Hind-Regular.ttf');
}
.font-hind {
font-family: 'Hind', sans-serif;
}
@font-face {
font-family: 'Russian';
src: url('../assets/Russian.ttf');
}
.font-russian {
font-family: 'Russian', sans-serif;
}
</style>
<!-- we're using Parsedown for the 'about' & 'documentation' sections. Do NOT remove this php include unless you're prepared to rewrite the middle section of the site. -->
<?php
include 'assets/Parsedown.php';
?>
</head>
<!--
Below here is the visible part of the website. Any classes added to the body tag will be applied to the whole site, unless they're overridden in the tags below.
We're using the Hind font as the default for text.
-->
<body class="font-hind bg-sov-red">
<!-- the parallax effect is contained within the header tag - this is considered a 'code hack', and every browser update could change the behaviour.
It's totally broken on Webkit.
The z-indexs aren't doing anything on Chrome or Firefox, within the header. They do help with the changeover to the non-parallax sections.
The actual z-indexing is based on the fore/back number - plx-back-4 will always be behind plx-back-3, plx-fore-4 will always be in front of plx-fore-3, and so on.
If you decide to disbable the parallax effect, git rid of ALL the class tags: parallax, plx-back-*, plx-fore-*. The layout might break otherwise.
-->
<header class="parallax vh-50 vh-50-ns vh-100-l">
<!-- the far background - sun rays -->
<section id="bg-rays" class="plx-back-4 z-1 ani-fade-in ani-2s ani-delay-2s ani-backwards cover" style="background-image: url('assets/rays.svg')">
</section>
<!--hammer & sickle sliding in from the left-->
<section id="bg-flag" class="plx-back-2 z-2 flex items-start justify-center justify-start-ns">
<img class="h-25 ani-fade-in-left ani-2s pl0 pl5-l pt5" src="assets/hamsic.svg" alt="crossed hammer and sickle">
</section>
<!-- lenny moving from the right to the left -->
<section id="lenin" class="plx-back-2 z-3 flex items-end justify-center justify-end-l">
<img class="h-25 h-75-l ani-fade-in-right ani-2s ani-delay-1s ani-backwards pr0 pr5-l pb2" src="assets/lenin_inv.svg" alt="stylized two-colour picture of Vladimir Lenin">
</section>
<!-- Tittle and subtitle-->
<section id="titlecard" class="plx-back-1 z-4 flex flex-column items-center justify-center" style="">
<div id="title" class="tc ani-fade-in ani-15s ani-delay-1s ani-backwards font-russian near-white f1 f-headline-l tracked">
SOVIET LINUX<br>
☭ <br>
</div>
<div id="subtitle" class="ani-fade-in ani-1s ani-delay-2s ani-backwards font-teko near-white f2 tracked">
The People's Distribution
</div>
</section>
</header>
<!-- the main content of the page - more stuff will come in here eventually. -->
<main class="relative z-4 bg-sov-red bg-center bg-top-l contain bg-fixed bg-animate bb bw2 bw3-l b--dark-gray" style="background-image: url('./assets/unbreakable_union.jpg');">
<!-- the aside contains the download links -->
<aside class="relative z-4 bg-center bg-top-l contain bg-fixed" style="background-image: url('./assets/popup_marx_engels_lenin.jpg');">
<section class="tc mnvh-50 pv5 flex flex-column items-center justify-center bg-sov-yellow-t9 bt bb bw2 bw3-ns b--dark-gray">
<p class="font-teko b tracked f1 f2-m sov-red self-center">DOWNLOAD
</p>
<p class="measure a-dark pa2 pa0-m">
<b>Soviet Linux is in the early stages of development.</b><br>
There is active work being done to make <i>Soviet</i> into a fully functional Linux experience. However, at this time it's <b>not</b> suitable for daily use.
We welcome contributions from interested workers. <a class="" href="#contact">Contact us</a> to see how you can join us.</p>
<!-- this section contains an number of 'a' links to download Soviet. There are 3 sections, each with 2 links. The top row also has two stars -->
<section class="w-100 flex flex-row">
<div class="z-5 w-50 flex flex-column items-center justify-start pb3 ph3">
<!-- tar.xz direct download -->
<a class="linux no-underline w-100 w-50-l ph3 pv3 bg-sov-red hover-bg-dark-red yellow font-teko b f3 f2-l tc bg-animate ba bw1 b--dark-gray br3"
href="https://drive.google.com/file/d/1ILCa3aDjHYqGTS5ChO2JAROta5WfTf0s/view?usp=sharing">
tar.xz Direct
</a>
<p class="measure f4 f3-l tl dark-gray">A <code>tar.xz</code> file that can be extracted into a directory, and accessed through chroot or systemd-nspawn.<br>
It can also be manually copied to an already formatted partition layout and directly booted.
</p>
</div>
<div class="z-5 w-50 flex flex-column items-center justify-start pb3 ph3">
<!-- live usb direct download -->
<a class="linux no-underline w-100 w-50-l ph3 pv3 bg-sov-red hover-bg-dark-red yellow font-teko b f3 f2-l tc bg-animate ba bw1 b--dark-gray br3"
href="https://drive.google.com/file/d/12m-FLWfaP7bAVfKR-a43yWTq6GHOwL9C/view?usp=sharing">
img Direct
</a>
<p class="measure f4 f3-l tl dark-gray">
The img file can be copied to removable media using <code>dd</code> or any other flashing utility. It will boot and function as a live environment. It uses the same files as the <code>tar.xz</code> option
</div>
</section>
<section class="pt4 tracked w-100 flex flex-column justify-center items-center pb3">
<div class="font-teko f3 f2-l sov-red"><b class="dark-gray">Username:</b> root</div>
<div class="font-teko f3 f2-l sov-red"><b class="dark-gray">Password:</b>sovietlinux</div>
</section>
</section>
</aside>
<!-- this section is the about info. It's got a semi-transparent background, which lets the image from show through.
This whole section uses markdown! Parsedown is required unless you want to rewrite this space. -->
<?php
$file = "./markdown/about.md";
if (file_exists($file)) { ?>
<!-- this <p> is the section title -->
<section class="z-5 pv5 ph2 flex flex-column items-center bg-sov-red-t9">
<p class="font-teko b tracked f1 f2-m light-yellow self-center">ABOUT</p>
<!-- the <div> below is the text of the section-->
<div class="font-hind white flex flex-column a-blue measure">
<?php
$filename = fopen($file, 'r') or die("Unable to open file!");
$Parsedown = new Parsedown ();
echo $Parsedown->text(fread($filename,filesize($file)));
fclose($filename);
?>
</div>
</section>
<?php
}
?>
<?php
$file = "./markdown/main.md";
if (file_exists($file)) { ?>
<!-- this <p> is the section title -->
<section class="z-5 pv5 ph2 self-stretch flex flex-column items-center bg-sov-red-t9">
<p class="font-teko b tracked f1 f2-m light-yellow self-center">DOCUMENTATION</p>
<!-- the <div> below is the text of the section-->
<div class="font-hind white flex flex-column measure a-blue">
<?php
$filename = fopen($file, 'r') or die("Unable to open file!");
$Parsedown = new Parsedown ();
echo $Parsedown->text(fread($filename,filesize($file)));
fclose($filename);
?>
</div>
</section>
<?php
}
?>
</main>
<!-- the <footer> is doing the same as <main> right now - it's a container with a background image. -->
<footer class="relative z-5 bg-dark-gray bg-bottom bg-fixed bg-size-h25 bg-size-h50-l" style="background-image: url('./assets/sov_flag-angle.svg')">
<!-- this section is semi-transparent grey, which lets the <footer> background image show through. It's using flexbox instead of paragraphs so that we can add more links in later and readjust the flow (if needed) -->
<section class="z-5 pt5 ph2 bg-dark-gray-t8 flex items-start justify-center">
<!-- penguin with sickle -->
<section class="z-3 self-end tc">
<img class="w-75-m w-50-l v-btm" src="assets/penguin-sickle.svg" alt="penguin holding a sickle" loading="lazy">
</section>
<!-- text -->
<section class="z-4 flex flex-column items-center pb5">
<!-- This <p> is the title of the content -->
<p class="font-teko b tracked f1 f2-m light-yellow self-center" id="contribute">CONTRIBUTE</p>
<p class="measure-l measure-wide-ns white tc">
The revolution is calling your name!<br>
We could use help in all aspects of building this distribution.</p>
<!-- there are three external links, that use the same styling. The <a> tag is on the outside on purpose - everything you can see on the browser is part of the link -->
<!-- Discord -->
<div class="tc pt3 font-teko tracked white">
<a class="f4 f3-ns db no-underline hover-bg-sov-red br2 pv2 ph1" href="https://discord.gg/pTFJjckEjp">
<figure class="tc" style="">
<img class="h3" src="assets/discord-white.svg" alt="official logo for discord.com" loading="lazy">
<figcaption class="light-yellow">DISCORD</figcaption>
</figure> </a>
join our community and interact with the creators.
</div>
<!-- Gitlab -->
<div class="tc pt3 font-teko tracked white">
<a class="f4 f3-ns db no-underline hover-bg-sov-red br2 pv2 ph1" href="https://git.sovietlinux.ml/sovietlinux">
<figure class="tc" style="">
<img class="h3" src="assets/gitlab-white.svg" alt="official logo for gitlab" loading="lazy">
<figcaption class="light-yellow">GITLAB</figcaption>
</figure>
</a>
view our code and join our development process.
</div>
<!-- librepay -->
<div class="tc pt3 font-teko tracked white">
<a class="f4 f3-ns db no-underline hover-bg-sov-red br2 pv2 ph1" href="https://liberapay.com/sovietlinux">
<figure class="tc" style="">
<img class="h3" src="assets/libreapay-white.svg" alt="official logo for libreapay.com" loading="lazy">
<figcaption class="light-yellow">LIBREAPAY</figcaption>
</figure>
</a>
support our server upkeep costs.
</div>
</section>
<!-- penguin with hammer -->
<section class="z-3 self-end tc">
<img class="w-75-m w-50-l v-btm" src="assets/penguin-hammer.svg" alt="penguin holding a hammer" loading="lazy">
</section>
</section>
</footer>
</body>
</html>