datat.fi/_sass/basically-basic/_layout.scss

197 lines
3.0 KiB
SCSS

/* ==========================================================================
Layout
========================================================================== */
.canvas {
position: relative;
width: 100%;
overflow: hidden;
}
.wrapper {
position: relative;
width: 100%;
height: 100%;
min-height: 100vh;
transform: translateX(0);
transition: $global-transition;
background-color: $background-color;
z-index: 100;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.intro,
main {
> .inner {
padding: 0 0.5rem;
@include breakpoint($small) {
padding-right: 1rem;
padding-left: 1rem;
}
@include breakpoint($medium) {
padding-right: 2rem;
padding-left: 2rem;
}
@include breakpoint($large) {
padding-right: 3rem;
padding-left: 3rem;
}
@include breakpoint($xlarge) {
padding-right: 4rem;
padding-left: 4rem;
}
}
}
main {
section {
@include container;
}
}
.inner {
max-width: $large;
}
/*
Layout specific adjustments
========================================================================== */
.layout--post,
.layout--page {
.entry-content {
@include breakpoint($large) {
width: span(14 of 16);
}
}
}
.layout--about {
.entry-wrap {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
@include breakpoint($medium) {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
}
.entry-content {
@include breakpoint($medium) {
-ms-flex: 1;
flex: 1;
}
}
.entry-sidebar {
order: -1;
-ms-flex-order: -1;
@include breakpoint($medium) {
order: initial;
-ms-flex-order: initial;
}
.author-picture {
margin: 0 0 2rem;
border-radius: 2 * $border-radius;
@include breakpoint($medium) {
margin: 0 0 0 2rem;
}
}
}
}
.layout--cv {
.entries {
.entry-header {
@include breakpoint($medium) {
@include span(5 of 16);
@include suffix(1 of 16);
/* remove space after last child element */
> *:last-child {
margin-bottom: 0;
}
}
}
.entry-content {
@include breakpoint($medium) {
@include span(11 of 16 last);
}
}
}
.entry {
a {
color: $accent-color;
}
address {
font-style: normal;
}
.title,
.position,
.institution,
.language {
margin-bottom: 0;
}
.date {
margin-bottom: 1rem;
color: tint($text-color, 40%);
font-family: $monospace-font-family;
font-size: 80%;
}
.courses-title,
.awarder,
.publisher,
.level {
margin: 1rem 0 0;
}
.courses,
.keywords {
@include list-unstyled;
}
}
.taxonomy {
+ .taxonomy {
margin-top: 0.5rem;
}
.title {
display: inline-block;
margin-right: 1rem;
}
.keywords {
display: inline-block;
}
}
}