Add some parts of old website

This commit is contained in:
Crispy 2021-06-25 01:33:18 +02:00
parent 3f2922d145
commit 3f2d1ee37b
12 changed files with 411 additions and 13 deletions

View file

@ -4,13 +4,24 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css">
<title>Document</title> <title>Document</title>
</head> </head>
<body> <body>
<h>My awesome header</h> <header>
<p>todo: add links</p> <a href="/" id="logo"><img src="/logo.png" alt=""></a>
</header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/games/">Games</a></li>
<li><a href="/fractals/">Fractals</a></li>
<li><a href="/blender/">Blender stuff</a></li>
<li><a href="https://crispypin.github.io/gol-wallpaper">Game of Life</a></li>
</ul>
</nav>
<p>fractals go here woo</p> <p>fractals go here woo</p>
<p>amazing footer</p> <footer>crispypin.cc</footer>
<div class="scroll-reset" onclick="window.scrollTo(0,0)"></div>
</body> </body>
</html> </html>

View file

@ -4,14 +4,25 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css">
<title>CrispyPin.cc</title> <title>CrispyPin.cc</title>
</head> </head>
<body> <body>
<h>My awesome header</h> <header>
<p>todo: add links</p> <a href="/" id="logo"><img src="/logo.png" alt=""></a>
<p>Homepage</p> </header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/games/">Games</a></li>
<li><a href="/fractals/">Fractals</a></li>
<li><a href="/blender/">Blender stuff</a></li>
<li><a href="https://crispypin.github.io/gol-wallpaper">Game of Life</a></li>
</ul>
</nav>
<h1>Homepage</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum exercitationem quod laudantium neque. Dolor qui magnam debitis repellendus assumenda tenetur ab aliquam ea sit in harum facere neque ad nemo vel nesciunt distinctio totam, cupiditate, deleniti nam voluptas quia aperiam.</p> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum exercitationem quod laudantium neque. Dolor qui magnam debitis repellendus assumenda tenetur ab aliquam ea sit in harum facere neque ad nemo vel nesciunt distinctio totam, cupiditate, deleniti nam voluptas quia aperiam.</p>
<p>amazing footer</p> <footer>crispypin.cc</footer>
<div class="scroll-reset" onclick="window.scrollTo(0,0)"></div>
</body> </body>
</html> </html>

BIN
docs/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 928 B

182
docs/style.css Normal file
View file

@ -0,0 +1,182 @@
body {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
background-color: #181818;
color: #bfb;
display: -ms-grid;
display: grid;
-ms-grid-rows: 50px auto 1fr auto;
grid-template-rows: 50px auto 1fr auto;
-ms-grid-columns: 20px 1fr 20px;
grid-template-columns: 20px 1fr 20px;
margin: 0;
min-height: 100vh;
}
nav {
grid-column: 1 / -1;
}
nav ul {
list-style-type: none;
margin: 0;
display: -ms-grid;
display: grid;
padding: 5px 25px;
grid-gap: 5px;
-ms-grid-columns: (minmax(175px, auto))[auto-fill];
grid-template-columns: repeat(auto-fill, minmax(175px, auto));
}
nav li {
padding: 8px;
}
nav a {
font-size: 24px;
color: #000;
text-decoration: none;
display: block;
text-align: center;
}
header {
grid-column: 1 / -1;
background-color: #181818;
padding: 0;
}
header h1 {
font-size: 40px;
margin: 0;
}
footer {
grid-column: 1 / -1;
margin: 25px;
}
main {
padding: 0 20px;
grid-column: 2 / -2;
background-color: #282828;
}
.visual {
margin: 20px;
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
background-color: #000;
}
.controlbar {
background-color: #181818;
padding: 2px 5px;
height: -webkit-max-content;
height: -moz-max-content;
height: max-content;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
-ms-flex-line-pack: stretch;
align-content: stretch;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.controlbar button, .controlbar input {
padding: 4px 6px;
height: 25px;
border: 1px solid #000;
border: 0;
cursor: pointer;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
margin: 2px;
}
.controlbar .slider {
-webkit-appearance: none;
-moz-appearance: none;
outline: none;
border-radius: 0;
height: 25px;
padding: 0;
margin: 2px;
cursor: pointer;
}
.controlbar .slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
border-radius: 1px;
width: 25px;
height: 25px;
background-color: #46c;
margin: 0;
border-radius: 0;
border: 1px solid #000;
}
.controlbar .slider::-moz-range-thumb {
/*TODO make this look the same as on chrome*/
-moz-appearance: none;
width: 25px;
height: 100%;
background-color: #46c;
margin: 0;
padding: 0;
border-radius: 0;
border: 1px solid #000;
}
.controlbar label {
background-color: #181818;
color: #fb8;
margin: 2px;
font-family: 'Consolas', 'Courier New', Courier, monospace;
}
.controlbar .play-button {
-ms-flex-preferred-size: 35%;
flex-basis: 35%;
}
.clickable, nav li, .controlbar button, .controlbar input, .scroll-reset {
background-color: #4a4;
}
.clickable:hover, nav li:hover, .controlbar button:hover, .controlbar input:hover, .scroll-reset:hover {
background-color: #4af;
}
.clickable:active, nav li:active, .controlbar button:active, .controlbar input:active, .scroll-reset:active {
background-color: #46c;
}
.clickable:disabled, nav li:disabled, .controlbar button:disabled, .controlbar input:disabled, .scroll-reset:disabled {
background-color: #8b8;
text-decoration: line-through;
color: #000;
cursor: default;
}
.scroll-reset {
position: fixed;
right: 20px;
bottom: 20px;
width: 40px;
height: 40px;
border-radius: 25%;
background-image: url("uparrow.png");
cursor: pointer;
}
.img-right {
float: right;
}
/*# sourceMappingURL=style.css.map */

