From c613aa126aee5c6db20cec1d49e3e64d40df8d29 Mon Sep 17 00:00:00 2001 From: Jonatan Nilsson Date: Thu, 16 Feb 2023 09:41:07 +0000 Subject: [PATCH] More development. Finished footer pretty much --- heimaerbest/app/footer.js | 39 +++++++- heimaerbest/app/header.js | 2 +- heimaerbest/app/site_frontpage.js | 8 +- heimaerbest/public/assets/img/logo_white.svg | 12 +++ heimaerbest/public/index.html | 98 ++++++++++++++++++-- 5 files changed, 140 insertions(+), 19 deletions(-) create mode 100644 heimaerbest/public/assets/img/logo_white.svg diff --git a/heimaerbest/app/footer.js b/heimaerbest/app/footer.js index 76d7f16..fac5a88 100644 --- a/heimaerbest/app/footer.js +++ b/heimaerbest/app/footer.js @@ -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'), ] }, } diff --git a/heimaerbest/app/header.js b/heimaerbest/app/header.js index f102e8a..b718411 100644 --- a/heimaerbest/app/header.js +++ b/heimaerbest/app/header.js @@ -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'), ]), ] }, diff --git a/heimaerbest/app/site_frontpage.js b/heimaerbest/app/site_frontpage.js index 9fd2ed3..805e4f4 100644 --- a/heimaerbest/app/site_frontpage.js +++ b/heimaerbest/app/site_frontpage.js @@ -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ð'), - ]), + ]),*/ ]), ]), ]), diff --git a/heimaerbest/public/assets/img/logo_white.svg b/heimaerbest/public/assets/img/logo_white.svg new file mode 100644 index 0000000..319fb21 --- /dev/null +++ b/heimaerbest/public/assets/img/logo_white.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/heimaerbest/public/index.html b/heimaerbest/public/index.html index cf772d0..1d2be26 100644 --- a/heimaerbest/public/index.html +++ b/heimaerbest/public/index.html @@ -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%; }