better desktop styling, change some wording

This commit is contained in:
Silas 2022-02-24 11:32:00 -05:00
parent 1696995fb6
commit 50012ad7b3
Signed by: silentsilas
GPG Key ID: 4199EFB7DAA34349
5 changed files with 26 additions and 8 deletions

View File

@ -99,7 +99,20 @@
background: none !important; background: none !important;
} }
@media screen and (max-width: 800px) { html {
height: 100%;
}
@media screen and (min-width: 1025px) {
.centered-container {
margin-top: 0px;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
}
@media screen and (max-width: 1024px) {
.logo { .logo {
display: block; display: block;
margin-left: auto; margin-left: auto;

View File

@ -182,13 +182,13 @@ const JustPage = (props: JustPageProps) => {
<ProgressIndicator currentProgress={1} /> <ProgressIndicator currentProgress={1} />
<Header2>Create a secret</Header2> <Header2>Create a secret</Header2>
<TextAlignWrapper align="left"> <TextAlignWrapper align="left">
<Label htmlFor="secretInput">Enter your secret here</Label> <Label htmlFor="secretInput">Enter a secret message</Label>
</TextAlignWrapper> </TextAlignWrapper>
<TextArea <TextArea
id="secretInput" id="secretInput"
value={secretInput} value={secretInput}
onChange={handleChange} onChange={handleChange}
placeholder="Tell me your secrets" placeholder="Only your intended recipient will see this message."
/> />
<Spacer space="2rem" /> <Spacer space="2rem" />
<TextAlignWrapper align="center"> <TextAlignWrapper align="center">

View File

@ -40,12 +40,17 @@ const SplashPage = (props: SplashPageProps) => {
<CenteredContainer wide> <CenteredContainer wide>
<SplashIconHeader style={{ width: "100%", maxWidth: "440px" }} /> <SplashIconHeader style={{ width: "100%", maxWidth: "440px" }} />
<Header1> <Header1>
<span className="splashHeader">Securely Share Your Secrets</span> <span
className="splashHeader"
style={{ display: "block", marginTop: "20px" }}
>
Securely Share Your Secrets
</span>
</Header1> </Header1>
<Header3> <Header3>
<span className="splashSubheader"> <span className="splashSubheader">
With Intended Link you can easily share messages and files With Intended Link, you can send messages and files to any social
securely and secretly. account in a secure and private manner.
</span> </span>
</Header3> </Header3>
<Spacer /> <Spacer />

View File

@ -1,4 +1,4 @@
<main role="main" style="height: 100vh;"> <main role="main">
<a href="/"> <a href="/">
<img src="<%= Routes.static_path(@conn, "/images/logo.png") %>" class="logo" /> <img src="<%= Routes.static_path(@conn, "/images/logo.png") %>" class="logo" />
</a> </a>

View File

@ -9,7 +9,7 @@
<link phx-track-static rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/> <link phx-track-static rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
<script defer phx-track-static type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script> <script defer phx-track-static type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
</head> </head>
<body style="background: linear-gradient(180deg,#060b2e 0%,#051745 100%); height: 100vh;"> <body style="background: linear-gradient(180deg,#060b2e 0%,#051745 100%); min-height: 100%;">
<%= @inner_content %> <%= @inner_content %>
</body> </body>
</html> </html>