diff --git a/css/style.css b/css/style.css index de0343b..ac3550c 100644 --- a/css/style.css +++ b/css/style.css @@ -1,202 +1,202 @@ body { - font-family: sans-serif; + font-family: sans-serif; } nav { - display: grid; - grid-template-columns: 1fr min-content 1fr; - /*flex-direction: row; - justify-content: space-between;*/ - align-items: center; - padding: 12px; - border-bottom: solid 1px #00000033; + display: grid; + grid-template-columns: 1fr min-content 1fr; + /*flex-direction: row; + justify-content: space-between;*/ + align-items: center; + padding: 12px; + border-bottom: solid 1px #00000033; - width: 100%; - box-sizing: border-box; - overflow-wrap: anywhere; + width: 100%; + box-sizing: border-box; + overflow-wrap: anywhere; } nav .nav-left { - /*justify-content: flex-start;*/ - justify-self: left; - grid-column: 1; + /*justify-content: flex-start;*/ + justify-self: left; + grid-column: 1; } nav .nav-center { - /*justify-content: center;*/ - justify-self: center; - grid-column: 2; + /*justify-content: center;*/ + justify-self: center; + grid-column: 2; } nav .nav-right { - /*justify-content: flex-end;*/ - justify-self: right; - grid-column: 3; + /*justify-content: flex-end;*/ + justify-self: right; + grid-column: 3; } nav img { - width: 40px; - height: auto; + width: 40px; + height: auto; } nav ul { - list-style-type: none; - margin: 0; - padding: 0; - display: flex; - flex-direction: row; + list-style-type: none; + margin: 0; + padding: 0; + display: flex; + flex-direction: row; } nav a { - padding: 8px; - color: #383c3f; - text-decoration: none; + padding: 8px; + color: #383c3f; + text-decoration: none; } @media screen and (max-width: 600px) { - nav { - padding: 6px 0; - } - nav ul { - flex-direction: column; - } - nav li { - text-align: center; - padding: 4px; - } + nav { + padding: 6px 0; + } + nav ul { + flex-direction: column; + } + nav li { + text-align: center; + padding: 4px; + } } nav a.title { - font-size: 140%; - font-weight: bold; + font-size: 140%; + font-weight: bold; } nav button.responsive-button { - display: none; + display: none; - border: none; - background: none; - cursor: pointer; + border: none; + background: none; + cursor: pointer; } nav div.inline { - display: flex; + display: flex; } @media screen and (max-width: 600px) { - nav button.responsive-button { - display: block; - } - nav ul.responsive-hidden { - display: none; - } + nav button.responsive-button { + display: block; + } + nav ul.responsive-hidden { + display: none; + } } main div.heading { - color: #383c3f; - font-size: 200%; - text-align: center; + color: #383c3f; + font-size: 200%; + text-align: center; } main div.hero { - color: #383c3f; - width: 60%; - margin: 16px auto 16px auto; - border: solid 1px #00000033; - border-radius: 8px; - box-shadow: 1px 1px 8px #00000033; - padding: 16px; - text-align: center; + color: #383c3f; + width: 60%; + margin: 16px auto 16px auto; + border: solid 1px #00000033; + border-radius: 8px; + box-shadow: 1px 1px 8px #00000033; + padding: 16px; + text-align: center; } @media screen and (max-width: 600px) { - main div.hero { - width: 80%; - } + main div.hero { + width: 80%; + } } main div.hero h1 a { - color: #383c3f; - text-decoration: none; + color: #383c3f; + text-decoration: none; } main div.hero p.justify { - text-align: justify; - text-justify: auto; - width: 60%; - margin-left: auto; - margin-right: auto; + text-align: justify; + text-justify: auto; + width: 60%; + margin-left: auto; + margin-right: auto; } main div.hero ul { - margin-left: auto; - margin-right: auto; + margin-left: auto; + margin-right: auto; } main img.banner { - display: block; - width: 70%; - margin: 32px auto 32px auto; - border: solid 1px #00000033; - border-radius: 16px; - box-shadow: 1px 1px 8px #00000033; + display: block; + width: 70%; + margin: 32px auto 32px auto; + border: solid 1px #00000033; + border-radius: 16px; + box-shadow: 1px 1px 8px #00000033; } @media screen and (max-width: 600px) { - main img.banner { - width: 95%; - border-radius: 12px; - margin: 24px auto 24px auto; - } - main div.hero p.justify { - width: 100%; + main img.banner { + width: 95%; + border-radius: 12px; + margin: 24px auto 24px auto; + } + main div.hero p.justify { + width: 100%; } } ul.linktree { - list-style-type: none; - margin: 0; - padding: 8px; - padding-left: 8px; - width: 30%; + list-style-type: none; + margin: 0; + padding: 8px; + padding-left: 8px; + width: 30%; } @media screen and (max-width: 600px) { - ul.linktree { - width: 60%; - } + ul.linktree { + width: 60%; + } } ul.linktree li { - margin: 12px; - text-align: center; + margin: 12px; + text-align: center; } ul.linktree li a { /* Pill button shape */ - text-decoration: none; - color: white; + text-decoration: none; + color: white; - background-color: #4c5053; - padding: 8px; - border-radius: 50px; - box-shadow: 2px 2px 4px #00000066; - transition-duration: 0.5s; + background-color: #4c5053; + padding: 8px; + border-radius: 50px; + box-shadow: 2px 2px 4px #00000066; + transition-duration: 0.5s; - display: inline-block; - width: 100%; - box-sizing: border-box; + display: inline-block; + width: 100%; + box-sizing: border-box; } ul.linktree li a:hover { - cursor: pointer; - background-color: #383c3f + cursor: pointer; + background-color: #383c3f } div.footer { - border-top: solid 1px #00000033; + border-top: solid 1px #00000033; } div.footer p { - color: #383c3f; - text-align: center; + color: #383c3f; + text-align: center; }