diff options
Diffstat (limited to 'CSS/PurpleAndWhite.css')
| -rw-r--r-- | CSS/PurpleAndWhite.css | 174 |
1 files changed, 174 insertions, 0 deletions
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 |