mirror of https://gitlab.com/bashrc2/epicyon
				
				
				
			
		
			
				
	
	
		
			1225 lines
		
	
	
		
			29 KiB
		
	
	
	
		
			HTML
		
	
	
			
		
		
	
	
			1225 lines
		
	
	
		
			29 KiB
		
	
	
	
		
			HTML
		
	
	
| <!DOCTYPE html>
 | |
| <html lang="en">
 | |
|   <meta charset="utf-8">
 | |
|   <script type="application/ld+json">
 | |
|     {
 | |
|         "@context" : "http://schema.org",
 | |
|         "@type" : "SoftwareApplication",
 | |
|         "name" : "Epicyon",
 | |
|         "image" : "https://libreserver.org/epicyon/images/logo.png",
 | |
|         "url" : "https://libreserver.org/epicyon",
 | |
|         "author" : {
 | |
|             "@type" : "Person",
 | |
|             "name" : "Bob Mottram",
 | |
|             "email": "bob@libreserver.org",
 | |
|             "url": "https://epicyon.libreserver.org/users/bob"
 | |
|         },
 | |
|         "applicationCategory" : ["server", "software", "bash", "debian", "linux", "self-hosting", "raspberry-pi"],
 | |
|         "downloadUrl" : "https://libreserver.org/epicyon/epicyon.tar.gz"
 | |
|     }
 | |
|   </script>
 | |
|   <meta name="description" content="ActivityPub server written in Python, HTML and CSS, and suitable for self-hosting on single board computers">
 | |
|   <meta name="keywords" content="ActivityPub, Fediverse, Python, HTML, CSS, SmallWeb, SelfHosting, RaspberryPi">
 | |
|   <meta name="author" content="Bob Mottram">
 | |
|   <style>
 | |
|     @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;
 | |
|     }
 | |
| 
 | |
|     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);
 | |
|     }
 | |
| 
 | |
|     a, u {
 | |
|         color: var(--main-fg-color);
 | |
|     }
 | |
| 
 | |
|     a:visited{
 | |
|         color: var(--main-visited-color);
 | |
|         font-weight: bold;
 | |
|     }
 | |
| 
 | |
|     a:link {
 | |
|         color: var(--main-link-color);
 | |
|         font-weight: bold;
 | |
|     }
 | |
| 
 | |
|     .cwButton {
 | |
|         border-radius: 4px;
 | |
|         background-color: #999;
 | |
|         border: none;
 | |
|         color: #FFFFFF;
 | |
|         text-align: center;
 | |
|         font-size: 26px;
 | |
|         padding: 2px;
 | |
|         cursor: pointer;
 | |
|         margin: 5px;
 | |
|     }
 | |
| 
 | |
|     .cwText {
 | |
|         display: none;
 | |
|     }
 | |
| 
 | |
|     .pageicon {
 | |
|         width: 8%;
 | |
|     }
 | |
| 
 | |
|     .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;
 | |
|     }
 | |
| 
 | |
|     .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;
 | |
|     }
 | |
| 
 | |
|     .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);
 | |
|     }
 | |
| 
 | |
|     .new-post-text {
 | |
|         font-size: 24px;
 | |
|         padding: 4px 0;
 | |
|     }
 | |
| 
 | |
|     .new-post-subtext {
 | |
|         font-size: 18px;
 | |
|         padding: 4px 0;
 | |
|     }
 | |
| 
 | |
|     .highlight {
 | |
|         width: 2%;
 | |
|     }
 | |
| 
 | |
|     .roles {
 | |
|         text-align: center;
 | |
|         left: 35%;
 | |
|         background-color: var(--main-header-color-roles);
 | |
|     }
 | |
| 
 | |
|     .roles-inner {
 | |
|         padding: 10px 25px;
 | |
|         background-color: var(--main-bg-color);
 | |
|     }
 | |
| 
 | |
|     .hero-text img {
 | |
|         border-radius: 1%;
 | |
|         width: 30%;
 | |
|         min-width: 200px;
 | |
|     }
 | |
| 
 | |
|     .hero-text img.emoji {
 | |
|         width: 50px;
 | |
|         padding: 0 0;
 | |
|         margin: 0 0;
 | |
|         float: none;
 | |
|     }
 | |
| 
 | |
|     .hero-text button {
 | |
|         border: none;
 | |
|         outline: 0;
 | |
|         display: inline-block;
 | |
|         padding: 10px 25px;
 | |
|         color: black;
 | |
|         background-color: #ddd;
 | |
|         text-align: center;
 | |
|         cursor: pointer;
 | |
|     }
 | |
