ACM
/
Website
mirror of https://codeberg.org/ACM/Website.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Modify button appearance 

Leave one rounded corner, change corner radius, and fix scaling.
This commit is contained in:
Aidan Mullen 2023-12-28 10:48:31 -05:00
parent c98305f834
commit 8059f68246
3 changed files with 71 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
CHANGELOG.MD
View File

@ -1,6 +1,11 @@
# Changelog # Changelog
### Any and all changes are added to the following list upon their completion and inclusion into the software. ### Any and all changes are added to the following list upon their completion and inclusion into the software.
## 0.3.0
- Fix scaling between buttons and navigation box.
- Change button appearance.
## 0.2.0 ## 0.2.0
- Changed background color. - Changed background color.

20
index.html
View File

@ -1,23 +1,29 @@
<!DOCTYPE = html> <!DOCTYPE html>
<html lang="en">
<link href="style.css" rel="stylesheet"/> <link href="style.css" rel="stylesheet"/>
<link rel="icon" type="image/x-icon" href="https://delay.cloud/img/favicon.png"/> <link rel="icon" type="image/x-icon" href="https://delay.cloud/img/favicon.png"/>
<link rel="preload" href="GlacialIndifference.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="/fonts/GlacialIndifference/GlacialIndifference-Regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="GlacialIndifference-Bold.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="/fonts/GlacialIndifference/GlacialIndifference-Bold.woff2" as="font" type="font/woff2" crossorigin>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
<meta name="description" content="Website with files."> <meta name="description" content="Website with files.">
<meta name="keywords" content="delay.cloud"> <meta name="keywords" content="delay.cloud">
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Home - delay.cloud</title> <title>Home - delay.cloud</title>
<link rel="canonical" href="https://delay.cloud" /> <link rel="canonical" href="https://delay.cloud" />
<meta name="darkreader-lock"> <meta name="darkreader-lock">
<meta http-equiv="Content-Security-Policy" content="script-src 'none'">
</head> </head>
<rel></rel> <rel></rel>
<section .bg></section .bg> <section .bg></section .bg>
<nav class="aligner"> <nav class="aligner">
<a href="/" target="_blank"><button class="aligner">Instances</button></a>
<a href="status-sub/index/" target="_blank"><button class=b2>Uptime</button></a> <a href="instances/" target="_blank"><button class="aligner">Instances</button></a>
<a href="resources/" target="_blank"><button class=b2>Resources</button></a> <a href="https://status.delay.cloud/" target="_blank"><button class=b2>Uptime</button></a>
<a href="resources/" target="_blank"><button class=b3>Resources</button></a>
</nav> </nav>
<div> <div>
<h1>delay.cloud</h1> <h1>delay.cloud</h1>
@ -27,4 +33,4 @@
<div class="aligner"> <div class="aligner">
<!--<a href="https://status.delay.cloud" target="_blank"><button>Uptime</button></a> <a href="https://delay.cloud/resources" target="_blank"><button class=b2>Resources</button></a>--> <!--<a href="https://status.delay.cloud" target="_blank"><button>Uptime</button></a> <a href="https://delay.cloud/resources" target="_blank"><button class=b2>Resources</button></a>-->
</div> </div>
<div class="aligner"> <p class="footer">&copy; 2023 delay.cloud <!--<a rel="me" href="https://mastodon.online/@am23"></a>--> </p> </div> <div class="aligner"> <p class="footer">&copy; 2023 delay.cloud <!--<a rel="me" href="https://am23"></a>--> </p> </div>

76
style.css
View File

