dan/danielrayjones
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

⬆️ Upgrade CSS and classes to support Bootstrap 5

Browse source
This commit is contained in:
Dan Jones 2021-09-16 13:48:50 -05:00
commit 28e4d64885
4 changed files with 18 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

6
_assets/css/responsive_sizes.scss
View file

@ -1,7 +1,11 @@
@use "sass:map";
@each $prop, $abbrev in (width: w, height: h) { @each $prop, $abbrev in (width: w, height: h) {
@each $bpname,$bpsize in $grid-breakpoints { @each $bpname,$bpsize in $grid-breakpoints {
@media (min-width: $bpsize) { @media (min-width: $bpsize) {
@each $size, $length in $sizes { $props: map-get($utilities, $prop);
$propValues: map-get($props, 'values');
@each $size, $length in $propValues {
.#{$abbrev}-#{$bpname}-#{$size} { .#{$abbrev}-#{$bpname}-#{$size} {
#{$prop}: $length; #{$prop}: $length;
} }

4
_assets/css/style.scss
View file

@ -1,3 +1,5 @@
$navbar-padding-x: 1rem;
@import 'bootstrap'; @import 'bootstrap';
@import 'font-awesome-sprockets'; @import 'font-awesome-sprockets';
@import 'font-awesome'; @import 'font-awesome';
@ -17,7 +19,7 @@
.bd-sideboard { .bd-sideboard {
aside { aside {
padding: $table-cell-padding-sm; padding: $table-cell-padding-x-sm;
} }
header { header {

2
_layouts/default.html
View file

@ -59,7 +59,7 @@
{% endif %} {% endif %}
</div> </div>
<main class="bg-white rounded-large order-1 order-md-2 col-12 col-md-9 col-xl-10 py-md-3 pl-md-5 bd-content" role="main"> <main class="bg-white rounded-large order-1 order-md-2 col-12 col-md-9 col-xl-10 py-md-3 ps-md-5 bd-content" role="main">
<section class="entry-content container-fluid"> <section class="entry-content container-fluid">
{% if page.title %} {% if page.title %}
<header class="entry-header"> <header class="entry-header">

2
index.html
View file

@ -8,7 +8,7 @@ title: Introduction
<section id="webdeveloper"> <section id="webdeveloper">
<h2>Dan Jones, the Web Developer</h2> <h2>Dan Jones, the Web Developer</h2>
<figure class="figure float-md-right mw-xs-100 mw-md-50"> <figure class="figure float-md-end mw-xs-100 mw-md-50">
<img src="https://res.cloudinary.com/danjones000/image/upload/v1518462377/danielrayjones/C64c_system.jpg" <img src="https://res.cloudinary.com/danjones000/image/upload/v1518462377/danielrayjones/C64c_system.jpg"
class="figure-im img-fluid" alt="Commodore 64" /> class="figure-im img-fluid" alt="Commodore 64" />
<figcaption class="figure-caption"> <figcaption class="figure-caption">