diff options
Diffstat (limited to 'CSS')
| -rwxr-xr-x | CSS/GreenAndDark.css | 230 | ||||
| -rwxr-xr-x | CSS/PurpleAndDark.css | 227 | ||||
| -rwxr-xr-x | CSS/PurpleAndWhite.css | 223 | ||||
| -rw-r--r--[-rwxr-xr-x] | CSS/main.css | 275 | ||||
| -rwxr-xr-x | CSS/old.css | 135 |
5 files changed, 51 insertions, 1039 deletions
diff --git a/CSS/GreenAndDark.css b/CSS/GreenAndDark.css deleted file mode 100755 index 7687e73..0000000 --- a/CSS/GreenAndDark.css +++ /dev/null @@ -1,230 +0,0 @@ -body, html{ - height: calc(100% - 2em); - font-family: Arial, Helvetica, sans-serif; - font-size: 16px; -} -body{ - background: #16FF5C; /* Old browsers */ - background: -moz-linear-gradient(45deg, #16FF5C 0%, #076aff 100%); /* FF3.6-15 */ - background: -webkit-linear-gradient(45deg, #16FF5C 0%,#076aff 100%); /* Chrome10-25,Safari5.1-6 */ - background: linear-gradient(45deg, #16FF5C 0%,#076aff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#16FF5C', endColorstr='#076aff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ - background-repeat: no-repeat; - background-attachment: fixed; -} -aside{ - color: #fff; - display: grid; - grid-template-columns: 40px auto; - padding: 2em; -} -aside img{ - cursor: pointer; -} -a{ - color:#fff; -} -.active { - position: absolute; - display: block; - background: rgba(37,37,37,1); - color: #fff; - width: 50%; - left: 0; - top: 0; - height: 100%; -} -.MenuX{ - position: absolute; - display: block; - top: 0; - right: .5em; - padding: 1em; - color: #000; - cursor: pointer; -} -ul { - display: none; - list-style-type: none; - margin: 0; - padding: 0; -} -ul li a { - text-decoration: none; - text-transform: uppercase; - font-size: .6em; - display: block; - padding: .5em 3em; - color: #000; -} -div.logo{ - width: 150px; - height: 150px; - background-image: url('../images/LOGO_Transparent.png'); - background-size: contain; - background-repeat: no-repeat; - margin-left: auto; - margin-right: auto; - display: block; - padding-bottom:5px; -} -main{ - padding: 1em 1.4em; - color: white; -} -.search{ - padding: 12px 20px 12px; - width: 50%; - border-radius: 5px; - margin-left: auto; - margin-right: auto; - margin-bottom: 15em; - display: block; - background-color: rgba(36,38,40,.72); - color: rgb(186,181,171); - border-color: #575757; - font-size: 16px; - -webkit-transition: width 0.4s ease-in-out; - transition: width 0.4s ease-in-out; -} -.search:focus{ - color: #fff; - width: 90%; - background-color: rgba(36,38,40,1); -} -.dropbtn { - color: #fff; - padding: 1.4em; - font-size: .8em; - cursor: pointer; - text-transform: uppercase; - background: rgba(37,37,37,1); - border: none;*/ - display: block; - position: relative; - width: 100%; - text-align: left; -} -.dropbtn:hover, .dropbtn:focus { - background-color: #000; -} -.dropdown { - position: relative; - display: inline-block; -} -.dropdown-content { - display: none; - position: absolute; - background-color: rgba(37,37,37,1); - /*min-width: 160px;*/ - width: 100%; - overflow: auto; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); - z-index: 1; -} -.dropdown-content a { - color: #fff; - padding: 12px 16px; - text-decoration: none; - display: block; -} -.dropdown a:hover {background-color: #000;} -.show {display: block;} -@media only screen and (min-width: 768px) and (min-height: 614px){ - body{ - display: grid; - grid-template-columns: 375px auto; - /*padding: 2em;*/ - } - .menuimg{ - display: none; - } - .MenuX{ - display: none; - } - aside{ - background:rgba(37,37,37,1); - grid-template-columns: auto; - padding: 0 !important; - border-radius: 5px 0px 0px 5px; - margin: 82px 0 62px 101px; - } - main{ - padding: 4em; - background: rgba(24,26,27,1); - background-size: 70%; - border-radius: 0px 5px 5px 0px; - background-image: url('../images/SideFlareGreen.svg') !important; - background-repeat: no-repeat; - background-position: 100% 100%; - margin: 82px 101px 62px 0; - } - ul{ - display: block; - margin-top: 2em; - position: relative !important; - background: none !important; - background: #fff; - width: 100% !important; - } - ul li a{ - padding: 1.4em; - font-size: .8em; - color:#fff; - } - ul li a:hover{ - background: #000; - } - .search{ - width: 50%; - margin: 0 auto; - display: block; - margin-bottom: 0; - } - div.logo{ - margin-top: 12em; - } -} -@media only screen and (min-width: 1610px){ - div.logo{ - height:6.25em !important; - width: 37.8125em !important; - background-image: url('../images/LOGO_21x127.png') !important; - background-size: contain; - background-repeat: no-repeat; - margin-left: auto; - margin-right: auto; - display: block; - padding-bottom: 5px !important; - /*width: 38.66% !important;*/ - } -} -@media only screen and (max-height: 880px) and (min-width: 768px) and (min-height: 582px){ - body{ - display: flex !important; - } - main{ - flex: 1; - } - ul li a{ - font-size: 0.625em; - padding: 1em; - } -} -@media only screen and (max-height: 665px) and (min-height: 582px){ - div.logo{ - margin-top: 1em; - } -} -@media only screen and (max-height: 762px){ - ul li a{ - font-size: 7px; - } - p{ - font-size: 10px; - } - body{ - grid-template-columns: 16% auto; - } - -} diff --git a/CSS/PurpleAndDark.css b/CSS/PurpleAndDark.css deleted file mode 100755 index 108d676..0000000 --- a/CSS/PurpleAndDark.css +++ /dev/null @@ -1,227 +0,0 @@ - -body, html{ - height: calc(100% - 2em); - font-family: Arial, Helvetica, sans-serif; - font-size: 16px; -} -body{ - background: linear-gradient(to top right, #076aff 0%, #8e09ff 100%); - background-repeat: no-repeat; - background-attachment: fixed; -} -aside{ - color: #fff; - display: grid; - grid-template-columns: 40px auto; - padding: 2em; -} -aside img{ - cursor: pointer; -} -a{ - color:#fff; -} -.active { - position: absolute; - display: block; - background: rgba(37,37,37,1); - color: #fff; - width: 50%; - left: 0; - top: 0; - height: 100%; -} -.MenuX{ - position: absolute; - display: block; - top: 0; - right: .5em; - padding: 1em; - color: #000; - cursor: pointer; -} -ul { - display: none; - list-style-type: none; - margin: 0; - padding: 0; -} -ul li a { - text-decoration: none; - text-transform: uppercase; - font-size: .6em; - display: block; - padding: .5em 3em; - color: #000; -} -div.logo{ - width: 150px; - height: 150px; - background-image: url('../images/LOGO_Transparent.png'); - background-size: contain; - background-repeat: no-repeat; - margin-left: auto; - margin-right: auto; - display: block; - padding-bottom:5px; -} -main{ - padding: 1em 1.4em; - color: white; -} -.search{ - padding: 12px 20px 12px; - width: 50%; - border-radius: 5px; - margin-left: auto; - margin-right: auto; - margin-bottom: 15em; - display: block; - background-color: rgba(36,38,40,.72); - color: rgb(186,181,171); - border-color: #575757; - font-size: 16px; - -webkit-transition: width 0.4s ease-in-out; - transition: width 0.4s ease-in-out; -} -.search:focus{ - color: #fff; - width: 90%; - background-color: rgba(36,38,40,1); -} -.dropbtn { - color: #fff; - padding: 1.4em; - font-size: .8em; - cursor: pointer; - background: rgba(37,37,37,1); - text-transform: uppercase; - border: none;*/ - display: block; - position: relative; - width: 100%; - text-align: left; -} -.dropbtn:hover, .dropbtn:focus { - background-color: #000; -} -.dropdown { - position: relative; - display: inline-block; -} -.dropdown-content { - display: none; - position: absolute; - background-color: rgba(37,37,37,1); - /*min-width: 160px;*/ - width: 100%; - overflow: auto; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); - z-index: 1; -} -.dropdown-content a { - color: #fff; - padding: 12px 16px; - text-decoration: none; - display: block; -} -.dropdown a:hover {background-color: #000;} -.show {display: block;} -@media only screen and (min-width: 768px) and (min-height: 582px){ - body{ - display: grid; - grid-template-columns: 375px auto; - /*padding: 2em;*/ - } - .menuimg{ - display: none; - } - .MenuX{ - display: none; - } - aside{ - background:rgba(37,37,37,1); - grid-template-columns: auto; - padding: 0 !important; - border-radius: 5px 0px 0px 5px; - margin: 82px 0 62px 101px; - } - main{ - padding: 4em; - background: rgba(24,26,27,1); - background-size: 70%; - border-radius: 0px 5px 5px 0px; - background-image: url('../images/SideFlarePurple.svg') !important; - background-repeat: no-repeat; - background-position: 100% 100%; - margin: 82px 101px 62px 0; - } - ul{ - display: block; - margin-top: 2em; - position: relative !important; - background: none !important; - background: #fff; - width: 100% !important; - } - ul li a{ - padding: 1.4em; - font-size: .8em; - color:#fff; - } - ul li a:hover{ - background: #000; - } - .search{ - width: 50%; - margin: 0 auto; - display: block; - margin-bottom: 0; - } - div.logo{ - margin-top: 12em; - } -} -@media only screen and (min-width: 1610px){ - div.logo{ - height:6.25em !important; - width: 37.8125em !important; - background-image: url('../images/LOGO_21x127.png') !important; - background-size: contain; - background-repeat: no-repeat; - margin-left: auto; - margin-right: auto; - display: block; - padding-bottom: 5px !important; - /*width: 38.66% !important;*/ - } -} -/*@media only screen and (max-height: 880px) and (min-width: 768px) and (min-height: 582px){ - body{ - display: flex !important; - } - main{ - flex: 1; - } - ul li a{ - font-size: 0.625em; - padding: 1em; - } -}*/ -@media only screen and (max-height: 665px) and (min-height: 582px){ - div.logo{ - margin-top: 1em; - } -} -/*@media only screen and (max-height: 762px){ - ul li a{ - font-size: 7px; - } - p{ - font-size: 10px; - } - body{ - grid-template-columns: 16% auto; - } - -}*/ diff --git a/CSS/PurpleAndWhite.css b/CSS/PurpleAndWhite.css deleted file mode 100755 index 50dd54c..0000000 --- a/CSS/PurpleAndWhite.css +++ /dev/null @@ -1,223 +0,0 @@ - -body, html{ - height: calc(100% - 2em); - font-family: Arial, Helvetica, sans-serif; - font-size: 16px; -} -body{ - background: linear-gradient(to top right, #076aff 0%, #8e09ff 100%); - background-repeat: no-repeat; - background-attachment: fixed; -} -aside{ - color: #fff; - display: grid; - grid-template-columns: 40px auto; - padding: 2em; -} -aside img{ - cursor: pointer; -} -a{ - color:#000; -} -.active { - position: absolute; - display: block; - background: rgba(210,210,210,1); - width: 50%; - left: 0; - top: 0; - height: 100%; -} -.MenuX{ - position: absolute; - display: block; - top: 0; - right: .5em; - padding: 1em; - color: #000; - cursor: pointer; -} -ul { - display: none; - list-style-type: none; - margin: 0; - padding: 0; -} -ul li a { - text-decoration: none; - text-transform: uppercase; - font-size: .6em; - display: block; - padding: .5em 3em; - color: #000; -} -div.logo{ - width: 150px; - height: 150px; - background-image: url('../images/LOGO_Transparent.png'); - background-size: contain; - background-repeat: no-repeat; - margin-left: auto; - margin-right: auto; - display: block; - padding-bottom:5px; -} -main{ - padding: 1em 1.4em; -} -.search{ - padding: 12px 20px 12px; - width: 50%; - border-radius: 5px; - margin-left: auto; - margin-right: auto; - margin-bottom: 15em; - display: block; - background-color: rgba(213,213,213,.72); - color: #878787; - font-size: 16px; - -webkit-transition: width 0.4s ease-in-out; - transition: width 0.4s ease-in-out; -} -.search:focus{ - color: black; - width: 90%; - background-color: rgba(213,213,213,1.0); -} -.dropbtn { - color: #000; - padding: 1.4em; - font-size: .8em; - cursor: pointer; - background: rgba(210,210,210,1); - text-transform: uppercase; - border: none;*/ - display: block; - position: relative; - width: 100%; - text-align: left; -} -.dropbtn:hover, .dropbtn:focus { - background-color: #fff; -} -.dropdown { - position: relative; - display: inline-block; -} -.dropdown-content { - display: none; - position: absolute; - background-color: rgba(210,210,210,1); - width: 100%; - overflow: auto; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); - z-index: 1; -} -.dropdown-content a { - color: #000; - padding: 12px 16px; - text-decoration: none; - display: block; -} -.dropdown a:hover {background-color: #fff;} -.show {display: block;} -@media only screen and (min-width: 768px) and (min-height: 614px){ - body{ - display: grid; - grid-template-columns: 375px auto; - /*padding: 2em;*/ - } - .menuimg{ - display: none; - } - .MenuX{ - display: none; - } - aside{ - background:rgba(210,210,210,1); - grid-template-columns: auto; - padding: 0 !important; - border-radius: 5px 0px 0px 5px; - margin: 82px 0 62px 101px; - } - main{ - padding: 4em; - background:rgba(255,255,255,1); - background-size: 70%; - border-radius: 0px 5px 5px 0px; - background-image: url('../images/SideFlarePurple.svg') !important; - background-repeat: no-repeat; - background-position: 100% 100%; - margin: 82px 101px 62px 0; - } - ul{ - display: block; - margin-top: 2em; - position: relative !important; - background: none !important; - background: #fff; - width: 100% !important; - } - ul li a{ - padding: 1.4em; - font-size: .8em; - color:#000; - } - ul li a:hover{ - background: #fff; - } - .search{ - width: 50%; - margin: 0 auto; - display: block; - margin-bottom: 0; - } - div.logo{ - margin-top: 12em; - } -} -@media only screen and (min-width: 1610px){ - div.logo{ - height:6.25em !important; - width: 37.8125em !important; - background-image: url('../images/LOGO_21x127.png') !important; - background-size: contain; - background-repeat: no-repeat; - margin-left: auto; - margin-right: auto; - display: block; - padding-bottom: 5px !important; - /*width: 38.66% !important;*/ - } -} -@media only screen and (max-height: 880px) and (min-width: 768px) and (min-height: 582px){ - body{ - display: flex !important; - } - main{ - flex: 1; - } - ul li a{ - font-size: 0.625em; - padding: 1em; - } -} -@media only screen and (max-height: 665px) and (min-height: 582px){ - div.logo{ - margin-top: 1em; - } -} -@media only screen and (max-height: 762px){ - ul li a{ - font-size: 7px; - } - p{ - font-size: 10px; - } - body{ - grid-template-columns: 16% auto; - } - -} diff --git a/CSS/main.css b/CSS/main.css index cbf5ec1..ade05fe 100755..100644 --- a/CSS/main.css +++ b/CSS/main.css @@ -1,228 +1,55 @@ - +/* + * 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); - font-family: Arial, Helvetica, sans-serif; - font-size: 16px; + height: calc(100% - 2em); } body{ - background: #16FF5C; /* Old browsers */ - background: -moz-linear-gradient(45deg, #16FF5C 0%, #076aff 100%); /* FF3.6-15 */ - background: -webkit-linear-gradient(45deg, #16FF5C 0%,#076aff 100%); /* Chrome10-25,Safari5.1-6 */ - background: linear-gradient(45deg, #16FF5C 0%,#076aff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#16FF5C', endColorstr='#076aff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ - background-repeat: no-repeat; - background-attachment: fixed; -} -aside{ - color: #fff; - display: grid; - grid-template-columns: 40px auto; - padding: 2em; -} -aside img{ - cursor: pointer; -} -a{ - color:#000; -} -.active { - position: absolute; - display: block; - background:rgba(210,210,210,1); - width: 50%; - left: 0; - top: 0; - height: 100%; -} -.MenuX{ - position: absolute; - display: block; - top: 0; - right: .5em; - padding: 1em; - color: #000; - cursor: pointer; -} -ul { - display: none; - list-style-type: none; - margin: 0; - padding: 0; -} -ul li a { - text-decoration: none; - text-transform: uppercase; - font-size: .6em; - display: block; - padding: .5em 3em; - color: #000; -} -div.logo{ - width: 150px; - height: 150px; - background-image: url('../images/LOGO_Transparent.png'); - background-size: contain; - background-repeat: no-repeat; - margin-left: auto; - margin-right: auto; - display: block; - padding-bottom:5px; -} -main{ - padding: 1em 1.4em; -} -.search{ - padding: 12px 20px 12px; - width: 50%; - border-radius: 5px; - margin-left: auto; - margin-right: auto; - margin-bottom: 15em; - display: block; - background-color: rgba(213,213,213,.72); - color: #878787; - font-size: 16px; - -webkit-transition: width 0.4s ease-in-out; - transition: width 0.4s ease-in-out; -} -.search:focus{ - color: black; - width: 90%; - background-color: rgba(213,213,213,1.0); -} -.dropbtn { - color: #000; - padding: 1.4em; - font-size: .8em; - cursor: pointer; - background: rgba(210,210,210,1); - border: none; - text-transform: uppercase; - display: block; - position: relative; - width: 100%; - text-align: left; -} -.dropbtn:hover, .dropbtn:focus { - background-color: #fff; - border: none; -} -.dropdown { - position: relative; - display: inline-block; -} -.dropdown-content { - display: none; - position: absolute; - background-color: rgba(210,210,210,1); - width: 100%; - overflow: auto; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); - z-index: 1; -} -.dropdown-content a { - color: #000; - padding: 12px 16px; - text-decoration: none; - display: block; -} -.dropdown a:hover {background-color: #fff;} -.show {display: block;} -@media only screen and (min-width: 768px) and (min-height: 614px){ - body{ - display: grid; - grid-template-columns: 375px auto; - /*padding: 2em;*/ - } - .menuimg{ - display: none; - } - .MenuX{ - display: none; - } - aside{ - background:rgba(210,210,210,1); - grid-template-columns: auto; - padding: 0 !important; - border-radius: 5px 0px 0px 5px; - margin: 82px 0 62px 101px; - } - main{ - padding: 4em; - background:rgba(255,255,255,1); - background-size: 70%; - border-radius: 0px 5px 5px 0px; - background-image: url('../images/SideFlareGreen.svg') !important; - background-repeat: no-repeat; - background-position: 100% 100%; - margin: 82px 101px 62px 0; - } - ul{ - display: block; - margin-top: 2em; - position: relative !important; - background: none !important; - background: #fff; - width: 100% !important; - } - ul li a{ - padding: 1.4em; - font-size: .8em; - color:#000; - } - ul li a:hover{ - background: #fff; - } - .search{ - width: 50%; - margin: 0 auto; - display: block; - margin-bottom: 0; - } - div.logo{ - margin-top: 12em; - } -} -@media only screen and (min-width: 1610px){ - div.logo{ - height:6.25em !important; - width: 37.8125em !important; - background-image: url('../images/LOGO_21x127.png') !important; - background-size: contain; - background-repeat: no-repeat; - margin-left: auto; - margin-right: auto; - display: block; - padding-bottom: 5px !important; - /*width: 38.66% !important;*/ - } -} -@media only screen and (max-height: 880px) and (min-width: 768px) and (min-height: 582px){ - body{ - display: flex !important; - } - main{ - flex: 1; - } - ul li a{ - font-size: 0.625em; - padding: 1em; - } -} -@media only screen and (max-height: 665px) and (min-height: 582px){ - div.logo{ - margin-top: 1em; - } -} -@media only screen and (max-height: 762px){ - ul li a{ - font-size: 7px; - } - p{ - font-size: 10px; - } - body{ - grid-template-columns: 16% auto; - } - + background-color:D6E5E2; + 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; +} +@media only screen and (min-width: 1440px){ + .main{ + margin:auto; + width:60%; + } +} +@media only screen and (min-height: 1440px){ + li a{ + font-size:24px + } } diff --git a/CSS/old.css b/CSS/old.css deleted file mode 100755 index dedd69c..0000000 --- a/CSS/old.css +++ /dev/null @@ -1,135 +0,0 @@ -/*CSS for Everything*/ -body{ - background-color:#323232; - font-family:Arial; - color:white; -} -span{ - color:white; - font-size:30px; - cursor:pointer; -} -.sidenav { - height: 100%; - width: 0; - position: fixed; - z-index: 1; - top: 0; - left: 0; - background-color: #111; - overflow-x: hidden; - transition: 0.5s; - padding-top: 60px; -} -.sidenav a { - padding: 8px 8px 8px 32px; - text-decoration: none; - font-size: 15px; - color: #818181; - display: block; - transition: 0.3s; -} -.sidenav a:hover, .offcanvas a:focus{ - color: #f1f1f1; -} -.sidenav .closebtn { - position: absolute; - top: 0; - right: 25px; - font-size: 25px; - margin-left: 50px; -} -/*CSS for Main Page*/ -img.logo{ - height:100px; - width:605px; - margin-left: auto; - margin-right: auto; - display: block; - padding-bottom:5px; -} -div.main{ - text-align:center; - width:100%; -} -/*Uncomment code below if using old search method*/ -/*.searchForm{ - border-radius:5px; - background-color:#262626; - color:white; - border: none; - font-size: 16px; -} -.searchForm:hover{ - background-color:#1a1a1a; -} -.searchButton{ - color:white; - background-color:#262626; - border-radius:5px; - border-color:#404040; -} -.searchButton:hover{ - background-color:#1a1a1a; -}*/ -.search{ - width:605px; - border-radius: 5px; - border-color:#404040; - background-color:#262626; - color:white; - font-size: 16px; - background-image:url('Images/LOGO_Transparent.png'); - background-repeat: no-repeat; - padding: 12px 20px 12px; - -webkit-transition: width 0.4s ease-in-out; - transition: width 0.4s ease-in-out; -} -.search:focus { - width: 90%; - border-color:#1a1a1a; -} -/*CSS fo Binary Page*/ -textarea.inputBinary{ - resize: none; - border-radius: 5px; - background-color: #262626; - border-color: #404040; - color: white; - width: 90%; -} -textarea.inputBinary:focus{ - background-color: #1a1a1a; -} -textarea.outputBinary{ - resize: none; - border-radius: 5px; - background-color: #262626; - border-color: #404040; - color: white; - width: 90%; -} -textarea.outputBinary:focus{ - background-color: #1a1a1a; -} -/*CSS for Morse Code page*/ -textarea.morse{ - width: 70%; - background-color: #262626; - color: white; - border-color: #404040; - border-radius: 5px; - resize: none; -} -textarea.morse:focus{ - background-color: #1a1a1a; -} -input.morse{ - background-color: #262626; - color: white; - border-color: #404040; - border-radius: 5px; -} -input.morse:focus{ - background-color: #1a1a1a; -}
\ No newline at end of file |