zeus.ugent.be/content/assets/stylesheets/includes/general.scss
Niko Strijbol b6a01132f1
Replace "faux" small caps with real ones
Fake small caps are worse than just all caps — small caps are not just
smaller caps. They must specially designed. It is 2019: most browsers
(except Edge and Safari) have proper support for OpenType small caps.[1]

Additionally, replacing all caps in text by small caps helps readability
inside long texts. However, this was being applied to the whole page,
including menus. This will restrict small caps to 'content' sections.

More reading:
* Bringhurst, R. (1992). The elements of typographic style. Point
   Roberts, WA: Hartley & Marks.
* Butterick, M. (2013). Practical Typography. Reference section online:
   https://practicaltypography.com/small-caps.html

[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-caps#Browser_compatibility
2019-08-13 23:22:17 +02:00

243 lines
3.3 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;
}
.imgcenter {
margin: auto;
display: block;
}
.hydra-tile {
background-color: #1E64C8;
}
.lana-tile {
background-color: $tile-orange;
}
.project-tile {
background-color: $turquoise;
}
// 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;
}