diff --git a/styles/button_style.css b/styles/button_style.css new file mode 100644 index 0000000..f67c3b7 --- /dev/null +++ b/styles/button_style.css @@ -0,0 +1,103 @@ +/* CSS for System64.dev buttons, by IDeletedSystem64. Under MIT License (v4.14.23) */ +/* Loosely based from 98css, Check it out here: https://jdan.github.io/98.css/ */ +@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 dem fonts */ + +input { + -webkit-appearance: none; + appearance: none; + background: #dad9d9; + box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf; + + min-width: 200px; + min-height: 16px; + + color: black; + font-size: 17pt; + font-family: 'Share Tech Mono', monospace; +} +input.taskbar { + + background: #c3c3c3; + box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf; + + font-family: 'Share Tech Mono', 'monospace'; + font-size: 13pt; + font-weight: bold; + + height: 27px; + min-width: 170px; + max-width: 230px; + margin-top: 1px; + margin-left: 2px; +} + +input.taskbar:active { + background: #acacac; + background-position: 2px; +} +input:active { + background: #acacac; + box-shadow: inset 0em 0em +} + +.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; + 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; +} +/* *vomits* */ + +@media (max-width: 64em) { +input { + min-height: 70px; + min-width: 250px; + font-size: 32pt; +} +} \ No newline at end of file diff --git a/styles/main_style.css b/styles/main_style.css new file mode 100644 index 0000000..bccdd2f --- /dev/null +++ b/styles/main_style.css @@ -0,0 +1,100 @@ +/* CSS for System64.dev v2, by IDeletedSystem64. Under MIT License (v6.5.23) */ +@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@600&display=swap'); /* Bitter */ +@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap'); /* Share Tech Mono */ +/* Import dem fonts */ + +button.home { + font-family: 'Share Tech Mono', monospace; + color: white; + /* font-size: */ + display: inline; +} + +h1 { + font-family: 'Bitter', serif; + color: white; + display: inline; + font-size: 26pt +} + +h2 { + font-family: 'Bitter', serif; + color: white; + font-size: 16pt; +} + +li { + font-family: 'Share Tech Mono', monospace; + color: white; + font-size: 15pt; + list-style-type: square; +} +/* Text based stuffs */ + +body { + background-image: url("/img/bg.jpg"); +} + +.container { + display: flex; + flex-direction: row; +} + +div.main { + height: 100%; + align-items: center; + margin: auto; +} + +img.home { + height: 70vh; + width: auto; + align-self: center; + padding: 5%; +} + +div.taskbar { + position: absolute; + + left: 0px; + top: 0px; + width: 100%; + + height: 30px; + background-color: #c3c3c3; + box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #c3c3c3,inset -2px -2px grey,inset 2px 2px #dfdfdf; +} +/* Website layout */ + +img.webbutton{ + width: 88px; + height: 31px; + float: left; + text-align: center; +} +/* Web buttons :) */ + + /* Did you know: I wish I wasn't doing this right now? */ + /* Better web site for mobile users coming soon(tm) */ + @media (max-width: 64em) { + h1 { + font-size: 56pt; + } + h2 { + font-size: 28pt; + } + li { + font-size: 26pt; + } + div.main { + margin-top: 35vh; + } + .container { + flex-wrap: wrap; + align-items: center; + } + img.home { + display: none; + } + } + \ No newline at end of file