Beutification successful. That's all I will be doing for now.
This commit is contained in:
parent
d87faaf38e
commit
d82ca66d12
12 changed files with 235 additions and 56 deletions
|
@ -6,6 +6,11 @@ img, video {
|
|||
width: 45%;
|
||||
}
|
||||
|
||||
html {
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
/* Classes */
|
||||
.Handle {
|
||||
background-color: white;
|
||||
|
@ -16,7 +21,7 @@ img, video {
|
|||
}
|
||||
|
||||
.PostText {
|
||||
background-color: #00ECE8;
|
||||
background-color: #00FFFF;
|
||||
}
|
||||
|
||||
.Images {
|
||||
|
@ -25,3 +30,13 @@ img, video {
|
|||
flex-wrap: wrap;
|
||||
background-color: #050505;
|
||||
}
|
||||
|
||||
.Button {
|
||||
margin-top: 30px;
|
||||
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
|
|
@ -111,18 +111,17 @@ html {
|
|||
}
|
||||
|
||||
/* Classes for the main page */
|
||||
.MainBefore {
|
||||
.MainBefore, .MainAfter {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
|
||||
visibility: collapse;
|
||||
background-image: url("../Icons/IndexBackground.png");
|
||||
}
|
||||
|
||||
.MainAfter {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
/* Animation things to get it working smoothly */
|
||||
.MainBefore {
|
||||
visibility: collapse;
|
||||
}
|
||||
|
||||
.MainFadeInAnimation {
|
||||
|
@ -161,6 +160,7 @@ html {
|
|||
height: 5vh;
|
||||
}
|
||||
|
||||
/* Stuff that goes into the posts. */
|
||||
.Arrow {
|
||||
position: absolute;
|
||||
top: 35vh;
|
||||
|
@ -182,11 +182,21 @@ html {
|
|||
.Post {
|
||||
overflow: hidden;
|
||||
|
||||
margin-top: 1%;
|
||||
margin-bottom: 1%;
|
||||
margin-left: 1%;
|
||||
margin-right: 1%;
|
||||
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-top-left-radius: 2% 50%;
|
||||
border-top-right-radius: 2% 50%;
|
||||
border-bottom-left-radius: 2% 50%;
|
||||
border-bottom-right-radius: 2% 50%;
|
||||
|
||||
width: 24%;
|
||||
height: 25%;
|
||||
background-color: #FFFFFF;
|
||||
width: 22%;
|
||||
height: 23%;
|
||||
}
|
||||
|
||||
.Post:hover {
|
||||
|
@ -196,35 +206,46 @@ html {
|
|||
.Username {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 2ch;
|
||||
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
.PostContent {
|
||||
font-size: 1ch;
|
||||
font-size: 0.9ch;
|
||||
}
|
||||
|
||||
.Setting {
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.Mail {
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.Posting {
|
||||
/* Footer things */
|
||||
.Setting, .Posting, .Mail {
|
||||
margin-top: 30px;
|
||||
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.Time {
|
||||
font-size: 4ch;
|
||||
}
|
||||
|
||||
.Posting {
|
||||
margin-right: 5%;
|
||||
}
|
||||
|
||||
.MainFooter {
|
||||
display: flex;
|
||||
margin-top: 75vh;
|
||||
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
|
||||
height: 15vh;
|
||||
background: linear-gradient(#dcdcdc, #b4b4b4);
|
||||
|
||||
margin-top: 75vh;
|
||||
|
||||
border-top-style: solid;
|
||||
border-width: 2px;
|
||||
border-color: #00FFFF;
|
||||
|
||||
height: 20vh;
|
||||
}
|
||||
|
|
42
CSS/mail.css
42
CSS/mail.css
|
@ -1,3 +1,36 @@
|
|||
/* Combination */
|
||||
header, footer {
|
||||
style="position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Singletons */
|
||||
html {
|
||||
background: linear-gradient(#b4b4b4, #dcdcdc, #b4b4b4);
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
header {
|
||||
height: 5vh;
|
||||
}
|
||||
|
||||
section {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 80vh;
|
||||
}
|
||||
|
||||
.Button {
|
||||
margin-top: 30px;
|
||||
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.Favorite {
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
|
@ -42,3 +75,12 @@
|
|||
.Notification:hover {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
margin-top: -10vh;
|
||||
|
||||
height: 20vh;
|
||||
}
|
||||
|
|
28
CSS/post.css
28
CSS/post.css
|
@ -1 +1,29 @@
|
|||
html {
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
header {
|
||||
height: 5vh;
|
||||
}
|
||||
|
||||
section {
|
||||
height: 75vh;
|
||||
}
|
||||
|
||||
.SmallButton {
|
||||
margin-top: 30px;
|
||||
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
height: 5vh;
|
||||
}
|
||||
|
|
|
@ -0,0 +1,47 @@
|
|||
html {
|
||||
background-color: black;
|
||||
color: white;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
header {
|
||||
border-bottom-style: solid;
|
||||
|
||||
height: 5vh;
|
||||
}
|
||||
|
||||
.Hidden {
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.Button {
|
||||
border-style: solid;
|
||||
border-width: 6px;
|
||||
border-color: #00FFFF;
|
||||
|
||||
padding: 25vh 8vw;
|
||||
|
||||
background: linear-gradient(#dcdcdc, #b4b4b4);
|
||||
color: black;
|
||||
}
|
||||
|
||||
.SmallButton {
|
||||
margin-top: 30px;
|
||||
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
border-top-style: solid;
|
||||
|
||||
height: 10vh;
|
||||
}
|
|
@ -19,11 +19,13 @@
|
|||
<p class="PostText"></p>
|
||||
<div class="Images">
|
||||
</div>
|
||||
<div>
|
||||
<div "display: flex;">
|
||||
<p class="Favorite">Favorite!</p>
|
||||
<p class="Boost">Boost!</p>
|
||||
<p class="Reply">Reply!</p>
|
||||
</div>
|
||||
<p onclick="history.back()"><b>Back</b></p>
|
||||
<footer>
|
||||
<p class="Button" onclick="history.back()"><b>Back</b></p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -12,12 +12,16 @@
|
|||
</head>
|
||||
|
||||
<body style="margin: 0px; text-align: center;">
|
||||
<section style="position: absolute; width: 100%; height: 100%" class="Favorites"></section>
|
||||
<section style="position: absolute; width: 100%; height: 100%" class="Bookmarks"></section>
|
||||
<section style="position: absolute; width: 100%; height: 100%" class="Notifications"></section>
|
||||
<header style="position: relative; z-index: 1;">
|
||||
<header>
|
||||
<h1>Mail</h1>
|
||||
<p onclick="history.back();"><b>Back</b></p>
|
||||
</header>
|
||||
<div style="height: 85vh;">
|
||||
<section class="Favorites"></section>
|
||||
<section class="Bookmarks"></section>
|
||||
<section class="Notifications"></section>
|
||||
</div>
|
||||
<footer>
|
||||
<p class="Button" onclick="history.back();"><b>Back</b></p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -15,16 +15,20 @@
|
|||
<header>
|
||||
<h1>Post</h1>
|
||||
</header>
|
||||
<textarea cols="50" rows="25" class="Text" placeholder="status here..."></textarea>
|
||||
<div>
|
||||
<select class="PostVisibility">
|
||||
<option value="Public">Public Post</option>
|
||||
<option value="Quiet">Quiet Public Post</option>
|
||||
<option value="Friend">Friends Only Post</option>
|
||||
<option value="Private">Private Post</option>
|
||||
</select>
|
||||
</div>
|
||||
<p class="Button">POST!</p>
|
||||
<p onclick="history.back();"><b>Back</b></p>
|
||||
<section>
|
||||
<textarea cols="50" rows="25" class="Text" placeholder="status here..."></textarea>
|
||||
<div>
|
||||
<select class="PostVisibility">
|
||||
<option value="Public">Public Post</option>
|
||||
<option value="Quiet">Quiet Public Post</option>
|
||||
<option value="Friend">Friends Only Post</option>
|
||||
<option value="Private">Private Post</option>
|
||||
</select>
|
||||
</div>
|
||||
<p class="Button">POST!</p>
|
||||
</section>
|
||||
<footer>
|
||||
<p class="SmallButton" onclick="history.back();"><b>Back</b></p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -15,14 +15,27 @@
|
|||
<header>
|
||||
<h1>Setting</h1>
|
||||
</header>
|
||||
<p class="Local">Toggle Local</p>
|
||||
<p class="Remote">Toggle Remote</p>
|
||||
<p class="Login Mastodon"><em>Login to Mastodon</em></p>
|
||||
<input type="text" class="WebInput Mastodon" placeholder="Website (mastodon.social)"/>
|
||||
<p class="Logout Mastodon" style="visibility: hidden;"><em>Logout of Mastodon</em></p>
|
||||
<p class="Login Bluesky"><em>Login to Bluesky</em></p>
|
||||
<input type="text" class="WebInput Bluesky" placeholder="Website (bsky.social)" />
|
||||
<p class="Logout Bluesky" style="visibility: hidden;"><em>Logout of Bluesky</em></p>
|
||||
<p onclick="window.location.href = window.location.origin"><b>Back</b></p>
|
||||
<div style="display: flex; justify-content: center; height: 75vh;">
|
||||
<div class="Button" style="margin: auto;">
|
||||
<p class="Local">Toggle Local</p>
|
||||
<p class="Remote">Toggle Remote</p>
|
||||
</div>
|
||||
<div class="Button" style="display: flex; justify-content: center; margin: auto;">
|
||||
<!-- Sorry people! -->
|
||||
<div>
|
||||
<input type="text" class="WebInput Mastodon" placeholder="Website (mastodon.social)"/>
|
||||
<p class="Login Mastodon"><em>Login to Mastodon</em></p>
|
||||
<p class="Logout Mastodon Hidden"><em>Logout of Mastodon</em></p>
|
||||
</div>
|
||||
<div>
|
||||
<input type="text" class="WebInput Bluesky" placeholder="Website (bsky.social)"/>
|
||||
<p class="Login Bluesky"><em>Login to Bluesky</em></p>
|
||||
<p class="Logout Bluesky Hidden"><em>Logout of Bluesky</em></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<p class="SmallButton" onclick="window.location.href = window.location.origin"><b>Back</b></p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
|
BIN
Icons/IndexBackground.png
Normal file
BIN
Icons/IndexBackground.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 180 B |
|
@ -85,7 +85,7 @@ async function CheckLogin() {
|
|||
// Swap the buttons
|
||||
MastodonLoginButton.remove();
|
||||
MastodonWebInput.remove();
|
||||
MastodonLogoutButton.setAttribute("style", "");
|
||||
MastodonLogoutButton.classList.remove("Hidden");
|
||||
} else {
|
||||
// Auto log in
|
||||
await MastodonAPI.GainToken(Variables.MastodonWebsite);
|
||||
|
@ -95,7 +95,7 @@ async function CheckLogin() {
|
|||
// Swap the buttons
|
||||
BlueskyLoginButton.remove();
|
||||
BlueskyWebInput.remove();
|
||||
BlueskyLogoutButton.setAttribute("style", "");
|
||||
BlueskyLogoutButton.classList.remove("Hidden");
|
||||
} else {
|
||||
// Auto log in
|
||||
await BlueskyAPI.GainTokens();
|
||||
|
|
|
@ -18,9 +18,12 @@
|
|||
<section class="WarningMessage">
|
||||
<h2>Warning! Care for yourself!</h2>
|
||||
<p>
|
||||
The world might seem like an uncaring place. At a glance, that might seem true. However, that doesn't mean nobody cares. The average person has enough affection to share with you, so please share it back. <br>
|
||||
You are also cute :3 <br>
|
||||
<em>Safety options are available here: https://CrowdedGames.Group</em>
|
||||
The world might seem like an uncaring place. At a glance, that might seem true looking at social media.<br><br>
|
||||
However, that doesn't mean nobody cares. The average person has enough affection to share with you. You just need to ask. Trust us.<br><br>
|
||||
There are mean people on the internet. Pay no attention to them and block them. They don't matter. You do.<br><br>
|
||||
One more thing... There are people who might also be down. Please spread around the affection. It's for the best.<br><br>
|
||||
You are also cute :3<br><br>
|
||||
<em>Safety options are available here: https://CrowdedGames.Group</em><br><br>
|
||||
<noscript>Look. Javascript is required to run this. I'm sorry, there isn't anything I can do about it.</noscript>
|
||||
</p>
|
||||
<p class="BlinkAnimation"><b>Click on this webpage to continue</b></p>
|
||||
|
|
Loading…
Add table
Reference in a new issue