mirror of
https://github.com/CrispyPin/crispypin.cc.git
synced 2024-11-10 04:00:27 +01:00
Add some parts of old website
This commit is contained in:
parent
3f2922d145
commit
3f2d1ee37b
12 changed files with 411 additions and 13 deletions
|
|
@ -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>
|
||||||
|
|
@ -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
BIN
docs/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 928 B |
182
docs/style.css
Normal file
182
docs/style.css
Normal 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
9
docs/style.css.map
Normal 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
172
docs/style.scss
Normal 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
BIN
docs/uparrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 261 B |
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -1 +1,2 @@
|
||||||
<p>amazing footer</p>
|
<footer>crispypin.cc</footer>
|
||||||
|
<div class="scroll-reset" onclick="window.scrollTo(0,0)"></div>
|
||||||
|
|
@ -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)
|
||||||
|
|
@ -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>
|
||||||
Loading…
Reference in a new issue