diff options
Diffstat (limited to 'CSS/main.css')
| -rw-r--r-- | CSS/main.css | 236 |
1 files changed, 164 insertions, 72 deletions
diff --git a/CSS/main.css b/CSS/main.css index 26fc0b0..1f5f27d 100644 --- a/CSS/main.css +++ b/CSS/main.css @@ -1,84 +1,176 @@ -/* - * Color scheme - * Oxford Blue: #061A40 - * USAFA Blue: #0353A4 - * Honolulu Blue: #006DAA - * Prussian Blue: #003559 - * Azure X 11 Web Color: #D6E5E3 - */ -@font-face{ - font-family:IBM Plex Mono; - src: url(../fonts/IBMPlexMono-Regular.ttf); -} -body, html{ - height: calc(100% - 2em); -} -body{ - background-color:#D6E5E3; - color:#003559; - font-family:IBM Plex Mono; -} -ul{ - text-transform:uppercase; - margin:0; - padding:0; - overflow:hidden; - background-color:#003559; - list-style-type:none; -} -li{ - float:left; -} -li a{ - display:block; - color:#D6E5E3; - text-align:center; - padding:14px 16px; - text-decoration:none; -} -li a:hover{ - background-color:#061A40; -} -.main{ - margin:auto; -} -.search{ - padding:12px 20px 12px; - width:90%; - border-radius:5px; - margin-left:auto; - margin-right:auto; - margin-bottom:15em; - color:#003559; - background-color:#D6E5E3; - font-family:IBM Plex Mono; - border-color:#003559; - -} -.icon{ - font-size:200px; - margin-top:10px; - margin-bottom:10px; -} -@media only screen and (min-width: 1440px){ +@media (prefers-color-scheme: light) { + /* + * Color scheme + * Background color: #eaefef + * Main color: #00558e + * Secondary color: #0b3075 + */ + @font-face{ + font-family:IBM Plex Mono; + src: url(../fonts/IBMPlexMono-Regular.ttf); + } + body, html{ + height: calc(100% - 2em); + } + body{ + background-color:#eaefef; + color:#00558e; + font-family:IBM Plex Mono; + } + a{ + color: #00558e; + } + ul{ + text-transform:uppercase; + margin:0; + padding:0; + overflow:hidden; + background-color:#00558e; + list-style-type:none; + } + li{ + float:left; + } + li a{ + display:block; + color:#eaefef; + text-align:center; + padding:14px 16px; + text-decoration:none; + } + li a:hover{ + background-color:#0b3075; + } .main{ margin:auto; - width:60%; + } + .search{ + padding:12px 20px 12px; + width:90%; + border-radius:5px; + margin-left:auto; + margin-right:auto; + margin-bottom:15em; + color:#00558e; + background-color:#eaefef; + font-family:IBM Plex Mono; + border-color:#00558e; + + } + .icon{ + font-size:200px; + margin-top:10px; + margin-bottom:10px; + } + @media only screen and (min-width: 1440px){ + .main{ + margin:auto; + width:60%; + } + } + @media only screen and (min-height: 1440px){ + li a{ + font-size:36px; + } + .search{ + font-size:36px; + } + .icon{ + font-size:256px; + } + } + @media only screen and (max-width: 1365px){ + .desktop{ + display:none; + } } } -@media only screen and (min-height: 1440px){ + +@media (prefers-color-scheme: dark) { + /* + * Color scheme + * Background color: #0D1F22 + * Text Color: #eaefef + * Main color: #00558e + * Secondary color: #0b3075 + */ + @font-face{ + font-family:IBM Plex Mono; + src: url(../fonts/IBMPlexMono-Regular.ttf); + } + body, html{ + height: calc(100% - 2em); + } + body{ + background-color:#0D1F22; + color:#eaefef; + font-family:IBM Plex Mono; + } + a{ + color: #eaefef; + } + ul{ + text-transform:uppercase; + margin:0; + padding:0; + overflow:hidden; + background-color:#00558e; + list-style-type:none; + } + li{ + float:left; + } li a{ - font-size:36px; + display:block; + color:#eaefef; + text-align:center; + padding:14px 16px; + text-decoration:none; + } + li a:hover{ + background-color:#0b3075; + } + .main{ + margin:auto; } .search{ - font-size:36px; + padding:12px 20px 12px; + width:90%; + border-radius:5px; + margin-left:auto; + margin-right:auto; + margin-bottom:15em; + color:#00558e; + background-color:#eaefef; + font-family:IBM Plex Mono; + border-color:#00558e; + } .icon{ - font-size:256px; + font-size:200px; + margin-top:10px; + margin-bottom:10px; } -} -@media only screen and (max-width: 1365px){ - .desktop{ - display:none; + @media only screen and (min-width: 1440px){ + .main{ + margin:auto; + width:60%; + } + } + @media only screen and (min-height: 1440px){ + li a{ + font-size:36px; + } + .search{ + font-size:36px; + } + .icon{ + font-size:256px; + } + } + @media only screen and (max-width: 1365px){ + .desktop{ + display:none; + } } } |