diff options
Diffstat (limited to 'css/style.css')
| -rw-r--r-- | css/style.css | 209 |
1 files changed, 0 insertions, 209 deletions
diff --git a/css/style.css b/css/style.css deleted file mode 100644 index 7ee02b7..0000000 --- a/css/style.css +++ /dev/null @@ -1,209 +0,0 @@ -html { - background-color: #d1f7ff; - font-family: "Inter", sans-serif; - -} - -@supports (font-variation-settings: normal) { - html { - font-family: "Inter var", sans-serif; - } -} - -body { - display: flex; - color: #333; - - -} - -#nav { - display: flex; - position: absolute; - top: 0; - left: 0; - align-self: flex-start; /* makes flex element only as vertically large as needed for sticky */ - flex-direction: column; - width: 12rem; - text-align: center; -} - -#content { - width: 100%; - max-width: 1400px; - margin-left: auto; - margin-right: auto; - padding-left: 1rem; - padding-right: 1rem; - background-color: #00000011; - display: flex; - flex-direction: column; -} - -/* Reusable Elements */ - -h1 { - font-size: 4rem; - font-weight: 700; - color: #000; - margin-top: 0.5rem; - margin-bottom: 0.5rem; -} - -h3 { - font-size: large; - font-weight: 700; - color: #000; -} - -#logo { - width: 100%; -} - -hr { - width: 100%; - /* horizontal rule css style */ - border: 2px solid #333; - border-bottom: none; - margin-top: 0.25rem; - margin-bottom: 0.25rem; -} - -/* Cool Button */ - -/* CSS Button - https://getcssscan.com/css-buttons-examples UIForms #74 */ -.button { - background-color: #fbeee0; - border: 2px solid #422800; - border-radius: 30px; - box-shadow: #422800 4px 4px 0 0; - color: #000; - cursor: pointer; - display: inline-block; - font-weight: 700; - font-size: 1rem; - line-height: 2.5rem; - text-align: center; - text-decoration: none; - user-select: none; - -webkit-user-select: none; - touch-action: manipulation; - min-width: 120px; - padding: 0 25px; - transition: all 0.05s ease-in-out; -} - -.button:hover { - background-color: #fff; -} - -.button:active { - box-shadow: #422800 2px 2px 0 0; - transform: translate(2px, 2px); -} - -/* Link Styling - https://codepen.io/team/css-tricks/pen/xxPORam */ -.link { - text-decoration: none; - position: relative; - color: #18272f; - font-weight: 700; -} - -.link::before { - content: ""; - background-color: #00000044; - position: absolute; - left: 0; - bottom: -0.125rem; - width: 100%; - height: 2px; - z-index: -1; - transition: all 0.2s ease-out; -} - -.link:hover::before { - bottom: 0; - height: 100%; - background-color: #00000011; - border-radius: 5%; - transform: scale(1.1); -} - -@media (min-width: 768px) { - .button { - min-width: 120px; - padding: 0 25px; - } -} - -/* Individual Elements */ - -#business-hours { - display: flex; - flex-direction: column; - margin-top: 0.25rem; - margin-bottom: 0.25rem; -} - -#business-hours > * { - padding-top: 0.25rem; - padding-bottom: 0.25rem; -} - -#nav-links { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -#nav-links > * { - margin-top: 1rem; - margin-bottom: 0.25rem; -} - -#welcome { - height: 75vh; - display: flex; - flex-direction: column; - justify-content: center; -} - -/* Media Queries */ - -@media screen and (max-width: 1000px) { - .hide-mobile { - display: none; - } - - body { - flex-direction: column; - } - - #nav { - width: 100%; - background: #a6b198; - height: 1.9rem; - overflow: hidden; - padding: 0rem; - padding-top: 0.5rem; - padding-bottom: 0.5rem; - position: absolute; - } - - #logo { - width: 2rem; - } - - #logo-wrapper { - display: flex; - align-items: center; - } -} - -@media screen and (min-width: 1000px) { - .hide-desktop { - display: none; - } -}
\ No newline at end of file |