mirror of
https://github.com/fooflington/selfdefined.git
synced 2025-06-10 21:01:41 +00:00
⚒️ Restructured Sass organisation (#83)
* 🌈 Organise colors with vars only * ➕ New file structure * File restructuring * ⚒️ Fix build issue * Rearranged files
This commit is contained in:
44
assets/css/structures/_header.scss
Normal file
44
assets/css/structures/_header.scss
Normal file
@ -0,0 +1,44 @@
|
||||
.title__thicc {
|
||||
// a sensible base font size
|
||||
font-size: 3rem;
|
||||
line-height: 0.75;
|
||||
padding: 0;
|
||||
margin: 0.5rem 0rem;
|
||||
// transform: rotateZ(90deg);
|
||||
// margin: 13rem -7rem;
|
||||
}
|
||||
|
||||
@media (min-width: 51rem) and (min-height: #{pxToRem(400)}) {
|
||||
// a dramatic font size
|
||||
.title__thicc {
|
||||
font-size: 12vh;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 51rem) and (min-height: #{pxToRem(850)}) {
|
||||
// cap the max-height of the title
|
||||
// at the same size that 12vh computes to
|
||||
// when the viewport is 850px high
|
||||
.title__thicc {
|
||||
font-size: 6.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: #{pxToRem(800)}) {
|
||||
.title__thicc {
|
||||
grid-column: 1 / 3;
|
||||
}
|
||||
|
||||
.title__thicc + p {
|
||||
grid-column: 1 / 2;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-headline {
|
||||
font-weight: bold;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.summary {
|
||||
grid-column: span 2;
|
||||
}
|
Reference in New Issue
Block a user