gil/site
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Tweaking grid ratios

Browse source
This commit is contained in:
gil 2024-06-18 14:57:09 -05:00
parent 4281620c08
commit 29ea00acb2
3 changed files with 35 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
src/css/landing.css
View file

@ -81,45 +81,38 @@ VARIABLES
*/
* {
line-height: 1.7;
border: dotted red 1px;
}
html {
font-size: 12pt;
font-family: sans-serif;
font-family: "Linux Libertine", "Times New Roman", Times, serif;
}
body {
display: grid;
margin: auto;
padding: 2em 0;
padding: 2em;
}
@media screen and (min-width: 992px) {
@media screen and (min-width: 768px) {
body {
grid-template-columns: 1fr 2fr 1fr;
grid-template-columns: 2fr 3fr 2fr;
gap: 1em;
height: 100%;
padding: 2em 0;
}
}
a {
color: #9ec611;
text-decoration: underline #9ec611 2px;
}
a:hover {
color: #beec1f;
}
nav {
grid-row: 1;
grid-column: 1;
justify-self: right;
align-self: end;
}
nav a {
font-size: 1.5em;
font-weight: bold;
image-rendering: pixelated;
}
@media screen and (min-width: 768px) {
nav {
grid-column: 2;
}
}
nav a:hover {
font-style: italic;
@ -128,13 +121,8 @@ nav a::after {
content: " >>";
font-style: normal;
}
@media screen and (min-width: 992px) {
nav {
grid-column: 2;
}
}
@media screen and (min-width: 992px) {
@media screen and (min-width: 768px) {
main {
grid-row: 2;
grid-column: 2;
@ -142,11 +130,11 @@ nav a::after {
}
}
main article {
font-size: 1rem;
word-wrap: break-word;
line-height: 1.5;
padding: 0 1.5em;
padding: 0;
font-size: 1rem;
}
main article p,
main article blockquote,
@ -227,17 +215,15 @@ main article h1 {
aside {
grid-row: 1;
grid-column: 1;
justify-self: left;
max-width: 192px;
}
@media screen and (min-width: 768px) {
aside {
grid-column: 2;
}
}
aside img {
image-rendering: pixelated;
}
@media screen and (min-width: 992px) {
aside {
grid-column: 2;
justify-self: start;
}
}
/*# sourceMappingURL=landing.css.map */

2
src/css/landing.css.map
View file

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../scss/_colors.scss","../scss/_fonts.scss","../scss/landing.scss","../scss/_mixins.scss"],"names":[],"mappings":"AACA;;AAAA;AAAA;;AAAA;AAOA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACRA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAaA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;;ACnDF;;AAAA;AAAA;;AAAA;AAWA;EACE;EACA;;;AAGF;EAEI;EACA;;;AAIJ;EACE;EACA;EACA;;ACfA;EDYF;IAMI;IACA;IACA;;;;AAIJ;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;ACjDJ;EDgCF;IAsBI;;;;ACtDF;ED0DF;IAEI;IACA;IACA;;;AAGF;EACE;EC5DH;EACA;EACA;ED8DG;;AC5DF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;;AAGF;AAAA;EAEE;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;AAGF;AAAA;AAAA;EAGE;;AAGF;EACE;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;;ADrBF;EACE;;;AAKN;EACE;EACA;EACA;EACA;;AAEA;EACE;;ACrFF;ED8EF;IAWI;IACA","file":"landing.css"}
{"version":3,"sourceRoot":"","sources":["../scss/_colors.scss","../scss/_fonts.scss","../scss/landing.scss","../scss/_mixins.scss"],"names":[],"mappings":"AACA;;AAAA;AAAA;;AAAA;AAOA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACRA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAaA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAKF;EACE;EACA;EACA;EACA;;ACnDF;;AAAA;AAAA;;AAAA;AAQA;EACE;;;AAGF;EAEI;EACA;;;AAIJ;EACE;EACA;;ACVA;EDQF;IAII;IACA,KAlBK;IAmBL;IACA;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;ACzBA;EDmBF;IAQI;;;AAIA;EACE;;AAGF;EACE;EACA;;;ACrCJ;ED0CF;IAEI;IACA;IACA;;;AAGF;EC3CD;EACA;EACA;ED2CG;EACA;;AC1CF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOE;;AAGF;AAAA;EAEE;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;EAME;;AAGF;AAAA;AAAA;EAGE;;AAGF;EACE;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;;ADvCF;EACE;;;AAKN;EACE;EACA;EACA;;AC/DA;ED4DF;IAKI;;;AAGF;EACE","file":"landing.css"}

53
src/scss/landing.scss
View file

@ -9,40 +9,27 @@ VARIABLES
===============================================================================
*/
$gutter: 10px;
$max-width: 750px;
$max-height: 500px;
$avatar-width: 256px;
$gutter: 1em;
* {
line-height: 1.7;
border: dotted red 1px;
}
html {
font: {
size: 12pt;
family: sans-serif;
family: "Linux Libertine", "Times New Roman", Times, serif;
}
}
body {
display: grid;
margin: auto;
padding: 2em 0;
@include breakpoint("lg") {
grid-template-columns: 1fr 2fr 1fr;
gap: 1em;
padding: $gutter * 2;
@include breakpoint("md") {
grid-template-columns: 2fr 3fr 2fr;
gap: $gutter;
height: 100%;
}
}
a {
color: #{colors.$link};
text-decoration: underline #{colors.$link} 2px;
&:hover {
color: #{colors.$link-hover};
padding: ($gutter * 2) 0;
}
}
@ -51,12 +38,13 @@ nav {
grid-column: 1;
justify-self: right;
align-self: end;
a {
font-size: 1.5em;
font-weight: bold;
image-rendering: pixelated;
@include breakpoint("md") {
grid-column: 2;
}
a {
&:hover {
font-style: italic;
}
@ -66,25 +54,19 @@ nav {
font-style: normal;
}
}
@include breakpoint("lg") {
grid-column: 2;
}
}
main {
@include breakpoint("lg") {
@include breakpoint("md") {
grid-row: 2;
grid-column: 2;
justify-self: center;
}
article {
font-size: 1rem;
@include markup;
padding: 0;
font-size: 1rem;
h1 {
margin-top: 0;
@ -95,15 +77,12 @@ main {
aside {
grid-row: 1;
grid-column: 1;
justify-self: left;
max-width: 192px;
@include breakpoint("md") {
grid-column: 2;
}
img {
image-rendering: pixelated;
}
@include breakpoint("lg") {
grid-column: 2;
justify-self: start;
}
}