zeus.ugent.be/content/assets/stylesheets/includes/general.scss

227 lines
3.1 KiB
SCSS
Raw Normal View History

// Small helper in bulma style
2016-09-02 00:05:38 +02:00
.has-text-justified {
text-align: justify;
}
// Override box styling without round corners
.box {
margin-bottom:10px;
2017-12-16 18:12:00 +01:00
transition: all .15s ease;
box-shadow: 0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
}
a.box:hover {
color: $blue;
transform: translateY(-1px);
box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
}
// Add some hero attributes to make backgrounds prettier
.hero {
background-position: center;
background-size: cover;
}
// link borders are unnecessary
2016-10-12 10:57:23 +02:00
.content {
a {
&:not(.button) {
border-bottom: none;
}
&:visited:hover {
color: $link-hover;
}
}
}
footer .content a {
&:not(.button) {
color: $text-light;
2016-11-01 13:28:23 +01:00
&:visited {
color: $text-light;
}
2016-11-03 23:07:41 +01:00
&:hover {
color: $link-hover;
}
2016-11-03 23:07:41 +01:00
}
2016-11-01 13:28:23 +01:00
}
// Proper padding of these sections
2016-10-04 17:42:56 +02:00
header.section {
padding-bottom: 10px;
}
main.section {
padding-top: 20px;
}
2016-09-03 16:51:25 +02:00
footer.footer {
padding-bottom: 40px;
2016-08-27 19:07:03 +02:00
}
2016-10-03 19:21:29 +02:00
// Cursor highlight color
2016-10-03 19:21:29 +02:00
::selection {
2016-10-03 20:21:17 +02:00
color: white;
background: rgba(255, 127, 0, 0.99);
2016-10-03 19:21:29 +02:00
}
2016-10-04 22:04:34 +02:00
2017-05-22 03:33:37 +02:00
.has-content-centered {
2016-10-04 22:04:34 +02:00
display: flex;
justify-content: center;
align-items: center;
}
2017-05-22 03:33:37 +02:00
.imgcenter {
margin: auto;
display: block;
}
2016-10-04 22:04:34 +02:00
.hydra-tile {
background-color: #1E64C8;
}
.lana-tile {
background-color: $tile-orange;
}
2016-10-04 23:06:41 +02:00
.project-tile {
background-color: $turquoise;
2016-10-04 17:42:56 +02:00
}
2016-10-31 17:51:52 +01:00
// For better centering on mobile
2017-05-03 15:42:27 +02:00
@include mobile {
2016-10-31 17:51:52 +01:00
#tipue_search_input {
margin: 5px;
}
.nav-menu {
flex-direction: column;
max-height: 0;
overflow: hidden;
transition: all 0.30s ease-in-out;
2017-05-03 15:42:27 +02:00
position: absolute;
top: 100%;
background-color: white;
width: 100%;
2016-10-31 17:51:52 +01:00
2016-11-02 14:13:22 +01:00
&.is-active {
2017-03-20 15:15:14 +01:00
max-height: 275px;
2016-10-31 17:51:52 +01:00
}
}
//for better spacing on mobile
header.section {
padding: 0px 0px;
2016-11-01 17:11:51 +01:00
padding-bottom: 15px;
}
main.section {
padding-top: 0px;
}
2016-11-01 13:28:23 +01:00
.is-narrow {
flex: none;
}
2016-10-31 17:51:52 +01:00
}
2016-10-29 22:04:20 +02:00
.fa {
vertical-align: baseline;
}
2016-11-01 17:11:51 +01:00
.subnav {
margin-top: -20px;
}
2016-12-12 14:34:43 +01:00
.heart {
color: $red;
}
2017-04-23 12:46:47 +02:00
.is-medium-responsive {
// Larger text when on tablet
@include tablet {
font-size: $size-medium;
}
}
.title-responsive {
@include mobile {
font-size: $size-1 - 0.5rem;
}
}
2017-04-23 19:14:17 +02:00
// Responsive font sizes
2017-04-23 12:46:47 +02:00
@for $i from 1 through 6 {
.is-#{$i}-responsive {
font-size: nth($sizes, $i);
@include mobile {
font-size: nth($sizes, $i) * 0.75;
}
}
}
2017-04-23 19:14:17 +02:00
2017-05-20 16:30:12 +02:00
%align {
background-color: $body-background;
2017-06-14 10:10:37 +02:00
margin: 15px;
2017-05-20 16:30:12 +02:00
}
2017-04-23 19:14:17 +02:00
.alignright {
2017-05-20 16:30:12 +02:00
@extend %align;
2017-04-23 19:14:17 +02:00
float: right;
2017-05-20 16:30:12 +02:00
}
.alignleft {
@extend %align;
float: left;
2017-04-23 19:14:17 +02:00
}
2017-04-24 21:11:18 +02:00
2017-06-14 12:27:28 +02:00
.content {
2017-10-19 16:41:56 +02:00
blockquote {
border-left-color: $secondary;
}
2017-06-14 12:27:28 +02:00
// Bold definition types in <dl></dl>
dt {
font-weight: bold;
2017-06-14 10:10:37 +02:00
}
2017-06-14 12:27:28 +02:00
figure {
position: relative;
2017-10-19 16:41:56 +02:00
2017-06-14 13:44:39 +02:00
img {
display: block;
}
2017-10-19 16:41:56 +02:00
2017-06-14 10:10:37 +02:00
figcaption {
2017-06-14 12:27:28 +02:00
position: absolute;
background-color: rgba(0,0,0,.7);
color: white;
bottom: 0;
width: 100%;
2017-06-14 13:44:39 +02:00
padding: 10px 20px;
2017-06-14 12:27:28 +02:00
transition: all .1s;
2017-08-01 19:18:25 +02:00
opacity: 0;
2017-06-14 12:27:28 +02:00
}
2017-10-19 16:41:56 +02:00
2017-06-14 12:27:28 +02:00
&:hover {
figcaption {
2017-08-01 19:18:25 +02:00
opacity: 1;
2017-06-14 12:27:28 +02:00
}
2017-06-14 10:10:37 +02:00
}
}
2017-06-14 12:27:28 +02:00
sup {
2017-06-14 12:32:57 +02:00
font-size: $size-small;
2017-06-14 12:27:28 +02:00
}
2017-06-14 10:10:37 +02:00
}