From 8834aa7d829cb69b16689d8262961f49b5d58975 Mon Sep 17 00:00:00 2001 From: Jannik Beyerstedt Date: Sat, 4 Apr 2020 23:56:19 +0200 Subject: [PATCH] first draft --- .brackets.json | 13 +++++++ README.md | 9 ++++- index.html | 34 ++++++++++++++++ scss/style.scss | 100 ++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 3 ++ style.css.map | 9 +++++ 6 files changed, 166 insertions(+), 2 deletions(-) create mode 100644 .brackets.json create mode 100644 index.html create mode 100644 scss/style.scss create mode 100644 style.css create mode 100644 style.css.map diff --git a/.brackets.json b/.brackets.json new file mode 100644 index 0000000..63275cd --- /dev/null +++ b/.brackets.json @@ -0,0 +1,13 @@ +{ + "sass.enabled": false, + "path": { + "scss/*": { + "sass.enabled": true, + "sass.options": { + "outputDir": "../", + "sourceComments": false, + "outputStyle": "compressed" + } + } + } +} \ No newline at end of file diff --git a/README.md b/README.md index eb9f903..31b2836 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,8 @@ -# web-bey +# Website for beyerstedt.de -Simple static landing page for beyerstedt.de \ No newline at end of file +Simple static landing page using some hand-written HTML and CSS. +No framework, no third-party resources, just a few KB of code. + +Because I'm a bit lazy, the CSS is generated from SASS code. +Build the files in the `scss` directory and put the output in the root directory. +(Deployment can omit the directory and just put the html and css files on a server.) diff --git a/index.html b/index.html new file mode 100644 index 0000000..23e13f8 --- /dev/null +++ b/index.html @@ -0,0 +1,34 @@ + + + + + + Familie Beyerstedt + + + + + +
+

Familie Beyerstedt

+ +

Webseiten der Familienmitglieder

+ + +

Services für die Familie

