Adjust breakpoints to standard sm/md/lg for clearer mobile/tablet/desktop; minor hero spacing tweaks
This commit is contained in:
Philip Peterson
parent
2e5425606d
commit
ba4b140d94
2 changed files with 43 additions and 143 deletions
|
|
@ -8,7 +8,10 @@ module.exports = {
|
|||
theme: {
|
||||
extend: {
|
||||
screens: {
|
||||
'md': '920px',
|
||||
// Adjusted for current hybrid usage (hero changes at sm, header/layout at md)
|
||||
'sm': '768px', // iPad portrait + when hero layout activates
|
||||
'md': '1024px', // Desktop start (header fixed, mission row, etc.)
|
||||
'lg': '1280px', // Large desktop
|
||||
},
|
||||
fontFamily: {
|
||||
hedvig: ['Hedvig Letters Sans', 'sans-serif'],
|
||||
|
|
|
|||
|
|
@ -564,15 +564,9 @@ video {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 640px){
|
||||
@media (min-width: 768px){
|
||||
.container{
|
||||
max-width: 640px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 920px){
|
||||
.container{
|
||||
max-width: 920px;
|
||||
max-width: 768px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -596,7 +590,7 @@ video {
|
|||
|
||||
/* Mobile nav: max-height slide can't be expressed with utilities alone */
|
||||
|
||||
@media (max-width: calc(920px - 1px)) {
|
||||
@media (max-width: calc(1024px - 1px)) {
|
||||
#rpt-main-nav {
|
||||
flex: none;
|
||||
position: static;
|
||||
|
|
@ -674,15 +668,6 @@ video {
|
|||
margin-right: auto;
|
||||
}
|
||||
|
||||
.my-8{
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.mb-0{
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.mb-1\.5{
|
||||
margin-bottom: 0.375rem;
|
||||
}
|
||||
|
|
@ -703,6 +688,10 @@ video {
|
|||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.mb-\[1vw\]{
|
||||
margin-bottom: 1vw;
|
||||
}
|
||||
|
||||
.ml-auto{
|
||||
margin-left: auto;
|
||||
}
|
||||
|
|
@ -715,20 +704,12 @@ video {
|
|||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.ml-3{
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
.mt-\[78px\]{
|
||||
margin-top: 78px;
|
||||
}
|
||||
|
||||
.mt-\[2vw\]{
|
||||
margin-top: 2vw;
|
||||
}
|
||||
|
||||
.mb-\[1vw\]{
|
||||
margin-bottom: 1vw;
|
||||
.mt-\[78px\]{
|
||||
margin-top: 78px;
|
||||
}
|
||||
|
||||
.block{
|
||||
|
|
@ -787,26 +768,6 @@ video {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.max-h-\[calc\(100\%_-_100px\)\]{
|
||||
max-height: calc(100% - 100px);
|
||||
}
|
||||
|
||||
.max-h-\[calc\(100\%_-_50px\)\]{
|
||||
max-height: calc(100% - 50px);
|
||||
}
|
||||
|
||||
.max-h-\[calc\(100\%_-_20px\)\]{
|
||||
max-height: calc(100% - 20px);
|
||||
}
|
||||
|
||||
.max-h-\[calc\(100\%_-_10px\)\]{
|
||||
max-height: calc(100% - 10px);
|
||||
}
|
||||
|
||||
.min-h-\[560px\]{
|
||||
min-height: 560px;
|
||||
}
|
||||
|
||||
.min-h-\[480px\]{
|
||||
min-height: 480px;
|
||||
}
|
||||
|
|
@ -843,18 +804,14 @@ video {
|
|||
max-width: 1200px;
|
||||
}
|
||||
|
||||
.max-w-\[680px\]{
|
||||
max-width: 680px;
|
||||
.max-w-\[420px\]{
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
.max-w-lg{
|
||||
max-width: 32rem;
|
||||
}
|
||||
|
||||
.max-w-\[420px\]{
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
.flex-1{
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
|
|
@ -961,10 +918,6 @@ video {
|
|||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.self-center{
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.overflow-hidden{
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -1034,21 +987,11 @@ video {
|
|||
background-color: rgb(30 58 95 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.bg-\[\#2d5f7a\]{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(45 95 122 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.bg-\[\#306f8e\]{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(48 111 142 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.bg-\[\#89a0a0\]{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(137 160 160 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.bg-\[\#dde8f0\]{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(221 232 240 / var(--tw-bg-opacity, 1));
|
||||
|
|
@ -1071,14 +1014,14 @@ video {
|
|||
background-color: rgb(255 255 255 / 0.9);
|
||||
}
|
||||
|
||||
.bg-gradient-to-t{
|
||||
background-image: linear-gradient(to top, var(--tw-gradient-stops));
|
||||
}
|
||||
|
||||
.bg-\[linear-gradient\(180deg\2c \#83A1A1_0\%\2c \#86AAB6_100\%\)\]{
|
||||
background-image: linear-gradient(180deg,#83A1A1 0%,#86AAB6 100%);
|
||||
}
|
||||
|
||||
.bg-gradient-to-t{
|
||||
background-image: linear-gradient(to top, var(--tw-gradient-stops));
|
||||
}
|
||||
|
||||
.from-black\/60{
|
||||
--tw-gradient-from: rgb(0 0 0 / 0.6) var(--tw-gradient-from-position);
|
||||
--tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
|
||||
|
|
@ -1180,9 +1123,9 @@ video {
|
|||
padding-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.py-8{
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 2rem;
|
||||
.py-4{
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.py-\[1em\]{
|
||||
|
|
@ -1190,13 +1133,12 @@ video {
|
|||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
.py-4{
|
||||
padding-top: 1rem;
|
||||
.pb-4{
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.pb-4{
|
||||
padding-bottom: 1rem;
|
||||
.pb-8{
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.pt-0{
|
||||
|
|
@ -1207,22 +1149,14 @@ video {
|
|||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.pt-\[78px\]{
|
||||
padding-top: 78px;
|
||||
.pt-8{
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.pt-px{
|
||||
padding-top: 1px;
|
||||
}
|
||||
|
||||
.pb-8{
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.pt-8{
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.text-center{
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -1345,11 +1279,6 @@ video {
|
|||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.text-\[\#1e3a5f\]{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(30 58 95 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.text-\[\#1e3a8a\]{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(30 58 138 / var(--tw-text-opacity, 1));
|
||||
|
|
@ -1467,65 +1396,45 @@ video {
|
|||
text-shadow: -56.21px 2.55px 10.22px #0000001A;
|
||||
}
|
||||
|
||||
.hover\:border-\[\#152a45\]:hover{
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(21 42 69 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:border-\[\#1f5a6e\]:hover{
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(31 90 110 / var(--tw-border-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:bg-\[\#152a45\]:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(21 42 69 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:bg-\[\#1e4a60\]:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(30 74 96 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:bg-\[\#3a6a7a\]:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(58 106 122 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:bg-white\/10:hover{
|
||||
background-color: rgb(255 255 255 / 0.1);
|
||||
}
|
||||
|
||||
.hover\:bg-\[\#e8f2f6\]:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(232 242 246 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:bg-\[\#1f5a6e\]:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(31 90 110 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:bg-\[\#e8f2f6\]:hover{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(232 242 246 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:bg-white\/10:hover{
|
||||
background-color: rgb(255 255 255 / 0.1);
|
||||
}
|
||||
|
||||
.hover\:text-\[\#1e3a8a\]:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(30 58 138 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:text-white:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:text-\[\#285a6e\]:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(40 90 110 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.hover\:text-white:hover{
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
|
||||
}
|
||||
|
||||
.disabled\:opacity-30:disabled{
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
@media (min-width: 640px){
|
||||
@media (min-width: 768px){
|
||||
.sm\:block{
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -1592,7 +1501,7 @@ video {
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: 920px){
|
||||
@media (min-width: 1024px){
|
||||
.md\:fixed{
|
||||
position: fixed;
|
||||
}
|
||||
|
|
@ -1640,18 +1549,6 @@ video {
|
|||
.md\:gap-8{
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.md\:bg-\[red\]{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 0 0 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px){
|
||||
.lg\:bg-\[blue\]{
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(0 0 255 / var(--tw-bg-opacity, 1));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px){
|
||||
|
|
|
|||
Loading…
Reference in a new issue