Updated swarm page and styles

This commit is contained in:
eniamza 2020-06-07 20:59:04 +06:00
parent 49a12946dc
commit 4fdaa3d232
4 changed files with 147 additions and 34 deletions

84
lib/css/Article-Clean.css Normal file
View file

@ -0,0 +1,84 @@
.article-clean {
color: #56585b;
background-color: #fff;
font-family: 'Lora', serif;
font-size: 14px;
}
.article-clean .intro {
font-size: 16px;
margin: 0 auto 30px;
}
.article-clean .intro h1 {
font-size: 32px;
margin-bottom: 15px;
padding-top: 20px;
line-height: 1.5;
color: inherit;
margin-top: 20px;
}
.article-clean .intro p {
color: #929292;
font-size: 12px;
}
.article-clean .intro p .by {
font-style: italic;
}
.article-clean .intro p .date {
text-transform: uppercase;
padding: 4px 0 4px 10px;
margin-left: 10px;
border-left: 1px solid #ddd;
}
.article-clean .intro p a {
color: #333;
text-transform: uppercase;
padding-left: 3px;
}
.article-clean .intro img {
margin-top: 20px;
}
.article-clean .text p {
margin-bottom: 20px;
line-height: 1.45;
}
@media (min-width:768px) {
.article-clean .text p {
font-size: 16px;
}
}
.article-clean .text h2 {
margin-top: 28px;
margin-bottom: 20px;
line-height: 1.45;
font-size: 16px;
font-weight: bold;
color: #333;
}
@media (min-width:768px) {
.article-clean .text h2 {
font-size: 20px;
}
}
.article-clean .text figure {
text-align: center;
margin-top: 30px;
margin-bottom: 20px;
}
.article-clean .text figure img {
margin-bottom: 12px;
max-width: 100%;
}

View file

@ -1,14 +1,11 @@
/*Fonts*/
@font-face {
font-family: 'Oxygen';
src: url(../fonts/Oxygen/Oxygen-Regular.ttf) format('truetype');
}
@font-face {
font-family: 'Oxygen, Bold';
src: url(../fonts/Oxygen/Oxygen-Bold.ttf) format('truetype');
}
/*/Fonts*/
/* Fonts */
/* /Fonts */
body {
font-family: Oxygen;
}
}
body {
}

0
lib/css/styles.css Normal file
View file

View file

