Basic layout
This commit is contained in:
parent
fe652fd276
commit
b1516b3371
|
|
@ -9,6 +9,7 @@
|
|||
{{content-for "head"}}
|
||||
<link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css">
|
||||
<link integrity="" rel="stylesheet" href="{{rootURL}}assets/akkounts-web.css">
|
||||
<link href='https://fonts.googleapis.com/css?family=Raleway:300|Abel' rel='stylesheet' type='text/css'>
|
||||
{{content-for "head-footer"}}
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -16,6 +17,6 @@
|
|||
<script src="{{rootURL}}assets/vendor.js"></script>
|
||||
<script src="{{rootURL}}assets/akkounts-web.js"></script>
|
||||
{{content-for "body-footer"}}
|
||||
<script src ="http://andromeda.kosmos.org:23001/modal/btcpay.js"></script>
|
||||
<script src ="https://btcpay.kosmos.org/modal/btcpay.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
import Route from '@ember/routing/route';
|
||||
|
||||
export default Route.extend({
|
||||
});
|
||||
|
|
@ -1,20 +1,93 @@
|
|||
fieldset {
|
||||
border: none;
|
||||
h1, h2, ul, li, p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: Abel, sans-serif;
|
||||
font-size: 18px;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
#grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: 38.2% 61.8%;
|
||||
grid-template-rows: 10rem 1fr;
|
||||
grid-template-areas: "A C" "B C";
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
header.site {
|
||||
grid-area: A;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
background: rgb(137,85,160);
|
||||
background: linear-gradient(35deg, rgba(137,85,160,1) 0%, rgba(13,79,153,1) 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
header.site h1 {
|
||||
flex: 1;
|
||||
font-family: Raleway, sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: 2rem;
|
||||
letter-spacing: 0.025em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
nav.site {
|
||||
grid-area: B;
|
||||
padding: 2rem 0;
|
||||
background-color: #222;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
nav.site header {
|
||||
margin-bottom: 1rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
nav.site ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
nav.site ul li > a {
|
||||
display: block;
|
||||
padding: 2rem 2rem;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
nav.site ul li > a:hover,
|
||||
nav.site ul li > a.active {
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
main {
|
||||
margin: 5rem auto;
|
||||
grid-area: C;
|
||||
grid-row: span 2 / auto;
|
||||
/* margin: 5rem auto; */
|
||||
background-color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p {
|
||||
main h2 {
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
main p {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
}
|
||||
|
||||
input#email, input#amount {
|
||||
padding: 1rem;
|
||||
font-size: 1.25rem;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,55 @@
|
|||
<main>
|
||||
{{outlet}}
|
||||
</main>
|
||||
<div id="grid-container">
|
||||
<header class="site">
|
||||
<h1>
|
||||
<span class="project-name">Kosmos</span>
|
||||
<span class="site-name">Services</span>
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
<nav class="site">
|
||||
<ul>
|
||||
<li>
|
||||
{{#link-to "mastodon.signup"}}
|
||||
<header>
|
||||
<span class="domain-name">kosmos.social</span>
|
||||
<span class="product-name">(Mastodon)</span>
|
||||
</header>
|
||||
<p class="description">
|
||||
A social network server that is part of the fediverse, a decentralized
|
||||
alternative to Twitter etc.
|
||||
</p>
|
||||
{{/link-to}}
|
||||
</li>
|
||||
<li class="coming-soon">
|
||||
<a href="#">
|
||||
<header>
|
||||
<span class="domain-name">xmpp.kosmos.org</span>:
|
||||
<span class="product-name">(ejabberd)</span>
|
||||
</header>
|
||||
<p class="description">
|
||||
Chat rooms and instant messaging, based on a widely used open protocol.
|
||||
A decentralized alternative to Slack, Telegram, Signal, etc.
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="coming-soon">
|
||||
<a href="#">
|
||||
<header>
|
||||
<span class="domain-name">gitea.kosmos.org</span>:
|
||||
<span class="product-name">(Gitea)</span>
|
||||
</header>
|
||||
<p class="description">
|
||||
Code hosting and collaboration for software projects. A free and open
|
||||
alternative to GitHub, GitLab, etc.
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
{{outlet}}
|
||||
</main>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<h2>kosmos.social</h2>
|
||||
<p>
|
||||
{{#link-to "mastodon.signup"}}I would like to register a new account{{/link-to}}
|
||||
</p>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { module, test } from 'qunit';
|
||||
import { setupTest } from 'ember-qunit';
|
||||
|
||||
module('Unit | Route | mastodon/index', function(hooks) {
|
||||
setupTest(hooks);
|
||||
|
||||
test('it exists', function(assert) {
|
||||
let route = this.owner.lookup('route:mastodon/index');
|
||||
assert.ok(route);
|
||||
});
|
||||
});
|
||||
Reference in New Issue