From 106cebec65e8b6a623bec2fff29a87c2932fa4dc Mon Sep 17 00:00:00 2001 From: Freya Murphy Date: Thu, 26 Feb 2026 23:21:06 -0500 Subject: update css to not using box-sizing --- src/public/polyfills/boxsizing.htc | 461 --------------------------------- src/public/polyfills/display-table.htc | 272 ------------------- src/scss/_mixins.scss | 12 +- src/scss/_variables.scss | 1 + src/scss/blog.scss | 3 - src/scss/bucket/_style.scss | 1 - src/scss/ie/ie.scss | 17 +- src/scss/ie/ie6.scss | 41 --- src/scss/main.scss | 137 +++++----- src/web/_views/footer.php | 15 +- src/web/_views/head.php | 4 - src/web/_views/header.php | 11 +- src/web/lib/hooks.php | 14 - 13 files changed, 101 insertions(+), 888 deletions(-) delete mode 100644 src/public/polyfills/boxsizing.htc delete mode 100644 src/public/polyfills/display-table.htc delete mode 100644 src/scss/ie/ie6.scss diff --git a/src/public/polyfills/boxsizing.htc b/src/public/polyfills/boxsizing.htc deleted file mode 100644 index f5936e7..0000000 --- a/src/public/polyfills/boxsizing.htc +++ /dev/null @@ -1,461 +0,0 @@ - - - - - - - - diff --git a/src/public/polyfills/display-table.htc b/src/public/polyfills/display-table.htc deleted file mode 100644 index 395209c..0000000 --- a/src/public/polyfills/display-table.htc +++ /dev/null @@ -1,272 +0,0 @@ - - - - diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss index 25eb0c1..62ae802 100644 --- a/src/scss/_mixins.scss +++ b/src/scss/_mixins.scss @@ -1,16 +1,8 @@ -@mixin box-sizing { - * { - -moz-box-sizing: border-box; - -webkit-border-box: border-box; - box-sizing: border-box; - } -} - @mixin section { - border: $border-width solid $border-color; @include border-radius($outer-radius); + border: $border-width solid $border-color; background: $black; - margin-bottom: $outer-gap; + text-align: left; } @mixin linear-gradient($deg, $first, $values...) { diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 55627f8..9f493ff 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -23,3 +23,4 @@ $border-width: 5px; $border-color: #ccc; $page-width: 1000px; +$logo-width: 200px; diff --git a/src/scss/blog.scss b/src/scss/blog.scss index 665c5a4..dbb652f 100644 --- a/src/scss/blog.scss +++ b/src/scss/blog.scss @@ -13,14 +13,11 @@ margin-left: 0 !important; } - overflow-x: scroll; max-width: $page-width - $outer-gap * 2 - $inner-gap; } code { display: inline-block; - max-width: 100%; - overflow-x: scroll; } img { diff --git a/src/scss/bucket/_style.scss b/src/scss/bucket/_style.scss index 8d65c68..050485c 100644 --- a/src/scss/bucket/_style.scss +++ b/src/scss/bucket/_style.scss @@ -1,4 +1,3 @@ -@include box-sizing; @include font-face("Merriweather"); @include font-face("CourierNew"); diff --git a/src/scss/ie/ie.scss b/src/scss/ie/ie.scss index 0498093..6305875 100644 --- a/src/scss/ie/ie.scss +++ b/src/scss/ie/ie.scss @@ -4,7 +4,7 @@ #header { .ie-nav { - margin-left: 90px; + margin-left: 70px; } } @@ -23,12 +23,13 @@ h2.heading { background: $blue; } - } - #post, - #writeup { - .posted { - margin-top: $inner-gap; + table { + width: 99%; + } + + pre code { + width: 95%; } } @@ -45,8 +46,4 @@ } } } - - table { - behavior: url(boxsizing.htc); - } } diff --git a/src/scss/ie/ie6.scss b/src/scss/ie/ie6.scss deleted file mode 100644 index a443956..0000000 --- a/src/scss/ie/ie6.scss +++ /dev/null @@ -1,41 +0,0 @@ -/* IE 6 and 7 Only */ - -@import "../variables"; - -/** - * IE5 and below seem to look fine without boxsizing - * additions, its only the jump to IE5 where things seem - * to start breaking and thus this is needed - */ - -* { - behavior: url(boxsizing.htc); -} - -/** - * Fix homepage margin near footer, only caused - * by the boxsizing i think - */ -body { - #main { - .col { - - &div.left { - margin-bottom: $inner-gap; - } - - &div.right { - margin-top: $inner-gap; - } - - } - } - - div#contact { - margin-bottom: 0; - } - - div#footer { - margin-top: $inner-gap; - } -} diff --git a/src/scss/main.scss b/src/scss/main.scss index 925cfef..ae3ac11 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -1,7 +1,6 @@ @import "./variables"; @import "./mixins"; -@include box-sizing; @include font-face("FontStuck-Extended"); @include font-face("CourierNew"); @@ -115,36 +114,25 @@ html { body { @include background-image( - url("WEB_ROOT/public/img/background.png?ref=4"), - url("WEB_ROOT/public/img/background.webp?ref=7") type("image/webp"), - url("WEB_ROOT/public/img/background.png?ref=4") type("image/png") + url("WEB_ROOT/public/img/background.png?ref=4"), + url("WEB_ROOT/public/img/background.webp?ref=7") type("image/webp"), + url("WEB_ROOT/public/img/background.png?ref=4") type("image/png") ); background-repeat: repeat; background-size: 512px; background-color: #181818; -} - -.center { - display: block; - margin-left: auto !important; - margin-right: auto !important; + min-height: 100%; } html, body, -#container { +.container { width: 100%; margin: 0; padding: 0; -} -body { - padding: $inner-gap; - min-height: 100%; - - > .center { - display: table; - margin: 0 auto; + .section { + @include section; } } @@ -155,33 +143,41 @@ body { #header, #main, #footer, -#container { - @include border-radius($outer-radius); +.container { + display: block; width: $page-width; - text-align: left; } #header, #footer { - display: block; - @include section; + margin-bottom: $outer-gap; + + .section { + padding: $inner-gap; + } } #header { - $logo-size: 200px; - height: #{$logo-size + $inner-gap * 2 + 10px}; - padding: $inner-gap; + margin-top: $outer-gap; + + &, &.container { + height: $logo-width + $inner-gap * 2 + $border-width * 2; + + .section { + height: $logo-width; + } + } img { @include border-radius($inner-radius); float: left; - height: $logo-size; - width: $logo-size; + height: $logo-width; + width: $logo-width; } .content { padding-top: 30px; - padding-left: $logo-size; + padding-left: $logo-width; .logo-text { margin: 0; @@ -222,24 +218,26 @@ body { } } -/* once the page has been shrank to max content width */ -@media (max-width: ($page-width + $outer-gap * 2)) { - body { - width: 1px; - min-width: 100%; - - > .center { - display: block; - } - } +#header, +#main, +#footer { + display: block; + margin-left: auto !important; + margin-right: auto !important; +} - body > .center, +/* once the page has been shrank to max content width */ +@media (max-width: ($page-width + $outer-gap * 2 + $border-width * 2)) { + body, #header, #main, - #footer, - #container { + #footer { width: 100%; - max-width: 100%; + + .container { + padding: 0 $outer-gap; + width: auto; + } } } @@ -248,6 +246,14 @@ body { display: block; height: auto; + &, &.container { + height: auto; + + .section { + height: auto; + } + } + img { float: none; display: block; @@ -275,14 +281,15 @@ body { } @media (max-width: 300px) { - body { - width: 300px; + body, + #header, + #main, + #footer { + width: 300px; } } #footer { - padding: $inner-gap; - .footer-text { display: block; margin: 10px 0; @@ -318,6 +325,7 @@ body { #main .section { @include section; + margin-bottom: $outer-gap; .heading { @include linear-gradient(to bottom, $blue, $black); @@ -339,20 +347,22 @@ body { border-left: 5px solid $blue; } - pre { - background: black; - margin-right: $inner-gap; - @include border-radius($outer-radius); - padding: $inner-gap; - } - code { font-family: $font; color: $green; } - pre code { - color: $white; + pre { + @include border-radius($outer-radius); + background: black; + overflow-x: scroll; + margin-right: $inner-gap; + + code { + padding: $inner-gap; + padding-bottom: 0px; + color: $white; + } } table { @@ -399,8 +409,15 @@ body { } } } -} -#main #ad { - padding: $inner-gap; + &#post, + &#writeup { + .posted { + margin-top: $inner-gap; + } + } + + &#ad { + padding: $inner-gap; + } } diff --git a/src/web/_views/footer.php b/src/web/_views/footer.php index 1f1ad30..8807160 100644 --- a/src/web/_views/footer.php +++ b/src/web/_views/footer.php @@ -7,14 +7,15 @@ $footer_text = ''; } ?> - + - + ')?> diff --git a/src/web/_views/head.php b/src/web/_views/head.php index 8cd6f87..73bd3f6 100644 --- a/src/web/_views/head.php +++ b/src/web/_views/head.php @@ -53,10 +53,6 @@ echo ie($this->embed_css('css/ie/ie.css')); /* IE 4 Styles */ echo ie_ua($this->embed_css('css/ie/ie4.css'), 4); - /* IE 6-7 Styles */ - echo ''; /* CSS Files */ foreach($css as $file) diff --git a/src/web/_views/header.php b/src/web/_views/header.php index fe8e0f1..d4966a9 100644 --- a/src/web/_views/header.php +++ b/src/web/_views/header.php @@ -5,8 +5,8 @@ ')?> -

- +

diff --git a/src/web/lib/hooks.php b/src/web/lib/hooks.php index a688069..70853e1 100644 --- a/src/web/lib/hooks.php +++ b/src/web/lib/hooks.php @@ -1,20 +1,6 @@ req['uri_str'] ?? ''; - $file = basename($uri_str); - if (str_ends_with($file, '.htc')) - load_htc($file); } function CRIMSON_error_hook(?array $req, int $code): never { -- cgit v1.2.3-freya