@ -1,25 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LBRY Foundation</title>
<!--TitleBar Icon-->
<link rel="icon" href="../img/small-logo.png" type="image/png" />
<!-- CSS DEPENDENCIES -->
<link rel="stylesheet" href="../lib/fontawesome/css/all.min.css" />
<link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.min.css" />
<!-- /CSS DEPENDENCIES -->
<!--CUSTOM CSS-->
<link rel="stylesheet" href="../lib/css/index.css" />
<!--/CUSTOM CSS-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>LBRY Foundation</title>
<link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oxygen">
<link rel="stylesheet" href="/assets/fonts/fontawesome-all.min.css">
<link rel="stylesheet" href="/assets/css/Article-Clean.css">
<link rel="stylesheet" href="/assets/css/index.css">
<link rel="stylesheet" href="/assets/css/styles.css">
</head>
<body id="home" data-spy="scroll" data-target=".navbar" data-offset="100">
<!-- navbar -->
<body style="color: rgb(255,255,255);"><!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
<div class="container">
<span class="navbar-brand order-1 mr-0"><i class="fab fa-github"></i></span>
@ -66,7 +60,7 @@
</ul>
</div>
<div class="col-md text-md-right">
<small>&copy; 2020 LBRY.org &amp; LBRY Foundation</small>
<small>© 2020 LBRY.org &amp; LBRY Foundation</small>
</div>
</div>
</div>
@ -74,12 +68,50 @@
<!-- JS DEPENDENCIES -->
<script src="../lib/jquery/jquery-3.5.1.min.js" defer></script>
<script src="../lib/bootstrap/js/bootstrap.bundle.min.js" defer></script>
<script src="../lib/jquery/jquery-3.5.1.min.js" defer=""></script>
<script src="../lib/bootstrap/js/bootstrap.bundle.min.js" defer=""></script>
<!-- /JS DEPENDENCIES -->
<!--CUSTOM JS-->
<script src="../lib/js/index.js" defer></script>
<script src="../lib/js/index.js" defer=""></script>
<!--/CUSTOM JS-->
<div class="article-clean" style="background-color: #00303c;">
<div class="container">
<div class="row">
<div class="col-lg-10 col-xl-8 offset-md-0 offset-lg-1 offset-xl-2">
<div class="intro">
<h1 class="text-center" style="color: rgb(255,255,255);"><span style="text-decoration: underline;">The Swarm</span></h1>
</div>
<hr style="filter: blur(0px) brightness(125%) contrast(194%) saturate(200%);color: rgb(255,255,255);">
<div class="text">
<p style="color: rgb(255,255,255);"><br>The swarm is a sub-network within the LBRY network. It utilizes open-source principles to focus on the development of community, <br>engagement, and the voices and reputations of individuals and groups within the LBRY network.<br>The
sub-net nodes are known as hives.<br><br><br></p>
<h2 style="color: rgb(255,255,255);"><span style="text-decoration: underline;">What is Hive ?</span></h2>
<p style="color: rgb(255,255,255);"><br>A hive is a place to meet people who love the things you love, including, of course, the LBRY protocol and the values it represents. Anyone can make a hive, everyone can join as many hives as theyd like, and there can be more
than one hive that center around the same topic or application.<br>Some examples of hives:<br><br>&gt; Music<br>&gt; Country music<br>&gt; EDM<br>&gt; Anime<br>&gt;&nbsp;Art<br>&nbsp;&gt; Photography<br>&gt; The Ninja Turtles<br>&gt;
Donatello, the staff wielding ninja turtle<br>&gt; The staff of Donatello, the staff wielding ninja turtle<br>&gt; Donatellos graphic novel creation app<br>&gt; Really, anything!<br>&gt; You could think of hives as subreddits
on Reddit, or channels on an IRC server, but different.<br><br><br></p>
<h2 style="color: rgb(255,255,255);"><span style="text-decoration: underline;">Why should I join or make a hive?</span><br></h2>
<p style="color: rgb(255,255,255);">Joining or making a hive is a great way to jump into the LBRY network. Make some friends, learn some things, share some ideas, gain some experience, build a reputation, or just hang out with some like minded <br>individuals<br></p>
<h2
style="color: rgb(255,255,255);"><span style="text-decoration: underline;">How do I join a hive?</span><br></h2>
<p style="color: rgb(255,255,255);"><br>Hives are entirely independent and autonomous communities within the larger LBRY network. As such, the process for joining a hive depends entirely on the hive you would like to join. Maybe a hive lets anyone join and all
you need to do is join a chat room. In fact, many hives will have their own role and channel right on the LBRY discord server. <br>To join one of those hives simply join the LBRY discord and ask for the appropriate role
in the #hiveroles channel!<br>Otherwise, maybe a hive only lets folks with portfolios join, like photographers or artists. Maybe a hive requires you to write a short story to join. <br>Maybe a hive requires a code contribution.
Maybe a hive is entirely open. Maybe a hive has a limited number of possible members. So long as the rules of the hive do not conflict with the ethos<br> and protocol of the LBRY network: maybe <em>anything</em>.<br>So
how do you join? Find the hive you would like to join, find out how to join, and follow their instructions!<br><br><br></p>
</div>
<h4 style="background-color: rgba(0,0,0,0);color: rgb(255,255,255);"><span style="text-decoration: underline;">How do I make a hive?</span><br></h4>
<p style="color: rgb(255,255,255);font-size: 16px;"><br>Making a hive is as easy as setting up a chat room and editing a wiki. Actually, thats the entire process!<br>All you need to do to make your own hive is to set up a chat roomor forum and add your hive to the hives table on this
wiki page.<br>The easiest way to do this is to join the LBRY discord #makeahivechannel and ask for you own hive role and channel. After a brief chat with a friendly moderator, youll have your own room and role made right<br> on
the LBRY discord. The LBRY discord is already a buzzing place so this is probably the best way to find more people for your new hive.<br><br><br></p>
<p></p>
</div>
</div>
</div>
</div>
<script src="/assets/js/jquery.min.js"></script>
<script src="/assets/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
</html>