From fdc83c3b4b7278adc3257c02062a442bf00025d9 Mon Sep 17 00:00:00 2001 From: gil Date: Sat, 25 May 2024 21:01:34 -0500 Subject: [PATCH] Add media breakpoints --- src/css/_mixins.scss | 19 ++++++++++++++++ src/css/global.css | 49 +++++++++++++++++++++++++++++++++++------- src/css/global.css.map | 2 +- src/css/global.scss | 48 ++++++++++++++++++++++++++++++++--------- src/index.md | 6 +++--- 5 files changed, 102 insertions(+), 22 deletions(-) create mode 100644 src/css/_mixins.scss diff --git a/src/css/_mixins.scss b/src/css/_mixins.scss new file mode 100644 index 0000000..ade32ed --- /dev/null +++ b/src/css/_mixins.scss @@ -0,0 +1,19 @@ +$breakpoints: ( + "sm": 600px, + "md": 768px, + "lg": 992px, + "xl": 1200px, +); + +@mixin breakpoint($mq-breakpoint, $mq-breakpoints: $breakpoints) { + // If $mq-breakpoint is a key that exists in $mq-breakpoints, get and use the value + @if map-has-key($mq-breakpoints, $mq-breakpoint) { + $mq-breakpoint: map-get($mq-breakpoints, $mq-breakpoint); + } + + @media screen and (min-width: #{$mq-breakpoint}) { + @content; + } +} + + \ No newline at end of file diff --git a/src/css/global.css b/src/css/global.css index cbd39b8..e8e0303 100644 --- a/src/css/global.css +++ b/src/css/global.css @@ -56,9 +56,9 @@ h2 { font-size: 2.5rem; } -main, article { +main, +article { padding: 1em; - margin: 0 2em; color: #802659; border: 16px solid; border-image: url(../img/nine-patch.png) 32 round; @@ -66,8 +66,15 @@ main, article { background-color: rgb(255, 252, 240); box-shadow: 0px 0px 20px rgb(16, 15, 15); } +@media screen and (min-width: 600px) { + main, + article { + margin: 0 2em; + } +} -main :where(ol, ul), article :where(ol, ul) { +main :where(ol, ul), +article :where(ol, ul) { all: revert; margin: 0; } @@ -81,11 +88,14 @@ a { border-radius: 10px; } -a:hover, a:active { +a:hover, +a:active { background-color: rgba(135, 154, 57, 0.25); } -a.logo, a.logo:hover, a.logo:active { +a.logo, +a.logo:hover, +a.logo:active { font-size: 3em; color: rgb(160, 47, 111); text-decoration: none; @@ -100,17 +110,40 @@ p { margin-bottom: 1em; } -ul, ol { +ul, +ol { margin-bottom: 1em; } footer.footer_main { - margin: 2em 0 1em 0; + margin: 2em 1em 1em 1em; text-align: center; } -main > :last-child, header > :last-child { +main > :last-child, +header > :last-child { margin-bottom: 0px; } +.float-right { + margin: 0; +} +@media screen and (min-width: 600px) { + .float-right { + float: right; + margin-left: 0.5em; + } +} + +.float-right > img { + display: block; + width: 192px; + height: auto; +} +@media screen and (min-width: 600px) { + .float-right > img { + margin: auto; + } +} + /*# sourceMappingURL=global.css.map */ diff --git a/src/css/global.css.map b/src/css/global.css.map index 61e59b8..e878c9e 100644 --- a/src/css/global.css.map +++ b/src/css/global.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["_colors.scss","_fonts.scss","global.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAGA;EACE;EACA;;ACPF;AAAA;AAAA;AAAA;AAWA;EACE,kBFkBS;EEjBT,OFQM;EEPN;EACA;;;AAGF;EACE,YAVa;;;AAaf;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA,OA5BG;EA6BH;EACA;EACA;EACA,kBFhBM;EEiBN;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE,OFRU;EESV;;;AAGF;EACE,kBAhDS;;;AAmDX;EACE;EACA,OFVY;EEWZ;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE","file":"global.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["_colors.scss","_fonts.scss","global.scss","_mixins.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAGA;EACE;EACA;;ACLF;AAAA;AAAA;AAAA;AAWA;EACE,kBFgBS;EEfT,OFMM;EELN;EACA;;;AAGF;EACE,YAVa;;;AAaf;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA,OA5BG;EA6BH;EACA;EACA;EACA,kBFlBM;EEmBN;;AC9BA;EDsBF;AAAA;IAUI;;;;AAIJ;AAAA;EAEE;EACA;;;AAGF;EACE;;;AAGF;EACE,OFdU;EEeV;;;AAGF;AAAA;EAEE,kBArDS;;;AAwDX;AAAA;AAAA;EAGE;EACA,OFnBY;EEoBZ;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;ACzFA;EDwFF;IAGI;IACA;;;;AAIJ;EACE;EACA;EACA;;ACnGA;EDgGF;IAKI","file":"global.css"} \ No newline at end of file diff --git a/src/css/global.scss b/src/css/global.scss index f1090a6..da5cc8e 100644 --- a/src/css/global.scss +++ b/src/css/global.scss @@ -1,3 +1,5 @@ +@use "mixins" as *; + @use "colors"; @use "fonts"; @@ -31,18 +33,22 @@ h2 { font-size: 2.5rem; } -main, article { +main, +article { padding: 1em; - margin: 0 2em; color: $fg; border: 16px solid; border-image: url(../img/nine-patch.png) 32 round; -webkit-border-image: url(../img/nine-patch.png) 32 round; background-color: colors.$paper; box-shadow: 0px 0px 20px colors.$black; + @include breakpoint("sm") { + margin: 0 2em; + } } -main :where(ol, ul), article :where(ol, ul) { +main :where(ol, ul), +article :where(ol, ul) { all: revert; margin: 0; } @@ -56,14 +62,17 @@ a { border-radius: 10px; } -a:hover, a:active { +a:hover, +a:active { background-color: $bg-hover; } -a.logo, a.logo:hover, a.logo:active { +a.logo, +a.logo:hover, +a.logo:active { font-size: 3em; color: $fg-logo; - text-decoration: none; + text-decoration: none; } .navbar :where(li) { @@ -75,15 +84,34 @@ p { margin-bottom: 1em; } -ul, ol { +ul, +ol { margin-bottom: 1em; } footer.footer_main { - margin: 2em 0 1em 0; + margin: 2em 1em 1em 1em; text-align: center; } -main > :last-child, header > :last-child{ +main > :last-child, +header > :last-child { margin-bottom: 0px; -} \ No newline at end of file +} + +.float-right { + margin: 0; + @include breakpoint("sm") { + float: right; + margin-left: 0.5em; + } +} + +.float-right > img { + display: block; + width: 192px; + height: auto; + @include breakpoint("sm") { + margin: auto; + } +} diff --git a/src/index.md b/src/index.md index f9c7546..1c5319b 100644 --- a/src/index.md +++ b/src/index.md @@ -3,12 +3,12 @@ layout: page.njk date: Last Modified --- -# About Me - -

+

+# About Me + Hello! My name is Gil and my pronouns are he/they. I'm a former electrical engineering student, now working on the side as a hobbyist software & game developer. I also write – primarily poems and fiction, with some essays here and there. I used to be a community organizer and student activist, but now I mostly work with the Ogra.ph Collective. You can find links to my social media profiles below. ## Ogra.ph Collective