More development. Finished footer pretty much
continuous-integration/appveyor/branch AppVeyor build failed Details

master
Jonatan Nilsson 2023-02-16 09:41:07 +00:00
parent 1ff7b3aabe
commit c613aa126a
5 changed files with 140 additions and 19 deletions

View File

@ -3,11 +3,42 @@ const m = require('mithril')
const Footer = {
view: function() {
return [
m('div.first'),
m('div.middle', [
m('div.house_4'),
m('div.content', [
m('div.top', [
m('img.logo', { src: '/assets/img/logo_white.svg' }),
m('div.filler'),
m('a.facebook', { href: '#' }),
]),
m('div.split', [
m('div.split-part', [
m('p', 'Eignavakt.is'),
m('p', 'Sundagarðar 2'),
m('p', '104 Reykjavík'),
]),
m('div.split-part', [
m('a', { href: '#' }, 'Heim'),
m('a', { href: '#' }, 'Góð ráð'),
m('a', { href: '#' }, 'Privacy policy'),
]),
m('form', [
m('div.form-group', [
m('h5', 'Skrá mig í fréttabréf'),
]),
m('div.form-group', [
m('div.form-item', [
m('label', 'Netfang*'),
m('input', { type: 'text', placeholder: 'jon@jonson.is' }),
]),
]),
m('div.form-group', [
m('div.form-item', [
m('button.button-inactive', { disabled: true }, 'Skrá mig')
]),
]),
]),
]),
]),
m('div'),
]
},
}

View File

@ -34,7 +34,7 @@ const Header = {
m('div.links', [
m(m.route.Link, { href: '/#Heim' }, 'Heim'),
m(m.route.Link, { href: '/#GoodAdvice' }, 'Góð ráð'),
m(m.route.Link, { class: 'button', href: '/#Subscribe' }, 'Subscribe'),
//m(m.route.Link, { class: 'button-active', href: '/#Subscribe' }, 'Subscribe'),
]),
]
},

View File

@ -90,10 +90,10 @@ const Frontpage = {
m('input', { type: 'checkbox' }),
m('div.button-checkbox', '120fm +'),
]),
m('label.checkbox', [
/*m('label.checkbox', [
m('input', { type: 'checkbox' }),
m('div.button-checkbox', 'velja svið'),
]),
]),*/
]),
]),
]),
@ -121,10 +121,10 @@ const Frontpage = {
m('input', { type: 'checkbox' }),
m('div.button-checkbox', '5 + herb.'),
]),
m('label.checkbox', [
/*m('label.checkbox', [
m('input', { type: 'checkbox' }),
m('div.button-checkbox', 'velja svið'),
]),
]),*/
]),
]),
]),

View File