+ +
+ + + diff --git a/scss/style.scss b/scss/style.scss new file mode 100644 index 0000000..8a48c67 --- /dev/null +++ b/scss/style.scss @@ -0,0 +1,100 @@ +$footer_height: 55px; +$footer_margin: 20px; +$footer_paddingtop: 15px; +$footer_paddingbtn: 10px; +$body_maxwidth: 650px; + +html { + box-sizing: border-box; +} +* { + box-sizing: inherit; +} + +body { + font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; + line-height: 1.5em; + margin: 0; + margin-bottom: $footer_height + $footer_margin + $footer_paddingtop + $footer_paddingbtn; +} +.container { + max-width: $body_maxwidth; + margin-left: auto; + margin-right: auto; + + @media all and (max-width: $body_maxwidth+2*8px) { + margin-left: 8px; + margin-right: 8px; + } +} + +html { + box-sizing: border-box; + position: relative; + min-height: 100%; +} + +h1, h2, h3, h4 { + font-weight: 300; + line-height: 1.2em; +} +p, li { + line-height: 1.5em; +} + +h1 { + padding: 30px 0; + font-size: 3em; + text-align: center; + + @media all and (max-width: 450px) { + padding: 15px 0; + font-size: 2.2em; + } +} + + +main { + margin-top: 50px; +} + +footer { + width: 100%; + height: $footer_height; + + font-size: 0.8rem; + margin-top: $footer_margin; + padding-top: $footer_paddingtop; + padding-bottom: $footer_paddingbtn; + background-color: #bebebe; + color: #000; +} + +footer .container { + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -moz-flex; + display: -webkit-flex; + display: flex; + + flex-direction: row; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; + justify-content: space-between; + + @media all and (max-width: 450px) { + flex-direction: column; + text-align: center; + } +} + +/* make footer sticky */ +html { + position: relative; + min-height: 100%; +} +footer { + position: absolute; + bottom: 0; +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..809e66b --- /dev/null +++ b/style.css @@ -0,0 +1,3 @@ +html {box-sizing:border-box}*{box-sizing:inherit}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";line-height:1.5em;margin:0;margin-bottom:100px}.container{max-width:650px;margin-left:auto;margin-right:auto}@media all and (max-width: 666px){.container{margin-left:8px;margin-right:8px}}html {box-sizing:border-box;position:relative;min-height:100%}h1,h2,h3,h4{font-weight:300;line-height:1.2em}p,li{line-height:1.5em}h1{padding:30px 0;font-size:3em;text-align:center}@media all and (max-width: 450px){h1{padding:15px 0;font-size:2.2em}}main{margin-top:50px}footer{width:100%;height:55px;font-size:0.8rem;margin-top:20px;padding-top:15px;padding-bottom:10px;background-color:#bebebe;color:#000}footer .container{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-moz-flex;display:-webkit-flex;display:flex;flex-direction:row;-webkit-flex-wrap:wrap;flex-wrap:wrap;justify-content:space-between}@media all and (max-width: 450px){footer .container{flex-direction:column;text-align:center}}html{position:relative;min-height:100%}footer{position:absolute;bottom:0} + +/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/style.css.map b/style.css.map new file mode 100644 index 0000000..3c79941 --- /dev/null +++ b/style.css.map @@ -0,0 +1,9 @@ +{ + "version": 3, + "file": "style.css", + "sources": [ + "scss/style.scss" + ], + "mappings": "GAMA,AAAA,MAAM,AAAA,CACJ,UAAU,CAAE,UAAW,CACxB,AACD,AAAA,CAAC,AAAC,CACA,UAAU,CAAE,OAAQ,CACrB,AAED,AAAA,IAAI,AAAC,CACH,WAAW,CAAE,0KAA2K,CACxL,WAAW,CAAE,KAAM,CACnB,MAAM,CAAE,CAAE,CACV,aAAa,CAAE,KAAc,CAC9B,AACD,AAAA,UAAU,AAAC,CACT,SAAS,CAhBK,KAAK,CAiBnB,WAAW,CAAE,IAAK,CAClB,YAAY,CAAE,IAAK,CAMpB,AAJC,MAAM,CAAN,GAAG,MAAM,SAAS,EAAE,KAAK,EAL3B,AAAA,UAAU,AAAC,CAMP,WAAW,CAAE,GAAI,CACjB,YAAY,CAAE,GAAI,CAErB,CAED,AAAA,MAAM,AAAA,CACJ,UAAU,CAAE,UAAW,CACvB,QAAQ,CAAE,QAAS,CACnB,UAAU,CAAE,IAAK,CAClB,AAED,AAAA,EAAE,CAAE,AAAA,EAAE,CAAE,AAAA,EAAE,CAAE,AAAA,EAAE,AAAC,CACb,WAAW,CAAE,GAAI,CACjB,WAAW,CAAE,KAAM,CACpB,AACD,AAAA,CAAC,CAAE,AAAA,EAAE,AAAC,CACJ,WAAW,CAAE,KAAM,CACpB,AAED,AAAA,EAAE,AAAC,CACD,OAAO,CAAE,MAAO,CAChB,SAAS,CAAE,GAAI,CACf,UAAU,CAAE,MAAO,CAMpB,AAJC,MAAM,CAAN,GAAG,MAAM,SAAS,EAAE,KAAK,EAL3B,AAAA,EAAE,AAAC,CAMC,OAAO,CAAE,MAAO,CAChB,SAAS,CAAE,KAAM,CAEpB,CAGD,AAAA,IAAI,AAAC,CACH,UAAU,CAAE,IAAK,CAClB,AAED,AAAA,MAAM,AAAC,CACL,KAAK,CAAE,IAAK,CACZ,MAAM,CA9DQ,IAAI,CAgElB,SAAS,CAAE,MAAO,CAClB,UAAU,CAhEI,IAAI,CAiElB,WAAW,CAhEO,IAAI,CAiEtB,cAAc,CAhEI,IAAI,CAiEtB,gBAAgB,CAAE,OAAQ,CAC1B,KAAK,CAAE,IAAK,CACb,AAED,AAAO,MAAD,CAAC,UAAU,AAAC,CAChB,OAAO,CAAE,WAAY,CACrB,OAAO,CAAE,QAAS,CAClB,OAAO,CAAE,WAAY,CACrB,OAAO,CAAE,SAAU,CACnB,OAAO,CAAE,YAAa,CACtB,OAAO,CAAE,IAAK,CAEd,cAAc,CAAE,GAAI,CACpB,iBAAiB,CAAE,IAAK,CACxB,SAAS,CAAE,IAAK,CAChB,eAAe,CAAE,aAAc,CAMhC,AAJC,MAAM,CAAN,GAAG,MAAM,SAAS,EAAE,KAAK,EAb3B,AAAO,MAAD,CAAC,UAAU,AAAC,CAcd,cAAc,CAAE,MAAO,CACvB,UAAU,CAAE,MAAO,CAEtB,CAGD,AAAA,IAAI,AAAC,CACH,QAAQ,CAAE,QAAS,CACnB,UAAU,CAAE,IAAK,CAClB,AACD,AAAA,MAAM,AAAC,CACL,QAAQ,CAAE,QAAS,CACnB,MAAM,CAAE,CAAE,CACX", + "names": [] +} \ No newline at end of file