diff --git a/fonts/SixteenSegments.ttf b/fonts/SixteenSegments.ttf new file mode 100644 index 0000000..22d590f Binary files /dev/null and b/fonts/SixteenSegments.ttf differ diff --git a/fonts/SixteenSegments.woff b/fonts/SixteenSegments.woff new file mode 100644 index 0000000..a616aeb Binary files /dev/null and b/fonts/SixteenSegments.woff differ diff --git a/fonts/SixteenSegments.woff2 b/fonts/SixteenSegments.woff2 new file mode 100644 index 0000000..a616aeb Binary files /dev/null and b/fonts/SixteenSegments.woff2 differ diff --git a/fonts/SixteenSegments_License.txt b/fonts/SixteenSegments_License.txt new file mode 100644 index 0000000..e48a09b --- /dev/null +++ b/fonts/SixteenSegments_License.txt @@ -0,0 +1,20 @@ +KREATIVE SOFTWARE RELAY FONTS FREE USE LICENSE +version 1.2f + +Permission is hereby granted, free of charge, to any person or entity (the "User") obtaining a copy of the included font files (the "Software") produced by Kreative Software, to utilize, display, embed, or redistribute the Software, subject to the following conditions: + +1. The User may not sell copies of the Software for a fee. + +1a. The User may give away copies of the Software free of charge provided this license and any documentation is included verbatim and credit is given to Kreative Korporation or Kreative Software. + +2. The User may not modify, reverse-engineer, or create any derivative works of the Software. + +3. Any Software carrying the following font names or variations thereof is not covered by this license and may not be used under the terms of this license: Jewel Hill, Miss Diode n Friends, This is Beckie's font! + +3a. Any Software carrying a font name ending with the string "Pro CE" is not covered by this license and may not be used under the terms of this license. + +4. This license becomes null and void if any of the above conditions are not met. + +5. Kreative Software reserves the right to change this license at any time without notice. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE SOFTWARE OR FROM OTHER DEALINGS IN THE SOFTWARE. diff --git a/index.html b/index.html index 0215b12..7fbe1ca 100644 --- a/index.html +++ b/index.html @@ -5,6 +5,7 @@ Calculator +

Calculator

diff --git a/matrix-356024.jpg b/matrix-356024.jpg new file mode 100644 index 0000000..4526ba8 Binary files /dev/null and b/matrix-356024.jpg differ diff --git a/style.css b/style.css index 3c5a9fc..c57b505 100644 --- a/style.css +++ b/style.css @@ -1,16 +1,44 @@ +@font-face { + font-family: "Sixteen Segments"; + src: url("./fonts/SixteenSegments.woff2") format("woff2"), + url("./fonts/SixteenSegments.woff") format("woff"), + url("./fonts/SixteenSegments.ttf") format("truetype") +} + +html { + --digi-green: #79ff54; + --dark-green: #094909; + --light-text: #eee; + --dark-text: #111; + --dark-trans: rgba(17, 17, 17, 0.9); +} + body { + background-image: url("./matrix-356024.jpg"); + background-size: cover; + font-family: "Fira Sans", sans-serif; display: flex; text-align: center; flex-direction: column; height: 100vh; margin: 0; - background-color: #094909; - color: #eee; + background-color: var(--dark-green); + color: var(--light-text); + overflow: hidden; } header { flex: 0 0 auto; + padding: 15px 0; + background-color: var(--dark-trans); +} + +header h1 { + font-size: 70px; + letter-spacing: 5px; + margin: 0; + color: var(--light-text); } main { @@ -19,6 +47,7 @@ main { flex-direction: column; justify-content: center; align-items: center; + padding: 0; } .calculator { @@ -26,7 +55,7 @@ main { grid-template-columns: repeat(4, 1fr); grid-template-rows: auto; grid-gap: 5px; - background: #594859; + background-color: #594859; padding: 10px; box-shadow: 1px 2px 10px 1px #222; border: 5px solid; @@ -36,11 +65,13 @@ main { .display { grid-column: 1 / span 4; - height: 100px; + height: 150px; max-width: 415px; + padding: 5px; overflow: hidden; - background: #333; + background-color: #333; color: #1bff07; + font-family: "Sixteen Segments", monospace; text-align: right; border: 1px solid #222; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3); @@ -49,20 +80,26 @@ main { } .top-screen { height: 40%; - font-size: 20px; + font-size: 30px; + max-width: 415px; + overflow: hidden; } .main-screen { height: 60%; - font-size: 50px; + font-size: 70px; + max-width: 415px; + overflow: hidden; } button { + font-family: "Fira Sans", sans-serif; height: 100px; width: 100px; font-size: 50px; - border-color: #eee; + border-color: var(--light-text); border-radius: 5px; box-shadow: 1px 2px 10px 1px #222; + color: var(--dark-text); cursor: pointer; } @@ -85,8 +122,9 @@ button:active, .active { width: 120px; font-size: 20px; - background: #094909; - color: #eee; + background-color: var(--dark-green); + border: 1px solid var(--digi-green); + color: var(--light-text); opacity: 0; transition: opacity 0.7s; padding: 5px; @@ -102,7 +140,7 @@ button:active, .active { margin-left: -5px; border-width: 5px; border-style: solid; - border-color: #094909 transparent transparent transparent; + border-color: var(--digi-green) transparent transparent transparent; } .tooltip:hover .tooltiptext, .tooltip:focus .tooltiptext { @@ -111,23 +149,35 @@ button:active, .active { } .num, .plus-minus { - background: #d9e1f2; + background-color: #d9e1f2; } .clear { - background: #f98383; + background-color: #f98383; } .operator { - background: #ffff69; + background-color: #ffff69; } .equal { grid-column: span 2; width: 205px; - background: #79ff54; + background-color: var(--digi-green); } footer { flex: 0 0 auto; + padding: 10px; + background-color: var(--dark-trans); + letter-spacing: 2px; +} + +footer a { + color: var(--digi-green); +} + +footer a:hover, footer a:focus { + color: rgb(170, 255, 0); + text-decoration: none; } \ No newline at end of file