hugo-theme-minima/assets/sass/atom.scss

186 lines
2.7 KiB
SCSS
Raw Normal View History

2021-08-29 17:55:45 +02:00
* {
line-height: 1;
-webkit-tap-highlight-color: rgba(0,0,0,0);
2021-09-09 09:56:22 +02:00
outline: none;
2021-08-29 17:55:45 +02:00
}
2021-11-06 08:28:56 +01:00
header nav a {
line-height: 1.8;
}
2021-08-29 17:55:45 +02:00
$unit: 0.25rem;
$scales: 0, 1, 2, 3, 4, 5, 6, 7, 8, 1.5;
$screens: (
sm\:: 640px,
);
@mixin scale_with_prefix($prefix, $scale) {
$size: $scale * $unit;
.#{$prefix}mt-#{$scale} {
margin-top: $size;
}
.#{$prefix}mb-#{$scale} {
margin-bottom: $size;
}
.#{$prefix}ml-#{$scale} {
margin-left: $size;
}
.#{$prefix}mr-#{$scale} {
margin-right: $size;
}
.#{$prefix}my-#{$scale} {
margin-top: $size;
margin-bottom: $size;
}
.#{$prefix}mx-#{$scale} {
margin-left: $size;
margin-right: $size;
}
.#{$prefix}pb-#{$scale} {
padding-bottom: $size;
}
.#{$prefix}py-#{$scale} {
padding-top: $size;
padding-bottom: $size;
}
2021-08-29 17:55:45 +02:00
}
@each $scale in $scales {
@include scale_with_prefix("", $scale);
@each $screen, $size in $screens {
@media (max-width: $size) {
@include scale_with_prefix($screen, $scale);
}
}
}
@mixin style_with_prefix($prefix) {
.#{$prefix}block {
display: block;
}
.#{$prefix}flex {
display: flex;
}
.#{$prefix}flex-row {
flex-direction: row;
}
.#{$prefix}flex-col {
flex-direction: column;
}
.#{$prefix}flex-col-reverse {
flex-direction: column-reverse;
}
.#{$prefix}justify-between {
justify-content: space-between;
}
.#{$prefix}flex-nowrap {
flex-wrap: nowrap;
}
.#{$prefix}items-center {
align-items: center;
}
.#{$prefix}self-start {
align-self: flex-start;
}
.#{$prefix}hidden {
display: none;
}
.#{$prefix}text-xs {
font-size: .8rem;
}
.#{$prefix}text-sm {
font-size: .9rem;
}
2021-09-09 09:56:22 +02:00
.#{$prefix}text-md {
font-size: 1.25rem;
}
.#{$prefix}text-xl {
font-size: 1.5rem;
}
.#{$prefix}text-2xl {
font-size: 1.75rem;
}
.#{$prefix}text-3xl {
font-size: 2rem;
}
2021-08-29 17:55:45 +02:00
.#{$prefix}text-4xl {
font-size: 2.25rem;
}
}
@each $screen, $size in $screens {
@media (max-width: $size) {
@include style_with_prefix($screen);
}
}
@include style_with_prefix("");
2021-08-29 17:55:45 +02:00
// border width
.bw-0 {
border-width: 0;
}
// width
.min-w-32 {
min-width: 0.25 * 32rem;
}
.whitespace-nowrap {
white-space: nowrap;
}
.overflow-x-auto {
overflow-x: auto;
}
.overflow-y-hidden {
overflow-y: hidden;
}
.cursor-pointer {
cursor: pointer;
}
2021-09-09 09:56:22 +02:00
.not-first\:ml-3 {
&:not(:first-child) {
margin-left: 0.75rem;
}
}
/* font weight */
.font-thin {
font-weight: 100;
}
.font-extralight {
font-weight: 200;
}
.font-light {
font-weight: 300;
}
.font-normal {
font-weight: 400;
}
.font-medium {
font-weight: 500;
}
.font-semibold {
font-weight: 600;
}
.font-bold {
font-weight: 700;
}
.text-left {
text-align: left;
2021-09-09 09:56:22 +02:00
}