From ef88075920e35ad99aa0f4adeae4b58f6397d4a1 Mon Sep 17 00:00:00 2001 From: Anthony Sansone Date: Tue, 9 Jul 2024 00:47:09 -0500 Subject: [PATCH] Fix CSS, Config --- _config.yaml => _config.yml | 0 css/screen.css | 997 ------------------------------------ 2 files changed, 997 deletions(-) rename _config.yaml => _config.yml (100%) delete mode 100644 css/screen.css diff --git a/_config.yaml b/_config.yml similarity index 100% rename from _config.yaml rename to _config.yml diff --git a/css/screen.css b/css/screen.css deleted file mode 100644 index b9c2a16..0000000 --- a/css/screen.css +++ /dev/null @@ -1,997 +0,0 @@ -/* screen.css: Screen Styles */ - -/* - -This is set up to go from a 1 column (320px) to 2 column (768px) to 3 column (978px+) home page layout. - -The section fonts are from TypeKit: Museo Sans and Museo Slab Serif. - -*/ - -/* Base Styles */ - -/* Bold on headings, b, and strong */ -h1,h2,h3,h4,h5,h6,b,strong { font-weight: 800; } -/* Italic on i, em, and cite: */ -i,em,cite { font-style: italic; } -/* Dotted border and help cursor to abbr and acronym: */ -abbr,acronym { border-bottom: 1px dotted; cursor: help; } - -html { - background: #361F27; - font-size: 14px; - font-family: 'Roboto', sans-serif; - line-height: 1.5rem; - color: #0D090A; -} - -/* Body */ - -body { - display: flex; - flex-direction: column; -} - -/* Major Divisions */ - -/* Page (Containing Div) */ - -main { - background-color: #EAF2EF; - margin-bottom: 1rem; -} - -/* Header */ - -header { - background-color: #AB3665; -} - -header h1 { - font-family: 'Roboto Slab', serif; - font-weight: 800; -} - -header h1 a { - text-decoration: none; - color: #EAF2EF; -} - -header ul.accessibility { - display: none; -} - -header div.topline { - color: #EAF2EF; - text-align: center; - text-wrap: balance; -} -/* Content */ - - section { - border-top: 3px solid #521945; - background-color: #EAF2EF; - padding: 1rem; - display: flex; - flex-direction: column; - } - - section.foto-right { - display: flex; - flex-basis: 50%; - flex-direction: row; - gap: 2rem; - } - - section.foto-right div img { - object-fit: initial; - object-position: center; - aspect-ratio: 3 / 4; - } - - section.foto-right figure figcaption { - font-size: 0.8rem; - text-align: center; - } - - body#home main section { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 1rem; - } - -/* Footer */ - - footer { - border-top: 1px solid #600; - background-color: #EAF2EF; - padding: 1rem; - font-size: 0.8rem; - } - -/* Navigation */ - - nav div { - font-family: 'Roboto', sans-serif; - text-align: center; - padding: 0.5rem; - } - - nav div.selected, nav div:hover { - background-color: #CAE6E8; - color: #AB3665; - } - - nav div, nav div.selected:hover { - background: #AB3665; - } - - nav div a { - text-decoration:none; - } - - nav div.selected:hover a, nav div a { - color: #fff; - } - - nav div.selected a, nav div:hover a { - color: #595855; - } - -/*Content Typography: Headings*/ - section h1, - section h2, - section h3, - section h4, - section h5, - section h6 { - font-family: 'Roboto Slab', serif; - } - section h1 { - font-size: 2em; - line-height: 2rem; - margin-bottom: 1rem; - } - section h2 { - font-size: 1.4rem; - margin-bottom: 1rem; - } - section h3 { - font-size: 1.2rem; - margin-bottom: 0.5rem; - } - section h4 { - } - section h5 { - } - section h6 { - } - section * a { - text-decoration: none; - } - div.row + h2, ul + h2, ul + h3, ul + h4, ul + ul { - margin-top: 1rem; - } - - section p.company { - margin-bottom: .5rem; - } - -/*Content Typography: Paragraphs*/ -section p { - font-family: 'Roboto', sans-serif; - margin-bottom: 1rem; -} - -section p:last-child { - margin-bottom: 0rem; -} - -section p + table { - margin-bottom: 0rem; -} - -section div:last-child p:last-child { - margin-bottom: 0px; -} - -/*Content Typography: Unordered Lists*/ -section ul { -} - -section ul li { - list-style-type: square; - list-style-position:inside; - margin-left: 2.2rem; - text-indent: -2.0rem; -} - -/*Nested*/ -section * li ul { -} - -section * li ul li { - list-style-type: square; - list-style-position:inside; - margin-left: 2em; - text-indent: -1em; -} - -/*Content Typography: Ordered Lists*/ -section ol { -} -section ol li { -} - -/*Nested*/ -section * li ol { -} -section * li ol li { -} - -/*Content Typography: Links*/ -section a { - color: #AB3665; - text-decoration: none; -} -section a:visited { - color: #444; -} -section a:hover, -section a:focus { -} - -/*Content Typography: Links*/ -footer a { - color: #521945; - text-decoration: none; -} -footer a:visited { - color: #444; -} -footer a:hover, -footer a:focus { -} - -/* Job Tools Block */ - -body#resume section ul.tools { - background-color: #fff; - margin: 12px 0px; - border: 1px #AB3665 solid; -} - -/* This formatting is for the special tools listing per job. It applies to everything except the largest size */ - -body#resume section { - display: flex; - flex-direction: column; -} - -body#resume section ul.tools li { - font-size: 0.9rem; - line-height: 1.1rem; - list-style-type: none; - padding: 12px; -} - -body#resume section ul.tools > li { - list-style-type: none; - margin-left: 3.5em; - text-indent: -3.5em; -} - -body#resume section p.company { - border-top: 1px #AB3665 solid; - font-size: 0.8rem; -} - -section h3.job, section ul.job { - margin-bottom: 0rem; -} - -section ul.job { - display: flex; - flex-direction: row; - width: 100%; - gap: 1rem; - flex-wrap: nowrap; -} - -section ul.job > li { - margin-left: 0; - text-indent: 0; - list-style-type: none; -} - -section ul.job > li h3 { - display: flex; -} - -section ul.job > li:last { - width: 50%; -} - -section ul.job > li + li::before { - font-family: "Material Symbols Outlined"; - content: "star"; - float: left; - text-indent: -1rem; - font-size: 2rem; - line-height: 1rem; - padding-top: 0.1rem; -} - -main.cv p { - text-indent: -3rem; - padding-left: 3rem; -} - -/* General Table Formats */ - -th, td { - font-size: 0.8rem; -} - -tr > th { - background-color: #ccc; - padding: 0.3rem; - font-weight: 800; - text-align: center; -} - -tr:nth-child(odd) { - background-color:#eee; -} - -tr:nth-child(even) { - background-color:#fff; -} - -table.general { - margin-bottom: 1rem; - border: 1px solid #ccc; - width: 100%; -} - -table.general:last-child { - margin: 0px; - border: 1px solid #ccc; - width: 100%; -} - -tr > td { - padding: 0.3rem; - vertical-align: top; -} - -table.tiny, table.tiny { - font-size: 0.6rem; -} - -table.small > tr > td, table.small > th { - font-size: 10px; -} - -table.reg > td { - font-size: 12px; -} - -table .hide { - display: none; -} - -/* Skills Tables */ - -table.skills tr > td { - width: 60%; - padding-left: 10px; -} - -table.skills tr > td + td { - text-align: center; - width: 15%; - padding-left: 0px; -} - -table.skills tr.skilldiv { - background-color: #ddd; -} - -table.skills tr.skilldiv > td { - padding-left: 20px; - font-weight: 800; - padding-left: 7px; -} - -/* Resume Writing Tables */ - -table.resumewriting tr th { - text-align: center; - width: 5%; - padding-left: 0px; -} - -table.resumewriting tr th.wide { - text-align: center; - width: 15%; - padding-left: 0px; -} - -/* Images */ - -img { - max-width: 100%; -} - -h2 { - border-bottom: 1px #444 solid; -} - -/* Grids */ - -/* Basic / 300px Grid */ - -@media screen and (max-width: 767px) { - - /* BEGIN - General HTML - BEGIN */ - - html { /* Set font / line height / background */ - line-height: 1.5rem; - font-size: 0.9rem; - } - - /* END - General HTML - END */ - - /* BEGIN - Page order - BEGIN */ - - header { - order: 1; - } - - nav { - order: 3; - } - - main { - order: 2; - } - - footer { - order: 4; - } - - /* END - Page order - END */ - - /* BEGIN - Body Widths - BEGIN */ - - main { - min-width: 320px; /* Minimum set to width of mobile device */ - } - - /* END - Body Widths - END */ - - /* BEGIN - Header Styles - BEGIN */ - - header { - height: 5rem; - padding: 1rem; - text-wrap: balance; - } - - header h1 { - text-align: center; - line-height: 2.5rem; - font-size: 2rem; - } - - header p { - text-align: center; - } - - caption { - margin-bottom: 1rem; - } - - /* END - Header Styles - END */ - - /* BEGIN - Navigation Bar at the Top of the Page below the header - BEGIN */ - - /* Using display:table to set up a flexible set of navigation buttons */ - - nav div { - min-width: 66px; - } - - /* END - Navigation Bar at the Top of the Page below the header - END */ - - /* BEGIN - section Content Block - BEGIN */ - - main section h2, section p { - margin-bottom: 0.5rem; - } - - body#resume main section h2, body#resume main section h3 { - padding-top: 0.5rem; - padding-bottom: 0rem; - } - - div.row h2 { - margin-top: 1.5rem; - } - - div.row { - margin-top: 1.5rem; - } - - /* Print Design Portfolio */ - - body#printdesign h2 { - margin-top: 1.5rem; - font-size: 1.5rem; - line-height: 2rem; - } - - body#printdesign h3 { - font-family: 'Roboto', sans-serif; - font-weight: 500; - margin-bottom: 1rem; - } - - /* END - section Content Block - END */ - - /* BEGIN - Footer - BEGIN */ - - footer { - font-size: 0.8rem; - line-height: 1.0rem; - } - - /* END - Footer - END */ - - nav { - height: 2.5rem; - padding: 1rem; - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 1rem; - } - -} - -/* 748 Grid */ - -@media screen and (min-width: 768px) { - - /* BEGIN - Body Widths - BEGIN */ - - body main { - min-width: 748px; /* Set Minimum Width of 748 px */ - } - - /* END - Body Widths - END */ - - /* BEGIN - Page order - BEGIN */ - - header { - order: 1; - } - - nav { - order: 2; - } - - main { - order: 3; - } - - footer { - order: 4; - } - - /* END - Page order - END */ - - /* BEGIN - Header - BEGIN */ - - header { - height: 3.5rem; - padding: 1rem; - } - - header h1, header p { - text-align: left; - } - - header h1 { - font-size: 1.75rem; - line-height: 2rem; - } - - header p { - font-size: 0.9rem; - line-height: 1.3rem; - } - - header div.topline { - display: flex; - flex-direction: row; - color: #fff; - width: 100%; - gap: 1rem; - } - - header div.topline div.tagline { - text-align: left; - text-wrap: balance; - } - - header div.topline div.contact { - text-align: right; - text-wrap: balance; - } - - /* Contact Details */ - - header p.contact { - color: #EAF2EF; - } - - /* END - Header - END */ - - /* BEGIN - Navigation Bar at the Top of the Page below the header - BEGIN */ - - nav { - padding: 1rem; - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 1rem; - } - - /* END - Navigation Bar at the Top of the Page below the header - END */ - - /* BEGIN - section Content Block - BEGIN */ - - section h1 { - text-align: left; - line-height: 2rem; - font-size: 1.25rem; - } - - /* END - section Content Block - END */ - - /* BEGIN - Footer - BEGIN */ - - footer { - font-size: 0.8rem; - line-height: 1.0rem; - } - - /* END - Footer - END */ -} - -/* 978 Grid */ - -@media screen and (min-width: 1002px) { - - /* BEGIN - General HTML - BEGIN */ - - html { /* Set font / line height / background */ - line-height: 1.5rem; - font-size: 1rem; - } - - /* BEGIN - General HTML - BEGIN */ - - /* BEGIN - Page order - BEGIN */ - - header { - order: 1; - } - - nav { - order: 2; - } - - main { - order: 3; - } - - footer { - order: 4; - } - - /* END - Page order - END */ - - /* BEGIN - Body Widths - BEGIN */ - - /* END - Body Widths - END */ - - /* BEGIN - Header Styles - BEGIN */ - - header { - height: 3.5rem; - padding: 1rem; - } - - header h1, header p { - text-align: left; - } - - header h1 { - font-size: 1.75rem; - line-height: 2rem; - } - - header p { - font-size: 0.9rem; - line-height: 1.3rem; - } - - /* END - Header Styles - END */ - - /* BEGIN - Navigation Bar at the Top of the Page below the header - BEGIN */ - - nav { - padding: 1rem; - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 1rem; - } - - - /* END - Navigation Bar at the Top of the Page below the header - END */ - - /* BEGIN - section Content Block - BEGIN */ - - body#home main section { - padding: 1rem; - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 1rem; - } - - body main section h1 { - text-align: left; - line-height: 2rem; - font-size: 1.5rem; - } - - /* END - section Content Block - END */ - - /* BEGIN - Footer - BEGIN */ - - footer { - font-size: 0.8rem; - line-height: 1.0rem; - } - - /* END - Footer - END */ -} - -/* 1218 Grid */ - -@media screen and (min-width: 1248px) { - - /* BEGIN - General HTML - BEGIN */ - - html { /* Set font / line height / background */ - line-height: 1.5rem; - font-size: 1rem; - } - - /* BEGIN - General HTML - BEGIN */ - - /* BEGIN - Page order - BEGIN */ - - header { - order: 1; - } - - nav { - order: 2; - } - - main { - order: 3; - } - - footer { - order: 4; - } - - /* END - Page order - END */ - - /* BEGIN - Body Widths - BEGIN */ - - /* END - Body Widths - END */ - - /* BEGIN - Header Styles - BEGIN */ - - header { - height: 4rem; - padding: 1rem; - } - - body header h1 { - text-align: left; - line-height: 2.5rem; - font-size: 2rem; - } - - body.pct main p.tagline { - width: 66%; - } - - body header p.contact { - text-align: right; - } - - body.pct header p.contact { - left: 67%; - width: 33%; - } - - /* END - Header Styles - END */ - - /* BEGIN - Navigation Bar at the Top of the Page below the header - BEGIN */ - - - /* END - Navigation Bar at the Top of the Page below the header - END */ - - /* BEGIN - section Content Block - BEGIN */ - - body#home main section { - padding: 1rem; - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 1rem; - } - - body main section h1 { - text-align: left; - line-height: 2rem; - font-size: 1.5rem; - } - - /* END - section Content Block - END */ - - /* BEGIN - Footer - BEGIN */ - - footer { - font-size: 0.8rem; - line-height: 1.0rem; - } - - /* END - Footer - END */ - -} - -/* 1378 Grid */ - -@media screen and (min-width: 1408px) { - - /* BEGIN - General HTML - BEGIN */ - - html { /* Set font / line height / background */ - line-height: 1.5rem; - font-size: 1.25rem; - } - - /* BEGIN - General HTML - BEGIN */ - - /* BEGIN - Page order - BEGIN */ - - header { - order: 1; - } - - nav { - order: 2; - } - - main { - align-self: center; - order: 3; - } - - footer { - order: 4; - } - - /* END - Page order - END */ - - /* BEGIN - Body Widths - BEGIN */ - - body.pct main { - max-width: 1408px; - } - - /* END - Body Widths - END */ - - /* BEGIN - Header Styles - BEGIN */ - - body header { - height: 4rem; - padding: 1rem; - } - - header h1 { - line-height: 3.25rem; - font-size: 3rem; - } - - /* END - Header Styles - END */ - - /* BEGIN - Navigation Bar at the Top of the Page below the header - BEGIN */ - - nav { - padding: 1rem; - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 1rem; - } - - /* END - Navigation Bar at the Top of the Page below the header - END */ - - /* BEGIN - section Content Block - BEGIN */ - - body#home main section { - padding: 1rem; - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 1rem; - } - - body main section h1 { - text-align: left; - line-height: 2rem; - font-size: 1.5rem; - } - - /* Enlarging the fonts for the maximum browser size */ - - body#resume section ul.tools li { - font-size: 0.8rem; - line-height: 1rem; - list-style-type: none; - padding: 1rem; - } - - body#resume section ul.tools > li { - list-style-type: none; - text-indent: -2rem; - } - - tr > td, tr > th { - padding: 7px; - font-size: 15px; - } - - div.row + h2, ul + h2, ul + h3, ul + h4 { - margin-top: 2rem; - } - - /* Print Design Portfolio */ - - body#printdesign h2 { - margin-top: 24px; - font-size: 40px; - line-height: 48px; - } - - body#printdesign h3 { - margin-bottom: 24px; - font-size: 20px; - line-height: 24px; - } - - /* End enlargement */ - - /* END - section Content Block - END */ - - /* BEGIN - Footer - BEGIN */ - - /* END - Footer - END */ - -} -