@ -0,0 +1,12 @@
<svg width="522" height="123" viewBox="0 0 522 123" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M75.6929 0H25.2379L0.747803 42.9944V82.328L25.335 122.421H75.5377L100.125 82.328V42.9944L75.6929 0ZM84.5226 39.6647H55.4139C54.7333 39.664 54.0648 39.4837 53.4755 39.1419C52.8862 38.8001 52.3971 38.3089 52.0568 37.7174L37.4053 11.9753C37.2403 11.6807 37.1545 11.3481 37.1564 11.0101C37.1583 10.6721 37.2478 10.3404 37.4162 10.0477C37.5846 9.75494 37.826 9.51124 38.1167 9.34052C38.4074 9.1698 38.7374 9.07795 39.0742 9.07401H68.1829C68.8668 9.07128 69.5392 9.24991 70.1322 9.59186C70.7252 9.9338 71.2175 10.4269 71.5594 11.0212L86.2109 36.7633C86.3914 37.0608 86.4893 37.4014 86.494 37.7497C86.4987 38.0979 86.4101 38.4411 86.2377 38.7434C86.0652 39.0457 85.8152 39.296 85.5135 39.4683C85.2118 39.6407 84.8697 39.7286 84.5226 39.7231V39.6647ZM60.9834 85.6772H85.2406C85.4822 85.6787 85.719 85.7448 85.9266 85.8687C86.1343 85.9926 86.3053 86.1698 86.422 86.3821C86.5386 86.5944 86.5968 86.834 86.5904 87.0764C86.584 87.3187 86.5132 87.555 86.3855 87.7608L74.3151 107.447C74.1933 107.644 74.0233 107.807 73.8212 107.92C73.6192 108.033 73.3918 108.092 73.1606 108.092C72.9293 108.092 72.7017 108.033 72.4996 107.92C72.2976 107.807 72.1278 107.644 72.006 107.447L59.916 87.7608C59.7911 87.5605 59.7203 87.3312 59.7104 87.0952C59.7004 86.8592 59.7517 86.6246 59.8594 86.4145C59.967 86.2045 60.1273 86.026 60.3244 85.8968C60.5214 85.7675 60.7484 85.6919 60.9834 85.6772ZM40.3356 39.762H15.3798C15.154 39.7567 14.9333 39.6941 14.7381 39.5801C14.5429 39.4661 14.3796 39.3044 14.2634 39.1101C14.1472 38.9158 14.0818 38.6951 14.0734 38.4686C14.065 38.2422 14.114 38.0172 14.2155 37.8148L26.6739 15.9087C26.7921 15.698 26.964 15.5227 27.1721 15.4006C27.3801 15.2786 27.6169 15.2143 27.8578 15.2143C28.0988 15.2143 28.3354 15.2786 28.5434 15.4006C28.7514 15.5227 28.9234 15.698 29.0416 15.9087L41.4999 37.8148C41.5928 38.0157 41.6348 38.2365 41.6222 38.4575C41.6095 38.6786 41.5427 38.8931 41.4274 39.082C41.3122 39.2709 41.1522 39.4282 40.9617 39.5401C40.7712 39.6519 40.5562 39.7148 40.3356 39.7231V39.762ZM45.9439 50.7832V74.656C45.9439 75.1725 45.7396 75.6677 45.3756 76.0329C45.0117 76.3981 44.518 76.6032 44.0033 76.6032H11.7315C11.2169 76.6032 10.7232 76.3981 10.3592 76.0329C9.99532 75.6677 9.79096 75.1725 9.79096 74.656V50.7443C9.79096 50.2279 9.99532 49.7326 10.3592 49.3674C10.7232 49.0022 11.2169 48.7971 11.7315 48.7971H44.0033C44.518 48.7971 45.0117 49.0022 45.3756 49.3674C45.7396 49.7326 45.9439 50.2279 45.9439 50.7443V50.7832ZM54.9871 74.656V50.7443C54.9871 50.2279 55.1914 49.7326 55.5554 49.3674C55.9193 49.0022 56.413 48.7971 56.9277 48.7971H89.1218C89.6364 48.7971 90.1301 49.0022 90.494 49.3674C90.858 49.7326 91.0623 50.2279 91.0623 50.7443V74.6171C91.0623 75.1335 90.858 75.6288 90.494 75.994C90.1301 76.3591 89.6364 76.5643 89.1218 76.5643H56.85C56.3489 76.5442 55.875 76.3302 55.5276 75.9672C55.1803 75.6041 54.9867 75.1203 54.9871 74.6171V74.656ZM16.8353 85.6772H45.7693C46.4433 85.6847 47.1036 85.8682 47.6855 86.2096C48.2674 86.5511 48.7507 87.0387 49.0876 87.6245L63.1568 110.582C63.3356 110.877 63.4331 111.214 63.4394 111.559C63.4458 111.904 63.3609 112.244 63.1931 112.545C63.0253 112.846 62.7807 113.097 62.4845 113.272C62.1884 113.447 61.8512 113.54 61.5074 113.542H32.5733C31.8993 113.534 31.2388 113.351 30.6569 113.009C30.075 112.668 29.592 112.18 29.255 111.595L15.1858 88.637C15.007 88.3424 14.9093 88.0053 14.903 87.6604C14.8966 87.3155 14.9818 86.9751 15.1496 86.674C15.3174 86.373 15.5619 86.122 15.8581 85.9469C16.1543 85.7717 16.4915 85.6787 16.8353 85.6772Z" fill="white"/>
<path d="M182.485 60.1604V63.6044H149.305C150.145 70.9964 153.785 74.6924 160.225 74.6924C162.689 74.6924 164.705 74.1604 166.273 73.0964C167.897 71.9764 168.961 70.4644 169.465 68.5604H181.225V70.2404C180.161 74.3284 177.725 77.6044 173.917 80.0684C170.109 82.5324 165.545 83.7644 160.225 83.7644C153.225 83.7644 147.625 81.6364 143.425 77.3804C139.225 73.0684 137.125 67.3284 137.125 60.1604C137.125 53.2164 139.225 47.6444 143.425 43.4444C147.681 39.1884 153.281 37.0604 160.225 37.0604C166.889 37.0604 172.265 39.1884 176.353 43.4444C180.441 47.7004 182.485 53.2724 182.485 60.1604ZM149.641 54.8684H170.389C169.941 52.1244 168.821 49.9964 167.029 48.4844C165.293 46.9723 163.025 46.2164 160.225 46.2164C154.457 46.2164 150.929 49.1003 149.641 54.8684Z" fill="white"/>
<path d="M188.959 31.1804V19.7563H200.887V31.1804H188.959ZM188.959 82.7564V38.0684H200.887V82.7564H188.959Z" fill="white"/>
<path d="M231.542 102.664C224.934 102.664 219.614 101.124 215.582 98.0444C211.55 94.9644 209.534 90.8764 209.534 85.7803H221.462C221.462 88.2443 222.33 90.1204 224.066 91.4084C225.858 92.7524 228.35 93.4244 231.542 93.4244C238.262 93.4244 241.622 90.3444 241.622 84.1843V81.9164L241.958 76.2044H241.454C240.222 78.3884 238.402 80.0964 235.994 81.3284C233.586 82.5044 230.842 83.0924 227.762 83.0924C221.602 83.0924 216.674 80.9924 212.978 76.7924C209.282 72.5364 207.434 66.8524 207.434 59.7404C207.434 52.9644 209.338 47.4764 213.146 43.2764C217.01 39.0204 222.05 36.8924 228.266 36.8924C234.874 36.8924 239.466 39.4964 242.042 44.7044H242.546V38.0684H253.55V83.4284C253.55 89.5323 251.618 94.2644 247.754 97.6244C243.946 100.984 238.542 102.664 231.542 102.664ZM230.534 73.0124C234.006 73.0124 236.778 71.8084 238.85 69.4004C240.978 66.9924 242.042 63.7724 242.042 59.7404C242.042 55.9324 241.006 52.8524 238.934 50.5004C236.918 48.1484 234.23 46.9724 230.87 46.9724C227.286 46.9724 224.486 48.0924 222.47 50.3324C220.51 52.5723 219.53 55.7084 219.53 59.7404C219.53 64.0524 220.482 67.3563 222.386 69.6524C224.29 71.8924 227.006 73.0124 230.534 73.0124Z" fill="white"/>
<path d="M262.219 82.7564V38.0684H273.307V44.7044H273.727C277.031 39.4964 281.987 36.8924 288.595 36.8924C293.915 36.8924 298.003 38.5444 300.859 41.8484C303.771 45.1523 305.227 49.8004 305.227 55.7924V82.7564H293.299V56.2124C293.299 49.9404 290.611 46.8043 285.235 46.8043C281.707 46.8043 278.963 48.0364 277.003 50.5004C275.099 52.9084 274.147 56.2684 274.147 60.5804V82.7564H262.219Z" fill="white"/>
<path d="M327.008 83.7644C321.8 83.7644 317.768 82.7004 314.912 80.5724C312.056 78.3884 310.628 75.3363 310.628 71.4164C310.628 67.0484 311.972 63.7164 314.66 61.4204C317.348 59.1244 321.632 57.6404 327.512 56.9684C333.28 56.3524 336.976 55.7364 338.6 55.1203C340.224 54.5044 341.036 53.2724 341.036 51.4244C341.036 47.8964 338.376 46.1324 333.056 46.1324C330.312 46.1324 328.268 46.6364 326.924 47.6444C325.58 48.5964 324.908 50.1364 324.908 52.2644H312.98C312.98 47.3923 314.716 43.6404 318.188 41.0084C321.66 38.3764 326.588 37.0604 332.972 37.0604C339.3 37.0604 344.2 38.3484 347.672 40.9244C351.2 43.5004 352.964 47.1124 352.964 51.7604V74.9444C352.964 76.1763 353.048 77.3244 353.216 78.3884C353.384 79.4524 353.58 80.1804 353.804 80.5724L354.056 81.2444V82.7564H343.388C342.436 81.5244 341.96 79.7324 341.96 77.3804V77.2124H341.456C340.28 79.2844 338.432 80.9084 335.912 82.0844C333.392 83.2044 330.424 83.7644 327.008 83.7644ZM328.94 75.4484C332.524 75.4484 335.436 74.3284 337.676 72.0884C339.916 69.8484 341.036 66.9084 341.036 63.2684V61.7564H340.532C339.02 63.2684 335.66 64.2764 330.452 64.7803C327.652 65.1164 325.664 65.7324 324.488 66.6284C323.312 67.4684 322.724 68.8404 322.724 70.7444C322.724 73.8804 324.796 75.4484 328.94 75.4484Z" fill="white"/>
<path d="M370.455 82.7564L353.571 39.5804V38.0684H366.423L376.503 66.7124H376.671L387.003 38.0684H399.603V39.5804L382.551 82.7564H370.455Z" fill="white"/>
<path d="M414.542 83.7644C409.334 83.7644 405.302 82.7004 402.446 80.5724C399.59 78.3884 398.162 75.3363 398.162 71.4164C398.162 67.0484 399.506 63.7164 402.194 61.4204C404.882 59.1244 409.166 57.6404 415.046 56.9684C420.814 56.3524 424.51 55.7364 426.134 55.1203C427.758 54.5044 428.57 53.2724 428.57 51.4244C428.57 47.8964 425.91 46.1324 420.59 46.1324C417.846 46.1324 415.802 46.6364 414.458 47.6444C413.114 48.5964 412.442 50.1364 412.442 52.2644H400.514C400.514 47.3923 402.25 43.6404 405.722 41.0084C409.194 38.3764 414.122 37.0604 420.506 37.0604C426.834 37.0604 431.734 38.3484 435.206 40.9244C438.734 43.5004 440.498 47.1124 440.498 51.7604V74.9444C440.498 76.1763 440.582 77.3244 440.75 78.3884C440.918 79.4524 441.114 80.1804 441.338 80.5724L441.59 81.2444V82.7564H430.922C429.97 81.5244 429.494 79.7324 429.494 77.3804V77.2124H428.99C427.814 79.2844 425.966 80.9084 423.446 82.0844C420.926 83.2044 417.958 83.7644 414.542 83.7644ZM416.474 75.4484C420.058 75.4484 422.97 74.3284 425.21 72.0884C427.45 69.8484 428.57 66.9084 428.57 63.2684V61.7564H428.066C426.554 63.2684 423.194 64.2764 417.986 64.7803C415.186 65.1164 413.198 65.7324 412.022 66.6284C410.846 67.4684 410.258 68.8404 410.258 70.7444C410.258 73.8804 412.33 75.4484 416.474 75.4484Z" fill="white"/>
<path d="M475.489 55.7924L491.701 81.2444V82.7564H478.849L467.593 64.0244L460.453 71.7523V82.7564H448.525V19.7563H460.453V57.6404L476.497 38.0684H489.937V39.5804L475.489 55.7924Z" fill="white"/>
<path d="M521.252 48.3164H509.408V67.1324C509.408 69.6524 509.828 71.3604 510.668 72.2564C511.564 73.0964 513.3 73.5164 515.876 73.5164H521.252V83.0084C519.572 83.6244 517.192 83.9324 514.112 83.9324C508.512 83.9324 504.34 82.5604 501.596 79.8164C498.852 77.0724 497.48 72.9004 497.48 67.3004V48.3164H490.256V38.0684H497.48V27.1483H509.408V38.0684H521.252V48.3164Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 9.2 KiB

