diff --git a/lacre_basic/css/custom.css b/lacre_basic/css/custom.css index 77da5bd..a9f78ab 100644 --- a/lacre_basic/css/custom.css +++ b/lacre_basic/css/custom.css @@ -26,11 +26,29 @@ /* body { background: #203040; color: #E3DEDB; } /* already set in default.css */ .banner { + position: relative; + z-index: 999; } .banner img{ - width: 50%; - margin-left: 25%; - margin-right: 25%; + width: 70%; + margin: 0 15%; +} + +.ribbon { + background-color: #203040; + margin: 0; + width: 60%; + height: 20rem; +} + +.ribbon img { + position: absolute; + left: 15%; + width: 70%; +} + +.columns img { + width: 70%; } diff --git a/lacre_basic/css/defaults.css b/lacre_basic/css/defaults.css index 8d532fd..1fba1d6 100644 --- a/lacre_basic/css/defaults.css +++ b/lacre_basic/css/defaults.css @@ -5,15 +5,20 @@ box-sizing: border-box; } +html { + background: #011520; + +} + body { background: #203040; - font-family: 'opensans-regular', sans-serif; + font-family: 'comfortaa', 'opensans-regular', sans-serif; font-weight: normal; font-size: 1rem; line-height: 1.7; color: #E3DEDB; - - -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ + width: 70%; + margin: 0 15%;051525ebkit-font-smoothing: antialiased; /* Fix for webkit rendering */ -webkit-text-size-adjust: 100%; } @@ -23,16 +28,16 @@ h3, h4, h5, h6 { - color: #454B4D; + color: #E3DEDB; } a { - color: #1F8CD6; + color: #BB2244; text-decoration: none; } a:hover { - color: #175E91; + color: #DD4466; } pre { @@ -47,9 +52,200 @@ blockquote { padding: 0 2rem; } +.row { + width: 96%; + max-width: 1150px; + margin: 0 auto; +} +/* fixed width for IE8 */ +.ie .row { width: 1000px ; } + +.narrow .row { max-width: 980px; } + +.row .row { width: auto; max-width: none; margin: 0 -20px; } + +/* row clearing */ +.row:before, +.row:after { + content: " "; + display: table; +} +.row:after { + clear: both; +} + +.column, .columns { + position: relative; + padding: 0 20px; + min-height: 1px; + float: left; +} +.column.centered, .columns.centered { + float: none; + margin: 0 auto; +} + +.remove-bottom { margin-bottom: 0 !important; } +.half-bottom { margin-bottom: 12px !important; } +.add-bottom { margin-bottom: 24px !important; } +.no-border { border: none; } + +.text-center { text-align: center !important; } +.text-left { text-align: left !important; } +.text-right { text-align: right !important; } +.pull-left { float: left !important; } +.pull-right { float: right !important; } +.align-center { + margin-left: auto !important; + margin-right: auto !important; + text-align: center !important; +} + +/* removed gutters */ +.row.collapsed > .column, +.row.collapsed > .columns, +.column.collapsed, .columns.collapsed { padding: 0; } + +/*[class*="column"] + [class*="column"]:last-child { float: right; } +[class*="column"] + [class*="column"].end { float: right; }*/ + +/* column widths */ +.row .one { width: 8.33333%; } +.row .two { width: 16.66667%; } +.row .three { width: 25%; } +.row .four { width: 33.33333%; } +.row .five { width: 41.66667%; } +.row .six { width: 50%; } +.row .seven { width: 58.33333%; } +.row .eight { width: 66.66667%; } +.row .nine { width: 75%; } +.row .ten { width: 83.33333%; } +.row .eleven { width: 91.66667%; } +.row .twelve { width: 100%; } + +/* Offsets */ +.row .offset-1 { margin-left: 8.33333%; } +.row .offset-2 { margin-left: 16.66667%; } +.row .offset-3 { margin-left: 25%; } +.row .offset-4 { margin-left: 33.33333%; } +.row .offset-5 { margin-left: 41.66667%; } +.row .offset-6 { margin-left: 50%; } +.row .offset-7 { margin-left: 58.33333%; } +.row .offset-8 { margin-left: 66.66667%; } +.row .offset-9 { margin-left: 75%; } +.row .offset-10 { margin-left: 83.33333%; } +.row .offset-11 { margin-left: 91.66667%; } + +/* Push/Pull */ +.row .push-1 { left: 8.33333%; } +.row .pull-1 { right: 8.33333%; } +.row .push-2 { left: 16.66667%; } +.row .pull-2 { right: 16.66667%; } +.row .push-3 { left: 25%; } +.row .pull-3 { right: 25%; } +.row .push-4 { left: 33.33333%; } +.row .pull-4 { right: 33.33333%; } +.row .push-5 { left: 41.66667%; } +.row .pull-5 { right: 41.66667%; } +.row .push-6 { left: 50%; } +.row .pull-6 { right: 50%; } +.row .push-7 { left: 58.33333%; } +.row .pull-7 { right: 58.33333%; } +.row .push-8 { left: 66.66667%; } +.row .pull-8 { right: 66.66667%; } +.row .push-9 { left: 75%; } +.row .pull-9 { right: 75%; } +.row .push-10 { left: 83.33333%; } +.row .pull-10 { right: 83.33333%; } +.row .push-11 { left: 91.66667%; } +.row .pull-11 { right: 91.66667%; } + +/* block grids +--------------------------------------------------------------------- */ +.bgrid-sixths [class*="column"] { width: 16.66667%; } +.bgrid-quarters [class*="column"] { width: 25%; } +.bgrid-thirds [class*="column"] { width: 33.33333%; } +.bgrid-halves [class*="column"] { width: 50%; } + +[class*="bgrid"] [class*="column"] + [class*="column"]:last-child { float: left; } + +/* Left clearing for block grid columns - columns that changes width in +different screen sizes. Allows columns with different heights to align +properly. +--------------------------------------------------------------------- */ +.first { clear: left; } /* first column in default screen */ +.s-first { clear: none; } /* first column in smaller screens */ + +/* smaller screens +--------------------------------------------------------------- */ +@media only screen and (max-width: 900px) { + + /* block grids on small screens */ + .s-bgrid-sixths [class*="column"] { width: 16.66667%; } + .s-bgrid-quarters [class*="column"] { width: 25%; } + .s-bgrid-thirds [class*="column"] { width: 33.33333%; } + .s-bgrid-halves [class*="column"] { width: 50%; } + + /* block grids left clearing */ + .first { clear: none; } + .s-first { clear: left; } + +} + +/* mobile wide/smaller tablets +--------------------------------------------------------------- */ +@media only screen and (max-width: 767px) { + + .row { + width: 460px; + margin: 0 auto; + padding: 0; + } + .column, .columns { + width: auto !important; + float: none; + margin-left: 0; + margin-right: 0; + padding: 0 30px; + } + .row .row { width: auto; max-width: none; margin: 0 -30px; } + + [class*="column"] + [class*="column"]:last-child { float: none; } + [class*="bgrid"] [class*="column"] + [class*="column"]:last-child { float: none; } + + /* Offsets */ + .row .offset-1 { margin-left: 0%; } + .row .offset-2 { margin-left: 0%; } + .row .offset-3 { margin-left: 0%; } + .row .offset-4 { margin-left: 0%; } + .row .offset-5 { margin-left: 0%; } + .row .offset-6 { margin-left: 0%; } + .row .offset-7 { margin-left: 0%; } + .row .offset-8 { margin-left: 0%; } + .row .offset-9 { margin-left: 0%; } + .row .offset-10 { margin-left: 0%; } + .row .offset-11 { margin-left: 0%; } +} + +/* mobile narrow +--------------------------------------------------------------- */ +@media only screen and (max-width: 460px) { + + .row { width: auto; max-width: 400px;} + +} + +/* larger screens +--------------------------------------------------------------- */ +@media screen and (min-width: 1200px) { + + .wide .row { max-width: 1180px; } + +} + /* Utility Classes */ .wrapper { - margin: 0 3rem; + margin: 0 10%; } .padding { @@ -84,6 +280,9 @@ blockquote { .header { background-color: #E3DEDB; color: #eee; + position: relative; + top: -2rem; + z-index: 99; } .header a { diff --git a/lacre_basic/css/media-queries.css b/lacre_basic/css/media-queries.css new file mode 100644 index 0000000..d9aaa37 --- /dev/null +++ b/lacre_basic/css/media-queries.css @@ -0,0 +1,274 @@ +/*------------------------------------ + +Lacre Media Queries +20-06-2022 +------------------------------------*/ + +/* screenheight less than 800px +------------------------------------*/ +@media only screen and (max-height: 800px) { + ul#nav li.dropdown { + height: 20px; + } +} + +/* screenwidth less than 1150px +------------------------------------*/ +@media only screen and (max-width: 1150px) { + + /* header styles + ------------------------------------*/ + + /* nav-wrap */ + ul#nav li a { + padding: 8px 8%; + } + + .dropdown-content { + display: none; + z-index: 1; + } + .dropdown:hover .dropdown-content { + display: none; + } + + + /* Contact Section + ------------------------------------*/ + + +/* mobile wide/smaller tablets +------------------------------------*/ + +@media only screen and (max-width: 830px) { + + /* mobile navigation + ------------------------------------*/ + + + /* Header Styles + ------------------------------------*/ + +/* toggle buttons */ +#nav-wrap:not( :target ) > a:first-of-type, +#nav-wrap:target > a:last-of-type { + display: block; +} + +#nav-wrap > a { + width: 48px; + height: 48px; + background-color: #50162D; + position: absolute; + border: none; + float: right; + font: 0/0 a; + text-shadow: none; + color: transparent; + top: 0px; + right: 30px; +} + +#nav-wrap > a:before, #nav-wrap > a:after { + position: absolute; + border: 2px solid #fff; + top: 35%; + left: 25%; + right: 25%; + content: ''; +} + +#nav-wrap > a:after { + top: 60%; +} + +/* End toggle buttons */ + + +#nav-wrap { + font: 12px 'opensans-bold', sans-serif; + background: transparent !important; + letter-spacing: 1.5px; + width: auto; + top: 0; + right: 0; + display:block; + } + + ul#nav li { + display: block; + height: auto; + margin: 0 auto; + padding: 0 4%; + border-bottom: 1px solid #2D2E34; + border-bottom-style: dotted; + } + + ul#logo-right li { + border-top: 1px solid #2D2E34; + border-top-style: dotted; + } + + ul#nav li a { + display: block; + margin: 0; + padding: 0; + margin: 12px 0; + line-height: 16px; /* reset line-height from 48px */ + border: none; + text-align: center; + } + +/* display menu panels */ +#nav-wrap:target div#nav-links > ul#nav { + display: block; + padding: 30px 20px 10px 20px; + background: #1f2024; + margin: 0 30px; + float: right; + width: 150px; +} + +#nav-wrap:target div#nav-right > ul#logo-right { + display: block; + padding: 0px 20px 10px 20px; + background: #1f2024; + margin: 0 30px; + float:right; + width: 150px; +} + +/* hide menu panel */ +#nav-wrap div#nav-links > ul#nav { + height: auto; + display: none; + clear: both; + width: 30%; + float: right; + position: relative; + top: 12px; + right: 0; +} + +#nav-wrap div#nav-right > ul#logo-right { + height: auto; + display: none; + clear: both; + width: 30%; + float: right; + position: relative; + right: 0; +} + + + +/* Language menu*/ + +#language { + position: fixed; + top: 0px; + right: 75px; +} + +.language-selector .btn { + font-size: 1.5rem; + padding: 19px 15px; +} + +.language-selector .btn i { + position: absolute; + top: 35px; + right: 20px; +} + +.language-selector .dropdown-menu { + font-size: 1.3rem; +} + +.language-selector .dropdown-menu>li>a { + padding: 12px 15px; +} + + /* Form + ------------------------------------*/ + + #contact label { + float: none; + width: 100%; + } + #contact input, + #contact textarea, + #contact select { + margin-bottom: 6px; + width: 100%; + } + #contact button.submit { margin: 30px 0 24px 0; } + #message-warning, #message-success { + width: 100%; + margin-left: 0; + } + + + /* Footer + ------------------------------------*/ + + footer { + letter-spacing: 0.5px; + margin-bottom: 0px; + font-size: 10px; + } + + footer div#footer-links ul li { + padding-left: 5px; + padding-right: 5px; + } + + /* Icons */ + footer #footer-icons { display: none; } + footer #footer-logo { display: none; } + + /* Go To Top Button */ + #go-top { margin-left: -22px; } + #go-top a { + width: 54px; + height: 54px; + font-size: 18px; + line-height: 54px; + } + + /* fullbar */ + + .fullbar h3, .fullbar h4, .fullbar h5 { + line-height: 1.2; + font-size: 90%; + } + + +} + + + +/* mobile narrow + ------------------------------------*/ + +@media only screen and (max-width: 600px) { + + /* mobile navigation + ------------------------------------*/ + #nav-wrap ul#nav { width: 10%; float: none; } + + #nav-wrap:target div#nav-links > ul#nav { + width: 80%; + } + + #nav-wrap:target div#nav-right > ul#logo-right { + width: 80%; + } + + /* header styles + ------------------------------------*/ + + + + + } diff --git a/lacre_basic/images/bottom_ribbon.png b/lacre_basic/images/bottom_ribbon.png new file mode 100644 index 0000000..e36a532 Binary files /dev/null and b/lacre_basic/images/bottom_ribbon.png differ diff --git a/lacre_basic/images/left_ribbon.png b/lacre_basic/images/left_ribbon.png new file mode 100644 index 0000000..31d41c5 Binary files /dev/null and b/lacre_basic/images/left_ribbon.png differ diff --git a/lacre_basic/images/right_ribbon.png b/lacre_basic/images/right_ribbon.png new file mode 100644 index 0000000..f7db526 Binary files /dev/null and b/lacre_basic/images/right_ribbon.png differ diff --git a/lacre_basic/templates/modular/ribbon.html.twig b/lacre_basic/templates/modular/ribbon.html.twig new file mode 100644 index 0000000..a74d5f7 --- /dev/null +++ b/lacre_basic/templates/modular/ribbon.html.twig @@ -0,0 +1,20 @@ +{% block content %} + +{% if page.header.section_id %} +
+{% else %} +
+{% endif %} + +
+ {{ page.content|raw }} + {% if page.header.ribbon == "left" %} + + {% elseif page.header.ribbon == "right" %} + + {% elseif page.header.ribbon == "bottom" %} + + {% endif %} +
+
+{% endblock %}