From 8059f682467d4328253a303df51c7c0c697ad358 Mon Sep 17 00:00:00 2001 From: Aidan Mullen Date: Thu, 28 Dec 2023 10:48:31 -0500 Subject: [PATCH] Modify button appearance Leave one rounded corner, change corner radius, and fix scaling. --- CHANGELOG.MD | 5 ++++ index.html | 20 +++++++++----- style.css | 76 ++++++++++++++++++++++++++++++++++++---------------- 3 files changed, 71 insertions(+), 30 deletions(-) diff --git a/CHANGELOG.MD b/CHANGELOG.MD index 78d71b7..9a824f1 100644 --- a/CHANGELOG.MD +++ b/CHANGELOG.MD @@ -1,6 +1,11 @@ # Changelog ### 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 - Changed background color. diff --git a/index.html b/index.html index 8503401..3c530a8 100644 --- a/index.html +++ b/index.html @@ -1,23 +1,29 @@ - + + - - + + + Home - delay.cloud + +

delay.cloud

@@ -27,4 +33,4 @@
-

© 2023 delay.cloud

+

© 2023 delay.cloud

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