From b67d81fc0d480917e4940311ab88e4c7d187688a Mon Sep 17 00:00:00 2001 From: Dan Barber Date: Sun, 25 Jun 2023 19:04:16 -0500 Subject: [PATCH] Print --- source/css/_legacy.scss | 186 ---------------------------- source/css/components/_content.scss | 2 +- source/css/components/_header.scss | 12 +- 3 files changed, 7 insertions(+), 193 deletions(-) diff --git a/source/css/_legacy.scss b/source/css/_legacy.scss index 9c82814..add8d1d 100644 --- a/source/css/_legacy.scss +++ b/source/css/_legacy.scss @@ -345,31 +345,6 @@ textarea { display: none; } - #profile, - #experience { - float: left; - width: 68%; - } - - #skills { - float: right; - width: 25%; - margin-left: 7%; - } - - #portfolio { - break-before: left; - float: left; - width: 68%; - } - - #interests, - #contact { - float: right; - width: 25%; - margin-left: 7%; - } - a { color: #444 !important; text-decoration: underline; @@ -422,164 +397,3 @@ textarea { page-break-after: avoid; } } - -/*/mediaquery */ - -/*500px __________________________________________________________________________________________________________ */ -@media only screen and (min-width: 540px) { - /* 3.TYPOGRAPHY */ - /* 4.LINKS */ - /* 5.FIGURES & IMAGES */ - /* 6.TABLES */ - /* 7.FORMS */ - /* 8.BANNER */ - /* 9.NAVIGATION */ - /* 10.CONTENT */ - /* #experience h4 { float: left; margin-top: 0; } - *#experience li { margin-top: 2.2em; } - *#experience .period { clear: none; text-align: right; position: relative; top: 0.1em; } - *#experience p { clear: both; } */ - /* 11.MAIN */ - /* 12.COMPLIMENTARY */ - /* 13.CONTENTINFO */ - /* 14.GLOBAL OBJECTS */ - /* 15.VENDOR-SPECIFIC */ - /* 16.TEMPLATE SPECIFICS */ - /* 17.MODERNIZR */ -} - -/*/mediaquery */ - -/*480px __________________________________________________________________________________________________________ */ -@media only screen and (min-width: 640px) { - /* 1.ROOT */ - /* 2.HEADINGS */ - /* 3.TYPOGRAPHY */ - /* 4.LINKS */ - /* 5.FIGURES & IMAGES */ - /* 6.TABLES */ - /* 7.FORMS */ - /* 8.BANNER */ - /* 9.NAVIGATION */ - /* 10.CONTENT */ - /* 11.MAIN */ - /* 12.COMPLIMENTARY */ - /* 13.CONTENTINFO */ - /* 14.GLOBAL OBJECTS */ - /* 15.VENDOR-SPECIFIC */ - /* 16.TEMPLATE SPECIFICS */ - /* 17.MODERNIZR */ -} - -/*/mediaquery */ - -/*768px __________________________________________________________________________________________________________ */ -@media only screen and (min-width: 768px) { - /* 3.TYPOGRAPHY */ - /* 4.LINKS */ - /* 5.FIGURES & IMAGES */ - /* 6.TABLES */ - /* 7.FORMS */ - /* 8.BANNER */ - /* 9.NAVIGATION */ - /* 10.CONTENT */ - /* 11.MAIN */ - /* 12.COMPLIMENTARY */ - /* 13.CONTENTINFO */ - /* 14.GLOBAL OBJECTS */ - /* 15.VENDOR-SPECIFIC */ - /* 16.TEMPLATE SPECIFICS */ - /* 17.MODERNIZR */ -} - -/*/mediaquery */ - -/*992px __________________________________________________________________________________________________________ */ -@media only screen and (min-width: 992px) { - /* 1.ROOT */ - .container { - max-width: 890px; - } - - /* 2.HEADINGS */ - /* 3.TYPOGRAPHY */ - /* 4.LINKS */ - /* 5.FIGURES & IMAGES */ - /* 6.TABLES */ - /* 7.FORMS */ - /* 8.BANNER */ - /* 9.NAVIGATION */ - /* 10.CONTENT */ - /* 11.MAIN */ - /* 12.COMPLIMENTARY */ - /* 13.CONTENTINFO */ - /* 14.GLOBAL OBJECTS */ - /* 15.VENDOR-SPECIFIC */ - /* 16.TEMPLATE SPECIFICS */ - /* 17.MODERNIZR */ -} - -/*/mediaquery */ - -/*1382px __________________________________________________________________________________________________________ */ -@media only screen and (min-width: 1382px) { - /* 1.ROOT */ - /* 2.HEADINGS */ - /* 3.TYPOGRAPHY */ - /* 4.LINKS */ - /* 5.FIGURES & IMAGES */ - /* 6.TABLES */ - /* 7.FORMS */ - /* 8.BANNER */ - /* 9.NAVIGATION */ - /* 10.CONTENT */ - /* 11.MAIN */ - /* 12.COMPLIMENTARY */ - /* 13.CONTENTINFO */ - /* 14.GLOBAL OBJECTS */ - /* 15.VENDOR-SPECIFIC */ - /* 16.TEMPLATE SPECIFICS */ - /* 17.MODERNIZR */ -} - -/*/mediaquery */ - -/*2x __________________________________________________________________________________________________________ */ -@media only screen and (-webkit-min-device-pixel-ratio: 2), - only screen and (min-device-pixel-ratio: 2) { - /* 1.ROOT */ - /* 2.HEADINGS */ - /* 3.TYPOGRAPHY */ - /* 4.LINKS */ - /* 5.FIGURES & IMAGES */ - /* 6.TABLES */ - /* 7.FORMS */ - /* 8.BANNER */ - /* 9.NAVIGATION */ - /* 10.CONTENT */ - /* 11.MAIN */ - /* 12.COMPLIMENTARY */ - /* 13.CONTENTINFO */ - /* 14.GLOBAL OBJECTS */ - /* 15.VENDOR-SPECIFIC */ - /* 16.TEMPLATE SPECIFICS */ - /* 17.MODERNIZR */ -} - -/*/mediaquery */ - -/* Sources: - * http://meyerweb.com/eric/tools/css/reset - * http://people.opera.com/patrickl/experiments/keyboard/test - * http://gist.github.com/413930 - * http://pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap - * http://sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars - * http://tjkdesign.com/ez-css/css/base.css - * http://viget.com/inspire/styling-the-button-element-in-internet-explorer - * http://code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing - * http://html5doctor.com/html-5-reset-stylesheet/ - * http://praegnanz.de/weblog/htmlcssjs-kickstart/ - * http://camendesign.com/design/ - * http://yui.yahooapis.com/2.8.1/build/base/base.css - * http://webaim.org/techniques/css/invisiblecontent/ - * http://drupal.org/node/897638 */ diff --git a/source/css/components/_content.scss b/source/css/components/_content.scss index a26bb78..aaf2793 100644 --- a/source/css/components/_content.scss +++ b/source/css/components/_content.scss @@ -1,5 +1,5 @@ .content { - @media only screen and (min-width: 640px) { + @media (min-width: 640px) { display: grid; grid-template-rows: 0fr 0fr 1fr; grid-template-columns: 2fr 1fr; diff --git a/source/css/components/_header.scss b/source/css/components/_header.scss index 941fd97..bff228e 100644 --- a/source/css/components/_header.scss +++ b/source/css/components/_header.scss @@ -7,7 +7,7 @@ margin-top: 2em; margin-bottom: 2.5em; - @media only screen and (min-width: 580px) { + @media (min-width: 580px) { flex-direction: row-reverse; align-items: end; } @@ -25,20 +25,20 @@ width: 100%; @media print { + font-size: 6em; + margin-bottom: 0; margin-top: 0.5em; text-align: left; - margin-bottom: 0; - font-size: 3.3em; } - @media only screen and (min-width: 580px) { + @media (min-width: 580px) { font-size: 3.3em; margin-bottom: 0; margin-top: 0.5em; text-align: left; } - @media only screen and (min-width: 820px) { + @media (min-width: 820px) { font-size: 5em; margin-bottom: 0em; } @@ -47,7 +47,7 @@ .header__subheading { margin-bottom: 0; - @media only screen and (min-width: 580px) { + @media (min-width: 580px) { text-align: left; } }