| 
 | |
|     .hero-text button:hover {
 | |
|         background-color: #555;
 | |
|         color: white;
 | |
|     }
 | |
| 
 | |
|     .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;
 | |
|     }
 | |
| 
 | |
|     .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;
 | |
|     }
 | |
| 
 | |
|     .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;
 | |
|     }
 | |
| 
 | |
|     .timelineIcon {
 | |
|         width: 10%;
 | |
|     }
 | |
| 
 | |
|     .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;
 | |
|     }
 | |
| 
 | |
|     .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;
 | |
|     }
 | |
| 
 | |
|     .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;
 | |
|     }
 | |
| 
 | |
|     .container img {
 | |
|         float: left;
 | |
|         max-width: 400px;
 | |
|         width: 5%;
 | |
|         padding: 0px 7px;
 | |
|         margin-right: 20px;
 | |
|         border-radius: 10%;
 | |
|     }
 | |
| 
 | |
|     .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;
 | |
|     }
 | |
| 
 | |
|     .containericons img {
 | |
|         float: right;
 | |
|         max-width: 200px;
 | |
|         width: 6%;
 | |
|         border-radius: 0%;
 | |
|     }
 | |
| 
 | |
|     .replyingto {
 | |
|         color: var(--main-fg-color);
 | |
|     }
 | |
| 
 | |
|     .container img.announceOrReply {
 | |
|         float: none;
 | |
|         width: 30px;
 | |
|         margin: 0 0;
 | |
|         padding: 0 0;
 | |
|         border-radius: 0;
 | |
|         -ms-transform: translateY(25%);
 | |
|         transform: translateY(25%);
 | |
|     }
 | |
| 
 | |
|     .container img.DMicon {
 | |
|         float: none;
 | |
|         width: 40px;
 | |
|         margin: 0 0;
 | |
|         padding: 0 0;
 | |
|         border-radius: 0;
 | |
|         -ms-transform: translateY(25%);
 | |
|         transform: translateY(25%);
 | |
|     }
 | |
| 
 | |
|     .darker {
 | |
|         background-color: var(--main-bg-color-reply);
 | |
|     }
 | |
| 
 | |
|     .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;
 | |
|     }
 | |
|     .containericons img.right {
 | |
|         float: right;
 | |
|         margin-left: 20px;
 | |
|         margin-right: 0;
 | |
|     }
 | |
| 
 | |
|     .time-right {
 | |
|         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;
 | |
|     }
 | |
| 
 | |
|     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=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;
 | |
|     }
 | |
| 
 | |
|     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;
 | |
|     }
 | |
| 
 | |
|     input.vote[type=submit] {
 | |
|         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;
 | |
|     }
 | |
| 
 | |
|     input[type=file] {
 | |
|         background-color: #555;
 | |
|         color: white;
 | |
|         padding: 12px 20px;
 | |
|         border: none;
 | |
|         border-radius: 4px;
 | |
|         cursor: pointer;
 | |
|         font-size: 18px;
 | |
|     }
 | |
| 
 | |
|     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;
 | |
|     }
 | |
| 
 | |
|     .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%);
 | |
|     }
 | |
| 
 | |
|     .scope-desc {
 | |
|         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 {
 | |
|         font-size: 30px;
 | |
|         color: white;
 | |
|     }
 | |
| 
 | |
|     .siteheader {
 | |
|         font-size: 30px;
 | |
|         color: white;
 | |
|     }
 | |
| 
 | |
|     .subheader {
 | |
|         font-size: 16px;
 | |
|         color: white;
 | |
|     }
 | |
| 
 | |
|     .releaseheader {
 | |
|         font-size: 30px;
 | |
| 	font-weight: bold;
 | |
|         color: yellow;
 | |
|     }
 | |
| 
 | |
|     .releaseheader a:link {
 | |
|         color: yellow;
 | |
|         font-weight: bold;
 | |
|     }
 | |
| 
 | |
|     footer {
 | |
|         float: right;
 | |
|         font-size: 18px;
 | |
|     }
 | |
| 
 | |
|     @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;
 | |
|         }
 | |
|         .intro {
 | |
|             font-size: 24px;
 | |
|             color: #999;
 | |
|         }
 | |
| 
 | |
|         .headerlink {
 | |
|             font-size: 30px;
 | |
|             color: white;
 | |
|         }
 | |
| 
 | |
