first draft
This commit is contained in:
parent
6ecd24de6f
commit
8834aa7d82
13
.brackets.json
Normal file
13
.brackets.json
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
{
|
||||
"sass.enabled": false,
|
||||
"path": {
|
||||
"scss/*": {
|
||||
"sass.enabled": true,
|
||||
"sass.options": {
|
||||
"outputDir": "../",
|
||||
"sourceComments": false,
|
||||
"outputStyle": "compressed"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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
34
index.html
Normal 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
100
scss/style.scss
Normal 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
3
style.css
Normal 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
9
style.css.map
Normal 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": []
|
||||
}
|
||||
Loading…
Reference in a new issue