@ -1,11 +1,11 @@
@font-face { @font-face {
font-family: 'Glacial Indifference Bold'; font-family: 'Glacial Indifference Bold';
src: url('https://www.delay.cloud/fonts/GlacialIndifference/GlacialIndifference-Bold.eot'); src: url('fonts/GlacialIndifference/GlacialIndifference-Bold.eot');
src: url('https://www.delay.cloud/fonts/GlacialIndifference/GlacialIndifference-Bold.eot#iefix') format('embedded-opentype'), src: url('fonts/GlacialIndifference/GlacialIndifference-Bold.eot?#iefix') format('embedded-opentype'),
url('https://www.delay.cloud/fonts/GlacialIndifference/GlacialIndifference-Bold.woff2') format('woff2'), url('fonts/GlacialIndifference/GlacialIndifference-Bold.woff2') format('woff2'),
url('https://www.delay.cloud/fonts/GlacialIndifference/GlacialIndifference-Bold.woff') format('woff'), url('fonts/GlacialIndifference/GlacialIndifference-Bold.woff') format('woff'),
url('https://www.delay.cloud/fonts/GlacialIndifference/GlacialIndifference-Bold.ttf') format('truetype'), url('fonts/GlacialIndifference/GlacialIndifference-Bold.ttf') format('truetype'),
url('https://www.delay.cloud/fonts/GlacialIndifference/GlacialIndifference-Bold.svg#GlacialIndifference-Bold') format('svg'); url('fonts/GlacialIndifference/GlacialIndifference-Bold.svg#GlacialIndifference-Bold') format('svg');
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
@ -13,12 +13,12 @@
@font-face { @font-face {
font-family: 'Glacial Indifference'; font-family: 'Glacial Indifference';
src: url('https://www.delay.cloud/fonts/GlacialIndifference/GlacialIndifference-Regular.eot'); src: url('fonts/GlacialIndifference/GlacialIndifference-Regular.eot');
src: url('https://www.delay.cloud/fonts/GlacialIndifference/GlacialIndifference-Regular.eot#iefix') format('embedded-opentype'), src: url('fonts/GlacialIndifference/GlacialIndifference-Regular.eot?#iefix') format('embedded-opentype'),
url('fonts/GlacialIndifference/GlacialIndifference-Regular.woff') format('woff2'), url('fonts/GlacialIndifference/GlacialIndifference-Regular.woff2') format('woff2'),
url('fonts/GlacialIndifference/GlacialIndifference-Regular.woff') format('woff'), url('fonts/GlacialIndifference/GlacialIndifference-Regular.woff') format('woff'),
url('https://www.delay.cloud/fonts/GlacialIndifference/GlacialIndifference-Regular.ttf') format('truetype'), url('fonts/GlacialIndifference/GlacialIndifference-Regular.ttf') format('truetype'),
url('https://www.delay.cloud/fonts/GlacialIndifference/GlacialIndifference-Regular.svg#GlacialIndifference-Regular') format('svg'); url('fonts/GlacialIndifference/GlacialIndifference-Regular.svg#GlacialIndifference-Regular') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
@ -26,8 +26,8 @@
@font-face { @font-face {
font-family: 'CaslonOS'; font-family: 'CaslonOS';
src: url('https://www.delay.cloud/fonts/caslon-os/CaslonOS-Regular.woff2') format('woff2'), src: url('fonts/caslon-os/CaslonOS-Regular.woff2') format('woff2'),
url('https://www.delay.cloud/fonts/caslon-os/CaslonOS-Regular.woff') format('woff'); url('fonts/caslon-os/CaslonOS-Regular.woff') format('woff');
} }
@keyframes fade { @keyframes fade {
@ -74,6 +74,7 @@ body {
/*height: 100vh;*/ /*height: 100vh;*/
animation-name: bgcolor; animation-name: bgcolor;
animation-duration: 0.5s; animation-duration: 0.5s;
margin: 0;
} }
hr { hr {
@ -108,7 +109,7 @@ p {
} }
button { button {
border-radius: 5px; border-radius: 0 0 0 15px;
border-color: #202F3A; border-color: #202F3A;
color: #BEBEBE; color: #BEBEBE;
width: calc(7vw + 5vh); width: calc(7vw + 5vh);
@ -119,7 +120,7 @@ button {
transition: 1s; transition: 1s;
border-width: 1px; border-width: 1px;
font-size: calc(1vw + 1vh); font-size: calc(1vw + 1vh);
margin: 0.5vw; margin: 0.0vw;
border-style: none; border-style: none;
animation-name: fade; animation-name: fade;
animation-duration: 1s; animation-duration: 1s;
@ -134,7 +135,7 @@ button {
} }
button:hover { button:hover {
border-radius: 5px; border-radius: 0 0 0 15px;
color: #BEBEBE; color: #BEBEBE;
border-color: #2D4251; border-color: #2D4251;
text-align: center; text-align: center;
@ -144,7 +145,7 @@ button:hover {
} }
.b2 { .b2 {
border-radius: 5px; border-radius: 0px;
border-color: #2D4251; border-color: #2D4251;
color: #BEBEBE; color: #BEBEBE;
width: calc(7vw + 5vh); width: calc(7vw + 5vh);
@ -154,15 +155,42 @@ button:hover {
font-family: 'Glacial Indifference'; font-family: 'Glacial Indifference';
border-width: 2px; border-width: 2px;
font-size: calc(1vw + 1vh); font-size: calc(1vw + 1vh);
margin-top: calc(0.75vw + 0.25vh); margin-top: calc(0);
margin: 0.5vw; margin: 0vw;
border-style: none; border-style: none;
animation-name: fade; animation-name: fade;
animation-duration: 0.75s; animation-duration: 0.75s;
} }
.b2:hover { .b2:hover {
border-radius: 5px; border-radius: 0px;
color: #BEBEBE;
border-color: #363636;
text-align: center;
background-color: #0E2533;
cursor: pointer;
}
.b3 {
border-radius: 0 0 15px 0;
border-color: #2D4251;
color: #BEBEBE;
width: calc(7vw + 5vh);
height: calc(3vw + 1vh);
text-align: center;
background-color: #111920;
font-family: 'Glacial Indifference';
border-width: 2px;
font-size: calc(1vw + 1vh);
margin-top: calc(0.0vw + 0.0vh);
margin: 0vw;
border-style: none;
animation-name: fade;
animation-duration: 0.75s;
}
.b3:hover {
border-radius: 0 0 15px 0;
color: #BEBEBE; color: #BEBEBE;
border-color: #363636; border-color: #363636;
text-align: center; text-align: center;
@ -173,16 +201,17 @@ button:hover {
nav { nav {
height: calc(3vw + 1vw + 1vh + 1vh); height: calc(3vw + 1vw + 1vh + 1vh);
padding: 0; padding: 0;
width: calc(25vw + 1vw + 20vh + 1vh); width: calc(22vw + 1vw + 16vh + 1vh);
animation-name: fade; animation-name: fade;
animation-duration: 0.75s; animation-duration: 0.75s;
background-color: #050C12; background-color: #050C12;
border-radius: 5px; border-radius: 0 0 15px 15px;
min-height: 38px; min-height: 38px;
min-width: 220px; min-width: 220px;
transition: 0.75s; transition: 0.75s;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
margin-top: 0;
} }
.footer { .footer {
@ -215,4 +244,5 @@ nav {
html { html {
background-color: #07121B; background-color: #07121B;
color:#07121B color:#07121B
} margin: 0;
}