website/thaliawebsite/static/css/base.scss
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 80px;
background-color: var(--background-color);
color: var(--text-color);
}
.form-control:disabled, .form-control[readonly] {
background-color: var(--form-background-disabled);
}
.form-row {
margin-bottom: 1rem;
}
#accentbar {
position: -webkit-sticky;
position: sticky;
background: var(--primary);
height: 5px;
top: 0;
z-index: 1020;
}
.navbar {
position: -webkit-sticky;
position: sticky;
font-size: 16px;
background-color: var(--navbar-background-color);
border-bottom: 1px solid var(--background-shade);
top: 5px;
z-index: 1020;
> .container {
justify-content: end;
}
.navbar-brand {
padding-top: .625rem;
padding-bottom: .625rem;
img {
max-height: 5rem;
}
}
.navbar-toggler {
color: var(--nav-link-color);
}
.navbar-nav {
.nav-item {
.nav-link {
color: var(--nav-link-color);
font-family: $header-font;
text-transform: uppercase;
}
&.active, &:hover {
.nav-link {
color: var(--primary);
}
}
}
.dropdown {
.dropdown-menu {
margin: 0;
.dropdown-item {
font-family: $header-font;
text-transform: uppercase;
}
}
}
}
.navbar-user {
.dropdown-menu {
left: auto;
right: -10px;
}
}
}
.table {
color: var(--text-color);
}
.table-bordered {
border-color: var(--background-shade);
}
.table-bordered td, .table-bordered th {
border-color: var(--background-shade);
}
.table-clickable {
tbody tr {
&:hover {
cursor: pointer;
color: var(--primary);
background-color: var(--background-shade);
}
}
}
.tablesorter-header {
outline: none;
}
@media(min-width: 992px) {
.navbar {
.navbar-nav {
.dropdown {
&:hover {
> .dropdown-menu {
display: block;
}
}
> .dropdown-toggle {
&:active {
pointer-events: none;
}
}
}
}
}
}
@media(max-width: 1199px) {
.navbar {
.navbar-brand {
img {
max-height: 4rem;
}
}
}
}
@media(max-width: 767px) {
#accentbar, .navbar {
position: relative;
top: 0;
}
}
@media(max-width: 359px) {
.navbar {
.navbar-brand {
img {
max-height: 3rem;
}
}
}
}
#page-header {
height: 200px;
.image {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.home {
#page-header {
height: 0;
padding-bottom: 21.5%;
position: relative;
@media(max-width: 991px) {
padding-bottom: 40%;
}
.image, #announcements-slider {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
}
}
@media(max-width: 1023px) {
#page-header {
height: 170px;
}
}
#page-content {
padding: 1rem 0 4rem 0;
border-top: 1px solid var(--background-shade);
.page-section {
padding: 2rem 1rem 0 1rem;
h1.section-title {
position: relative;
display: flex;
gap: 10px;
margin-bottom: 1.5rem;
border-top: solid 1px var(--background-shade);
padding-top: 20px;
align-items: start;
@media(min-width: 992px) {
&.center-lg-50 {
padding-left: 25%;
padding-right: 25%;
width: auto;
}
}
&::before {
background: var(--primary);
content: '';
position: absolute;
height: 5px;
width: 80px;
top: -1px;
}
.first-right {
margin-left: auto;
}
}
}
}
footer {
position: absolute;
background: var(--primary);
overflow: hidden;
font-size: 14px;
color: var(--footer-text-color);
padding: 25px 0;
margin: 0;
bottom: 0;
width: 100%;
.divider {
margin-left: .7rem;
}
a {
color: var(--footer-text-color);
margin-left: .7rem;
&:hover {
color: var(--footer-text-color-hover);
}
}
.social a {
font-size: 1.2rem;
}
}
.dropdown-menu {
border-radius: 0;
background-color: var(--background-color);
border-color: var(--background-shade);
.dropdown-item {
padding: 0.5rem 1.5rem;
font-size: .8rem;
color: var(--nav-link-color);
&:focus {
background-color: var(--primary-hover);
color: var(--primary-contrast-hover);
}
&:hover, &:active, &.active {
background-color: var(--primary);
color: var(--primary-contrast);
}
}
}
hr {
color: var(--primary-contrast);
}
img {
max-width: 100%;
}
.grid-item {
hyphens: auto;
position: relative;
cursor: pointer;
overflow: hidden;
.pulsing-background {
background-color: var(--background-color);
animation-name: color;
animation-duration: 2s;
animation-iteration-count: infinite;
@keyframes color {
0% {
background-color: var(--background-color);
}
50% {
background-color: var(--background-shade);
}
100% {
background-color: var(--background-color);
}
}
img {
color: transparent;
}
}
.ribbon-wrapper {
width: 120px;
height: 110px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
.ribbon {
color: var(--primary-contrast);
text-align: center;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: relative;
padding: 5px 0;
left: -5px;
top: 28px;
width: 170px;
background-color: var(--primary);
}
}
&.contain-logo .image img {
object-fit: contain;
}
.image {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
text-align: center;
img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 300ms ease-in-out 0s;
-moz-transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
-o-transition: all 300ms ease-in-out 0s;
}
}
.overlay {
position: absolute;
opacity: 0;
background-color: rgba(var(--primary-rgb), .7);
transition: all 300ms ease-in-out 0s;
-moz-transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
-o-transition: all 300ms ease-in-out 0s;
width: 100%;
height: 100%;
h5, p {
color: var(--primary-contrast);
-webkit-transform: translateY(-50px);
}
h5 {
transform: translateY(-50px);
transition: all 300ms ease-in-out 0s;
-moz-transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
-o-transition: all 300ms ease-in-out 0s;
margin-bottom: 0;
padding-bottom: 0.5rem;
}
p {
transform: translateY(-50px);
transition: all 300ms ease-in-out 0s;
-moz-transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
-o-transition: all 300ms ease-in-out 0s;
margin-bottom: 0;
}
}
.name {
position: absolute;
bottom: 0;
width: 100%;
padding: 2rem 1.5rem 1rem 1.5rem;
transition: all 300ms ease-in-out 0s;
-moz-transition: all 300ms ease-in-out 0s;
-webkit-transition: all 300ms ease-in-out 0s;
-o-transition: all 300ms ease-in-out 0s;
color: var(--primary-contrast);
font-size: 15px;
background: rgba(0, 0, 0, 0);
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.6)));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
}
&:hover {
.overlay {
opacity: 1;
h5, p {
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
.name {
opacity: 0;
-moz-transform: translateY(50px);
-webkit-transform: translateY(50px);
transform: translateY(50px);
}
.image {
img {
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
}
}
&:after {
content: "";
display: block;
padding-bottom: 100%;
}
&.ratio2-3:after {
padding-bottom: 75%;
}
&.ratio1-4:after {
padding-bottom: 25%;
}
}
@media(max-width: 991px) {
.grid-item {
.ribbon-wrapper {
display: none;
}
.name {
font-size: 13px;
padding: .8rem;
}
.overlay {
h5 {
margin-bottom: 0;
font-size: 14px;
}
p {
font-size: 11px;
line-height: normal;
}
}
}
}
@media(max-width: 767px) {
.grid-item {
.ribbon-wrapper {
display: none;
}
.name {
font-size: 11px;
padding: .5rem;
}
.overlay {
h5 {
font-size: 11px;
}
p {
font-size: 9px;
line-height: normal;
}
}
}
}
.btn {
font-family: $header-font;
text-transform: uppercase;
}