View File

@ -72,6 +72,7 @@ body {
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem;
}
.italic { font-variation-settings: "slnt" 10deg; }
@ -139,7 +140,6 @@ a, a:visited, button {
header, main, footer {
width: 100%;
max-width: var(--content-max-width);
padding: 1rem;
}
.button-flat,
@ -147,7 +147,7 @@ header, main, footer {
.button-active,
.button-white {
border-radius: var(--form-radius);
padding: 1rem 2rem;
padding: 0.9rem 2rem;
display: inline-block;
align-self: flex-start;
}
@ -215,10 +215,6 @@ header .links a.button {
/* ---------------- main ---------------- */
/* ---------------- top ---------------- */
section {
margin: 1rem 1rem 5rem;
}
section.title {
margin: 0 0 5rem;
}
@ -243,6 +239,7 @@ section.title .under .house1 {
flex: 2 1 670px;
background: url('/assets/img/house_1.png') right bottom no-repeat;
background-size: contain;
border-radius: 0 0 var(--section-radius) 0;
}
section.title .form {
@ -319,7 +316,7 @@ section.pricemat .image {
flex: 1 1 100px;
background: url('/assets/img/house_3.png') center top no-repeat;
background-size: cover;
border-radius: 0 var(--section-radius) 0 0;
border-radius: 0 0 var(--section-radius) 0;
}
section.pricemat a.link {
@ -341,19 +338,99 @@ section.pricemat .space {
}
section.pricemat h2 {
margin-bottom: 1rem;
margin-bottom: 2rem;
}
section.pricemat p {
font-size: 0.8rem;
font-weight: 350;
margin-bottom: 1rem;
margin-bottom: 2rem;
}
section.pricemat .button-white {
font-size: 0.8rem;
}
/* ---------------- footer ---------------- */
footer {
display: flex;
padding: 3rem 3rem 0 0;
margin: 1rem 1rem 3rem;
background: var(--accent-bg);
color: var(--accent-fg);
border-radius: var(--section-radius);
}
footer .house_4 {
flex: 0 1 300px;
background: url('/assets/img/house__4.png') center top no-repeat;
background-size: cover;
border-radius: 0 0 0 var(--section-radius);
}
footer .content {
display: flex;
flex-direction: column;
margin-left: 2rem;
flex: 2 1 auto;
}
footer .top {
display: flex;
align-self: stretch;
}
footer .logo {
height: 45px;
width: auto;
margin-right: 1rem;
}
footer .middle {
display: flex;
flex-direction: column;
}
footer .split {
margin: 3rem 0 2rem;
display: flex;
padding-left: 3rem;
}
footer .split-part {
display: flex;
flex-direction: column;
}
footer .split-part {
flex: 1 1 100px;
}
footer form {
flex: 1 1 300px;
background: var(--main-bg);
color: var(--main-fg);
border-radius: 8px;
padding: 1rem;
margin-bottom: 3rem;
}
footer .split-part a,
footer .split-part a:visited,
footer .split-part p {
color: var(--accent-fg);
margin-bottom: 0.5rem;
}
footer .split-part a {
font-weight: 700;
}
footer button {
width: 100%;
}
/* ---------------- form ---------------- */
.form-group {
@ -384,6 +461,7 @@ section.pricemat .button-white {
.form-item label {
font-size: 0.8rem;
margin-bottom: 0.5rem;
font-weight: 600;
}
.form-list {
@ -423,7 +501,7 @@ label.checkbox input[type=checkbox]:checked ~ .button-checkbox {
.form-item input[type=password] {
border-radius: var(--form-radius);
border: var(--form-border);
padding: 0.5rem;
padding: 0.9rem 0.5rem;
width: 100%;
}