new style and smaller css

This commit is contained in:
Fl1tzi 2023-07-17 20:28:58 +02:00
parent 637e7936ed
commit dc24b4a0c5
No known key found for this signature in database
GPG key ID: 06B333727810C686
6 changed files with 106 additions and 84 deletions

View file

@ -11,13 +11,20 @@
</head>
<body>
<!-- header -->
<section id="header">
<a href="/" class="go-home">HOME</a>
<h1 class="title">Applications</h1>
</section>
<header>
<h1>Applications</h1>
<nav>
<ul>
<hr/>
<a href="/">Home</a>
//
<a href="/contact.html">Contact</a>
<ul>
</nav>
</header>
<hr/>
<!-- content -->
<section id="content">
<p>These are some applications which are hosted under this
domain.</p>
@ -41,12 +48,18 @@
</table>
</section>
<!-- footer -->
<section id="footer">
<a href="https://git.fl1tzi.com/data/data/src/fl1tzi.com-privacy.md">P R I V A C Y</a>
//
<a href="https://git.fl1tzi.com/Fl1tzi/fl1tzi.com">R E P O</a>
</section>
<br/>
<hr/>
<footer>
<small>
<a href="https://git.fl1tzi.com/data/data/src/fl1tzi.com-privacy.md">P R I V A C Y</a>
//
<a href="https://git.fl1tzi.com/Fl1tzi/fl1tzi.com">R E P O</a>
//
All Rights Reserved.
</small>
</footer>
</body>
</html>

View file

@ -11,13 +11,20 @@
</head>
<body>
<!-- header -->
<section id="header">
<a href="/" class="go-home">HOME</a>
<h1 class="title">Contact</h1>
</section>
<header>
<h1>Contact</h1>
<nav>
<ul>
<hr/>
<a href="/">Home</a>
//
<a href="/contact.html">Contact</a>
<ul>
</nav>
</header>
<hr/>
<!-- content -->
<section id="content">
<ul>
<li><a href="mailto:kontakt@fl1tzi.com">E-Mail</a></li>
@ -28,12 +35,18 @@
</ul>
</section>
<!-- footer -->
<section id="footer">
<a href="https://git.fl1tzi.com/data/data/src/fl1tzi.com-privacy.md">P R I V A C Y</a>
//
<a href="https://git.fl1tzi.com/Fl1tzi/fl1tzi.com">R E P O</a>
</section>
<br/>
<hr/>
<footer>
<small>
<a href="https://git.fl1tzi.com/data/data/src/fl1tzi.com-privacy.md">P R I V A C Y</a>
//
<a href="https://git.fl1tzi.com/Fl1tzi/fl1tzi.com">R E P O</a>
//
All Rights Reserved.
</small>
</footer>
</body>
</html>

View file

