(418 intermediate revisions by 3 users not shown) | |||
Line 10: | Line 10: | ||
body { | body { | ||
− | font-family: ' | + | font-family: 'Roboto', sans-serif; |
background-color: #eee; | background-color: #eee; | ||
margin-bottom: 0px; | margin-bottom: 0px; | ||
Line 17: | Line 17: | ||
.ntnu_navbar { | .ntnu_navbar { | ||
list-style-type: none; | list-style-type: none; | ||
− | |||
− | |||
− | |||
color: #FFFFFF; | color: #FFFFFF; | ||
text-decoration: none; | text-decoration: none; | ||
Line 26: | Line 23: | ||
ul.ntnu_navbar { | ul.ntnu_navbar { | ||
− | |||
− | |||
list-style-type: none; | list-style-type: none; | ||
flex-grow: 1; | flex-grow: 1; | ||
+ | margin-left: 50px; | ||
} | } | ||
+ | |||
+ | .icon { | ||
+ | padding-left: 1rem; | ||
+ | padding-right: 1rem; | ||
+ | } | ||
+ | |||
+ | .frontpage-text { | ||
+ | font-size: 30px !important; | ||
+ | text-align: center; | ||
+ | color: #61586f; | ||
+ | } | ||
Line 38: | Line 45: | ||
} | } | ||
− | a:visited { color: white } | + | a.btn:visited { |
+ | color: #fafafa !important; | ||
+ | } | ||
+ | |||
+ | a.ntnu_dropbtn:visited { color: white } | ||
Line 58: | Line 69: | ||
/* ---- HOVER COLORS NAVIGATION BAR ---- */ | /* ---- HOVER COLORS NAVIGATION BAR ---- */ | ||
− | li #menu-home:hover { background-color: | + | li #menu-home:hover { background-color: #7C8093; } |
− | li #menu- | + | li #menu-team:hover { background-color: #ff4a38; } |
− | li #menu- | + | li #menu-project:hover { background-color: #ff8a23; } |
+ | li #menu-lab:hover { background-color: #f8b732; } | ||
li #menu-parts:hover { background-color: #4CAF50; } | li #menu-parts:hover { background-color: #4CAF50; } | ||
− | li #menu- | + | li #menu-interlabs:hover { background-color: #5bc7d8; } |
li #menu-hp:hover { background-color: #4286f4; } | li #menu-hp:hover { background-color: #4286f4; } | ||
− | li #menu- | + | li #menu-acknowledge:hover { background-color: #a851db; } |
+ | li #menu-jamboree:hover { background-color: #a53255; } | ||
+ | |||
.ntnu_dropdown { | .ntnu_dropdown { | ||
Line 96: | Line 110: | ||
padding: 40px; | padding: 40px; | ||
background: #ecf0f1; | background: #ecf0f1; | ||
+ | } | ||
+ | |||
+ | html, body { | ||
+ | max-width: 100%; | ||
} | } | ||
Line 109: | Line 127: | ||
box-sizing: border-box; | box-sizing: border-box; | ||
} | } | ||
+ | |||
+ | /* just for jsfiddle */ | ||
+ | @font-face { | ||
+ | font-family: 'Material Icons'; | ||
+ | font-style: normal; | ||
+ | font-weight: 400; | ||
+ | src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v18/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'); | ||
+ | } | ||
+ | |||
+ | .material-icons { | ||
+ | font-family: 'Material Icons'; | ||
+ | font-weight: normal; | ||
+ | font-style: normal; | ||
+ | font-size: 24px; | ||
+ | line-height: 1; | ||
+ | letter-spacing: normal; | ||
+ | text-transform: none; | ||
+ | display: inline-block; | ||
+ | white-space: nowrap; | ||
+ | word-wrap: normal; | ||
+ | direction: ltr; | ||
+ | -moz-font-feature-settings: 'liga'; | ||
+ | -moz-osx-font-smoothing: grayscale; | ||
+ | } | ||
+ | |||
+ | .middle-indicator{ | ||
+ | position:absolute; | ||
+ | top:50%; | ||
+ | } | ||
+ | .middle-indicator-text{ | ||
+ | font-size: 4.2rem; | ||
+ | } | ||
+ | a.middle-indicator-text{ | ||
+ | color:#86858a !important; | ||
+ | } | ||
+ | .content-indicator{ | ||
+ | width: 64px; | ||
+ | height: 64px; | ||
+ | background: none; | ||
+ | -moz-border-radius: 50px; | ||
+ | -webkit-border-radius: 50px; | ||
+ | border-radius: 50px; | ||
+ | } | ||
+ | |||
.ntnu_block { | .ntnu_block { | ||
Line 117: | Line 179: | ||
h1 { | h1 { | ||
− | |||
− | |||
text-align: center; | text-align: center; | ||
− | |||
margin: 48px auto 0; | margin: 48px auto 0; | ||
border-bottom: 0px; | border-bottom: 0px; | ||
− | + | font-size: 35px !important; | |
− | font- | + | font-family: 'Lora', serif !important; |
+ | font-style: italic; | ||
+ | display: inline; | ||
+ | width: 100%; | ||
} | } | ||
+ | h2 { | ||
+ | margin: 48px auto 0; | ||
+ | font-size: 30px !important; | ||
+ | font-family: 'Lora', serif !important; | ||
+ | font-style: italic; | ||
+ | padding: 5px 0 5px 0; | ||
+ | width: auto; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | h3 { | ||
+ | font-family: 'Lora', serif !important; | ||
+ | } | ||
+ | |||
+ | h2.modal { | ||
+ | font-size: 20px !important; | ||
+ | } | ||
+ | |||
+ | h2 span { | ||
+ | color: #fff; | ||
+ | font-weight: bold; | ||
+ | padding: 5px; | ||
+ | } | ||
+ | |||
+ | .italic { | ||
+ | font-style: italic; | ||
+ | } | ||
+ | |||
+ | .team-color { color: #FF5144 } | ||
+ | .project-color { color: #ff8a23 } | ||
+ | .lab-color { color: #f8b732 } | ||
+ | .parts-color { color: #4CAF50 } | ||
+ | .interlabs-color { color: #5bc7d8 } | ||
+ | .hp-color { color: #006194 } | ||
+ | .ack-color { color: #A293A5 } | ||
+ | .jamboree-color { color: #a53255 } | ||
+ | .timeline-color-left { color: #16a9b4; background-color: white; line-height: 140% !important; } | ||
+ | .timeline-color-right { color: #006194; background-color: white; line-height: 140% !important;} | ||
+ | .gold-color { color: #D4AF37 } | ||
+ | .silver-color {color: #b3b3b3 } | ||
+ | .bronze-color {color: #cd7f32 } | ||
+ | |||
+ | h2 span.timeline-color-left { text-align: left } | ||
+ | h2 span.timeline-color-right { text-align: left } | ||
+ | |||
+ | /* Vanessa tester styles --------------------------------------------------------------*/ | ||
+ | |||
+ | .heading { | ||
+ | font-family: Courier New, serif !important; | ||
+ | color: #5F7C87; | ||
+ | font-weight: bold; | ||
+ | } /* I prinsippet den samme som h3 ----*/ | ||
− | |||
.headertext { | .headertext { | ||
font-size: 18px; | font-size: 18px; | ||
− | |||
line-height: 30px; | line-height: 30px; | ||
} | } | ||
− | /* Vanessa tester--------------------------------------------------------------*/ | + | .paragraphtext { |
+ | font-size: 17px; | ||
+ | line-height: 25px; | ||
+ | } | ||
+ | |||
+ | img.sponsorlogo { | ||
+ | float: right; | ||
+ | width: 350px; | ||
+ | height: auto; | ||
+ | padding-left: 20px; | ||
+ | border: none; | ||
+ | } | ||
+ | |||
+ | a.linkcolor { | ||
+ | color: blue; | ||
+ | } | ||
+ | |||
+ | /* Vanessa tester styles--------------------------------------------------------------*/ | ||
Line 146: | Line 275: | ||
div .nav-wrapper { | div .nav-wrapper { | ||
− | background-color: # | + | background-color: #1f1c24 !important; |
opacity: 0.7; | opacity: 0.7; | ||
− | |||
display: flex !important; | display: flex !important; | ||
flex-direction: column !important; | flex-direction: column !important; | ||
Line 154: | Line 282: | ||
top: 14px; /* Position the navbar at the top of the page */ | top: 14px; /* Position the navbar at the top of the page */ | ||
width: 100%; /* Full width */ | width: 100%; /* Full width */ | ||
− | z-index: | + | z-index: 7; |
+ | |||
} | } | ||
Line 176: | Line 305: | ||
.container { | .container { | ||
− | |||
padding-bottom: 70px !important; | padding-bottom: 70px !important; | ||
+ | width: 55% !important; | ||
} | } | ||
Line 189: | Line 318: | ||
width: auto; | width: auto; | ||
padding: 10px 20px; | padding: 10px 20px; | ||
− | background: # | + | background: #1f1c20; |
text-align: right; | text-align: right; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
Line 198: | Line 327: | ||
width: 100%; /* Full width */ | width: 100%; /* Full width */ | ||
opacity: 0.7 !important; | opacity: 0.7 !important; | ||
− | z-index: | + | z-index: 7; |
} | } | ||
Line 205: | Line 334: | ||
} | } | ||
− | @media | + | |
+ | .footer { | ||
+ | padding: 20px; | ||
+ | } | ||
+ | |||
+ | .header-img { | ||
+ | position: relative; | ||
+ | top: -10px; | ||
+ | left: 0; | ||
+ | |||
+ | /* Preserve aspet ratio */ | ||
+ | min-width: 100%; | ||
+ | min-height: 100%; | ||
+ | |||
+ | object-fit: scale-down; | ||
+ | |||
+ | z-index: -1; | ||
+ | } | ||
+ | |||
+ | |||
+ | body, html { | ||
+ | height: 100%; | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | .homebtn { | ||
+ | z-index: 9; | ||
+ | position: fixed; | ||
+ | top: 25px; | ||
+ | right: 40px; | ||
+ | height: 70px; | ||
+ | width: auto; | ||
+ | } | ||
+ | |||
+ | .mobile-home { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | .floating { | ||
+ | animation-name: floating; | ||
+ | animation-duration: 2s; | ||
+ | animation-iteration-count: infinite; | ||
+ | animation-timing-function: ease-in-out; | ||
+ | } | ||
+ | |||
+ | @keyframes floating { | ||
+ | from { transform: translate(0, 0px); } | ||
+ | 65% { transform: translate(0, 15px); } | ||
+ | to { transform: translate(0, -0px); } | ||
+ | } | ||
+ | |||
+ | |||
+ | .centered { | ||
+ | position: absolute; | ||
+ | top: 43%; | ||
+ | left: 48%; | ||
+ | transform: translate(-50%, -50%); | ||
+ | z-index: 6 !important; | ||
+ | } | ||
+ | |||
+ | .centered-mobile { | ||
+ | position: absolute; | ||
+ | top: 47%; | ||
+ | left: 48%; | ||
+ | transform: translate(-50%, -50%); | ||
+ | z-index: 6 !important; | ||
+ | } | ||
+ | |||
+ | .centered, .centered-mobile i { | ||
+ | color: #7A7D89; | ||
+ | width: auto; | ||
+ | } | ||
+ | |||
+ | .clickable { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | .card { | ||
+ | |||
+ | } | ||
+ | |||
+ | .enlarged { | ||
+ | font-size: 200% !important; | ||
+ | color: #FFF; | ||
+ | line-height: 1em; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | .link { | ||
+ | padding: 7px; | ||
+ | display: inline-block; | ||
+ | color: #e6e6e6; | ||
+ | } | ||
+ | |||
+ | .link:visited { | ||
+ | color: #e6e6e6; | ||
+ | } | ||
+ | |||
+ | .link:hover { | ||
+ | color: #FF5144; | ||
+ | text-decoration: none !important; | ||
+ | } | ||
+ | |||
+ | .home-box { | ||
+ | padding: 50px 20px 50px 20px; | ||
+ | border-bottom: solid 0.5px #1f1c24; | ||
+ | } | ||
+ | |||
+ | .home-text { | ||
+ | text-align: justify; | ||
+ | -moz-text-align-last: center; | ||
+ | text-align-last: center; | ||
+ | color: #1f1c24; | ||
+ | font-size: 16px; | ||
+ | } | ||
+ | |||
+ | .home-box-2 { | ||
+ | border: 20px solid #FF5144; | ||
+ | padding: 50px; | ||
+ | } | ||
+ | |||
+ | p { | ||
+ | margin-top: 10px !important; | ||
+ | font-size: 16px !important; | ||
+ | font-family: 'Roboto', sans-serif !important; | ||
+ | } | ||
+ | |||
+ | .timeline-header-left { | ||
+ | position: absolute; | ||
+ | top: 45%; | ||
+ | right: 75%; | ||
+ | z-index: 1; | ||
+ | display: flex; | ||
+ | } | ||
+ | |||
+ | .timeline-header-right{ | ||
+ | position: absolute; | ||
+ | top: 0%; | ||
+ | left: 75%; | ||
+ | z-index: 1; | ||
+ | display: flex; | ||
+ | } | ||
+ | |||
+ | .timeline img { | ||
+ | padding: 0 15% 0 15%; | ||
+ | } | ||
+ | |||
+ | .gold { | ||
+ | color: #EDB350; | ||
+ | } | ||
+ | |||
+ | timeline-header-left div { | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | ul.modal-list li { | ||
+ | list-style-type: disc !important; | ||
+ | list-style-image: none !important; | ||
+ | } | ||
+ | |||
+ | .protocol-category { | ||
+ | font-size: 20px; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | |||
+ | .protocol-title { | ||
+ | font-size: 18px; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /****** WRITE ALL NON-MEDIA CODE ABOVE THIS LINE *****/ | ||
+ | |||
+ | @media screen and (max-width: 713px) { | ||
.toggle { | .toggle { | ||
display: block; | display: block; | ||
Line 216: | Line 522: | ||
height: auto !important; | height: auto !important; | ||
position: fixed; | position: fixed; | ||
− | top: | + | top: 50px; |
} | } | ||
Line 241: | Line 547: | ||
.ntnu_dropdown_content { | .ntnu_dropdown_content { | ||
width: 100%; | width: 100%; | ||
+ | } | ||
+ | |||
+ | div .nav-wrapper { | ||
+ | opacity: 1 !important; | ||
} | } | ||
Line 250: | Line 560: | ||
h1 { | h1 { | ||
font-size: 25px !important; | font-size: 25px !important; | ||
− | } | + | } |
− | } | + | h2 { |
+ | text-align: center; | ||
+ | } | ||
− | . | + | ul.ntnu_navbar { |
− | padding: | + | background-color: #1f1c24; |
− | } | + | margin-left: 0; |
+ | } | ||
+ | |||
+ | .homebtn { display: none; } | ||
+ | |||
+ | .mobile-home { display: block; } | ||
+ | |||
+ | .timeline img { | ||
+ | padding: 0; | ||
+ | } | ||
+ | .container { | ||
+ | width: 90% !important; | ||
+ | } | ||
− | |||
− | |||
} | } | ||
+ | |||
+ | |||
</style> | </style> | ||
</html> | </html> |
Latest revision as of 09:43, 15 October 2018