aboutsummaryrefslogtreecommitdiff
path: root/assets/css
diff options
context:
space:
mode:
Diffstat (limited to 'assets/css')
-rw-r--r--assets/css/creative.css227
-rw-r--r--assets/css/style.css40
2 files changed, 248 insertions, 19 deletions
diff --git a/assets/css/creative.css b/assets/css/creative.css
index 79a56f2..535e830 100644
--- a/assets/css/creative.css
+++ b/assets/css/creative.css
@@ -1,3 +1,41 @@
+/*div {*/
+ /*box-sizing: border-box;*/
+/*}*/
+main .search {
+ width: 60%;
+ height: 100%;
+}
+
+.search-cover {
+ /*height: auto;*/
+ padding-bottom: 10%;
+}
+
+.search-reduced {
+ min-width: 60%;
+}
+
+/* For better viewing for mobile displays */
+@media only screen and (max-width: 768px) {
+ main {
+ padding-top: 10%;
+ padding-bottom: 10%;
+ }
+}
+
+
+/*main #solutions {
+ padding-top: 65px;
+}*/
+
+
+h2 {
+font-family: 'Lato', sans-serif;
+color: gray;
+font-size: 2.5em;
+margin: 4%;
+padding-top: 200px;
+}
.navbar-default {
border-color: rgba(34,34,34,.05);
@@ -105,3 +143,192 @@
/*color: #f05f40;*/
}
}
+
+
+header {
+ position: relative;
+ width: 100%;
+ min-height: auto;
+ text-align: center;
+ /*color: #fff;*/
+ background-image: url("../images/main.jpg");
+ /*background-color: #5bc0de;*/
+ background-size: 250px 250px;
+ background-position: center;
+ /*-webkit-background-size: cover;*/
+ /*-moz-background-size: cover;*/
+ /*background-size: cover;*/
+ /*-o-background-size: cover;*/
+
+}
+
+header .header-spec {
+ text-align: left;
+}
+
+header .header-content {
+ position: relative;
+ width: 100%;
+ padding: 100px 15px;
+ text-align: center;
+}
+
+header .header-content .header-content-inner h1 {
+ margin-top: 0;
+ margin-bottom: 0;
+ text-transform: uppercase;
+ font-weight: 700;
+}
+
+header .header-content .header-content-inner hr {
+ margin: 30px auto;
+}
+
+/*header .header-content .header-content-inner p {
+ margin-bottom: 50px;
+ font-family: 'Lato', sans-serif;
+ color: red;
+ font-size: 2.5em;
+ /color: #333333
+}*/
+
+
+
+@media (min-width: 320px) {
+ header {
+ min-height: 100%;
+ }
+
+ header .header-content {
+ position: absolute;
+ top: 50%;
+ padding: 0 50px;
+ -webkit-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ transform: translateY(-50%);
+ }
+
+ header .header-content .header-content-inner {
+ margin-right: auto;
+ margin-left: auto;
+ max-width: 1000px;
+ }
+
+ header .header-content .header-content-inner p {
+ margin-right: auto;
+ margin-left: auto;
+ max-width: 80%;
+ font-size: 18px;
+ color: #333333;
+ }
+
+}
+
+@media(min-width:768px) {
+ header {
+ min-height: 100%;
+ }
+
+ header .header-content {
+ position: absolute;
+ top: 50%;
+ padding: 0 50px;
+ -webkit-transform: translateY(-50%);
+ -ms-transform: translateY(-50%);
+ transform: translateY(-50%);
+ }
+
+ header .header-content .header-content-inner {
+ margin-right: auto;
+ margin-left: auto;
+ max-width: 1000px;
+ }
+
+ header .header-content .header-content-inner p {
+ margin-right: auto;
+ margin-left: auto;
+ max-width: 80%;
+ font-size: 32px;
+ font-family: 'Lato', sans-serif;
+ color: gray;
+ font-size: 2.5em;
+ }
+
+ header .header-content-inner {
+ flex: 1;
+ width: 60%;
+ height: 100%;
+ background-color: rgba(235,235,235, 0.7);
+ padding-top: 22%;
+ padding-bottom: 22%;
+ }
+
+}
+
+.rounded {
+ border-radius: 20px;
+}
+
+.dropdown-submenu {
+ position: relative;
+}
+.dropdown-submenu > .dropdown-menu {
+ top: 0;
+ left: 100%;
+ margin-top: -6px;
+ margin-left: -1px;
+}
+.dropdown-submenu:hover > .dropdown-menu {
+ display: block;
+}
+.dropdown-submenu:hover > a:after {
+ border-left-color: #fff;
+}
+.dropdown-submenu.pull-left {
+ float: none;
+}
+.dropdown-submenu.pull-left > .dropdown-menu {
+ left: -100%;
+ margin-left: 10px;
+}
+
+
+
+/******************************************************/
+
+
+.user-row {
+ margin-bottom: 14px;
+}
+
+.user-row:last-child {
+ margin-bottom: 0;
+}
+
+.dropdown-user {
+ margin: 13px 0;
+ padding: 5px;
+ height: 100%;
+}
+
+.dropdown-user:hover {
+ cursor: pointer;
+}
+
+.table-user-information > tbody > tr {
+ border-top: 1px solid rgb(221, 221, 221);
+}
+
+.table-user-information > tbody > tr:first-child {
+ border-top: 0;
+}
+
+
+.table-user-information > tbody > tr > td {
+ border-top: 0;
+}
+.toppad
+{margin-top:20px;
+}
+
+
diff --git a/assets/css/style.css b/assets/css/style.css
index 614d0c2..dc27602 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1,5 +1,6 @@
html, body {
+ width: 100%;
height: 100%;
font-family: 'Roboto', sans-serif;
}
@@ -105,17 +106,10 @@ h1{
}
.drop-down:hover .drop-menu {
- display: block;
-
- }
-
- .side-menu {
- /* This line of code is incomplete - Humair */
- /*display */
+ display: block;
}
-
main {
background-image: url("../images/main.jpg");
@@ -134,17 +128,19 @@ main{
align-items: center;
justify-content: center;
flex-flow: column; /* Makes it grow vertically */
+ /*padding-bottom: 5%;
+ padding-top: 5%;*/
}
-/*************************** SEARCH - index.html *********************************/
/* Changes - search is a flex container for h2 and bar, removed various attributes */
main .search {
flex: 1;
min-width: 60%;
min-height: 100%;
- background-color: rgba(235,235,235, 0.6);
+ background-color: rgba(235,235,235, 0.7);
overflow: auto;
+
}
/* Changes - added h2 styiling for main */
@@ -156,11 +152,11 @@ main .search h2{
padding-top: 200px; /* Change to move search bar content. Keep as pixel*/
}
-main #search-select {
+.search-select {
display: inline-block;
}
-main #search-select select {
+.search-select select {
color: black;
width: 100px;
padding: 5px;
@@ -175,31 +171,34 @@ main #search-select select {
margin-right: -5px;
}
-main .search input[type=text] {
+.search input[type=text] {
display: inline;
width: 250px;
+ height: 40px;
text-align: center;
box-sizing: border-box;
+ border: 2px solid #ccc;
font-size: 16px;
+ border-radius: 10px;
background-color: white;
background-image: url('../images/search_icon.png');
background-size: 20px 20px;
background-position: 9px 9px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
- border-top-right-radius: 10px;
- border-bottom-right-radius: 10px;
}
-main .search input[type=text], main #search-select select {
+
+.search input[type=text], .search-select select {
height: 40px;
border: 2px solid #ccc;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
-main .search input[type=text]:focus {
+.search input[type=text]:focus {
width: 50%;
}
@@ -208,6 +207,9 @@ main .search img {
display: inline;
}
+
+
+
/*************************** END OF SEARCH - index.html *********************************/
/*************************** USER SOLUTIONS - user_solutions.html *********************************/
@@ -398,7 +400,7 @@ main [id^="sol-"] div.comments ul li p.user-comment {
/*************************** END OF USER SOLUTIONS - user_solutions.html *********************************/
-
+/*
footer {
background-color: #333333;
bottom: 0;
@@ -431,7 +433,7 @@ footer nav a {
color: darkgray;
vertical-align: top;
}
-
+*/
/***********************************************************************************************************************/
/*THE SOLUTIONS PAGE BEGINS HERE*/