summaryrefslogtreecommitdiff
path: root/CSS
diff options
context:
space:
mode:
Diffstat (limited to 'CSS')
-rw-r--r--CSS/GreenAndDark.css180
-rw-r--r--CSS/PurpleAndDark.css176
-rw-r--r--CSS/PurpleAndWhite.css174
-rw-r--r--CSS/main.css21
4 files changed, 545 insertions, 6 deletions
diff --git a/CSS/GreenAndDark.css b/CSS/GreenAndDark.css
new file mode 100644
index 0000000..cd8e7ec
--- /dev/null
+++ b/CSS/GreenAndDark.css
@@ -0,0 +1,180 @@
+
+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: #D2D2D2;
+ 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);
+}
+@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;
+ }
+} \ No newline at end of file
diff --git a/CSS/PurpleAndDark.css b/CSS/PurpleAndDark.css
new file mode 100644
index 0000000..ef6ef8c
--- /dev/null
+++ b/CSS/PurpleAndDark.css
@@ -0,0 +1,176 @@
+
+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: #D2D2D2;
+ 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);
+}
+@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/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;
+ }
+} \ No newline at end of file
diff --git a/CSS/PurpleAndWhite.css b/CSS/PurpleAndWhite.css
new file mode 100644
index 0000000..c2067b4
--- /dev/null
+++ b/CSS/PurpleAndWhite.css
@@ -0,0 +1,174 @@
+
+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: #D2D2D2;
+ 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);
+}
+@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;
+ }
+} \ No newline at end of file
diff --git a/CSS/main.css b/CSS/main.css
index 4f416bd..819f5bc 100644
--- a/CSS/main.css
+++ b/CSS/main.css
@@ -1,7 +1,6 @@
body, html{
height: calc(100% - 2em);
- margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
}
@@ -23,6 +22,9 @@ aside{
aside img{
cursor: pointer;
}
+a{
+ color:#000;
+}
.active {
position: absolute;
display: block;
@@ -91,8 +93,8 @@ main{
@media only screen and (min-width: 768px) and (min-height: 614px){
body{
display: grid;
- grid-template-columns: 17.125em auto;
- padding: 2em;
+ grid-template-columns: 375px auto;
+ /*padding: 2em;*/
}
.menuimg{
display: none;
@@ -101,16 +103,21 @@ main{
display: none;
}
aside{
- background:rgba(213,213,213,.72);
+ background:rgba(210,210,210,1);
grid-template-columns: auto;
- padding: 0;
+ padding: 0 !important;
border-radius: 5px 0px 0px 5px;
+ margin: 82px 0 62px 101px;
}
main{
padding: 4em;
- background: rgba(93,93,93,.72);
+ 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;
@@ -123,6 +130,7 @@ main{
ul li a{
padding: 1.4em;
font-size: .8em;
+ color:#000;
}
ul li a:hover{
background: #fff;
@@ -131,6 +139,7 @@ main{
width: 50%;
margin: 0 auto;
display: block;
+ margin-bottom: 0;
}
div.logo{
margin-top: 12em;
generated by cgit v1.2.3 (git 2.46.0) at 2026-05-15 18:54:56 +0000