@ -1 +1 @@
:root{--font-family-header-footer:monospace;--font-family-content:system-ui;--font-size:16px;--background-color:#121212;--text-color:#fffbf1;--light-color:rgba(255,255,255,0.2)}body{max-width:100%;margin:auto;padding:10px;background-color:var(--background-color);color:var(--text-color)}@media(min-width:1300px){body{max-width:1300px}}section#header{font:var(--font-size) var(--font-family-header-footer)}section#content{font:var(--font-size) var(--font-family-content);margin-top:30px;padding-bottom:20px;padding-top:20px;margin-bottom:10px;margin-top:10px;border-bottom:2px solid white;border-top:2px solid white}section#footer{font:calc(var(--font-size) * .75) var(--font-family-header-footer)}a{text-decoration:underline;font-weight:700;color:white}pre{margin-top:0;margin-bottom:0}.title{font-size:50px;text-transform:uppercase;margin-top:5px;margin-bottom:0}.go-home{background-color:white;text-decoration:none;padding:5px;color:black;margin-left:0}table,th,td{border:1px solid white;border-collapse:collapse}th,td{padding:5px}th{background-color:var(--light-color)}@media(pointer:none),(pointer:coarse){a{margin:10px}li{margin-top:15px}}
:root{--background-color:#121212;--text-color:#fffbf1;--light-color:rgba(255,255,255,0.2)}body{max-width:100%;margin:auto;padding:10px;background-color:var(--background-color);color:var(--text-color);font-family:system-ui}@media(min-width:1300px){body{max-width:1300px}}footer,nav ul{color:grey}nav ul{padding-left:0}a{text-decoration:underline;font-weight:700;color:white}pre{margin-top:0;margin-bottom:0}table,th,td{border:1px solid white;border-collapse:collapse}th,td{padding:5px}th{background-color:var(--light-color)}@media(pointer:none),(pointer:coarse){a{margin:10px}li{margin-top:15px}}

View file

@ -12,12 +12,16 @@
</head>
<body>
<!-- header -->
<section id="header">
<h1 class="title">Index</h1>
</section>
<header>
<h1>Index</h1>
<nav>
<ul>
<ul>
</nav>
</header>
<hr/>
<!-- content -->
<section id="content">
<p>Hi, Im Fl1tzi. I do stuff on the internet and photograph
things.</p>
@ -27,12 +31,18 @@
</ul>
</section>
<!-- footer -->
<section id="footer">
<a href="https://git.fl1tzi.com/data/data/src/fl1tzi.com-privacy.md">P R I V A C Y</a>
//
<a href="https://git.fl1tzi.com/Fl1tzi/fl1tzi.com">R E P O</a>
</section>
<br/>
<hr/>
<footer>
<small>
<a href="https://git.fl1tzi.com/data/data/src/fl1tzi.com-privacy.md">P R I V A C Y</a>
//
<a href="https://git.fl1tzi.com/Fl1tzi/fl1tzi.com">R E P O</a>
//
All Rights Reserved.
</small>
</footer>
</body>
</html>

View file

@ -1,7 +1,4 @@
:root {
--font-family-header-footer: monospace;
--font-family-content: system-ui;
--font-size: 16px;
--background-color: #121212;
--text-color: #FFFbF1;
--light-color: rgba(255, 255, 255, 0.2);
@ -13,6 +10,7 @@ body {
padding: 10px;
background-color: var(--background-color);
color: var(--text-color);
font-family: system-ui;
}
/* on very large screens stop expanding */
@ -22,23 +20,13 @@ body {
}
}
section#header {
font: var(--font-size) var(--font-family-header-footer);
footer, nav ul {
/* links gets overwritten */
color: grey;
}
section#content {
font: var(--font-size) var(--font-family-content);
margin-top: 30px;
padding-bottom: 20px;
padding-top: 20px;
margin-bottom: 10px;
margin-top: 10px;
border-bottom: 2px solid white;
border-top: 2px solid white;
}
section#footer {
font: calc(var(--font-size) * 0.75) var(--font-family-header-footer);
nav ul {
padding-left: 0;
}
a {
@ -52,21 +40,6 @@ pre {
margin-bottom: 0;
}
.title {
font-size: 50px;
text-transform: uppercase;
margin-top: 5px;
margin-bottom: 0;
}
.go-home {
background-color: white;
text-decoration: none;
padding: 5px;
color: black;
margin-left: 0;
}
table, th, td {
border: 1px solid white;
border-collapse: collapse;

View file

@ -14,26 +14,39 @@
</head>
<body>
<!-- header -->
<section id="header">
$if(homepage)$
$else$
<a href="/" class="go-home">HOME</a>
$endif$
<h1 class="title">$title$</h1>
</section>
<header>
<h1>$title$</h1>
<nav>
<ul>
$if(homepage)$
$else$
<hr/>
<a href="/">Home</a>
//
<a href="/contact.html">Contact</a>
$endif$
<ul>
</nav>
</header>
<hr/>
<!-- content -->
<section id="content">
$body$
</section>
<!-- footer -->
<section id="footer">
<a href="https://git.fl1tzi.com/data/data/src/fl1tzi.com-privacy.md">P R I V A C Y</a>
//
<a href="https://git.fl1tzi.com/Fl1tzi/fl1tzi.com">R E P O</a>
</section>
<br/>
<hr/>
<footer>
<small>
<a href="https://git.fl1tzi.com/data/data/src/fl1tzi.com-privacy.md">P R I V A C Y</a>
//
<a href="https://git.fl1tzi.com/Fl1tzi/fl1tzi.com">R E P O</a>
//
All Rights Reserved.
</small>
</footer>
</body>
</html>