From b241e22abad523f710b92bc11f0afac572bbd5cd Mon Sep 17 00:00:00 2001 From: Sophie Marie Date: Fri, 11 Nov 2022 19:19:38 -0600 Subject: [PATCH] web buttons! --- index.html | 16 ++- styles/stylemain.css | 293 ++++++++++++++++++++++--------------------- 2 files changed, 165 insertions(+), 144 deletions(-) diff --git a/index.html b/index.html index b4ed2ec..2c5b811 100644 --- a/index.html +++ b/index.html @@ -22,10 +22,24 @@ + - + +
+

+

+

+

+

+

+

+

+ + Mastodon + Mastodon +
\ No newline at end of file diff --git a/styles/stylemain.css b/styles/stylemain.css index c15ee07..e52a5b2 100644 --- a/styles/stylemain.css +++ b/styles/stylemain.css @@ -1,143 +1,150 @@ -@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@600&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap'); -/* Import Fonts */ - -header { - background: linear-gradient(#072CFF, #00137F ); - position: absolute; - left: 0px; - top: 0px; - height: 40px; - width: 100% -} -h1.header { - padding: 32px; - font-family: 'Bitter', serif; - color: white; - display: inline; -} -p.intro { - font-family: 'Share Tech Mono', monospace; - color: white; - font-size: 2.5vw; - text-align: center; -} -p.info { - font-family: 'Share Tech Mono', monospace; - color: white; - font-size: 1.25vw; - text-align: center; -} -div.main { - top: 10%; - right: 25%; - margin: auto; - width: 50%; - padding: 10px; - border-radius: 30px; -} -body { - background-image: url("/img/bg.jpg"); -} -input { - -webkit-appearance: none; - margin-left: auto; - margin-right: auto; - display: block; - min-width: 250px; - background: #dad9d9; - font-size: 170%; - font-family: 'Share Tech Mono', monospace; - color: black; - box-shadow: inset -0.05em -0.05em black -} -input:active { - background: #acacac; - box-shadow: inset 0em 0em -} - -a { - text-decoration: none; -} -.button { - display: inline-flex; - font-size: 16px; - text-align: center; - border: none; - border-radius: 4px; - outline: none; - box-shadow: none; - cursor: pointer; - transition: 0.3s ease-in-out; -} - -.button.button1 { - border-radius: 0; - box-sizing: border-box; - min-height: 23px; - color: #000; - padding: 0 2px 2px 0; - border-top: 1px solid #CCCCCC; - border-right: 0.1px solid transparent; - border-bottom: 1px solid #333333; - border-left: 1px solid #CCCCCC; - background-color: #979797; - width: 15%; -} - -.button.button1 span { - -webkit-appearance: none; - margin-left: auto; - margin-right: auto; - display: block; - width: 100%; - background: #dad9d9; - font-size: 170%; - font-family: 'Share Tech Mono', monospace; - box-shadow: inset -0.05em -0.05em black; -} - -.button.button1 span:hover, -.button.button1:hover + .button.button1 span { - background-color: #ACACAC; - border-top: 1px solid transparent; - border-right: 0.1px solid #dad9d9; - border-bottom: 1px solid #dad9d9; - border-left: 1px solid transparent; - box-shadow: inset -0.05em -0.05em transparent;} -.button.button1:hover { - background-color: #ACACAC; -} - -img.githubico { - left: 47.5%; - position: fixed; -} - -/* I'm mad that I have to make this mobile-compatible, Lol. https://twitter.com/IDeleteSystem64/status/1512218098325147655?s=20&t=Hz4V-vxmywYwTMvuBbCAZQ */ -@media only screen and (max-width: 980px) { - p.intro { - font-size: 8vw; - } - header { - height: 75px; - } - h1.header { - font-size: 60px; - padding-left: 25%; - } - input { - margin-left: -10%; - font-size: 7vw; - -webkit-text-size-adjust:100%; - min-width: 125%; - max-width: 125; - } - p.info { - font-family: 'Share Tech Mono', monospace; - color: white; - font-size: 4.5vw; - text-align: center; - } -} -/* Pronouns page stoof */ +@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@600&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap'); +/* Import Fonts */ + +header { + background: linear-gradient(#072CFF, #00137F ); + position: absolute; + left: 0px; + top: 0px; + height: 40px; + width: 100% +} +h1.header { + padding: 32px; + font-family: 'Bitter', serif; + color: white; + display: inline; +} +p.intro { + font-family: 'Share Tech Mono', monospace; + color: white; + font-size: 2.5vw; + text-align: center; +} +p.info { + font-family: 'Share Tech Mono', monospace; + color: white; + font-size: 1.25vw; + text-align: center; +} +div.main { + top: 10%; + right: 25%; + margin: auto; + width: 50%; + padding: 10px; + border-radius: 30px; +} +body { + background-image: url("/img/bg.jpg"); +} +input { + -webkit-appearance: none; + margin-left: auto; + margin-right: auto; + display: block; + min-width: 250px; + background: #dad9d9; + font-size: 170%; + font-family: 'Share Tech Mono', monospace; + color: black; + box-shadow: inset -0.05em -0.05em black +} +input:active { + background: #acacac; + box-shadow: inset 0em 0em +} + +a { + text-decoration: none; +} +.button { + display: inline-flex; + font-size: 16px; + text-align: center; + border: none; + border-radius: 4px; + outline: none; + box-shadow: none; + cursor: pointer; + transition: 0.3s ease-in-out; +} + +.button.button1 { + border-radius: 0; + box-sizing: border-box; + min-height: 23px; + color: #000; + padding: 0 2px 2px 0; + border-top: 1px solid #CCCCCC; + border-right: 0.1px solid transparent; + border-bottom: 1px solid #333333; + border-left: 1px solid #CCCCCC; + background-color: #979797; + width: 15%; +} + +.button.button1 span { + -webkit-appearance: none; + margin-left: auto; + margin-right: auto; + display: block; + width: 100%; + background: #dad9d9; + font-size: 170%; + font-family: 'Share Tech Mono', monospace; + box-shadow: inset -0.05em -0.05em black; +} + +.button.button1 span:hover, +.button.button1:hover + .button.button1 span { + background-color: #ACACAC; + border-top: 1px solid transparent; + border-right: 0.1px solid #dad9d9; + border-bottom: 1px solid #dad9d9; + border-left: 1px solid transparent; + box-shadow: inset -0.05em -0.05em transparent;} +.button.button1:hover { + background-color: #ACACAC; +} + +div.webbutton { + margin: auto; + width: 264px; + padding-top: 3px; +} +img.webbutton{ + width: 88px; + height: 31px; + float: left; + text-align: center; +} + +/* I'm mad that I have to make this mobile-compatible, Lol. https://twitter.com/IDeleteSystem64/status/1512218098325147655?s=20&t=Hz4V-vxmywYwTMvuBbCAZQ */ +@media only screen and (max-width: 980px) { + p.intro { + font-size: 8vw; + padding-top: 10px; + } + header { + height: 75px; + } + h1.header { + font-size: 60px; + padding-left: 25%; + } + input { + margin-left: -10%; + font-size: 7vw; + -webkit-text-size-adjust:100%; + min-width: 125%; + max-width: 125; + } + p.info { + font-family: 'Share Tech Mono', monospace; + color: white; + font-size: 4.5vw; + text-align: center; + } +}