9
docs/style.css.map Normal file
View file

@ -0,0 +1,9 @@
{
"version": 3,
"mappings": "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",
"sources": [
"style.scss"
],
"names": [],
"file": "style.css"
}

172
docs/style.scss Normal file
View file

@ -0,0 +1,172 @@
$main-item: #4a4;
$main-item-hover: #4af;
$main-item-active: #46c;
$main-item-disabled: #8b8;
$main-bg: #181818;
$main-page-bg: #282828;
$main-color: #bfb;
body {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
background-color: $main-bg;
color: $main-color;
display: grid;
grid-template-rows: 50px auto 1fr auto;
grid-template-columns: 20px 1fr 20px;
margin: 0;
min-height: 100vh;
}
nav {
grid-column: 1 / -1;
ul {
list-style-type: none;
margin: 0;
display: grid;
padding: 5px 25px;
grid-gap: 5px;
grid-template-columns: repeat(auto-fill, minmax(175px, auto));
}
li {
@extend .clickable;
padding: 8px;
}
a {
font-size: 24px;
color: #000;
text-decoration: none;
display: block;
text-align: center;
}
}
header {
grid-column: 1 / -1;
background-color: $main-bg;
padding: 0;
h1 {
font-size: 40px;
margin: 0;
}
}
footer {
grid-column: 1 / -1;
margin: 25px;
}
main {
padding: 0 20px;
grid-column: 2 / -2;
background-color: $main-page-bg;
}
.visual {
margin: 20px;
width: min-content;
background-color: #000;
}
.controlbar {
background-color: $main-bg;
padding: 2px 5px;
height: max-content;
display: flex;
justify-content: space-evenly;
align-content: stretch;
flex-wrap: wrap;
button, input {
@extend .clickable;
padding: 4px 6px;
height: 25px;
border: 1px solid #000;
border: 0;
cursor: pointer;
flex-grow: 1;
margin: 2px;
}
.slider {
-webkit-appearance: none;
-moz-appearance: none;
outline: none;
border-radius: 0;
height: 25px;
padding: 0;
margin: 2px;
cursor: pointer;
&::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
border-radius: 1px;
width: 25px;
height: 25px;
background-color: $main-item-active;
margin: 0;
border-radius: 0;
border: 1px solid #000;
}
&::-moz-range-thumb {
/*TODO make this look the same as on chrome*/
-moz-appearance: none;
width: 25px;
height: 100%;
background-color: $main-item-active;
margin: 0;
padding: 0;
border-radius: 0;
border: 1px solid #000;
}
}
label {
background-color: $main-bg;
color: #fb8;
margin: 2px;
font-family: 'Consolas', 'Courier New', Courier, monospace;
}
.play-button {
flex-basis: 35%;
}
}
.clickable {
background-color: $main-item;
&:hover {
background-color: $main-item-hover;
}
&:active {
background-color: $main-item-active;
}
&:disabled {
background-color: $main-item-disabled;
text-decoration: line-through;
color: #000;
cursor: default;
}
}
.scroll-reset {
@extend .clickable;
position: fixed;
right: 20px;
bottom: 20px;
width: 40px;
height: 40px;
border-radius: 25%;
background-image: url("uparrow.png");
cursor: pointer;
}
.img-right {
float: right;
}

BIN
docs/uparrow.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 261 B

View file

@ -4,6 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css">
<title>Document</title> <title>Document</title>
</head> </head>
<body> <body>

View file

@ -4,11 +4,12 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css">
<title>CrispyPin.cc</title> <title>CrispyPin.cc</title>
</head> </head>
<body> <body>
&include(header.html) &include(header.html)
<p>Homepage</p> <h1>Homepage</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum exercitationem quod laudantium neque. Dolor qui magnam debitis repellendus assumenda tenetur ab aliquam ea sit in harum facere neque ad nemo vel nesciunt distinctio totam, cupiditate, deleniti nam voluptas quia aperiam.</p> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Earum exercitationem quod laudantium neque. Dolor qui magnam debitis repellendus assumenda tenetur ab aliquam ea sit in harum facere neque ad nemo vel nesciunt distinctio totam, cupiditate, deleniti nam voluptas quia aperiam.</p>
&include(footer.html) &include(footer.html)
</body> </body>

View file

@ -1 +1,2 @@
<p>amazing footer</p> <footer>crispypin.cc</footer>
<div class="scroll-reset" onclick="window.scrollTo(0,0)"></div>

View file

@ -1,2 +1,4 @@
<h>My awesome header</h> <header>
<a href="/" id="logo"><img src="/logo.png" alt=""></a>
</header>
&include(navbar.html) &include(navbar.html)

View file

@ -1 +1,9 @@
<p>todo: add links</p> <nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/games/">Games</a></li>
<li><a href="/fractals/">Fractals</a></li>
<li><a href="/blender/">Blender stuff</a></li>
<li><a href="https://crispypin.github.io/gol-wallpaper">Game of Life</a></li>
</ul>
</nav>