diff --git a/css/_mobile.scss b/css/_mobile.scss index b5f11b9..7144e1b 100644 --- a/css/_mobile.scss +++ b/css/_mobile.scss @@ -3,7 +3,7 @@ } body { - background-color: rgb(111, 154, 207); + background-color: black; } header{ @@ -116,72 +116,78 @@ ul { } } - .page-1, - .page-2 { - border-left: 16px solid #f9f135; - border-right: 16px solid #f9f135; - display: grid; - grid-template-columns: repeat(11, 1fr); - gap: 16px; - } - - - .page-1 { + .page-1 { + border-left: 16px solid #f9f135; + border-right: 16px solid #f9f135; + color: #fff; display: grid; - grid-template-columns: repeat(11, 1fr); - gap: 16px + grid-template-columns: 1fr; + gap: 16px; padding-top: 60px; - - - .tahini { - - outline: 2px solid red; - - grid-column: span 4; - font-family: "Jockey One", sans-serif; - text-transform: uppercase; - position: relative; - min-width: 300px; - min-height: 300px; - align-items: center; - - div { - display: flex; - justify-content: center; + justify-items: center; align-items: center; - gap: 10px; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } + text-align: center; - .drizzle, - .chickpeas { - position: absolute; + .logo { + + border: 2px dashed red; + position: relative; /* Behåller referenspunkten för absolut positionerade element */ + min-width: 200px; + min-height: 200px; + margin: 0 auto; + font-family: "Jockey One", sans-serif; + text-transform: uppercase; + } + + .logo span { + position: absolute; //elementen kan placeras fritt } .drizzle{ color: #ac77ff; - top: -12px; - right: 0; font-size: 1.57rem; - } + top: 50px; /* Justera placeringen för att överlappa TAHINI */ + right: 23px; + } .tahini { color: #5fff37; font-size: 4rem; + top: 50%; /* Centrera i föräldern */ + left: 50%; + transform: translate(-50%, -50%); /* Centrera horisontellt och vertikalt*/ } - .chickpeas { + .chickpeas { color: #f9f135; - left: 0; - bottom: -8px; - font-size: 1.75rem; - z-index: -1; + font-size: 1.57rem; + bottom: 55px; /* Justera placeringen för att överlappa TAHINI */ + left: 10px; + //z-index: -1; + } + + .text { + max-width: 600px; } - } -} + .image { + margin-top: 16px; + } + + .blooper, + .blooper-2 { + margin-top: 16px; + } + } + + + + .page-2 { + border-left: 16px solid #f9f135; + border-right: 16px solid #f9f135; + display: grid; + grid-template-columns: repeat(11, 1fr); + gap: 16px; +} .page-2 { .image-1{ grid-column: 1 / span 3; @@ -243,37 +249,3 @@ ul { } } -/* -.page-1 -.top, - .bottom { - display: grid; - gap: 16px; - grid-template-columns: repeat(11, 1fr); - } - - .top { - - .text { - grid-column: span 7; - } - } - - .bottom { - .image { - grid-column: span 5; - } - - .text { - grid-column: span 6; - } - } - - .page-2 { - .top, - .bottom { - display: grid; - gap: 16px; - grid-template-columns: repeat(11, 1fr); - } - } */ diff --git a/css/style.css b/css/style.css index 3d10b94..569063d 100644 --- a/css/style.css +++ b/css/style.css @@ -1 +1 @@ -/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}*{box-sizing:border-box}body{background-color:#6f9acf}header{display:flex;position:fixed;align-items:center;height:60px;width:100vw;opacity:70%;justify-content:center;background-color:#d7b3b3;color:#fff;outline:2px solid #5fff37}header h1{margin:0}header button{height:35px;width:35px;background:rgba(0,0,0,0);border:0;position:fixed;right:20px;top:20px;z-index:2;pointer-events:none}header button span{display:block;width:25px;height:3px;background-color:#000;border-radius:6px;margin-bottom:4px}header input{position:fixed;top:20px;right:20px;z-index:1;width:35px;height:35px;opacity:0}header input:checked+.menu-checkbox button span{position:absolute;transition:all .3s ease-in-out}header input:checked+.menu-checkbox button span:nth-child(2){opacity:0}header input:checked+.menu-checkbox button span:nth-child(1){transform:rotate(45deg)}header input:checked+.menu-checkbox button span:nth-child(3){transform:rotate(-45deg)}header nav{position:fixed;top:0;left:0;background-color:rgba(241,214,107,.5);width:100vw;height:100vh;opacity:0;transition:opacity .3s cubic-bezier(0.075, 0.82, 0.165, 1);visibility:hidden}header input:checked+.menu-checkbox nav{visibility:visible;opacity:1}header ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;height:100%;justify-content:space-evenly;text-align:center}.page-content .page{min-height:100vh;outline:5px solid red}.page-1,.page-2{border-left:16px solid #f9f135;border-right:16px solid #f9f135;display:grid;grid-template-columns:repeat(11, 1fr);gap:16px}.page-1{display:grid;grid-template-columns:repeat(11, 1fr);padding-top:60px}.page-1 .page-title{outline:2px solid red;font-family:"Jockey One",sans-serif;text-transform:uppercase;position:relative;min-width:300px;min-height:300px}.page-1 .page-title div{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.page-1 .page-title .drizzle,.page-1 .page-title .chickpeas{position:absolute}.page-1 .page-title .drizzle{color:#ac77ff;top:-12px;right:0;font-size:1.57rem}.page-1 .page-title .tahini{color:#5fff37;font-size:4rem}.page-1 .page-title .chickpeas{color:#f9f135;left:0;bottom:-8px;font-size:1.75rem;z-index:-1}.page-2 .image-1{grid-column:1/span 3}.page-2 .image-2{grid-column:4/span 4}.page-2 .image-3{grid-column:8/span 4}.page-2 .menu{padding:0;list-style:none;margin:0;grid-column:span 11}.page-2 .menu li{display:grid;grid-template-columns:repeat(11, 1fr);gap:16px;background-color:#fff;color:#000;border-top:4px solid #000;border-bottom:4px solid #000;margin-bottom:8px}.page-2 .menu .dish-name{grid-column:span 4}.page-2 .menu .dish-desc{grid-column:span 6}.page-2 .menu .dish-price{grid-column:span 1;text-align:right}.page-3{background-color:#5fff37;color:#000;border-left:16px solid #fff;border-right:16px solid #fff;display:grid;grid-template-columns:repeat(11, 1fr);gap:16px;align-items:center}.page-3 .book{grid-column:span 5;padding-left:16px}.page-3 .contact{grid-column:span 6}@media screen and (min-width: 1280px){body{background-color:#747474}main{border:2px solid green;display:grid;grid-template-columns:repeat(12, 1fr);gap:16px}header{flex-direction:column;justify-content:start;background-color:orange;width:8.3vw;position:fixed;height:100vh}h1.text{margin-top:48px;max-width:25px;word-break:break-all;text-align:center}span.desktop-only{display:block}button{height:35px;width:35px;background:rgba(0,0,0,0);border:0;position:fixed;right:20px;top:20px;z-index:2;pointer-events:none}button span{display:block;width:25px;height:3px;background-color:#000;border-radius:6px;margin-bottom:4px}input{position:fixed;top:20px;right:20px;z-index:1;width:35px;height:35px;opacity:0}input:checked+.menu-checkbox button span{position:absolute;transition:all .3s ease-in-out}input:checked+.menu-checkbox button span:nth-child(2){opacity:0}input:checked+.menu-checkbox button span:nth-child(1){transform:rotate(45deg)}input:checked+.menu-checkbox button span:nth-child(3){transform:rotate(-45deg)}nav{position:fixed;top:0;left:0;background-color:rgba(241,214,107,.5);width:100vw;height:100vh;opacity:0;transition:opacity .3s cubic-bezier(0.075, 0.82, 0.165, 1);visibility:hidden}input:checked+.menu-checkbox nav{visibility:visible;opacity:1}ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;height:100%;justify-content:space-evenly;text-align:center}.page-content{margin-left:8.3vw;min-width:100vw}.page-content .page{min-height:100vh;outline:5px solid red}.page-1,.page-2{border-left:16px solid #f9f135;border-right:16px solid #f9f135}.page-1,.page-2{display:grid;grid-template-columns:repeat(11, 1fr);gap:16px}.page-1 .tahini{grid-column:1/span 4}.page-1 .blooper{grid-column:5/span 7}.page-1 .image{grid-column:1/span 5}.page-1 .blooper-2{grid-column:6/span 6}.page-2 .image-1{grid-column:1/span 3}.page-2 .image-2{grid-column:4/span 4}.page-2 .image-3{grid-column:8/span 4}.page-2 .menu{padding:0;list-style:none;margin:0;grid-column:span 11}.page-2 .menu li{display:grid;grid-template-columns:repeat(11, 1fr);gap:16px;background-color:#fff;color:#000;border-top:4px solid #000;border-bottom:4px solid #000;margin-bottom:8px}.page-2 .menu .dish-name{grid-column:span 4}.page-2 .menu .dish-desc{grid-column:span 6}.page-2 .menu .dish-price{grid-column:span 1;text-align:right}.page-3{background-color:#5fff37;color:#000;border-left:16px solid #fff;border-right:16px solid #fff;display:grid;grid-template-columns:repeat(11, 1fr);gap:16px;align-items:center}.page-3 .book{grid-column:span 5;padding-left:16px}.page-3 .contact{grid-column:span 6}.cookies{background-color:#ac77ff;position:fixed;bottom:0;width:100%;display:flex;justify-content:space-between;align-items:center;padding-inline:8px;padding-block:16px}} \ No newline at end of file +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}*{box-sizing:border-box}body{background-color:#000}header{display:flex;position:fixed;align-items:center;height:60px;width:100vw;opacity:70%;justify-content:center;background-color:#d7b3b3;color:#fff;outline:2px solid #5fff37}header h1{margin:0}header button{height:35px;width:35px;background:rgba(0,0,0,0);border:0;position:fixed;right:20px;top:20px;z-index:2;pointer-events:none}header button span{display:block;width:25px;height:3px;background-color:#000;border-radius:6px;margin-bottom:4px}header input{position:fixed;top:20px;right:20px;z-index:1;width:35px;height:35px;opacity:0}header input:checked+.menu-checkbox button span{position:absolute;transition:all .3s ease-in-out}header input:checked+.menu-checkbox button span:nth-child(2){opacity:0}header input:checked+.menu-checkbox button span:nth-child(1){transform:rotate(45deg)}header input:checked+.menu-checkbox button span:nth-child(3){transform:rotate(-45deg)}header nav{position:fixed;top:0;left:0;background-color:rgba(241,214,107,.5);width:100vw;height:100vh;opacity:0;transition:opacity .3s cubic-bezier(0.075, 0.82, 0.165, 1);visibility:hidden}header input:checked+.menu-checkbox nav{visibility:visible;opacity:1}header ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;height:100%;justify-content:space-evenly;text-align:center}.page-content .page{min-height:100vh;outline:5px solid red}.page-1{border-left:16px solid #f9f135;border-right:16px solid #f9f135;color:#fff;display:grid;grid-template-columns:1fr;gap:16px;padding-top:60px;justify-items:center;align-items:center;text-align:center}.page-1 .logo{border:2px dashed red;position:relative;min-width:200px;min-height:200px;margin:0 auto;font-family:"Jockey One",sans-serif;text-transform:uppercase}.page-1 .logo span{position:absolute}.page-1 .drizzle{color:#ac77ff;font-size:1.57rem;top:50px;right:23px}.page-1 .tahini{color:#5fff37;font-size:4rem;top:50%;left:50%;transform:translate(-50%, -50%)}.page-1 .chickpeas{color:#f9f135;font-size:1.57rem;bottom:55px;left:10px}.page-1 .text{max-width:600px}.page-1 .image{margin-top:16px}.page-1 .blooper,.page-1 .blooper-2{margin-top:16px}.page-2{border-left:16px solid #f9f135;border-right:16px solid #f9f135;display:grid;grid-template-columns:repeat(11, 1fr);gap:16px}.page-2 .image-1{grid-column:1/span 3}.page-2 .image-2{grid-column:4/span 4}.page-2 .image-3{grid-column:8/span 4}.page-2 .menu{padding:0;list-style:none;margin:0;grid-column:span 11}.page-2 .menu li{display:grid;grid-template-columns:repeat(11, 1fr);gap:16px;background-color:#fff;color:#000;border-top:4px solid #000;border-bottom:4px solid #000;margin-bottom:8px}.page-2 .menu .dish-name{grid-column:span 4}.page-2 .menu .dish-desc{grid-column:span 6}.page-2 .menu .dish-price{grid-column:span 1;text-align:right}.page-3{background-color:#5fff37;color:#000;border-left:16px solid #fff;border-right:16px solid #fff;display:grid;grid-template-columns:repeat(11, 1fr);gap:16px;align-items:center}.page-3 .book{grid-column:span 5;padding-left:16px}.page-3 .contact{grid-column:span 6}@media screen and (min-width: 1280px){body{background-color:#747474}main{border:2px solid green;display:grid;grid-template-columns:repeat(12, 1fr);gap:16px}header{flex-direction:column;justify-content:start;background-color:orange;width:8.3vw;position:fixed;height:100vh}h1.text{margin-top:48px;max-width:25px;word-break:break-all;text-align:center}span.desktop-only{display:block}button{height:35px;width:35px;background:rgba(0,0,0,0);border:0;position:fixed;right:20px;top:20px;z-index:2;pointer-events:none}button span{display:block;width:25px;height:3px;background-color:#000;border-radius:6px;margin-bottom:4px}input{position:fixed;top:20px;right:20px;z-index:1;width:35px;height:35px;opacity:0}input:checked+.menu-checkbox button span{position:absolute;transition:all .3s ease-in-out}input:checked+.menu-checkbox button span:nth-child(2){opacity:0}input:checked+.menu-checkbox button span:nth-child(1){transform:rotate(45deg)}input:checked+.menu-checkbox button span:nth-child(3){transform:rotate(-45deg)}nav{position:fixed;top:0;left:0;background-color:rgba(241,214,107,.5);width:100vw;height:100vh;opacity:0;transition:opacity .3s cubic-bezier(0.075, 0.82, 0.165, 1);visibility:hidden}input:checked+.menu-checkbox nav{visibility:visible;opacity:1}ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;height:100%;justify-content:space-evenly;text-align:center}.page-content{margin-left:8.3vw;min-width:100vw}.page-content .page{min-height:100vh;outline:5px solid red}.page-1,.page-2{border-left:16px solid #f9f135;border-right:16px solid #f9f135}.page-1,.page-2{display:grid;grid-template-columns:repeat(11, 1fr);gap:16px}.page-1 .tahini{grid-column:1/span 4}.page-1 .blooper{grid-column:5/span 7}.page-1 .image{grid-column:1/span 5}.page-1 .blooper-2{grid-column:6/span 6}.page-2 .image-1{grid-column:1/span 3}.page-2 .image-2{grid-column:4/span 4}.page-2 .image-3{grid-column:8/span 4}.page-2 .menu{padding:0;list-style:none;margin:0;grid-column:span 11}.page-2 .menu li{display:grid;grid-template-columns:repeat(11, 1fr);gap:16px;background-color:#fff;color:#000;border-top:4px solid #000;border-bottom:4px solid #000;margin-bottom:8px}.page-2 .menu .dish-name{grid-column:span 4}.page-2 .menu .dish-desc{grid-column:span 6}.page-2 .menu .dish-price{grid-column:span 1;text-align:right}.page-3{background-color:#5fff37;color:#000;border-left:16px solid #fff;border-right:16px solid #fff;display:grid;grid-template-columns:repeat(11, 1fr);gap:16px;align-items:center}.page-3 .book{grid-column:span 5;padding-left:16px}.page-3 .contact{grid-column:span 6}.cookies{background-color:#ac77ff;position:fixed;bottom:0;width:100%;display:flex;justify-content:space-between;align-items:center;padding-inline:8px;padding-block:16px}} \ No newline at end of file diff --git a/index.html b/index.html index b1b03f0..5630fb9 100644 --- a/index.html +++ b/index.html @@ -43,13 +43,20 @@

-
tahini drizzle
-
+ -
lång brödtext
+
+

Main course hemp seeds Southern Italian + shiitake mushrooms a delicious meal banana bread lemon + tahini dressing apple vinaigrette veggie burgers cool + cucumbers coconut sugar. Seasonal edame hummus asian + pear kale bite sized ghost pepper one bowl mediterranian + luxury bowl cayenne Thai sun pepper. +

+
sallads bild
crispy nåt