mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-04-29 07:00:29 -04:00
Jake Jarvis
363b4edf1c
also migrated SASS to latest syntax (via dart-sass) and vastly simplified light/dark theme logic
110 lines
1.9 KiB
SCSS
110 lines
1.9 KiB
SCSS
@use "../abstracts/functions";
|
|
@use "../abstracts/themes";
|
|
|
|
// Home Styles
|
|
div.layout-home {
|
|
font-size: 1em;
|
|
padding-top: 1.2em;
|
|
padding-bottom: 0.6em;
|
|
|
|
h1 {
|
|
margin: 0 0 0.3em 0;
|
|
font-size: 1.8em;
|
|
font-weight: 500;
|
|
letter-spacing: -0.014em;
|
|
margin-left: -0.03em; // TODO: why is this indented slightly?
|
|
|
|
img.emoji {
|
|
margin-left: 0.1em; // a little extra social distancing for the hand
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
margin: 0.5em 0;
|
|
font-size: 1.35em;
|
|
font-weight: 400;
|
|
letter-spacing: -0.022em;
|
|
margin-left: -0.03em; // TODO: why is this indented slightly?
|
|
line-height: 1.4;
|
|
}
|
|
|
|
p {
|
|
margin: 0.85em 0;
|
|
letter-spacing: -0.009em;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
sup {
|
|
letter-spacing: normal;
|
|
position: relative;
|
|
|
|
&#key {
|
|
font-size: 0.65em;
|
|
word-spacing: -0.3em;
|
|
margin-right: 0.1em;
|
|
|
|
img.emoji {
|
|
vertical-align: -0.2em; // magic number to align with text :\
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// easter egg emoji cursor
|
|
a#birthday {
|
|
&:hover {
|
|
cursor: url(themes.$icon-wand) 0 0, auto;
|
|
}
|
|
}
|
|
|
|
// non-link colors
|
|
span {
|
|
&#serverless {
|
|
color: themes.$color-serverless;
|
|
}
|
|
|
|
&#shh {
|
|
@include themes.themed(color, "medium-light");
|
|
}
|
|
|
|
&.wave {
|
|
margin-left: 2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Loop through $colors-home (see abstracts/_variables)
|
|
@each $id, $colors in themes.$colors-home {
|
|
@each $theme, $color in $colors {
|
|
@at-root body.#{$theme} div.layout-home a##{$id} {
|
|
color: $color;
|
|
background-image: functions.underline-hack($color);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Responsive
|
|
@mixin responsive() {
|
|
div.layout-home {
|
|
font-size: 0.975em;
|
|
padding-top: 1em;
|
|
padding-bottom: 0.2em;
|
|
|
|
h1 {
|
|
font-size: 1.5em;
|
|
letter-spacing: -0.014em;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.185em;
|
|
letter-spacing: -0.017em;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
p {
|
|
letter-spacing: -0.012em;
|
|
}
|
|
}
|
|
}
|