first draft

This commit is contained in:
Jannik Beyerstedt 2020-04-04 23:56:19 +02:00
parent 6ecd24de6f
commit 8834aa7d82
6 changed files with 166 additions and 2 deletions

13
.brackets.json Normal file
View file

@ -0,0 +1,13 @@
{
"sass.enabled": false,
"path": {
"scss/*": {
"sass.enabled": true,
"sass.options": {
"outputDir": "../",
"sourceComments": false,
"outputStyle": "compressed"
}
}
}
}

View file

@ -1,3 +1,8 @@
# web-bey
# Website for beyerstedt.de
Simple static landing page for beyerstedt.de
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.)

34
index.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Familie Beyerstedt</title>
<meta name="robots" content="index, follow">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="container">
<h1>Familie Beyerstedt</h1>
<h2>Webseiten der Familienmitglieder</h2>
<ul>
<li><a href="https://jannikbeyerstedt.de">Jannik Beyerstedt</a></li>
</ul>
<h2>Services für die Familie</h2>
<ul>
<li><a href="https://cloud.beyerstedt.de">Nextcloud (Dateifreigabe, Kalender, Kontakte)</a></li>
<li><a href="https://git.jannikbeyerstedt.de">Git-Server</a></li>
<li><a href="mumble://mumble.jtbx.de">Mumble-Server</a></li>
</ul>
</main>
<footer>
<div class="container">
<div class="item"><a href="https://status.jtbx.de" rel="noopener noreferrer" target="_blank">Status-Monitoring</a> der Webservices</div>
<div class="item">Lizenz: <a href="https://creativecommons.org/licenses/by-sa/4.0/" rel="noopener noreferrer" target="_blank">CC BY-SA 4.0</a></div>
</div>
</footer>
</body>
</html>

100
scss/style.scss Normal file
View file

@ -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;
}

3
style.css Normal file
View file

@ -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 */

9
style.css.map Normal file
View file

@ -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": []
}