diff --git a/Packages/gruener-salon/sass/includes/_arche.scss b/Packages/gruener-salon/sass/includes/_arche.scss new file mode 100644 index 0000000..2cb0b21 --- /dev/null +++ b/Packages/gruener-salon/sass/includes/_arche.scss @@ -0,0 +1,1103 @@ +/* Reset margin und border */ + +* { + border: 0; + margin: 0; +} + +a, +a:link, +a:focus, +a:visited, + :-moz-focusring { + color: #000; + border: 0; + outline: 0; + text-decoration: none; +} + +a:-webkit-any-link { + text-decoration: none; +} + +img { + display: block; + width: 100%; + height: auto; +} + + +/* Clearfix */ + +.clearfix::after { + clear: both; + content: "."; + display: block; + height: 0; + visibility: hidden; +} + + +/*-------------- Baustelle --------------------------------------------------*/ + +.logo_wrap { + max-width: 60%; + margin-left: calc(50% - 20%); + margin-top: 48vh; +} + +@media (min-width: 1024px) { + .logo_wrap { + max-width: 545px; + margin-left: calc(50% - 130px); + margin-top: 48vh; + } +} + +@media (min-width: 1921px) { + .logo_wrap { + max-width: 730px; + } +} + + +/*-------------------------- Startseite neu 03-2020 ------------------------*/ + +.wrapper { + box-sizing: border-box; + padding: 115px 160px; + width: 100%; +} + +@media (max-width: 1120px) { + .wrapper { + box-sizing: border-box; + padding: 50px 0px; + width: 100%; + } +} + +.logo_top-left { + width: 435px; +} + +.textblock { + width: 790px; + margin-left: calc(50% - 130px); + margin-top: 15vh; +} + +@media (max-width: 1920px) { + .textblock { + width: 790px; + margin-left: calc(50% - 130px); + margin-top: 7vh; + } +} + +.margb0px { + margin-bottom: 0px; +} + +p, +.margb5px { + margin-bottom: 7px; +} + +.margb40px { + margin-bottom: 40px; +} + +.margt40px { + margin-top: 50px; + /*40px*/ +} + +@media (max-width: 500px) { + .margt40px { + margin-top: 0px; + /*40px*/ + } +} + +.font14px { + font-size: 16px; + text-transform: uppercase; + line-height: 18px; + letter-spacing: 1.5px; +} + +.font20px { + font-size: 26px; + text-transform: uppercase; + letter-spacing: 1px; +} + +.font36px { + font-size: 50px; + text-transform: uppercase; + line-height: 46px; + margin-top: 11px; + margin-bottom: 75px; + /*50px*/ +} + +.font42px { + font-size: 60px; + text-transform: uppercase; + line-height: 1.16em; + letter-spacing: 0.5px; +} + +.smallimg { + width: 60px; + margin-top: 10px; +} + +.lineheight23px { + line-height: 23px; +} + +.button_dl { + width: 138px; + height: 34px; + background: #000; + box-sizing: border-box; + display: inline-block; + font-size: 14px; + letter-spacing: 2.5px; + text-transform: uppercase; + color: #fff; + padding: 7px 10px; + text-align: center; + margin-bottom: 0px; + margin-top: 10px; + font-family: 'dinbold'; +} + + +/*--------------------------------------------------------------------------*/ + + +/* -------------------------- Reguläre Seite -------------------------------*/ + + +/*--------------------------------------------------------------------------*/ + + +/* Header und Nav */ + +.header { + position: fixed; + height: 80px; + width: 100%; + box-sizing: border-box; + padding-top: 12px; + top: 0; + left: 0; + background-color: #ffffff; + z-index: 1040; + -webkit-box-shadow: 0px 19px 15px -7px rgba(0, 0, 0, 0.27); + -moz-box-shadow: 0px 19px 15px -7px rgba(0, 0, 0, 0.27); + box-shadow: 0px 19px 15px -7px rgba(0, 0, 0, 0.27); +} + +@media (min-width: 1025px) { + .header { + height: 130px; + padding-top: 20px; + } +} + +.logos { + display: table; + float: left; + margin-top: -3px; +} + +.logo_sport { + width: 220px; + display: table-cell; + vertical-align: bottom; + padding-right: 25px; +} + +.logo_sport img { + width: 220px; + margin-top: 13px; +} + +.logo_ems { + display: table-cell; + vertical-align: bottom; +} + +.logo_ems img { + width: 43px; +} + +@media (min-width: 1025px) { + .logo_sport { + width: 350px; + } + .logo_sport img { + width: 350px; + height: 111px; + margin: 0; + } + .logo_ems { + width: 84px; + } + .logo_ems img { + width: 84px; + /*height: 76px;*/ + /*padding-bottom: 6px;*/ + } +} + +#nav_mob { + float: right; + position: relative; + margin-right: 10px; + margin-top: 20px; +} + +.contextmenu_trigger { + position: absolute; + right: 5px; + top: 0px; + width: 30px; +} + +.context_zie_open { + display: block; + position: absolute; + top: 40px; + right: -26px; + width: 100vw; + background-color: #000; + box-sizing: border-box; + padding: 15px; + -webkit-box-shadow: 0px 10px 21px -4px rgba(0, 0, 0, 0.75); + -moz-box-shadow: 0px 10px 21px -4px rgba(0, 0, 0, 0.75); + box-shadow: 0px 10px 21px -4px rgba(0, 0, 0, 0.75); +} + +ul.topnav_mob { + list-style-type: none; + text-align: right; + margin-top: 20px; + padding-right: 10px; + li { + a { + font-family: "dinlight"; + text-transform: uppercase; + color: #fff; + font-size: 20px; + line-height: 41px; + &:hover { + font-family: "dinlight"; + text-transform: uppercase; + color: #fff; + font-size: 20px; + line-height: 41px; + } + } + } +} + +.button_training_mob { + color: #ffffff; + background-color: #b72967; + width: 130px; + height: 38px; + line-height: 14px; + font-family: "SeroBold"; + font-size: 14px; + text-transform: uppercase; + box-sizing: border-box; + padding: 6px; + letter-spacing: 1px; + text-align: center; + float: right; + margin: 20px 0px 15px 0px; +} + +#nav_desk { + float: right; + display: none; +} + +@media (min-width: 768px) { + #nav_desk { + display: block; + } + #nav_mob { + display: none; + } +} + +ul.topnav_desk { + list-style-type: none; + margin-top: 20px; + /*margin-right: 40px;*/ + float: left; +} + +ul.topnav_desk li { + float: left; + /*margin-left: 28px;*/ + box-sizing: border-box; + height: 60px; + min-width: 130px; + position: relative; +} + +ul.topnav_desk li.unterst_special { + width: 190px; +} + +@media (max-width: 1024px) { + ul.topnav_desk li { + float: left; + /*margin-left: 28px;*/ + box-sizing: border-box; + height: 30px; + width: 130px; + position: relative; + } +} + +ul.topnav_desk li a { + font-family: "SeroBoldd"; + text-transform: uppercase; + color: #fff; + font-size: 16px; + letter-spacing: 2px; + box-sizing: border-box; + padding: 3px 13px 0px 13px; + display: block; + background: #000; + transition: all 0.1s linear 0s; + position: absolute; + bottom: 0; + left: 0; + border-top: 2px solid #000; +} + +ul.topnav_desk li a:last-child { + margin-right: 7px; +} + +ul.topnav_desk li a:hover { + /*background: #FEE006;*/ + background: #000; + color: #fff; + border-top: 10px solid #000; +} + +ul.topnav_desk li a.active_nav { + /*background: #FEE006;*/ + background: #000; + color: #fff; + border-top: 10px solid #000; +} + +.kontakt_training { + width: 130px; + float: right; + text-align: center; + margin-top: 12px; +} + +.kontakt_training a { + text-align: center; + font-family: "dinbold"; + font-size: 14px; + text-transform: uppercase; + letter-spacing: 1px; +} + +@media (min-width: 768px) { + ul.topnav_desk { + list-style-type: none; + margin-top: 11px; + /*margin-right: 40px;*/ + float: left; + } + ul.topnav_desk li a { + font-family: "dinbold"; + text-transform: uppercase; + color: #fff; + font-size: 14px; + } + .kontakt_training { + width: 130px; + float: right; + text-align: center; + margin-top: -10px; + } + .kontakt_training a { + text-align: center; + font-family: "dinbold"; + font-size: 12px; + line-height: 10px; + text-transform: uppercase; + letter-spacing: 1px; + } + .button_training { + color: #ffffff; + background-color: #b72967; + width: 130px; + height: 38px; + line-height: 14px; + font-family: "dinbold"; + font-size: 14px; + text-transform: uppercase; + box-sizing: border-box; + padding: 6px; + letter-spacing: 1px; + } +} + +@media (min-width: 1025px) { + ul.topnav_desk { + list-style-type: none; + margin-top: 13px; + /*margin-right: 40px;*/ + float: left; + } + ul.topnav_desk li a { + font-family: "dinbold"; + text-transform: uppercase; + color: #fff; + font-size: 17px; + padding-bottom: 4px; + } + .kontakt_training { + width: 130px; + float: right; + text-align: center; + margin-top: 30px; + } + .kontakt_training a { + text-align: center; + font-family: "dinbold"; + font-size: 14px; + text-transform: uppercase; + letter-spacing: 1px; + } + .button_training { + color: #ffffff; + background-color: #b72967; + width: 130px; + height: 47px; + line-height: 16px; + font-family: "dinbold"; + font-size: 14px; + text-transform: uppercase; + box-sizing: border-box; + padding: 9px; + letter-spacing: 1px; + } +} + +.content { + margin-top: 105px; +} + +@media (min-width: 1025px) { + .content { + margin-top: 180px; + } +} + + +/* -------------------- zentral hinterlegte Abstände ------------------------*/ + +.marg_top_medium { + margin-top: 40px; +} + +.marg_bottom_medium { + margin-bottom: 40px; +} + +@media (max-width: 767px) { + .marg_top_medium { + margin-top: 10px; + } + .marg_bottom_medium { + margin-bottom: 10px; + } +} + + +/*-------------------- Content ----------------------------------------------*/ + + +/* H's, P's*/ + +h1 { + font-family: 'dinlight'; + font-size: 14px; + letter-spacing: 7px; + margin-bottom: 20px; + font-weight: normal; + text-transform: uppercase; +} + +h2 { + font-family: 'dinlight'; + font-size: 60px; + /*line-height: 68px;*/ + line-height: 1.16em; + letter-spacing: 1px; + font-weight: normal; + text-transform: uppercase; + margin-bottom: 13px; +} + +.wrapper_reg p { + margin-bottom: 8px; +} + +p.smallregular { + margin-bottom: 0px; + line-height: 15px; +} + +.boldupper { + font-family: 'dinbold'; + font-size: 14px; + line-height: 16px; + letter-spacing: 1.5px; + font-weight: normal; + text-transform: uppercase; + display: inline-block; + margin-bottom: 3px; +} + +.smallregular { + font-family: 'dinlight'; + font-size: 19px; + line-height: 19px; + letter-spacing: 0px; + font-weight: normal; + display: inline-block; +} + +.smallupper { + font-family: 'dinlight'; + font-size: 14px; + line-height: 18px; + letter-spacing: 1px; + font-weight: normal; + text-transform: uppercase; + display: inline-block; +} + + +/* Content */ + +.wrapper_reg { + width: 100%; + font-family: 'dinlight'; + font-size: 20px; + line-height: 24px; +} + +.inner_wrap_full { + width: 100%; + box-sizing: border-box; +} + +.inner_wrap { + width: 100%; + box-sizing: border-box; + padding: 0px 15px; +} + +@media (min-width: 1150px) { + .inner_wrap, + .inner_wrap_full { + max-width: 1120px; + padding: 0; + margin: auto; + } +} + +.smaller_wrap { + padding: 0px 100px 0px 135px; +} + +@media (max-width: 1120px) { + .smaller_wrap { + padding: 10px 15px; + } +} + +.spacer { + margin-top: 120px; +} + + +/* Variable Spacer */ + +.spacer20 { + padding: 10px 0px; +} + +.spacer30 { + padding: 15px 0px; +} + +.spacer40 { + padding: 20px 0px; +} + +.spacer60 { + padding: 30px 0px; +} + +.spacer100 { + padding: 50px 0px; +} + +@media (max-width: 500px) { + .spacer20 { + padding: 20px 0px; + } + .spacer30 { + padding: 0px 0px; + } + .spacer40 { + padding: 0px 0px; + } + .spacer60 { + padding: 0px 0px; + } + .spacer100 { + padding: 0px 0px; + } +} + +.circle_grey { + box-sizing: border-box; + padding: 14px 0px 0px 0px; + min-height: 300px; + background: rgba(255, 255, 255, 1); + background: -moz-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 6%, rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 1) 38%, rgba(228, 229, 231, 1) 85%, rgba(228, 229, 231, 1) 100%); + background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(6%, rgba(255, 255, 255, 1)), color-stop(35%, rgba(255, 255, 255, 1)), color-stop(38%, rgba(255, 255, 255, 1)), color-stop(85%, rgba(228, 229, 231, 1)), color-stop(100%, rgba(228, 229, 231, 1))); + background: -webkit-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 6%, rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 1) 38%, rgba(228, 229, 231, 1) 85%, rgba(228, 229, 231, 1) 100%); + background: -o-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 6%, rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 1) 38%, rgba(228, 229, 231, 1) 85%, rgba(228, 229, 231, 1) 100%); + background: -ms-radial-gradient(center, ellipse cover, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 6%, rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 1) 38%, rgba(228, 229, 231, 1) 85%, rgba(228, 229, 231, 1) 100%); + background: radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 6%, rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 1) 38%, rgba(228, 229, 231, 1) 85%, rgba(228, 229, 231, 1) 100%); +} + +@media (max-width:529px) { + .circle_grey { + min-height: 420px; + } +} + + +/* ---- Footer --- */ + +.footer_logo { + float: left; + width: 200px; + box-sizing: border-box; + padding: 20px 0px; + margin-right: 50px; +} + +@media (max-width: 500px) { + .footer_logo { + display: none; + } +} + +.footer_arche { + float: left; + width: 200px; + box-sizing: border-box; + padding: 20px 0px; + margin-right: 50px; +} + +.footer_kontakt { + float: left; + width: 200px; + box-sizing: border-box; + padding: 20px 0px; + margin-right: 50px; +} + +.footer_impressum { + float: left; + width: 200px; + box-sizing: border-box; + padding: 20px 0px; + margin-right: 50px; +} + +@media (max-width: 529px) { + .footer_arche { + float: left; + width: 200px; + box-sizing: border-box; + padding: 10px 0px; + margin-right: 50px; + } + .footer_kontakt { + float: left; + width: 200px; + box-sizing: border-box; + padding: 10px 0px; + margin-right: 50px; + } + .footer_impressum { + float: left; + width: 200px; + box-sizing: border-box; + padding: 10px 0px; + margin-right: 50px; + } +} + + +/* Canvas */ + +.canv_desk { + display: block; +} + +.canv_mob { + display: none; +} + +.desk_only { + display: block; +} + +.mob_only { + display: none; +} + +@media (max-width: 1023px) { + .canv_desk { + display: none; + } + .canv_mob { + display: block; + } + .desk_only { + display: none; + } + .mob_only { + display: block; + } +} + +canvas { + /*position: absolute; + left: 10%; + top: 12%;*/ + width: 1024px; + height: 682px; + margin: auto; + /*cursor: pointer;*/ + overflow: hidden; +} + +#donations { + width: 100%; +} + +#canv { + width: 1024px; + height: 682px; + z-index: 2; + background-image: url('../media/spiegelarche_-1px.jpg'); + background-repeat: no-repeat; + background-size: contain; +} + +#textbox { + position: absolute; + width: 260px; + box-sizing: border-box; + padding: 20px; + background: #fff; + font-size: 16px; + -webkit-box-shadow: 12px 15px 23px -6px rgba(0, 0, 0, 0.31); + -moz-box-shadow: 12px 15px 23px -6px rgba(0, 0, 0, 0.31); + box-shadow: 12px 15px 23px -6px rgba(0, 0, 0, 0.31); +} + +#paypal_don { + position: absolute; + top: calc(50% - 100px); + left: calc(50% - 130px); + width: 260px; + box-sizing: border-box; + padding: 20px; + background: #fff; + text-align: center; + -webkit-box-shadow: 12px 15px 23px -6px rgba(0, 0, 0, 0.31); + -moz-box-shadow: 12px 15px 23px -6px rgba(0, 0, 0, 0.31); + box-shadow: 12px 15px 23px -6px rgba(0, 0, 0, 0.31); +} + + +/* lightslider */ + +.plusicon { + position: absolute; + top: calc(50% + 10px); + left: calc(50% - 35px); + width: 70px; + height: 70px; + cursor: pointer; + transition: all 0.1s linear 0s; +} + +@media (max-width: 590px) { + .plusicon { + position: absolute; + top: calc(50% + 15px); + left: calc(50% - 25px); + width: 50px; + height: 50px; + cursor: pointer; + transition: all 0.1s linear 0s; + } +} + +.hover_img { + position: absolute; + width: 340px; + top: 0; + left: 0; + height: 100%; + cursor: pointer; + opacity: 0; + background-color: #ffffff; + transition: all 0.1s linear 0s; +} + +.hover_img:hover { + opacity: 0.3; +} + + +/*-------------------- Back to top ------------------------------------------*/ + +.back-to-top { + position: fixed; + right: 0; + bottom: 40px; + display: none; + z-index: 1000; + -webkit-box-shadow: 12px 15px 23px -6px rgba(0, 0, 0, 0.31); + -moz-box-shadow: 12px 15px 23px -6px rgba(0, 0, 0, 0.31); + box-shadow: 12px 15px 23px -6px rgba(0, 0, 0, 0.31); + /*background: #b72967;*/ + background: #000; + cursor: pointer; + width: 80px; + height: 37px; + box-sizing: border-box; + padding: 6px 20px; + transition: all 0.1s linear 0s; +} + +.back-to-top:hover { + transform: scale(1.1); +} + +@media (min-width: 1120px) { + .back-to-top { + right: calc(50% - 560px); + } +} + +@media (max-width: 500px) { + .back-to-top { + bottom: 0; + } +} + +.foot_kontakt { + position: fixed; + z-index: 1000; + /*right: 100px;*/ + right: calc(50% - 100px); + bottom: 0px; + width: 200px; + height: 60px; + background: #000; + text-transform: uppercase; + text-align: center; + box-sizing: border-box; + padding: 13px 0px; + cursor: pointer; + -webkit-box-shadow: 12px 15px 23px -6px rgba(0, 0, 0, 0.6); + -moz-box-shadow: 12px 15px 23px -6px rgba(0, 0, 0, 0.6); + box-shadow: 12px 15px 23px -6px rgba(0, 0, 0, 0.6); +} + +.foot_unterst { + position: fixed; + z-index: 1000; + /*right: 100px;*/ + right: calc(50% - 100px); + bottom: 70px; + width: 200px; + height: 42px; + background: #00ddf7; + text-transform: uppercase; + text-align: center; + box-sizing: border-box; + padding: 9px 0px; + cursor: pointer; + -webkit-box-shadow: 12px 15px 23px -6px rgba(0, 0, 0, 0.6); + -moz-box-shadow: 12px 15px 23px -6px rgba(0, 0, 0, 0.6); + box-shadow: 12px 15px 23px -6px rgba(0, 0, 0, 0.6); +} + +@media (max-width: 500px) { + .foot_unterst { + bottom: 50px; + } +} + +a .foot_kontakt:hover p, +a .foot_unterst:hover p { + transform: scale(1.1); +} + +a .foot_unterst p { + font-family: 'dinbold'; + font-size: 13px; + letter-spacing: 3px; + color: #fff; + transition: all 0.1s linear 0s; +} + +a .foot_kontakt p { + font-family: 'dinbold'; + font-size: 17px; + letter-spacing: 2px; + color: #fff; + transition: all 0.1s linear 0s; +} + +@media (max-width: 500px) { + .foot_kontakt { + right: calc(50% - 70px); + bottom: 0px; + width: 140px; + height: 40px; + padding: 5px 0px; + } + a .foot_kontakt p { + font-size: 15px; + } +} + +.bg-graphics { + background-image: url('../media/outline-spiegelarche.svg'); + background-size: contain; + background-position: bottom left; + min-height: 80vh; + background-repeat: no-repeat; +} + +.button_mail { + width: 138px; + height: 34px; + background: #000; + box-sizing: border-box; + display: inline-block; + font-size: 14px; + letter-spacing: 2.5px; + text-transform: uppercase; + color: #fff; + padding: 7px 10px; + text-align: center; + margin-bottom: 0px; + margin-top: 10px; + color: #fff; + font-family: 'dinbold'; + letter-spacing: 2px; + font-size: 14px; +} + + +/* Gallery show all */ + +.gal_box { + width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.flex_gal { + flex: 0 1 340px; + background-color: #fff; + /*height: 275px;*/ + margin: 25px 0px; + position: relative; + box-sizing: border-box; + cursor: pointer; + transition: all 0.3s linear 0s; +} + +@media (max-width: 709px) { + .flex_gal { + flex: 0 1 163px; + background-color: #fff; + /*height: 275px;*/ + /*margin: 25px auto;*/ + position: relative; + box-sizing: border-box; + cursor: pointer; + transition: all 0.3s linear 0s; + } + .flex_gal .hover_img { + position: absolute; + width: 163px; + top: 0; + left: 0; + height: 100%; + cursor: pointer; + opacity: 0; + background-color: #ffffff; + transition: all 0.1s linear 0s; + } + .flex_gal .hover_img:hover { + opacity: 0.3; + } + .flex_gal .plusicon { + position: absolute; + top: calc(50% + 20px); + left: calc(50% - 25px); + width: 50px; + height: 50px; + cursor: pointer; + transition: all 0.1s linear 0s; + } +} + +.abst_nach_oben { + margin-top: 60px; +} + +@media (max-width: 767px) { + .abst_nach_oben { + margin-top: 10px; + } +} \ No newline at end of file diff --git a/Packages/gruener-salon/sass/includes/_fonts.scss b/Packages/gruener-salon/sass/includes/_fonts.scss new file mode 100644 index 0000000..10822b3 --- /dev/null +++ b/Packages/gruener-salon/sass/includes/_fonts.scss @@ -0,0 +1,36 @@ +/* ------------------ font-face-Deklarationen ------------------------------- */ + + +/* DIN light und bold */ + +@font-face { + font-family: 'dinlight'; + src: url('fonts/e39ef3e7-91b2-45d0-8c2f-cfdcd0c0ab94.woff2') format('woff2'), url('fonts/25df6f92-ec41-4f60-91af-bddc19a3adc2.eot?#iefix') format('eot'); +} + +@font-face { + font-family: 'dinregular'; + src: url('fonts/6ceed230-b2b3-4422-b048-4aa11687430a.woff2') format('woff2'), url('fonts/9b63158c-0e74-4751-966c-d749c5d31cce.eot?#iefix') format('eot'); +} + +@font-face { + font-family: 'dinmedium'; + src: url('fonts/398e3e8c-3bf0-4af1-9791-f426a7992711.woff2') format('woff2'), url('fonts/90744ee6-df8b-4daf-924d-e84a33fa139c.eot?#iefix') format('eot'); +} + +@font-face { + font-family: 'dinbold'; + src: url('fonts/55fa1cf8-baf8-4bf8-9718-b096b1dd231f.woff2') format('woff2'), url('fonts/9cab3d10-a1a9-4145-ab8a-cde6265a011d.eot?#iefix') format('eot'); +} + + +/*------------- Schriftauszeichnungen ---------------------------------------*/ + +body { + font-family: 'dinlight'; +} + +strong { + font-family: 'dinbold'; + font-weight: normal; +} \ No newline at end of file diff --git a/Packages/gruener-salon/sass/includes/app.scss b/Packages/gruener-salon/sass/includes/app.scss index 5202898..e69de29 100644 --- a/Packages/gruener-salon/sass/includes/app.scss +++ b/Packages/gruener-salon/sass/includes/app.scss @@ -1,3 +0,0 @@ -.myclass { - background-color: green; -} \ No newline at end of file diff --git a/Packages/gruener-salon/sass/includes/base.scss b/Packages/gruener-salon/sass/includes/base.scss new file mode 100644 index 0000000..3748ec4 --- /dev/null +++ b/Packages/gruener-salon/sass/includes/base.scss @@ -0,0 +1 @@ +@import 'fonts'; \ No newline at end of file diff --git a/Packages/gruener-salon/sass/includes/underscores.scss b/Packages/gruener-salon/sass/includes/underscores.scss new file mode 100644 index 0000000..5764248 --- /dev/null +++ b/Packages/gruener-salon/sass/includes/underscores.scss @@ -0,0 +1,1085 @@ +/*! +Theme Name: gruener-salon +Theme URI: http://underscores.me/ +Author: Underscores.me +Author URI: http://underscores.me/ +Description: Description +Version: 1.0.0 +Tested up to: 5.4 +Requires PHP: 5.6 +License: GNU General Public License v2 or later +License URI: LICENSE +Text Domain: gruener-salon +Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready + +This theme, like WordPress, is licensed under the GPL. +Use it to make something cool, have fun, and share what you've learned. + +gruener-salon is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. +Underscores is distributed under the terms of the GNU GPL v2 or later. + +Normalizing styles have been helped along thanks to the fine work of +Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ +*/ + + +/*-------------------------------------------------------------- +>>> TABLE OF CONTENTS: +---------------------------------------------------------------- +# Generic + - Normalize + - Box sizing +# Base + - Typography + - Elements + - Links + - Forms +## Layouts +# Components + - Navigation + - Posts and pages + - Comments + - Widgets + - Media + - Captions + - Galleries +# plugins + - Jetpack infinite scroll +# Utilities + - Accessibility + - Alignments + +--------------------------------------------------------------*/ + + +/*-------------------------------------------------------------- +# Generic +--------------------------------------------------------------*/ + + +/* Normalize +--------------------------------------------- */ + + +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + + +/* Document + ========================================================================== */ + + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; + -webkit-text-size-adjust: 100%; +} + + +/* Sections + ========================================================================== */ + + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + + +/* Grouping content + ========================================================================== */ + + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; + height: 0; + overflow: visible; +} + + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; + font-size: 1em; +} + + +/* Text-level semantics + ========================================================================== */ + + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; + text-decoration: underline; + text-decoration: underline dotted; +} + + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + + +/* Embedded content + ========================================================================== */ + + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + + +/* Forms + ========================================================================== */ + + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + font-size: 100%; + line-height: 1.15; + margin: 0; +} + + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { + overflow: visible; +} + + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { + text-transform: none; +} + + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; + color: inherit; + display: table; + max-width: 100%; + padding: 0; + white-space: normal; +} + + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; + padding: 0; +} + + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; + outline-offset: -2px; +} + + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; +} + + +/* Interactive + ========================================================================== */ + + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + + +/* Misc + ========================================================================== */ + + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} + + +/* Box sizing +--------------------------------------------- */ + + +/* Inherit box-sizing to more easily change it's value on a component level. +@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ + +*, +*::before, +*::after { + box-sizing: inherit; +} + +html { + box-sizing: border-box; +} + + +/*-------------------------------------------------------------- +# Base +--------------------------------------------------------------*/ + + +/* Typography +--------------------------------------------- */ + +body, +button, +input, +select, +optgroup, +textarea { + color: #404040; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-size: 1rem; + line-height: 1.5; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + clear: both; +} + +p { + margin-bottom: 1.5em; +} + +dfn, +cite, +em, +i { + font-style: italic; +} + +blockquote { + margin: 0 1.5em; +} + +address { + margin: 0 0 1.5em; +} + +pre { + background: #eee; + font-family: "Courier 10 Pitch", courier, monospace; + line-height: 1.6; + margin-bottom: 1.6em; + max-width: 100%; + overflow: auto; + padding: 1.6em; +} + +code, +kbd, +tt, +var { + font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace; +} + +abbr, +acronym { + border-bottom: 1px dotted #666; + cursor: help; +} + +mark, +ins { + background: #fff9c0; + text-decoration: none; +} + +big { + font-size: 125%; +} + + +/* Elements +--------------------------------------------- */ + +body { + background: #fff; +} + +hr { + background-color: #ccc; + border: 0; + height: 1px; + margin-bottom: 1.5em; +} + +ul, +ol { + margin: 0 0 1.5em 3em; +} + +ul { + list-style: disc; +} + +ol { + list-style: decimal; +} + +li>ul, +li>ol { + margin-bottom: 0; + margin-left: 1.5em; +} + +dt { + font-weight: 700; +} + +dd { + margin: 0 1.5em 1.5em; +} + + +/* Make sure embeds and iframes fit their containers. */ + +embed, +iframe, +object { + max-width: 100%; +} + +img { + height: auto; + max-width: 100%; +} + +figure { + margin: 1em 0; +} + +table { + margin: 0 0 1.5em; + width: 100%; +} + + +/* Links +--------------------------------------------- */ + +a { + color: #4169e1; +} + +a:visited { + color: #800080; +} + +a:hover, +a:focus, +a:active { + color: #191970; +} + +a:focus { + outline: thin dotted; +} + +a:hover, +a:active { + outline: 0; +} + + +/* Forms +--------------------------------------------- */ + +button, +input[type="button"], +input[type="reset"], +input[type="submit"] { + border: 1px solid; + border-color: #ccc #ccc #bbb; + border-radius: 3px; + background: #e6e6e6; + color: rgba(0, 0, 0, 0.8); + line-height: 1; + padding: 0.6em 1em 0.4em; +} + +button:hover, +input[type="button"]:hover, +input[type="reset"]:hover, +input[type="submit"]:hover { + border-color: #ccc #bbb #aaa; +} + +button:active, +button:focus, +input[type="button"]:active, +input[type="button"]:focus, +input[type="reset"]:active, +input[type="reset"]:focus, +input[type="submit"]:active, +input[type="submit"]:focus { + border-color: #aaa #bbb #bbb; +} + +input[type="text"], +input[type="email"], +input[type="url"], +input[type="password"], +input[type="search"], +input[type="number"], +input[type="tel"], +input[type="range"], +input[type="date"], +input[type="month"], +input[type="week"], +input[type="time"], +input[type="datetime"], +input[type="datetime-local"], +input[type="color"], +textarea { + color: #666; + border: 1px solid #ccc; + border-radius: 3px; + padding: 3px; +} + +input[type="text"]:focus, +input[type="email"]:focus, +input[type="url"]:focus, +input[type="password"]:focus, +input[type="search"]:focus, +input[type="number"]:focus, +input[type="tel"]:focus, +input[type="range"]:focus, +input[type="date"]:focus, +input[type="month"]:focus, +input[type="week"]:focus, +input[type="time"]:focus, +input[type="datetime"]:focus, +input[type="datetime-local"]:focus, +input[type="color"]:focus, +textarea:focus { + color: #111; +} + +select { + border: 1px solid #ccc; +} + +textarea { + width: 100%; +} + + +/*-------------------------------------------------------------- +# Layouts +--------------------------------------------------------------*/ + + +/*-------------------------------------------------------------- +# Components +--------------------------------------------------------------*/ + + +/* Navigation +--------------------------------------------- */ + +.main-navigation { + display: block; + width: 100%; +} + +.main-navigation ul { + display: none; + list-style: none; + margin: 0; + padding-left: 0; +} + +.main-navigation ul ul { + box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); + float: left; + position: absolute; + top: 100%; + left: -999em; + z-index: 99999; +} + +.main-navigation ul ul ul { + left: -999em; + top: 0; +} + +.main-navigation ul ul li:hover>ul, +.main-navigation ul ul li.focus>ul { + display: block; + left: auto; +} + +.main-navigation ul ul a { + width: 200px; +} + +.main-navigation ul li:hover>ul, +.main-navigation ul li.focus>ul { + left: auto; +} + +.main-navigation li { + position: relative; +} + +.main-navigation a { + display: block; + text-decoration: none; +} + + +/* Small menu. */ + +.menu-toggle, +.main-navigation.toggled ul { + display: block; +} + +@media screen and (min-width: 37.5em) { + .menu-toggle { + display: none; + } + .main-navigation ul { + display: flex; + } +} + +.site-main .comment-navigation, +.site-main .posts-navigation, +.site-main .post-navigation { + margin: 0 0 1.5em; +} + +.comment-navigation .nav-links, +.posts-navigation .nav-links, +.post-navigation .nav-links { + display: flex; +} + +.comment-navigation .nav-previous, +.posts-navigation .nav-previous, +.post-navigation .nav-previous { + flex: 1 0 50%; +} + +.comment-navigation .nav-next, +.posts-navigation .nav-next, +.post-navigation .nav-next { + text-align: end; + flex: 1 0 50%; +} + + +/* Posts and pages +--------------------------------------------- */ + +.sticky { + display: block; +} + +.post, +.page { + margin: 0 0 1.5em; +} + +.updated:not(.published) { + display: none; +} + +.page-content, +.entry-content, +.entry-summary { + margin: 1.5em 0 0; +} + +.page-links { + clear: both; + margin: 0 0 1.5em; +} + + +/* Comments +--------------------------------------------- */ + +.comment-content a { + word-wrap: break-word; +} + +.bypostauthor { + display: block; +} + + +/* Widgets +--------------------------------------------- */ + +.widget { + margin: 0 0 1.5em; +} + +.widget select { + max-width: 100%; +} + + +/* Media +--------------------------------------------- */ + +.page-content .wp-smiley, +.entry-content .wp-smiley, +.comment-content .wp-smiley { + border: none; + margin-bottom: 0; + margin-top: 0; + padding: 0; +} + + +/* Make sure logo link wraps around logo image. */ + +.custom-logo-link { + display: inline-block; +} + + +/* Captions +--------------------------------------------- */ + +.wp-caption { + margin-bottom: 1.5em; + max-width: 100%; +} + +.wp-caption img[class*="wp-image-"] { + display: block; + margin-left: auto; + margin-right: auto; +} + +.wp-caption .wp-caption-text { + margin: 0.8075em 0; +} + +.wp-caption-text { + text-align: center; +} + + +/* Galleries +--------------------------------------------- */ + +.gallery { + margin-bottom: 1.5em; + display: grid; + grid-gap: 1.5em; +} + +.gallery-item { + display: inline-block; + text-align: center; + width: 100%; +} + +.gallery-columns-2 { + grid-template-columns: repeat(2, 1fr); +} + +.gallery-columns-3 { + grid-template-columns: repeat(3, 1fr); +} + +.gallery-columns-4 { + grid-template-columns: repeat(4, 1fr); +} + +.gallery-columns-5 { + grid-template-columns: repeat(5, 1fr); +} + +.gallery-columns-6 { + grid-template-columns: repeat(6, 1fr); +} + +.gallery-columns-7 { + grid-template-columns: repeat(7, 1fr); +} + +.gallery-columns-8 { + grid-template-columns: repeat(8, 1fr); +} + +.gallery-columns-9 { + grid-template-columns: repeat(9, 1fr); +} + +.gallery-caption { + display: block; +} + + +/*-------------------------------------------------------------- +# Plugins +--------------------------------------------------------------*/ + + +/* Jetpack infinite scroll +--------------------------------------------- */ + + +/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */ + +.infinite-scroll .posts-navigation, +.infinite-scroll.neverending .site-footer { + display: none; +} + + +/* Re-display the Theme Footer when Infinite Scroll has reached its end. */ + +.infinity-end.neverending .site-footer { + display: block; +} + + +/*-------------------------------------------------------------- +# Utilities +--------------------------------------------------------------*/ + + +/* Accessibility +--------------------------------------------- */ + + +/* Text meant only for screen readers. */ + +.screen-reader-text { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute !important; + width: 1px; + word-wrap: normal !important; +} + +.screen-reader-text:focus { + background-color: #f1f1f1; + border-radius: 3px; + box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); + clip: auto !important; + clip-path: none; + color: #21759b; + display: block; + font-size: 0.875rem; + font-weight: 700; + height: auto; + left: 5px; + line-height: normal; + padding: 15px 23px 14px; + text-decoration: none; + top: 5px; + width: auto; + z-index: 100000; +} + + +/* Do not show the outline on the skip link target. */ + +#primary[tabindex="-1"]:focus { + outline: 0; +} + + +/* Alignments +--------------------------------------------- */ + +.alignleft { + /*rtl:ignore*/ + float: left; + /*rtl:ignore*/ + margin-right: 1.5em; + margin-bottom: 1.5em; +} + +.alignright { + /*rtl:ignore*/ + float: right; + /*rtl:ignore*/ + margin-left: 1.5em; + margin-bottom: 1.5em; +} + +.aligncenter { + clear: both; + display: block; + margin-left: auto; + margin-right: auto; + margin-bottom: 1.5em; +} \ No newline at end of file diff --git a/Packages/gruener-salon/sass/style.scss b/Packages/gruener-salon/sass/style.scss index 5099ba5..45622dd 100644 --- a/Packages/gruener-salon/sass/style.scss +++ b/Packages/gruener-salon/sass/style.scss @@ -1,1087 +1,2 @@ -@import './includes/app.scss'; - -/*! -Theme Name: gruener-salon -Theme URI: http://underscores.me/ -Author: Underscores.me -Author URI: http://underscores.me/ -Description: Description -Version: 1.0.0 -Tested up to: 5.4 -Requires PHP: 5.6 -License: GNU General Public License v2 or later -License URI: LICENSE -Text Domain: gruener-salon -Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready - -This theme, like WordPress, is licensed under the GPL. -Use it to make something cool, have fun, and share what you've learned. - -gruener-salon is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. -Underscores is distributed under the terms of the GNU GPL v2 or later. - -Normalizing styles have been helped along thanks to the fine work of -Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ -*/ - - -/*-------------------------------------------------------------- ->>> TABLE OF CONTENTS: ----------------------------------------------------------------- -# Generic - - Normalize - - Box sizing -# Base - - Typography - - Elements - - Links - - Forms -## Layouts -# Components - - Navigation - - Posts and pages - - Comments - - Widgets - - Media - - Captions - - Galleries -# plugins - - Jetpack infinite scroll -# Utilities - - Accessibility - - Alignments - ---------------------------------------------------------------*/ - - -/*-------------------------------------------------------------- -# Generic ---------------------------------------------------------------*/ - - -/* Normalize ---------------------------------------------- */ - - -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ - - -/* Document - ========================================================================== */ - - -/** - * 1. Correct the line height in all browsers. - * 2. Prevent adjustments of font size after orientation changes in iOS. - */ - -html { - line-height: 1.15; - -webkit-text-size-adjust: 100%; -} - - -/* Sections - ========================================================================== */ - - -/** - * Remove the margin in all browsers. - */ - -body { - margin: 0; -} - - -/** - * Render the `main` element consistently in IE. - */ - -main { - display: block; -} - - -/** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - - -/* Grouping content - ========================================================================== */ - - -/** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ - -hr { - box-sizing: content-box; - height: 0; - overflow: visible; -} - - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -pre { - font-family: monospace, monospace; - font-size: 1em; -} - - -/* Text-level semantics - ========================================================================== */ - - -/** - * Remove the gray background on active links in IE 10. - */ - -a { - background-color: transparent; -} - - -/** - * 1. Remove the bottom border in Chrome 57- - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. - */ - -abbr[title] { - border-bottom: none; - text-decoration: underline; - text-decoration: underline dotted; -} - - -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ - -b, -strong { - font-weight: bolder; -} - - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -code, -kbd, -samp { - font-family: monospace, monospace; - font-size: 1em; -} - - -/** - * Add the correct font size in all browsers. - */ - -small { - font-size: 80%; -} - - -/** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - - -/* Embedded content - ========================================================================== */ - - -/** - * Remove the border on images inside links in IE 10. - */ - -img { - border-style: none; -} - - -/* Forms - ========================================================================== */ - - -/** - * 1. Change the font styles in all browsers. - * 2. Remove the margin in Firefox and Safari. - */ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - font-size: 100%; - line-height: 1.15; - margin: 0; -} - - -/** - * Show the overflow in IE. - * 1. Show the overflow in Edge. - */ - -button, -input { - overflow: visible; -} - - -/** - * Remove the inheritance of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritance of text transform in Firefox. - */ - -button, -select { - text-transform: none; -} - - -/** - * Correct the inability to style clickable types in iOS and Safari. - */ - -button, -[type="button"], -[type="reset"], -[type="submit"] { - -webkit-appearance: button; -} - - -/** - * Remove the inner border and padding in Firefox. - */ - -button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { - border-style: none; - padding: 0; -} - - -/** - * Restore the focus styles unset by the previous rule. - */ - -button:-moz-focusring, -[type="button"]:-moz-focusring, -[type="reset"]:-moz-focusring, -[type="submit"]:-moz-focusring { - outline: 1px dotted ButtonText; -} - - -/** - * Correct the padding in Firefox. - */ - -fieldset { - padding: 0.35em 0.75em 0.625em; -} - - -/** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ - -legend { - box-sizing: border-box; - color: inherit; - display: table; - max-width: 100%; - padding: 0; - white-space: normal; -} - - -/** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ - -progress { - vertical-align: baseline; -} - - -/** - * Remove the default vertical scrollbar in IE 10+. - */ - -textarea { - overflow: auto; -} - - -/** - * 1. Add the correct box sizing in IE 10. - * 2. Remove the padding in IE 10. - */ - -[type="checkbox"], -[type="radio"] { - box-sizing: border-box; - padding: 0; -} - - -/** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ - -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { - height: auto; -} - - -/** - * 1. Correct the odd appearance in Chrome and Safari. - * 2. Correct the outline style in Safari. - */ - -[type="search"] { - -webkit-appearance: textfield; - outline-offset: -2px; -} - - -/** - * Remove the inner padding in Chrome and Safari on macOS. - */ - -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - - -/** - * 1. Correct the inability to style clickable types in iOS and Safari. - * 2. Change font properties to `inherit` in Safari. - */ - -::-webkit-file-upload-button { - -webkit-appearance: button; - font: inherit; -} - - -/* Interactive - ========================================================================== */ - - -/* - * Add the correct display in Edge, IE 10+, and Firefox. - */ - -details { - display: block; -} - - -/* - * Add the correct display in all browsers. - */ - -summary { - display: list-item; -} - - -/* Misc - ========================================================================== */ - - -/** - * Add the correct display in IE 10+. - */ - -template { - display: none; -} - - -/** - * Add the correct display in IE 10. - */ - -[hidden] { - display: none; -} - - -/* Box sizing ---------------------------------------------- */ - - -/* Inherit box-sizing to more easily change it's value on a component level. -@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ - -*, -*::before, -*::after { - box-sizing: inherit; -} - -html { - box-sizing: border-box; -} - - -/*-------------------------------------------------------------- -# Base ---------------------------------------------------------------*/ - - -/* Typography ---------------------------------------------- */ - -body, -button, -input, -select, -optgroup, -textarea { - color: #404040; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 1rem; - line-height: 1.5; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - clear: both; -} - -p { - margin-bottom: 1.5em; -} - -dfn, -cite, -em, -i { - font-style: italic; -} - -blockquote { - margin: 0 1.5em; -} - -address { - margin: 0 0 1.5em; -} - -pre { - background: #eee; - font-family: "Courier 10 Pitch", courier, monospace; - line-height: 1.6; - margin-bottom: 1.6em; - max-width: 100%; - overflow: auto; - padding: 1.6em; -} - -code, -kbd, -tt, -var { - font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace; -} - -abbr, -acronym { - border-bottom: 1px dotted #666; - cursor: help; -} - -mark, -ins { - background: #fff9c0; - text-decoration: none; -} - -big { - font-size: 125%; -} - - -/* Elements ---------------------------------------------- */ - -body { - background: #fff; -} - -hr { - background-color: #ccc; - border: 0; - height: 1px; - margin-bottom: 1.5em; -} - -ul, -ol { - margin: 0 0 1.5em 3em; -} - -ul { - list-style: disc; -} - -ol { - list-style: decimal; -} - -li>ul, -li>ol { - margin-bottom: 0; - margin-left: 1.5em; -} - -dt { - font-weight: 700; -} - -dd { - margin: 0 1.5em 1.5em; -} - - -/* Make sure embeds and iframes fit their containers. */ - -embed, -iframe, -object { - max-width: 100%; -} - -img { - height: auto; - max-width: 100%; -} - -figure { - margin: 1em 0; -} - -table { - margin: 0 0 1.5em; - width: 100%; -} - - -/* Links ---------------------------------------------- */ - -a { - color: #4169e1; -} - -a:visited { - color: #800080; -} - -a:hover, -a:focus, -a:active { - color: #191970; -} - -a:focus { - outline: thin dotted; -} - -a:hover, -a:active { - outline: 0; -} - - -/* Forms ---------------------------------------------- */ - -button, -input[type="button"], -input[type="reset"], -input[type="submit"] { - border: 1px solid; - border-color: #ccc #ccc #bbb; - border-radius: 3px; - background: #e6e6e6; - color: rgba(0, 0, 0, 0.8); - line-height: 1; - padding: 0.6em 1em 0.4em; -} - -button:hover, -input[type="button"]:hover, -input[type="reset"]:hover, -input[type="submit"]:hover { - border-color: #ccc #bbb #aaa; -} - -button:active, -button:focus, -input[type="button"]:active, -input[type="button"]:focus, -input[type="reset"]:active, -input[type="reset"]:focus, -input[type="submit"]:active, -input[type="submit"]:focus { - border-color: #aaa #bbb #bbb; -} - -input[type="text"], -input[type="email"], -input[type="url"], -input[type="password"], -input[type="search"], -input[type="number"], -input[type="tel"], -input[type="range"], -input[type="date"], -input[type="month"], -input[type="week"], -input[type="time"], -input[type="datetime"], -input[type="datetime-local"], -input[type="color"], -textarea { - color: #666; - border: 1px solid #ccc; - border-radius: 3px; - padding: 3px; -} - -input[type="text"]:focus, -input[type="email"]:focus, -input[type="url"]:focus, -input[type="password"]:focus, -input[type="search"]:focus, -input[type="number"]:focus, -input[type="tel"]:focus, -input[type="range"]:focus, -input[type="date"]:focus, -input[type="month"]:focus, -input[type="week"]:focus, -input[type="time"]:focus, -input[type="datetime"]:focus, -input[type="datetime-local"]:focus, -input[type="color"]:focus, -textarea:focus { - color: #111; -} - -select { - border: 1px solid #ccc; -} - -textarea { - width: 100%; -} - - -/*-------------------------------------------------------------- -# Layouts ---------------------------------------------------------------*/ - - -/*-------------------------------------------------------------- -# Components ---------------------------------------------------------------*/ - - -/* Navigation ---------------------------------------------- */ - -.main-navigation { - display: block; - width: 100%; -} - -.main-navigation ul { - display: none; - list-style: none; - margin: 0; - padding-left: 0; -} - -.main-navigation ul ul { - box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); - float: left; - position: absolute; - top: 100%; - left: -999em; - z-index: 99999; -} - -.main-navigation ul ul ul { - left: -999em; - top: 0; -} - -.main-navigation ul ul li:hover>ul, -.main-navigation ul ul li.focus>ul { - display: block; - left: auto; -} - -.main-navigation ul ul a { - width: 200px; -} - -.main-navigation ul li:hover>ul, -.main-navigation ul li.focus>ul { - left: auto; -} - -.main-navigation li { - position: relative; -} - -.main-navigation a { - display: block; - text-decoration: none; -} - - -/* Small menu. */ - -.menu-toggle, -.main-navigation.toggled ul { - display: block; -} - -@media screen and (min-width: 37.5em) { - .menu-toggle { - display: none; - } - .main-navigation ul { - display: flex; - } -} - -.site-main .comment-navigation, -.site-main .posts-navigation, -.site-main .post-navigation { - margin: 0 0 1.5em; -} - -.comment-navigation .nav-links, -.posts-navigation .nav-links, -.post-navigation .nav-links { - display: flex; -} - -.comment-navigation .nav-previous, -.posts-navigation .nav-previous, -.post-navigation .nav-previous { - flex: 1 0 50%; -} - -.comment-navigation .nav-next, -.posts-navigation .nav-next, -.post-navigation .nav-next { - text-align: end; - flex: 1 0 50%; -} - - -/* Posts and pages ---------------------------------------------- */ - -.sticky { - display: block; -} - -.post, -.page { - margin: 0 0 1.5em; -} - -.updated:not(.published) { - display: none; -} - -.page-content, -.entry-content, -.entry-summary { - margin: 1.5em 0 0; -} - -.page-links { - clear: both; - margin: 0 0 1.5em; -} - - -/* Comments ---------------------------------------------- */ - -.comment-content a { - word-wrap: break-word; -} - -.bypostauthor { - display: block; -} - - -/* Widgets ---------------------------------------------- */ - -.widget { - margin: 0 0 1.5em; -} - -.widget select { - max-width: 100%; -} - - -/* Media ---------------------------------------------- */ - -.page-content .wp-smiley, -.entry-content .wp-smiley, -.comment-content .wp-smiley { - border: none; - margin-bottom: 0; - margin-top: 0; - padding: 0; -} - - -/* Make sure logo link wraps around logo image. */ - -.custom-logo-link { - display: inline-block; -} - - -/* Captions ---------------------------------------------- */ - -.wp-caption { - margin-bottom: 1.5em; - max-width: 100%; -} - -.wp-caption img[class*="wp-image-"] { - display: block; - margin-left: auto; - margin-right: auto; -} - -.wp-caption .wp-caption-text { - margin: 0.8075em 0; -} - -.wp-caption-text { - text-align: center; -} - - -/* Galleries ---------------------------------------------- */ - -.gallery { - margin-bottom: 1.5em; - display: grid; - grid-gap: 1.5em; -} - -.gallery-item { - display: inline-block; - text-align: center; - width: 100%; -} - -.gallery-columns-2 { - grid-template-columns: repeat(2, 1fr); -} - -.gallery-columns-3 { - grid-template-columns: repeat(3, 1fr); -} - -.gallery-columns-4 { - grid-template-columns: repeat(4, 1fr); -} - -.gallery-columns-5 { - grid-template-columns: repeat(5, 1fr); -} - -.gallery-columns-6 { - grid-template-columns: repeat(6, 1fr); -} - -.gallery-columns-7 { - grid-template-columns: repeat(7, 1fr); -} - -.gallery-columns-8 { - grid-template-columns: repeat(8, 1fr); -} - -.gallery-columns-9 { - grid-template-columns: repeat(9, 1fr); -} - -.gallery-caption { - display: block; -} - - -/*-------------------------------------------------------------- -# Plugins ---------------------------------------------------------------*/ - - -/* Jetpack infinite scroll ---------------------------------------------- */ - - -/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */ - -.infinite-scroll .posts-navigation, -.infinite-scroll.neverending .site-footer { - display: none; -} - - -/* Re-display the Theme Footer when Infinite Scroll has reached its end. */ - -.infinity-end.neverending .site-footer { - display: block; -} - - -/*-------------------------------------------------------------- -# Utilities ---------------------------------------------------------------*/ - - -/* Accessibility ---------------------------------------------- */ - - -/* Text meant only for screen readers. */ - -.screen-reader-text { - border: 0; - clip: rect(1px, 1px, 1px, 1px); - clip-path: inset(50%); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute !important; - width: 1px; - word-wrap: normal !important; -} - -.screen-reader-text:focus { - background-color: #f1f1f1; - border-radius: 3px; - box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); - clip: auto !important; - clip-path: none; - color: #21759b; - display: block; - font-size: 0.875rem; - font-weight: 700; - height: auto; - left: 5px; - line-height: normal; - padding: 15px 23px 14px; - text-decoration: none; - top: 5px; - width: auto; - z-index: 100000; -} - - -/* Do not show the outline on the skip link target. */ - -#primary[tabindex="-1"]:focus { - outline: 0; -} - - -/* Alignments ---------------------------------------------- */ - -.alignleft { - /*rtl:ignore*/ - float: left; - /*rtl:ignore*/ - margin-right: 1.5em; - margin-bottom: 1.5em; -} - -.alignright { - /*rtl:ignore*/ - float: right; - /*rtl:ignore*/ - margin-left: 1.5em; - margin-bottom: 1.5em; -} - -.aligncenter { - clear: both; - display: block; - margin-left: auto; - margin-right: auto; - margin-bottom: 1.5em; -} \ No newline at end of file +@import 'includes/base'; +@import 'includes/underscores.scss'; \ No newline at end of file