|         .siteheader {
 | |
|             font-size: 30px;
 | |
|             color: white;
 | |
|         }
 | |
| 
 | |
|         footer {
 | |
|             float: right;
 | |
|             font-size: 18px;
 | |
|         }
 | |
|     }
 | |
| 
 | |
|     @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 {
 | |
|         float: right;
 | |
|     }
 | |
| 
 | |
|     .shell {
 | |
|         margin: 30px 30px;
 | |
|         width: 100%;
 | |
|         float: left;
 | |
|         font-family: Courier;
 | |
|         background-color: black;
 | |
|     }
 | |
| 
 | |
|   </style>
 | |
|   <head>
 | |
|     <title>Epicyon ActivityPub server release version 1.3.0</title>
 | |
|   </head>
 | |
|   <body>
 | |
|     <div class="timeline-banner"></div>
 | |
|     <center>
 | |
|       <br>
 | |
|       <p class="siteheader">Epicyon release version 1.3.0</p>
 | |
|       <p class="siteheader">"Norfolk Terrier"</p>
 | |
|       <p class="subheader">3rd Feb 2022</p>
 | |
|     </center>
 | |
|     <p class="intro">Over the last year <a href="https://libreserver.org/epicyon">Epicyon</a> has seen some major improvements, such as keyboard navigation, much faster cryptography and federated shared items. So it has been an unusually busy year for the project and I expect that future development is going to become less hectic and more incremental.</p>
 | |
|     <p class="intro">Like a Norfolk Terrier, the fediverse continues to be a lively and more friendly companion than the <a href="https://en.wikipedia.org/wiki/Hedorah">smog monster</a> which the big commercial social networks have turned into. Even if it doesn't take over the world or isn't to everyone's taste, being able to run your own small social network sites the way you want to and on low cost hardware is a victory.</p>
 | |
|     <p class="intro">Epicyon is not intended to compete with Mastodon, and there are no public Epicyon instances to try. This is expected to be a self-hosted system for instances with ten user accounts or less. Don't scale up, scale out horizontally, like the rhizome.</p>
 | |
|     <p class="intro">Some of the changes since the previous version are:
 | |
| 	<ul>
 | |
| 	   <li>Switched from pycryptodome to python3-cryptography, with 20X speed increase</li>
 | |
| 	   <li>Bug fixes to RSS feed parsing in the newswire</li>
 | |
| 	   <li>Improved support for podcasts, including the <a href="https://github.com/Podcastindex-org/podcast-namespace">podcast namespace</a></li>
 | |
| 	   <li>Dyslexic font option</li>
 | |
| 	   <li>Instance metadata improvements</li>
 | |
| 	   <li>Exceeded 10K commits (if that means anything)</li>
 | |
| 	   <li>Configurable keyboard navigation</li>
 | |
| 	   <li>Emoji reactions 😄</li>
 | |
| 	   <li>Support for tiny screen size on very small phones</li>
 | |
| 	   <li>Improved support for groups</li>
 | |
| 	   <li>Federation of shared items</li>
 | |
| 	   <li>Shared items ontology, based on the <a href="https://www.datafoodconsortium.org/en/our-standard">Data Food Consortium</a></li>
 | |
| 	   <li>Accommodation as a shared item category</li>
 | |
| 	   <li>Mute button mutes the whole conversation</li>
 | |
| 	   <li>Reply screen shows the post being replied to</li>
 | |
| 	   <li>Onboarding screens</li>
 | |
| 	   <li>Code architecture graphs</li>
 | |
| 	   <li>Occupation field within profile</li>
 | |
| 	   <li>DM bounce messages</li>
 | |
| 	   <li>Broch mode dogpiling defense</li>
 | |
| 	   <li>Support for authenticated fetch</li>
 | |
| 	 </ul> 
 | |
|     <p>
 | |
|     <p class="intro">Epicyon can be downloaded as <a href="epicyon.tar.gz">a gzipped file</a>, or you can get the latest version from the <a href="https://gitlab.com/bashrc2/epicyon">git repo</a>. For installation instructions see <a href="index.html">the main page</a>. To upgrade an existing instance, make sure that you have the python3-cryptography package installed then do a git pull, chown and restart the daemon. <i>Upgrades to web systems do not need to be a huge drama</i>.</p>
 | |
|   </body>
 | |
|   <footer>
 | |
|     <p>By: Bob Mottram <a href="mailto:bob@libreserver.org">bob@libreserver.org</a></p>
 | |
|   </footer>
 | |
| </html>
 |