Mastodon
/
Sengi-Windows-MacOS-Linux
mirror of https://github.com/NicolasConstant/sengi
1
0
Fork 0
Code Issues Releases Wiki Activity

added buttons

This commit is contained in:
Nicolas Constant 2019-04-12 20:16:12 -04:00
parent 726246ee7c
commit bb2e2cda73
No known key found for this signature in database
GPG Key ID: 1E9F677FB01A5688
6 changed files with 166 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
docs/assets/css/main.css
View File

@ -73,9 +73,59 @@ body {
.header__image { .header__image {
display: none; } } display: none; } }
.header__download-box { .header__download-box {
outline: 1px solid green; transition: all .2s;
margin: 30vh auto 0 auto; margin: 30vh auto 0 auto;
width: 30vw; } width: calc(95%);
font-family: 'Open Sans', sans-serif;
font-size: 2rem; }
@media (max-width: 56.25em) { @media (max-width: 56.25em) {
.header__download-box { .header__download-box {
width: 70vw; } } margin: 10vh auto 0 auto; } }
.header__download-box--title {
font-weight: 300;
font-size: 5rem;
margin: 0 0 1rem 2rem; }
.header__download-box--subtitle {
font-weight: 400;
font-size: 2rem;
margin-bottom: .5rem; }
.download-button {
transition: all .2s;
background-color: white;
display: block;
border: 1px solid #cdcdcd;
border-radius: 2px;
float: left;
margin-right: 5px;
padding: 0 15px 2px 15px;
font-size: 38px;
color: #3f3f3f;
text-decoration: none; }
.download-button:hover {
color: #faa424; }
.download-button__web {
font-size: 25px;
background-color: #04d431;
background-color: #faa424;
background-color: #fd9d0d;
background-color: #3f3f3f;
color: white;
color: #202020;
color: white;
padding: 10px 20px 10px 15px;
border-radius: 3px;
border: 1px solid #ffffff;
border: 1px solid #e7e7e7; }
.download-button__web--label {
font-size: 25px;
font-weight: normal;
padding-left: 10px; }
.download-button__web:hover {
color: #3d3d3d;
background-color: #ffe5be;
background-color: #faa424; }
.fa-apple {
position: relative;
top: -2px; }

95
docs/assets/sass/layout/_header.scss
View File

@ -1,4 +1,5 @@
.header { .header {
background-color: rgb(247, 247, 247); background-color: rgb(247, 247, 247);
height: calc(100vh - 3rem); height: calc(100vh - 3rem);
overflow: hidden; overflow: hidden;
@ -6,28 +7,108 @@
&__image { &__image {
display: block; display: block;
margin: 8vh auto 0 auto; margin: 8vh auto 0 auto;
@include respond(tab-port){ @include respond(tab-port) {
display: none; display: none;
} }
// @include respond(phone){ // @include respond(phone){
// display: none; // display: none;
// } // }
} }
&__download-box { &__download-box {
transition: all .2s;
// display: inline-block; // display: inline-block;
outline: 1px solid green; // outline: 1px solid green;
margin: 30vh auto 0 auto; margin: 30vh auto 0 auto;
width: 30vw; width: calc(95%);
@include respond(tab-port){ @include respond(tab-port) {
width: 70vw; margin: 10vh auto 0 auto;
} }
// position: relative; // position: relative;
// top: 50%; // top: 50%;
// transform: translateY(-50%); // transform: translateY(-50%);
font-family: 'Open Sans',
sans-serif;
font-size: 2rem;
&--title {
font-weight: 300;
font-size: 5rem;
margin: 0 0 1rem 2rem;
}
&--subtitle {
font-weight: 400;
font-size: 2rem;
margin-bottom: .5rem;
}
} }
}
.download-button {
// -webkit-appearance: button;
// -moz-appearance: button;
// appearance: button;
transition: all .2s;
background-color: white;
display: block;
border: 1px solid #cdcdcd;
border-radius: 2px;
float: left;
margin-right: 5px;
padding: 0 15px 2px 15px;
font-size: 38px;
color: rgb(63, 63, 63);
//color: black;
//opacity: .80;
text-decoration: none;
// outline-color: rgb(141, 140, 140);
&:hover {
color: rgb(250, 164, 36);
}
&__web {
font-size: 25px;
background-color: rgb(4, 212, 49);
background-color: rgb(250, 164, 36);
background-color: rgb(253, 157, 13);
background-color: rgb(63, 63, 63);;
color: white;
color: rgb(32, 32, 32);
color: white;
padding: 10px 20px 10px 15px;
border-radius: 3px;
// border: 1px solid #ececec;
border: 1px solid #ffffff;
border: 1px solid #e7e7e7;
&--label {
font-size: 25px;
font-weight: normal;
padding-left: 10px;
}
&:hover {
color: rgb(61, 61, 61);
background-color: rgb(255, 229, 190);
background-color: rgb(250, 164, 36);
}
}
}
.fa-apple {
position: relative;
top: -2px;
} }

BIN
docs/images/[EN]-snap-store-black-uneditable@1x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
docs/images/[EN]-snap-store-white-uneditable@1x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
docs/images/sengi_image.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 314 KiB

After

Width:  |  Height:  |  Size: 313 KiB

29
docs/index.html
View File

@ -9,6 +9,9 @@
<link rel="shortcut icon" type="image/png" href="images/favicon.png"> <link rel="shortcut icon" type="image/png" href="images/favicon.png">
<title>Discover Sengi</title> <title>Discover Sengi</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:100,300,400,700,900" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head> </head>
<body> <body>
@ -24,12 +27,30 @@
</h1> </h1>
<div class="header__download-box--description"> <div class="header__download-box--description">
A FLOSS multi-account Mastodon and Pleroma desktop client A FLOSS multi-account Mastodon and Pleroma desktop client<br />
Now available in Beta (v0.6.0)<br />
<br />
</div> </div>
<a href="#" <div class="header__download-box--buttons">
onClick="window.open('http://sengi.nicolas-constant.com'+'?qt='+ (new Date()).getTime(),'Sengi','toolbar=no,location=no,status=no,menubar=no,scrollbars=no, resizable=yes,width=377,height=800'); return false;" <p>
class="button">Launch web client</a> <h4 class="header__download-box--subtitle">Try it in your browser!</h4>
<a href="#" class="download-button download-button__web"
onClick="window.open('http://sengi.nicolas-constant.com'+'?qt='+ (new Date()).getTime(),'Sengi','toolbar=no,location=no,status=no,menubar=no,scrollbars=no, resizable=yes,width=377,height=800'); return false;"
class="button"><i class="fas fa-globe"></i><span class="download-button__web--label">launch!</span></a><br />
<br />
<br />
<h4 class="header__download-box--subtitle">Or download the desktop client:</h4>
<a href="#" class="download-button"><i class="fab fa-windows"></i></a>
<a href="#" class="download-button"><i class="fab fa-apple"></i></a>
<a href="#" class="download-button"><i class="fab fa-ubuntu"></i></a>
<a href="https://snapcraft.io/sengi"><img
src="/images/[EN]-snap-store-white-uneditable@1x.png" /></a>
</p>
</div>
</div> </div>
</div> </div>
</div> </div>