2019-09-10 13:08:08 +00:00
<!DOCTYPE html>
< html lang = "en" >
< meta charset = "utf-8" >
< style >
2019-10-16 12:22:49 +00:00
@charset "UTF-8";
:root {
--main-bg-color: #282c37;
--dropdown-bg-color: #111;
--dropdown-bg-color-hover: #333;
--main-bg-color-reply: #212c37;
--main-bg-color-dm: #222;
--main-bg-color-report: #221c27;
--main-header-color-roles: #282237;
--main-fg-color: #dddddd;
--main-link-color: #999;
--main-visited-color: #888;
--border-color: #505050;
--font-size-header: 18px;
--font-color-header: #ccc;
--font-size: 30px;
--text-entry-foreground: #ccc;
--text-entry-background: #111;
}
2019-09-10 15:05:09 +00:00
2019-10-16 12:22:49 +00:00
body, html {
background-color: var(--main-bg-color);
color: var(--main-fg-color);
height: 100%;
font-family: Arial, Helvetica, sans-serif;
max-width: 80%;
min-width: 950px;
margin: 0 auto;
font-size: var(--font-size);
}
2019-09-27 21:52:09 +00:00
2019-10-16 12:22:49 +00:00
a, u {
color: var(--main-fg-color);
}
2019-09-10 15:05:09 +00:00
2019-10-16 12:22:49 +00:00
a:visited{
color: var(--main-visited-color);
font-weight: bold;
}
2019-09-10 15:05:09 +00:00
2019-10-16 12:22:49 +00:00
a:link {
color: var(--main-link-color);
font-weight: bold;
}
2019-09-10 15:05:09 +00:00
2019-10-16 12:22:49 +00:00
.cwButton {
border-radius: 4px;
background-color: #999;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 26px;
padding: 2px;
cursor: pointer;
margin: 5px;
2019-09-10 15:05:09 +00:00
}
2019-10-16 12:22:49 +00:00
.cwText {
display: none;
2019-09-10 15:05:09 +00:00
}
2019-10-16 12:22:49 +00:00
.pageicon {
width: 8%;
2019-09-10 15:05:09 +00:00
}
2019-10-16 12:22:49 +00:00
.timeline-banner {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("img/banner.png");
height: 10%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
2019-09-10 15:05:09 +00:00
}
2019-10-16 12:22:49 +00:00
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("image.png");
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
2019-09-10 15:05:09 +00:00
}
2019-10-16 12:22:49 +00:00
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--font-color-header);
font-size: var(--font-size-header);
2019-09-10 15:05:09 +00:00
}
2019-10-16 12:22:49 +00:00
.new-post-text {
font-size: 24px;
padding: 4px 0;
2019-09-10 15:05:09 +00:00
}
2019-10-16 12:22:49 +00:00
.new-post-subtext {
font-size: 18px;
padding: 4px 0;
2019-09-10 15:05:09 +00:00
}
2019-10-16 12:22:49 +00:00
.highlight {
width: 2%;
2019-09-10 15:05:09 +00:00
}
2019-10-16 12:22:49 +00:00
.roles {
text-align: center;
left: 35%;
background-color: var(--main-header-color-roles);
2019-09-10 15:05:09 +00:00
}
2019-10-16 12:22:49 +00:00
.roles-inner {
padding: 10px 25px;
background-color: var(--main-bg-color);
2019-09-10 13:08:08 +00:00
}
2019-10-16 12:22:49 +00:00
.hero-text img {
border-radius: 1%;
width: 30%;
min-width: 200px;
2019-09-10 13:08:08 +00:00
}
2019-10-16 12:22:49 +00:00
.hero-text img.emoji {
width: 50px;
padding: 0 0;
margin: 0 0;
float: none;
2019-09-10 13:08:08 +00:00
}
2019-10-16 12:22:49 +00:00
.hero-text button {
border: none;
outline: 0;
display: inline-block;
padding: 10px 25px;
color: black;
background-color: #ddd;
text-align: center;
cursor: pointer;
2019-09-10 13:08:08 +00:00
}
2019-10-16 12:22:49 +00:00
.hero-text button:hover {
background-color: #555;
color: white;
2019-09-10 13:08:08 +00:00
}
2019-10-16 12:22:49 +00:00
.button {
border-radius: 4px;
background-color: #999;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 18px;
padding: 10px;
width: 10%;
max-width: 100px;
min-width: 80px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
2019-09-10 13:08:08 +00:00
}
2019-10-16 12:22:49 +00:00
2019-09-12 14:47:30 +00:00
.buttonunfollow {
2019-10-16 12:22:49 +00:00
border-radius: 4px;
background-color: #999;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 18px;
padding: 10px;
width: 20%;
max-width: 200px;
min-width: 100px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
float: right;
2019-09-10 13:08:08 +00:00
}
2019-09-10 15:05:09 +00:00
2019-10-16 12:22:49 +00:00
.buttonhighlighted {
border-radius: 4px;
background-color: green;
border: none;
color: white;
text-align: center;
font-size: 18px;
padding: 10px;
width: 10%;
max-width: 100px;
min-width: 80px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
2019-09-10 15:05:09 +00:00
2019-10-16 12:22:49 +00:00
.timelineIcon {
width: 10%;
}
2019-09-10 15:05:09 +00:00
2019-10-16 12:22:49 +00:00
.followApprove {
border-radius: 4px;
background-color: darkgreen;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 18px;
padding: 10px;
width: 15%;
max-width: 150px;
min-width: 100px;
cursor: pointer;
margin: 0 15px;
float: right;
}
2019-09-10 13:08:08 +00:00
2019-10-16 12:22:49 +00:00
.followDeny {
border-radius: 4px;
background-color: darkred;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 18px;
padding: 10px;
width: 15%;
max-width: 150px;
min-width: 100px;
cursor: pointer;
margin: 0 15px;
float: right;
}
.followRequestHandle {
padding: 0px 20px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
.buttonselected {
border-radius: 4px;
background-color: #666;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 18px;
padding: 10px;
width: 10%;
max-width: 100px;
min-width: 80px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.buttonselectedhighlighted {
border-radius: 4px;
background-color: darkgreen;
border: none;
color: white;
text-align: center;
font-size: 18px;
padding: 10px;
width: 10%;
max-width: 100px;
min-width: 80px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.buttonselected span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
2019-09-10 13:08:08 +00:00
}
2019-10-16 12:22:49 +00:00
.buttonselected span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.buttonselected:hover span {
padding-right: 25px;
}
.buttonselected:hover span:after {
opacity: 1;
right: 0;
}
.container {
border: 2px solid var(--border-color);
background-color: var(--main-bg-color);
border-radius: 5px;
padding: 20px;
margin: 10px 0;
}
.media {
width: 80%;
border-radius: 5px;
padding: 10px;
margin: 10px 0;
}
.message {
margin-left: 7%;
width: 90%;
}
.container p.administeredby {
font-size: 18px;
}
.container::after {
content: "";
clear: both;
display: table;
}
2019-09-10 13:08:08 +00:00
.container img {
2019-10-16 12:22:49 +00:00
float: left;
max-width: 400px;
width: 5%;
padding: 0px 7px;
margin-right: 20px;
border-radius: 10%;
2019-09-10 13:08:08 +00:00
}
2019-10-16 12:22:49 +00:00
.searchEmoji {
-ms-transform: translateY(30%);
transform: translateY(30%);
float: none;
width: 80px;
margin: 0px 10px;
padding: 0px 0px;
border-radius: 0px;
}
.container img.emoji {
float: none;
width: 50px;
margin-left: 0px;
margin-right: 0px;
padding-right: 0px;
border-radius: 0px;
}
.containericons {
padding: 0px 0px;
margin: 0px 0px;
2019-09-10 15:05:09 +00:00
}
2019-10-16 12:22:49 +00:00
2019-09-10 13:08:08 +00:00
.containericons img {
2019-10-16 12:22:49 +00:00
float: right;
max-width: 200px;
width: 6%;
border-radius: 0%;
2019-09-10 13:08:08 +00:00
}
2019-10-16 12:22:49 +00:00
.replyingto {
color: var(--main-fg-color);
2019-09-10 15:05:09 +00:00
}
2019-10-16 12:22:49 +00:00
.container img.announceOrReply {
float: none;
width: 30px;
margin: 0 0;
padding: 0 0;
border-radius: 0;
-ms-transform: translateY(25%);
transform: translateY(25%);
2019-09-10 15:05:09 +00:00
}
2019-10-16 12:22:49 +00:00
.container img.DMicon {
float: none;
width: 40px;
margin: 0 0;
padding: 0 0;
border-radius: 0;
-ms-transform: translateY(25%);
transform: translateY(25%);
2019-09-10 13:08:08 +00:00
}
2019-10-16 12:22:49 +00:00
.darker {
background-color: var(--main-bg-color-reply);
2019-09-10 15:05:09 +00:00
}
2019-10-16 12:22:49 +00:00
.dm {
background-color: var(--main-bg-color-dm);
}
.report {
border-color: #255;
background-color: var(--main-bg-color-report);
}
.container img.attachment {
max-width: 100%;
margin-left: 25%;
width: 50%;
border-radius: 10%;
}
.container img.right {
float: right;
margin-left: 0px;
margin-right:0;
padding: 0 0;
margin: 0 0;
2019-09-10 15:05:09 +00:00
}
2019-10-16 12:22:49 +00:00
.containericons img.right {
float: right;
margin-left: 20px;
margin-right: 0;
}
2019-09-10 13:08:08 +00:00
.time-right {
2019-10-16 12:22:49 +00:00
float: right;
color: #aaa;
margin: 4px 20px;
}
.post-title {
margin-top: 0px;
color: #444;
}
.share-title {
margin-top: 0px;
color: var(--main-fg-color);
}
.skill-title {
margin-left: 25%;
text-align: left;
font-size: 24px;
font-weight: bold;
color: #666;
line-height: 40px;
}
#myProgress {
float: left;
width: 70%;
background-color: #f1f1f1;
}
#myBar {
float: left;
width: 10%;
height: 30px;
background-color: #999;
}
.question {
font-size: var(--font-size);
}
input[type=radio] {
width: 32px;
2019-09-10 15:05:09 +00:00
}
2019-10-16 12:22:49 +00:00
2019-09-10 13:08:08 +00:00
input[type=text], select, textarea {
2019-10-16 12:22:49 +00:00
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
font-size: 24px;
background-color: var(--main-bg-color-reply);
color: var(--main-fg-color);
2019-09-10 15:05:09 +00:00
}
2019-10-16 12:22:49 +00:00
input[type=number] {
width: 10%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
font-size: 18px;
}
.labels {
font-size: 18px;
2019-09-10 13:08:08 +00:00
}
2019-10-16 12:22:49 +00:00
input[type=submit] {
background-color: #555;
color: white;
float: right;
margin: 10px 10px;
padding: 12px 10px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 18px;
width: 120px;
}
2019-09-10 13:08:08 +00:00
input.vote[type=submit] {
2019-10-16 12:22:49 +00:00
background-color: #555;
color: white;
float: left;
margin: 10px 10px;
padding: 12px 10px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 18px;
width: 120px;
}
.cancelbtn {
background-color: #555;
color: white;
float: right;
margin: 10px 10px;
padding: 12px 10px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 18px;
width: 120px;
}
.loginButton {
background-color: #2965;
color: #000;
float: none;
margin: 0px 10px;
padding: 12px 40px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 24px;
opacity: 0.7;
2019-09-10 13:08:08 +00:00
}
2019-10-16 12:22:49 +00:00
2019-09-10 13:08:08 +00:00
input[type=file] {
2019-10-16 12:22:49 +00:00
background-color: #555;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 18px;
2019-09-10 15:05:09 +00:00
}
2019-10-16 12:22:49 +00:00
input[type=submit]:hover {
background-color: #555;
}
.vertical-center {
max-width: 90%;
min-width: 600px;
margin: 0 auto;
padding: 5% 0px;
}
/* The container < div > - needed to position the dropdown content */
.dropdown {
margin: 10px auto;
padding: 0px 14px;
position: relative;
display: inline-block;
}
.dropdown img {
opacity: 1.0;
width: 32px;
height: 32px;
padding: 0px 16px;
-ms-transform: translateY(-10%);
transform: translateY(-10%);
}
.timeline-avatar {
margin: 10px auto;
padding: 0px 0px;
2019-09-10 15:05:09 +00:00
}
2019-10-16 12:22:49 +00:00
.search-result-text {
font-size: var(--font-size);
}
.search-result img {
width: 7%;
padding: 0px 30px;
}
.timeline-avatar img {
opacity: 1.0;
width: 8%;
height: 8%;
padding: 0px 0px;
-ms-transform: translateY(-10%);
transform: translateY(-10%);
}
2019-09-10 13:08:08 +00:00
.scope-desc {
2019-10-16 12:22:49 +00:00
font-size: 18px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: var(--dropdown-bg-color);
min-width: 600px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: var(--main-fg-color);
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content img {
width: 32px;
height: 32px;
padding: 0px 0px;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: var(--dropdown-bg-color-hover);}
/* Show the dropdown menu on hover */
.show {display: block;}
input[type=checkbox]
{
-ms-transform: scale(2);
-moz-transform: scale(2);
-webkit-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
padding: 10px;
margin: 10px 5px;
}
.slider {
-webkit-appearance: none;
width: 57%;
height: 25px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
float: right;
margin: 5px 0;
padding: 12px 0;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
background: var(--main-bg-color);
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: var(--main-bg-color);
cursor: pointer;
}
.dropbtn {
margin: 3%;
padding: 0px 14px;
position: relative;
display: inline-block;
border: none;
cursor: pointer;
}
.dropbtn img {
opacity: 1.0;
width: 3%;
height: 3%;
min-width: 40px;
padding: 0px 16px;
-ms-transform: translateY(-10%);
transform: translateY(-10%);
}
.intro {
font-size: 24px;
color: #999;
}
.matrix {
font-size: 24px;
color: #ddd;
}
.headerlink {
2019-09-10 13:08:08 +00:00
font-size: 30px;
2019-10-16 12:22:49 +00:00
color: white;
2019-09-10 15:05:09 +00:00
}
2019-10-16 12:22:49 +00:00
.siteheader {
2019-09-10 13:08:08 +00:00
font-size: 30px;
2019-10-16 12:22:49 +00:00
color: white;
}
footer {
2019-09-10 15:05:09 +00:00
float: right;
2019-10-16 12:22:49 +00:00
font-size: 18px;
2019-09-10 15:05:09 +00:00
}
2019-10-16 12:22:49 +00:00
@media screen and (min-width: 400px) {
body, html {
font-size: 22px;
}
.container img {
float: left;
max-width: 400px;
width: 5%;
padding: 0px 7px;
margin-right: 20px;
border-radius: 10%;
}
.container img.emojisearch {
float: right;
max-width: 400px;
width: 8%;
padding: 0px 7px;
margin-right: 20px;
border-radius: 10%;
}
.containericons img {
float: right;
max-width: 200px;
width: 3%;
margin: 0px 1%;
border-radius: 0%;
}
.timeline-avatar img {
opacity: 1.0;
width: 8%;
height: 8%;
padding: 0px 0px;
-ms-transform: translateY(-10%);
transform: translateY(-10%);
}
.cwButton {
border-radius: 4px;
background-color: #555;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 20px;
padding: 2px;
cursor: pointer;
margin: 5px;
}
.button {
border-radius: 4px;
background-color: #999;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 18px;
padding: 10px;
width: 10%;
max-width: 100px;
min-width: 80px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.buttonselected {
border-radius: 4px;
background-color: #666;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 18px;
padding: 10px;
width: 10%;
max-width: 100px;
min-width: 80px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.pageicon {
width: 4%;
}
.time-right {
float: right;
color: #aaa;
margin: 4px 20px;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
font-size: 24px;
background-color: var(--main-bg-color-reply);
color: var(--main-fg-color);
}
input[type=button], input[type=submit] {
background-color: #555;
color: white;
float: right;
padding: 10px;
margin: 15px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: var(--font-size);
width: 20%;
}
input.vote[type=submit] {
background-color: #555;
color: white;
float: left;
padding: 10px;
margin: 15px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: var(--font-size);
width: 20%;
}
input[type=file] {
background-color: #555;
color: white;
padding: 20px;
margin: 0px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: var(--font-size);
width: 96%;
}
.cancelbtn {
background-color: #555;
color: white;
float: right;
padding: 10px;
margin: 15px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: var(--font-size);
width: 20%;
}
.scope-desc {
font-size: 32px;
}
.buttonunfollow {
border-radius: 4px;
background-color: #999;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 18px;
padding: 10px;
width: 20%;
max-width: 200px;
min-width: 100px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
float: right;
}
2019-09-10 15:05:09 +00:00
.intro {
2019-10-16 12:22:49 +00:00
font-size: 24px;
color: #999;
2019-09-10 15:05:09 +00:00
}
.headerlink {
2019-10-16 12:22:49 +00:00
font-size: 30px;
color: white;
2019-09-10 15:05:09 +00:00
}
.siteheader {
2019-10-16 12:22:49 +00:00
font-size: 30px;
color: white;
2019-09-10 15:05:09 +00:00
}
footer {
2019-10-16 12:22:49 +00:00
float: right;
font-size: 18px;
2019-09-10 15:05:09 +00:00
}
2019-10-16 12:22:49 +00:00
}
2019-09-10 13:08:08 +00:00
2019-10-16 12:22:49 +00:00
@media screen and (max-width: 1000px) {
body, html {
font-size: 35px;
}
.container img {
float: left;
max-width: 400px;
width: 15%;
padding: 0px 7px;
margin-right: 20px;
border-radius: 10%;
}
.container img.emojisearch {
float: right;
max-width: 400px;
width: 12%;
padding: 0px 7px;
margin-right: 20px;
border-radius: 10%;
}
.containericons img {
float: right;
max-width: 200px;
width: 7%;
margin: 1% 3%;
border-radius: 0%;
}
.timeline-avatar img {
opacity: 1.0;
width: 15%;
height: 15%;
padding: 0px 0px;
-ms-transform: translateY(-10%);
transform: translateY(-10%);
}
.cwButton {
border-radius: 4px;
background-color: #555;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 32px;
padding: 2px;
cursor: pointer;
margin: 5px;
}
.button {
border-radius: 4px;
background-color: #999;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 32px;
padding: 10px;
width: 20%;
max-width: 400px;
min-width: 80px;
transition: all 0.5s;
cursor: pointer;
margin: 15px;
}
.buttonselected {
border-radius: 4px;
background-color: #666;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 32px;
padding: 10px;
width: 20%;
max-width: 400px;
min-width: 80px;
transition: all 0.5s;
cursor: pointer;
margin: 15px;
}
.pageicon {
width: 8%;
}
.time-right {
float: right;
color: #aaa;
margin: 25px 20px;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
font-size: 30px;
background-color: var(--main-bg-color-reply);
color: var(--main-fg-color);
}
input[type=button], input[type=submit] {
background-color: #555;
color: white;
float: right;
padding: 10px;
margin: 15px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 30px;
width: 20%;
}
input.vote[type=submit] {
background-color: #555;
color: white;
float: left;
padding: 10px;
margin: 15px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 30px;
width: 20%;
}
input[type=file] {
background-color: #555;
color: white;
padding: 20px;
margin: 0px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 30px;
width: 95.4%;
}
.cancelbtn {
background-color: #555;
color: white;
float: right;
padding: 10px;
margin: 15px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 30px;
width: 20%;
}
.scope-desc {
font-size: 30px;
}
.buttonunfollow {
border-radius: 4px;
background-color: #999;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 30px;
padding: 10px;
width: 20%;
max-width: 200px;
min-width: 100px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
float: right;
}
.intro {
font-size: 32px;
color: #999;
}
.headerlink {
font-size: 40px;
color: white;
}
.siteheader {
font-size: 40px;
color: white;
}
footer {
float: right;
font-size: 24px;
}
}
.imageright {
2019-09-10 15:05:09 +00:00
float: right;
2019-10-16 12:22:49 +00:00
}
2019-09-10 15:05:09 +00:00
2019-10-16 12:22:49 +00:00
.shell {
2019-09-10 13:08:08 +00:00
margin: 30px 30px;
width: 100%;
float: left;
2019-10-16 12:22:49 +00:00
font-family: Courier;
2019-09-10 13:08:08 +00:00
background-color: black;
2019-10-16 12:22:49 +00:00
}
2019-09-10 13:08:08 +00:00
2019-10-16 12:22:49 +00:00
< / style >
2019-09-10 13:08:08 +00:00
< body >
2019-10-16 12:22:49 +00:00
< div class = "timeline-banner" > < / div >
< center >
< br >
2019-12-14 11:02:01 +00:00
< table style = "margin:1% 0%;width:90%" border = "0" >
2019-10-16 12:22:49 +00:00
< tr >
2020-05-23 10:26:10 +00:00
< th > < a href = "epicyon.tar.gz" > < span class = "headerlink" > Download< / span > < / a > < / th >
2019-10-16 12:22:49 +00:00
< th > < a href = "#install" > < span class = "headerlink" > Install< / span > < / a > < / th >
2019-12-14 11:00:41 +00:00
< th > < a href = "https://gitlab.com/bashrc2/epicyon" > < span class = "headerlink" > Repo< / span > < / a > < / th >
2019-10-16 12:22:49 +00:00
< th > < a href = "https://www.patreon.com/freedombone" > < span class = "headerlink" > Donate< / span > < / a > < / th >
< / tr >
< / table >
2020-05-24 09:40:33 +00:00
< p class = "matrix" > Matrix room: < b > #epicyon:matrix.freedombone.net< br > gemini://freedombone.net/epicyon< / b > < / p >
2019-10-16 12:22:49 +00:00
< p class = "intro" >
Epicyon is an < a href = "https://www.gnu.org/licenses/agpl-3.0.en.html" > AGPL< / a > licensed < a href = "https://www.w3.org/TR/activitypub/" > ActivityPub protocol< / a > compliant < a href = "https://en.wikipedia.org/wiki/Fediverse" > federated social network< / a > server suitable for hosting a small number of accounts on low power systems requiring minimal maintenance, such as single board computers. It's the ActivityPub equivalent of an email server, storing posts as human readable JSON on file, rather than in a database. It also uses only a small amount of RAM.
< p >
< p class = "siteheader" > An Internet of People, Not Corporate Agendas< / p >
< p class = "intro" >
2020-09-16 19:31:26 +00:00
Epicyon is written in Python with a HTML+CSS web interface and uses < i > no javascript< / i > which makes display in a web browser very lightweight. It can run as a < a href = "https://en.wikipedia.org/wiki/Progressive_web_application" > Progressive Web App< / a > on mobile. < i > Just say "no"< / i > to boring social media sites packed with generic adverts and zombified corporate influencers.
2019-10-16 12:22:49 +00:00
< / p >
< table style = "margin:0% 0%;width:100%" border = "0" >
< tr >
< th > < a href = "img/screenshot_purple.jpg" > < img width = "90%" src = "img/screenshot_purple.jpg" alt = "purple theme timeline screenshot" / > < / a > < / th >
< th > < a href = "img/screenshot_hacker.jpg" > < img width = "90%" src = "img/screenshot_hacker.jpg" alt = "hacker theme profile page" / > < / a > < / th >
< / tr >
< tr >
2020-10-05 09:19:12 +00:00
< th > < a href = "img/screenshot_indymedia.jpg" > < img width = "120%" src = "img/screenshots.jpg" alt = "various screenshots" / > < / a > < / th >
2019-10-16 12:22:49 +00:00
< th > < img width = "50%" src = "img/mobile.jpg" alt = "mobile screenshot" / > < / th >
< / tr >
2020-09-16 19:31:26 +00:00
< tr >
< th > < img width = "90%" src = "img/screenshot_login.jpg" alt = "login screen" / > < / th >
< th > < img width = "90%" src = "img/screenshot_emojisearch.jpg" alt = "emoji search" / > < / th >
< / tr >
2019-10-16 12:22:49 +00:00
< / table >
< p class = "intro" >
Emojis, hashtags, photos, video and audio attachments, instance and account level blocking controls, moderation functions and reports are all supported. Build the community you want and avoid the stuff you don't. No ads. No blockchains or other Silicon Valley garbage.
< / p >
< p class = "siteheader" > Message Scopes< / p >
< p class = "intro" >
Define the scope of your messages to reach the right people.
< / p >
< img width = "60%" src = "img/messagescope.jpg" / >
2020-01-14 10:41:53 +00:00
< p class = "siteheader" > Scheduled Posts< / p >
< p class = "intro" >
Schedule posts to be published at some time in the future. This can be useful for reminding yourself to do things (send your future self a direct message) or for creating a series of posts promoting some event, such as a festival or wedding.
< / p >
2020-05-19 09:17:41 +00:00
< p class = "siteheader" > Text Search< / p >
< p class = "intro" >
Want to be reminded about what you said about a topic a month ago? The search screen allows you to do full text search < i > on your own posts< / i > . Search on other posts can be done via the use of hashtags.
< / p >
< p class = "siteheader" > Federated Blogging< / p >
2020-05-23 10:10:39 +00:00
< img width = "10%" src = "img/icons/rss.png" alt = "RSS 2.0" / >
< img width = "10%" src = "img/icons/rss3.png" alt = "RSS 3.0" / >
2020-05-19 09:17:41 +00:00
< p class = "intro" >
2020-05-24 08:59:51 +00:00
You don't need a separate blog system. Blog posts can be added and edited, and are federated as ActivityPub articles. They also have RSS version 2.0 and < a href = "http://r3r.sourceforge.net/rss3-spec.xhtml" > 3.0< / a > feeds. People can comment on blog posts, but unlike other systems the moderation settings apply just the same as they do for any other fediverse post arriving at your server. This makes blog spam much easier to keep control over.
2020-05-19 09:17:41 +00:00
< / p >
2020-06-08 13:05:35 +00:00
2019-10-16 12:22:49 +00:00
< p class = "siteheader" > International and Customizable< / p >
< p class = "intro" >
Epicyon supports many languages. Translations and emoji can easily be added. Alter the logo, backgrounds, terms of service and style to create a unique personality for your instance. Choose from a few different themes, or make a new one.
< / p >
< img width = "70%" src = "img/screenshot_light.jpg" alt = "light theme timeline screenshot" / >
< img width = "70%" src = "img/screenshot_light2.jpg" alt = "light theme profile page screenshot" / >
< p class = "siteheader" > Calendar Events< / p >
< p class = "intro" >
When creating a new post you can optionally also add a date, time and place. This will show up on the calendars of your followers, and makes organizing meetups or other community events simple. You can use message scopes to set up public events or private ones. To create reminders you can send yourself a DM with an event and it will appear on only your calendar.
< / p >
< img width = "70%" src = "img/calendar.jpg" alt = "calendar screenshot" / >
2019-11-26 19:04:14 +00:00
< p class = "siteheader" > Noone Left Behind< / p >
< p class = "intro" >
2020-06-26 10:37:22 +00:00
Epicyon's absence of javascript makes it much more usable in shell based web browsers such as < a href = "https://en.wikipedia.org/wiki/Lynx_%28web_browser%29" > Lynx< / a > . As new web systems are deployed we should not be leaving anyone with minority use cases behind.
2019-11-26 19:04:14 +00:00
< / p >
< img width = "70%" src = "img/screenshot_lynx.jpg" alt = "lynx screenshot" / >
2020-06-08 13:05:35 +00:00
2019-10-16 12:22:49 +00:00
< p class = "siteheader" > Media Timeline< / p >
< p class = "intro" >
Some posts contain images and some don't. The media timeline enables you to view all your pet photos in one place.
< / p >
< img width = "70%" src = "img/screenshot_media.jpg" alt = "media timeline screenshot" / >
2019-11-10 19:55:12 +00:00
< img width = "70%" src = "img/screenshot_media3.jpg" alt = "media timeline screenshot" / >
2019-11-28 17:29:18 +00:00
< p class = "intro" >
If you want your instance to be primarily about posting and interacting with media then you can also enable the < b > media instance< / b > option.
< / p >
2019-10-16 12:22:49 +00:00
< p class = "siteheader" > Genuine Sharing Economy< / p >
< p class = "intro" >
2019-11-07 17:16:20 +00:00
Barter and gift physical items or services with other people on your instance. Search for shared items which you might want or post items you no longer have a use for. Promote ride shares or available accomodation without any unnecessary companies in the middle. Pool resources between trusted friends to build solidarity and have fun.
2019-10-16 12:22:49 +00:00
< / p >
2019-11-05 09:44:54 +00:00
< img width = "70%" src = "img/screenshot_shares.jpg" / >
2019-10-16 12:22:49 +00:00
< p class = "siteheader" > Promote Your Skills and Build Teams< / p >
< p class = "intro" >
Define a set of skills in your profile and search for other people who have the skills you need. Organize teams who can get things done!
2020-06-08 13:05:35 +00:00
< / p >
2019-10-16 12:22:49 +00:00
< table style = "margin:1% 10%;width:90%" border = "0" >
< tr >
< th > < img width = "90%" src = "img/skills.jpg" / > < / th >
< th > < img width = "90%" src = "img/skillssearch.jpg" / > < / th >
< / tr >
< / table >
2019-11-23 19:21:05 +00:00
< p class = "siteheader" > Bookmarks< / p >
< p class = "intro" >
2019-11-23 19:23:52 +00:00
Want to remember a particular link or reply to something later? Bookmark your favorite posts and view them on the < i > Saves< / i > timeline.
2019-11-23 19:21:05 +00:00
< / p >
< img width = "70%" src = "img/screenshot_bookmarks.jpg" / >
2019-12-14 10:32:44 +00:00
< p class = "siteheader" > Hashtags< / p >
< p class = "intro" >
Stay informed about the topics which people that you follow are highlighting. On the search screen there is a hashtag swarm.
< / p >
< img width = "70%" src = "img/screenshot_tagswarm.jpg" / >
2020-06-08 13:05:35 +00:00
2019-10-16 12:22:49 +00:00
< p class = "siteheader" > No Artificial Incentives< / p >
< p class = "intro" >
No algorithmic timelines. No rating or ranking of people. No trending stuff. Removing the artficial cruft of social networking allows you to focus on things you < i > actually care about< / i > , instead of what someone else thinks you should pay attention to.
2020-06-08 13:05:35 +00:00
< / p >
2019-10-16 12:22:49 +00:00
< p id = "install" class = "siteheader" > Install< / p >
< / center >
2019-11-27 23:20:22 +00:00
< p class = "intro" > You will need python version 3.7 or later.< / p >
2019-10-16 12:22:49 +00:00
< p class = "intro" > On a Debian based system:< / p >
< div class = "shell" >
2020-07-08 14:28:08 +00:00
< p > sudo apt install -y tor python3-socks imagemagick python3-numpy python3-setuptools python3-crypto python3-pycryptodome python3-dateutil python3-pil.imagetk python3-idna python3-requests python3-flake8 python3-pyld python3-django-timezone-field python3-pyqrcode python3-png python3-bandit libimage-exiftool-perl certbot nginx< / p >
2019-10-16 12:22:49 +00:00
< / div >
2019-11-05 09:40:53 +00:00
< p class = "intro" >
2019-12-14 11:10:00 +00:00
The following instructions install Epicyon to the < b > /opt< / b > directory. It's not essential that it be installed there, and it could be in any other preferred directory.
2019-11-05 09:40:53 +00:00
< / p >
2019-10-16 12:22:49 +00:00
< p class = "intro" >
2019-12-14 11:10:00 +00:00
Clone the repo, or if you downloaded the tarball then extract it into the < b > /opt< / b > directory.
2019-10-16 12:22:49 +00:00
< / p >
< div class = "shell" >
2019-12-14 11:10:00 +00:00
< p > cd /opt< / p >
2019-10-16 12:22:49 +00:00
< p > git clone https://gitlab.com/bashrc2/epicyon< / p >
< / div >
2019-12-14 11:12:23 +00:00
< p class = "intro" >
Create a user for the server to run as:
< / p >
< div class = "shell" >
< p > sudo su< / p >
< p > adduser --system --home=/opt/epicyon --group epicyon< / p >
2019-12-14 11:13:56 +00:00
< p > chown -R epicyon:epicyon /opt/epicyon< / p >
2019-12-14 11:12:23 +00:00
< / div >
2020-06-08 13:05:35 +00:00
2019-10-16 12:22:49 +00:00
< p class = "intro" >
Create a daemon:
< / p >
< div class = "shell" >
< p > nano /etc/systemd/system/epicyon.service< / p >
< / div >
< p class = "intro" >
Paste the following:
< / p >
< div class = "shell" >
[Unit]< br >
Description=epicyon< br >
After=syslog.target< br >
After=network.target< br >
< br >
[Service]< br >
Type=simple< br >
User=epicyon< br >
Group=epicyon< br >
2019-11-12 21:18:33 +00:00
WorkingDirectory=/opt/epicyon< br >
ExecStart=/usr/bin/python3 /opt/epicyon/epicyon.py --port 443 --proxy 7156 --domain YOUR_DOMAIN --registration open --debug< br >
2019-10-16 12:22:49 +00:00
Environment=USER=epicyon< br >
2019-11-13 17:29:31 +00:00
Environment=PYTHONUNBUFFERED=true< br >
2019-10-16 12:22:49 +00:00
Restart=always< br >
StandardError=syslog< br >
2019-10-16 19:47:52 +00:00
CPUQuota=80%< br >
2019-10-16 12:22:49 +00:00
< br >
[Install]< br >
WantedBy=multi-user.target
< / div >
< p class = "intro" >
Activate the daemon:
< / p >
< div class = "shell" >
systemctl enable epicyon< br >
systemctl start epicyon
< / div >
< p class = "intro" >
Create a web server configuration:
< / p >
< div class = "shell" >
nano /etc/nginx/sites-available/YOUR_DOMAIN
< / div >
< p class = "intro" >
And paste the following:
< / p >
< div class = "shell" >
2020-05-30 19:12:02 +00:00
proxy_cache_path /var/www/cache levels=1:2 keys_zone=my_cache:10m max_size=10g
inactive=60m use_temp_path=off;
2019-10-16 12:22:49 +00:00
server {< br >
listen 80;< br >
listen [::]:80;< br >
server_name YOUR_DOMAIN;< br >
access_log /dev/null;< br >
error_log /dev/null;< br >
client_max_body_size 31m;< br >
client_body_buffer_size 128k;< br >
< br >
limit_conn conn_limit_per_ip 10;< br >
limit_req zone=req_limit_per_ip burst=10 nodelay;< br >
< br >
index index.html;< br >
rewrite ^ https://$server_name$request_uri? permanent;< br >
}< br >
< br >
server {< br >
listen 443 ssl;< br >
server_name YOUR_DOMAIN;< br >
< br >
ssl_stapling off;< br >
ssl_stapling_verify off;< br >
ssl on;< br >
ssl_certificate /etc/letsencrypt/live/YOUR_DOMAIN/fullchain.pem;< br >
ssl_certificate_key /etc/letsencrypt/live/YOUR_DOMAIN/privkey.pem;< br >
#ssl_dhparam /etc/ssl/certs/YOUR_DOMAIN.dhparam;< br >
< br >
ssl_session_cache builtin:1000 shared:SSL:10m;< br >
ssl_session_timeout 60m;< br >
ssl_prefer_server_ciphers on;< br >
ssl_protocols TLSv1.2 TLSv1.3;< br >
ssl_ciphers 'ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA:ECDHE-RSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-RSA-AES256-SHA256:DHE-RSA-AES256-SHA:ECDHE-ECDSA-DES-CBC3-SHA:ECDHE-RSA-DES-CBC3-SHA:EDH-RSA-DES-CBC3-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:DES-CBC3-SHA:!DSS';< br >
add_header X-Frame-Options DENY;< br >
add_header X-Content-Type-Options nosniff;< br >
add_header X-XSS-Protection "1; mode=block";< br >
add_header X-Download-Options noopen;< br >
add_header X-Permitted-Cross-Domain-Policies none;< br >
< br >
add_header X-Robots-Tag "noindex, nofollow, nosnippet, noarchive";< br >
add_header Strict-Transport-Security max-age=15768000;< br >
< br >
access_log /dev/null;< br >
error_log /dev/null;< br >
< br >
index index.html;< br >
< br >
location / {< br >
proxy_http_version 1.1;< br >
client_max_body_size 31M;< br >
proxy_set_header Upgrade $http_upgrade;< br >
proxy_set_header Connection "upgrade";< br >
proxy_set_header Host $http_host;< br >
proxy_set_header X-Real-IP $remote_addr;< br >
proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;< br >
proxy_set_header X-Forward-Proto http;< br >
proxy_set_header X-Nginx-Proxy true;< br >
2020-06-08 14:07:25 +00:00
expires epoch;< br >
proxy_no_cache 1;< br >
2019-10-16 12:22:49 +00:00
proxy_temp_file_write_size 64k;< br >
proxy_connect_timeout 10080s;< br >
proxy_send_timeout 10080;< br >
proxy_read_timeout 10080;< br >
proxy_buffer_size 64k;< br >
proxy_buffers 16 32k;< br >
proxy_busy_buffers_size 64k;< br >
proxy_redirect off;< br >
2019-11-24 22:34:51 +00:00
proxy_request_buffering on;< br >
proxy_buffering on;< br >
2020-05-30 19:12:02 +00:00
proxy_cache my_cache;< br >
proxy_cache_use_stale error timeout http_500 http_502 http_503 http_504;< br >
2020-06-08 14:20:40 +00:00
location ~ ^/(icons|images|media|emoji)/(.*)/(.*).(png|jpg|gif|webp|mp3|ogv|ogg|mp4) {< br >
2020-06-08 14:07:25 +00:00
expires 7d;< br >
proxy_pass http://localhost:7156;< br >
}< br >
2020-06-08 14:20:40 +00:00
location ~ ^/icons/(.*)/(like|repeat|calendar)(.*).(png|jpg|gif|webp|mp3|ogv|ogg|mp4) {< br >
2020-06-06 09:53:42 +00:00
expires epoch;< br >
proxy_no_cache 1;< br >
proxy_pass http://localhost:7156;< br >
}< br >
2020-06-08 14:20:40 +00:00
location ~ ^/icons/(like|repeat|calendar)(.*).(png|jpg|gif|webp|mp3|ogv|ogg|mp4) {< br >
2020-06-06 09:53:42 +00:00
expires epoch;< br >
proxy_no_cache 1;< br >
proxy_pass http://localhost:7156;< br >
}< br >
2020-06-08 14:20:40 +00:00
location ~ ^/users/(.*)/(image|banner).(png|jpg|gif|webp|mp3|ogv|ogg|mp4) {< br >
2020-06-06 10:07:47 +00:00
expires epoch;< br >
proxy_no_cache 1;< br >
proxy_pass http://localhost:7156;< br >
}< br >
2019-10-16 12:22:49 +00:00
proxy_pass http://localhost:7156;< br >
}< br >
}
< / div >
< p class = "intro" >
Enable the site:
< / p >
< div class = "shell" >
2020-05-30 19:12:02 +00:00
ln -s /etc/nginx/sites-available/YOUR_DOMAIN /etc/nginx/sites-enabled/< br >
mkdir /var/www/cache
2019-10-16 12:22:49 +00:00
< / div >
< p class = "intro" >
Forward port 443 from your internet router to your server. If you have dynamic DNS make sure its configured. Add a TLS certificate:
< / p >
< div class = "shell" >
2020-09-15 08:50:38 +00:00
certbot certonly -n --server https://acme-v02.api.letsencrypt.org/directory --standalone -d YOUR_DOMAIN --renew-by-default --agree-tos --email YOUR_EMAIL
2019-10-16 12:22:49 +00:00
< / div >
< p class = "intro" >
Restart your web server:
< / p >
< div class = "shell" >
systemctl restart nginx
< / div >
2019-11-12 21:50:15 +00:00
< p class = "intro" >
2019-11-12 21:52:16 +00:00
If you are using the < a href = "https://caddyserver.com" > Caddy web server< / a > then see < a href = "https://code.freedombone.net/bashrc/epicyon/raw/main/caddy.example.conf" > caddy.example.conf< / a >
2019-11-12 21:50:15 +00:00
< / p >
2019-10-16 12:22:49 +00:00
< p class = "intro" >
Now you can navigate to your domain and register an account. The first account becomes the administrator.
< / p >
2019-11-27 10:27:00 +00:00
2019-11-27 10:30:21 +00:00
< center >
2020-06-20 10:00:40 +00:00
< p id = "install" class = "siteheader" > Installing on Onion or i2p domains< / p >
< p class = "intro" >
If you don't have access to the clearnet, or prefer not to use it, then it's possible to run an Epicyon instance easily from your laptop. There are scripts within the < i > deploy< / i > directory which can be used to install an instance on a Debian or Arch/Parabola operating system. With some modification of package names they could be also used with other distros.
< / p >
< p class = "intro" >
Please be aware that such installations will not federate with ordinary fediverse instances on the clearnet, unless those instances have been specially modified to do so. But onion instances will federate with other onion instances and i2p instances with other i2p instances.
< / p >
2019-11-27 10:30:21 +00:00
< p id = "upgrade" class = "siteheader" > Upgrade< / p >
< / center >
2019-11-27 10:27:00 +00:00
< p class = "intro" >
To subsequently upgrade:
< / p >
< div class = "shell" >
2019-11-27 10:30:21 +00:00
cd /opt/epicyon< br >
git pull< br >
chown -R epicyon:epicyon *< br >
2019-11-27 10:27:00 +00:00
systemctl restart epicyon
< / div >
2019-09-10 13:08:08 +00:00
< / body >
2019-10-16 12:22:49 +00:00
< footer >
< p > By: Bob Mottram < a href = "mailto:bob@freedombone.net" > bob@freedombone.net< / a > < / p >
< / footer >
2019-09-10 13:08:08 +00:00
< / html >
