From fe46ee3aa2b81950acceb614f3d56b8cb319f21f Mon Sep 17 00:00:00 2001 From: Mihail Croitor Date: Wed, 19 Feb 2025 11:33:49 +0200 Subject: [PATCH] changed container size for 1200px and 1400px min width screen --- css/skeleton.css | 405 ++++++++++++++++++++++++++++++++++++----------- 1 file changed, 311 insertions(+), 94 deletions(-) diff --git a/css/skeleton.css b/css/skeleton.css index f28bf6c59..94f2d29ae 100644 --- a/css/skeleton.css +++ b/css/skeleton.css @@ -34,81 +34,172 @@ max-width: 960px; margin: 0 auto; padding: 0 20px; - box-sizing: border-box; } + box-sizing: border-box; +} + .column, .columns { width: 100%; float: left; - box-sizing: border-box; } + box-sizing: border-box; +} /* For devices larger than 400px */ @media (min-width: 400px) { .container { width: 85%; - padding: 0; } + padding: 0; + } } /* For devices larger than 550px */ @media (min-width: 550px) { .container { - width: 80%; } + width: 80%; + } + .column, .columns { - margin-left: 4%; } + margin-left: 4%; + } + .column:first-child, .columns:first-child { - margin-left: 0; } + margin-left: 0; + } .one.column, - .one.columns { width: 4.66666666667%; } - .two.columns { width: 13.3333333333%; } - .three.columns { width: 22%; } - .four.columns { width: 30.6666666667%; } - .five.columns { width: 39.3333333333%; } - .six.columns { width: 48%; } - .seven.columns { width: 56.6666666667%; } - .eight.columns { width: 65.3333333333%; } - .nine.columns { width: 74.0%; } - .ten.columns { width: 82.6666666667%; } - .eleven.columns { width: 91.3333333333%; } - .twelve.columns { width: 100%; margin-left: 0; } - - .one-third.column { width: 30.6666666667%; } - .two-thirds.column { width: 65.3333333333%; } - - .one-half.column { width: 48%; } + .one.columns { + width: 4.66666666667%; + } + + .two.columns { + width: 13.3333333333%; + } + + .three.columns { + width: 22%; + } + + .four.columns { + width: 30.6666666667%; + } + + .five.columns { + width: 39.3333333333%; + } + + .six.columns { + width: 48%; + } + + .seven.columns { + width: 56.6666666667%; + } + + .eight.columns { + width: 65.3333333333%; + } + + .nine.columns { + width: 74.0%; + } + + .ten.columns { + width: 82.6666666667%; + } + + .eleven.columns { + width: 91.3333333333%; + } + + .twelve.columns { + width: 100%; + margin-left: 0; + } + + .one-third.column { + width: 30.6666666667%; + } + + .two-thirds.column { + width: 65.3333333333%; + } + + .one-half.column { + width: 48%; + } /* Offsets */ .offset-by-one.column, - .offset-by-one.columns { margin-left: 8.66666666667%; } + .offset-by-one.columns { + margin-left: 8.66666666667%; + } + .offset-by-two.column, - .offset-by-two.columns { margin-left: 17.3333333333%; } + .offset-by-two.columns { + margin-left: 17.3333333333%; + } + .offset-by-three.column, - .offset-by-three.columns { margin-left: 26%; } + .offset-by-three.columns { + margin-left: 26%; + } + .offset-by-four.column, - .offset-by-four.columns { margin-left: 34.6666666667%; } + .offset-by-four.columns { + margin-left: 34.6666666667%; + } + .offset-by-five.column, - .offset-by-five.columns { margin-left: 43.3333333333%; } + .offset-by-five.columns { + margin-left: 43.3333333333%; + } + .offset-by-six.column, - .offset-by-six.columns { margin-left: 52%; } + .offset-by-six.columns { + margin-left: 52%; + } + .offset-by-seven.column, - .offset-by-seven.columns { margin-left: 60.6666666667%; } + .offset-by-seven.columns { + margin-left: 60.6666666667%; + } + .offset-by-eight.column, - .offset-by-eight.columns { margin-left: 69.3333333333%; } + .offset-by-eight.columns { + margin-left: 69.3333333333%; + } + .offset-by-nine.column, - .offset-by-nine.columns { margin-left: 78.0%; } + .offset-by-nine.columns { + margin-left: 78.0%; + } + .offset-by-ten.column, - .offset-by-ten.columns { margin-left: 86.6666666667%; } + .offset-by-ten.columns { + margin-left: 86.6666666667%; + } + .offset-by-eleven.column, - .offset-by-eleven.columns { margin-left: 95.3333333333%; } + .offset-by-eleven.columns { + margin-left: 95.3333333333%; + } .offset-by-one-third.column, - .offset-by-one-third.columns { margin-left: 34.6666666667%; } + .offset-by-one-third.columns { + margin-left: 34.6666666667%; + } + .offset-by-two-thirds.column, - .offset-by-two-thirds.columns { margin-left: 69.3333333333%; } + .offset-by-two-thirds.columns { + margin-left: 69.3333333333%; + } .offset-by-one-half.column, - .offset-by-one-half.columns { margin-left: 52%; } + .offset-by-one-half.columns { + margin-left: 52%; + } } @@ -119,48 +210,109 @@ html is set to 62.5% so that all the REM measurements throughout Skeleton are based on 10px sizing. So basically 1.5rem = 15px :) */ html { - font-size: 62.5%; } + font-size: 62.5%; +} + body { - font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ + font-size: 1.5em; + /* currently ems cause chrome bug misinterpreting rems on body element */ line-height: 1.6; font-weight: 400; font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #222; } + color: #222; +} /* Typography –––––––––––––––––––––––––––––––––––––––––––––––––– */ -h1, h2, h3, h4, h5, h6 { +h1, +h2, +h3, +h4, +h5, +h6 { margin-top: 0; margin-bottom: 2rem; - font-weight: 300; } -h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;} -h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; } -h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; } -h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; } -h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; } -h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; } + font-weight: 300; +} + +h1 { + font-size: 4.0rem; + line-height: 1.2; + letter-spacing: -.1rem; +} + +h2 { + font-size: 3.6rem; + line-height: 1.25; + letter-spacing: -.1rem; +} + +h3 { + font-size: 3.0rem; + line-height: 1.3; + letter-spacing: -.1rem; +} + +h4 { + font-size: 2.4rem; + line-height: 1.35; + letter-spacing: -.08rem; +} + +h5 { + font-size: 1.8rem; + line-height: 1.5; + letter-spacing: -.05rem; +} + +h6 { + font-size: 1.5rem; + line-height: 1.6; + letter-spacing: 0; +} /* Larger than phablet */ @media (min-width: 550px) { - h1 { font-size: 5.0rem; } - h2 { font-size: 4.2rem; } - h3 { font-size: 3.6rem; } - h4 { font-size: 3.0rem; } - h5 { font-size: 2.4rem; } - h6 { font-size: 1.5rem; } + h1 { + font-size: 5.0rem; + } + + h2 { + font-size: 4.2rem; + } + + h3 { + font-size: 3.6rem; + } + + h4 { + font-size: 3.0rem; + } + + h5 { + font-size: 2.4rem; + } + + h6 { + font-size: 1.5rem; + } } p { - margin-top: 0; } + margin-top: 0; +} /* Links –––––––––––––––––––––––––––––––––––––––––––––––––– */ a { - color: #1EAEDB; } + color: #1EAEDB; +} + a:hover { - color: #0FA0CE; } + color: #0FA0CE; +} /* Buttons @@ -186,7 +338,9 @@ input[type="button"] { border-radius: 4px; border: 1px solid #bbb; cursor: pointer; - box-sizing: border-box; } + box-sizing: border-box; +} + .button:hover, button:hover, input[type="submit"]:hover, @@ -199,7 +353,9 @@ input[type="reset"]:focus, input[type="button"]:focus { color: #333; border-color: #888; - outline: 0; } + outline: 0; +} + .button.button-primary, button.button-primary, input[type="submit"].button-primary, @@ -207,7 +363,9 @@ input[type="reset"].button-primary, input[type="button"].button-primary { color: #FFF; background-color: #33C3F0; - border-color: #33C3F0; } + border-color: #33C3F0; +} + .button.button-primary:hover, button.button-primary:hover, input[type="submit"].button-primary:hover, @@ -220,7 +378,8 @@ input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus { color: #FFF; background-color: #1EAEDB; - border-color: #1EAEDB; } + border-color: #1EAEDB; +} /* Forms @@ -235,12 +394,15 @@ input[type="password"], textarea, select { height: 38px; - padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ + padding: 6px 10px; + /* The 6px vertically centers text on FF, ignored by Webkit */ background-color: #fff; border: 1px solid #D1D1D1; border-radius: 4px; box-shadow: none; - box-sizing: border-box; } + box-sizing: border-box; +} + /* Removes awkward default styles on some inputs for iOS */ input[type="email"], input[type="number"], @@ -251,12 +413,16 @@ input[type="url"], input[type="password"], textarea { -webkit-appearance: none; - -moz-appearance: none; - appearance: none; } + -moz-appearance: none; + appearance: none; +} + textarea { min-height: 65px; padding-top: 6px; - padding-bottom: 6px; } + padding-bottom: 6px; +} + input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, @@ -267,41 +433,60 @@ input[type="password"]:focus, textarea:focus, select:focus { border: 1px solid #33C3F0; - outline: 0; } + outline: 0; +} + label, legend { display: block; margin-bottom: .5rem; - font-weight: 600; } + font-weight: 600; +} + fieldset { padding: 0; - border-width: 0; } + border-width: 0; +} + input[type="checkbox"], input[type="radio"] { - display: inline; } -label > .label-body { + display: inline; +} + +label>.label-body { display: inline-block; margin-left: .5rem; - font-weight: normal; } + font-weight: normal; +} /* Lists –––––––––––––––––––––––––––––––––––––––––––––––––– */ ul { - list-style: circle inside; } + list-style: circle inside; +} + ol { - list-style: decimal inside; } -ol, ul { + list-style: decimal inside; +} + +ol, +ul { padding-left: 0; - margin-top: 0; } + margin-top: 0; +} + ul ul, ul ol, ol ol, ol ul { margin: 1.5rem 0 1.5rem 3rem; - font-size: 90%; } + font-size: 90%; +} + li { - margin-bottom: 1rem; } + margin-bottom: 1rem; +} /* Code @@ -313,11 +498,14 @@ code { white-space: nowrap; background: #F1F1F1; border: 1px solid #E1E1E1; - border-radius: 4px; } -pre > code { + border-radius: 4px; +} + +pre>code { display: block; padding: 1rem 1.5rem; - white-space: pre; } + white-space: pre; +} /* Tables @@ -326,25 +514,34 @@ th, td { padding: 12px 15px; text-align: left; - border-bottom: 1px solid #E1E1E1; } + border-bottom: 1px solid #E1E1E1; +} + th:first-child, td:first-child { - padding-left: 0; } + padding-left: 0; +} + th:last-child, td:last-child { - padding-right: 0; } + padding-right: 0; +} /* Spacing –––––––––––––––––––––––––––––––––––––––––––––––––– */ button, .button { - margin-bottom: 1rem; } + margin-bottom: 1rem; +} + input, textarea, select, fieldset { - margin-bottom: 1.5rem; } + margin-bottom: 1.5rem; +} + pre, blockquote, dl, @@ -354,21 +551,29 @@ p, ul, ol, form { - margin-bottom: 2.5rem; } + margin-bottom: 2.5rem; +} /* Utilities –––––––––––––––––––––––––––––––––––––––––––––––––– */ .u-full-width { width: 100%; - box-sizing: border-box; } + box-sizing: border-box; +} + .u-max-full-width { max-width: 100%; - box-sizing: border-box; } + box-sizing: border-box; +} + .u-pull-right { - float: right; } + float: right; +} + .u-pull-left { - float: left; } + float: left; +} /* Misc @@ -377,7 +582,8 @@ hr { margin-top: 3rem; margin-bottom: 3.5rem; border-width: 0; - border-top: 1px solid #E1E1E1; } + border-top: 1px solid #E1E1E1; +} /* Clearing @@ -389,7 +595,8 @@ hr { .u-cf { content: ""; display: table; - clear: both; } + clear: both; +} /* Media Queries @@ -415,4 +622,14 @@ there. @media (min-width: 1000px) {} /* Larger than Desktop HD */ -@media (min-width: 1200px) {} +@media (min-width: 1200px) { + .container { + max-width: 1160px; + } +} + +@media (min-width: 1400px) { + .container { + max-width: 1340px; + } +} \ No newline at end of file