diff options
Diffstat (limited to 'css')
| -rw-r--r-- | css/reset.css | 48 | ||||
| -rw-r--r-- | css/style.css | 212 |
2 files changed, 0 insertions, 260 deletions
diff --git a/css/reset.css b/css/reset.css deleted file mode 100644 index af94440..0000000 --- a/css/reset.css +++ /dev/null @@ -1,48 +0,0 @@ -/* http://meyerweb.com/eric/tools/css/reset/ - v2.0 | 20110126 - License: none (public domain) -*/ - -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} -/* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; -} -body { - line-height: 1; -} -ol, ul { - list-style: none; -} -blockquote, q { - quotes: none; -} -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; -} -table { - border-collapse: collapse; - border-spacing: 0; -}
\ No newline at end of file diff --git a/css/style.css b/css/style.css deleted file mode 100644 index f5e0f2d..0000000 --- a/css/style.css +++ /dev/null @@ -1,212 +0,0 @@ -/* Global Styling */ -@import url('https://rsms.me/inter/inter.css'); - -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: sticky; - top: 0; - align-self: flex-start; /* makes flex element only as vertically large as needed for sticky */ - flex-direction: column; - width: 12rem; - padding: 1rem; - 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; - } -} |