zeus.ugent.be/content/assets/stylesheets/includes/general.scss
2021-02-28 10:53:17 +01:00

233 lines
3.5 KiB
SCSS

// Small helper in bulma style
.has-text-justified {
text-align: justify;
}
pre .line-numbers {
margin-right: 10px;
margin-left: -10px;
}
// Override box styling without round corners
.box {
margin-bottom:10px;
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
.content {
a {
&:not(.button) {
border-bottom: none;
}
&:visited:hover {
color: $link-hover;
}
}
}
footer .content a {
&:not(.button) {
color: $text-light;
&:visited {
color: $text-light;
}
&:hover {
color: $link-hover;
}
}
}
// Proper padding of these sections
header.section {
padding-bottom: 10px;
}
main.section {
padding-top: 20px;
}
footer.footer {
padding-bottom: 40px;
}
// Cursor highlight color
::selection {
color: white;
background: rgba(255, 127, 0, 0.99);
}
.has-content-centered {
display: flex;
justify-content: center;
align-items: center;
}
// For better centering on mobile
@include mobile {
#tipue_search_input {
margin: 5px;
}
.nav-menu {
flex-direction: column;
max-height: 0;
overflow: hidden;
transition: all 0.30s ease-in-out;
position: absolute;
top: 100%;
background-color: white;
width: 100%;
&.is-active {
max-height: 275px;
}
}
//for better spacing on mobile
header.section {
padding: 0px 0px;
padding-bottom: 15px;
}
main.section {
padding-top: 0px;
}
.is-narrow {
flex: none;
}
}
.fa {
vertical-align: baseline;
}
.subnav {
margin-top: -20px;
}
.heart {
color: $red;
}
.is-medium-responsive {
// Larger text when on tablet
@include tablet {
font-size: $size-medium;
}
}
.title-responsive {
@include mobile {
font-size: $size-1 - 0.5rem;
}
}
// Responsive font sizes
@for $i from 1 through 6 {
.is-#{$i}-responsive {
font-size: nth($sizes, $i);
@include mobile {
font-size: nth($sizes, $i) * 0.75;
}
}
}
%align {
background-color: $body-background;
margin: 15px;
}
.alignright {
@extend %align;
float: right;
}
.alignleft {
@extend %align;
float: left;
}
.content {
blockquote {
border-left-color: $secondary;
}
// Bold definition types in <dl></dl>
dt {
font-weight: bold;
}
figure {
position: relative;
img {
display: block;
}
figcaption {
position: absolute;
background-color: rgba(0,0,0,.7);
color: white;
bottom: 0;
width: 100%;
padding: 10px 20px;
transition: all .1s;
opacity: 0;
}
&:hover {
figcaption {
opacity: 1;
}
}
}
sup {
font-size: $size-small;
}
.caps {
font-variant-caps: all-small-caps;
}
}
.has-all-small-caps {
font-variant: all-small-caps;
}
.has-small-caps {
font-variant: small-caps;
}
.underline--magical {
background-image: -webkit-linear-gradient(to right, $zeus-orange, #FFFFFF); /* Chrome 10-25, Safari 5.1-6 */
background-image: linear-gradient(to right, $zeus-orange, #FFFFFF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background-repeat: no-repeat;
background-size: 100% 0.15em;
background-position: 0 99%;
}