pub-solar/pub.solar
5
2
Fork 2
Code Issues Pull requests Packages Projects Releases Wiki Activity
pub.solar/index.html

242 lines
13 KiB
HTML
Raw Normal View History

Initial comimt
2021-05-30 14:55:34 +00:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Pub Solar</title>
<meta name="theme-color" content="#000000" id="theme-color" />
<meta name="description" content="Fucking free">
<style lang="scss">
/* latin-ext */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 800;
font-display: swap;
src: url(/assets/opensans/v20/memnYaGs126MiZpBA-UFUKW-U9hlIqOjjg.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 800;
font-display: swap;
src: url(/assets/opensans/v20/memnYaGs126MiZpBA-UFUKW-U9hrIqM.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(/assets/opensans/v20/mem5YaGs126MiZpBA-UN8rsOXOhpOqc.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(/assets/opensans/v20/mem5YaGs126MiZpBA-UN8rsOUuhp.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
html {
--accent: #ed1c24;
--foreground: #000;
--background: #fff;
font-family: 'Open Sans', Arial, sans-serif;
mobile is fucked
2021-05-30 15:36:37 +00:00
font-weight: 900;
Initial comimt
2021-05-30 14:55:34 +00:00
background: var(--background);
color: var(--foreground);
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
width: 100vw;
height: 100vh;
margin: 0;
Better mobile view
2021-05-30 17:15:14 +00:00
font-size: max(1vw, 1vh);
Initial comimt
2021-05-30 14:55:34 +00:00
}
body {
margin: 0;
height: 100vw;
width: 100vw;
overflow: hidden;
}
.ps-main {
display: flex;
align-items: center;
Better mobile view
2021-05-30 17:15:14 +00:00
justify-content: center;
Initial comimt
2021-05-30 14:55:34 +00:00
height: 100vh;
width: 100vw;
position: relative;
}
.ps-main--background {
position: fixed;
mobile is fucked
2021-05-30 15:36:37 +00:00
height: 100vh;
Initial comimt
2021-05-30 14:55:34 +00:00
width: 100vw;
overflow: hidden;
}
.ps-main--page {
color: grey;
z-index: 1;
}
.ps-page {
display: flex;
flex-direction: column;
align-items: center;
Better mobile view
2021-05-30 17:15:14 +00:00
width: min(100vw, 100vh);
Easier to read
2021-05-30 17:25:45 +00:00
margin-top: 10vh;
mobile is fucked
2021-05-30 15:36:37 +00:00
transform: rotate(-25deg);
}
@media screen and (orientation: landscape) {
Better mobile view
2021-05-30 17:15:14 +00:00
.ps-page {
mobile is fucked
2021-05-30 15:36:37 +00:00
transform: rotate(-65deg);
}
Initial comimt
2021-05-30 14:55:34 +00:00
}
.ps-page--link {
color: var(--foreground);
background: white;
margin-bottom: 6rem;
line-height: 3rem;
text-decoration: none;
Better mobile view
2021-05-30 17:15:14 +00:00
text-align: center;
Initial comimt
2021-05-30 14:55:34 +00:00
font-weight: 900;
font-size: 8rem;
Better
2021-05-31 19:27:04 +00:00
padding: 0 200vw;
Initial comimt
2021-05-30 14:55:34 +00:00
text-shadow: 5px 0px 0px white;
transition: text-shadow 0.1s ease;
Easier to read
2021-05-30 17:25:45 +00:00
white-space: nowrap;
Initial comimt
2021-05-30 14:55:34 +00:00
}
.ps-page--link:hover {
Better
2021-05-31 19:27:04 +00:00
text-shadow: 10px 0px 0px var(--accent);
Initial comimt
2021-05-30 14:55:34 +00:00
}
.ps-background {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
mobile is fucked
2021-05-30 15:36:37 +00:00
speak: none;
Initial comimt
2021-05-30 14:55:34 +00:00
}
.ps-background--logo {
mobile is fucked
2021-05-30 15:36:37 +00:00
width: calc(100vw / 9);
Initial comimt
2021-05-30 14:55:34 +00:00
// height: 4rem;
margin: 0.1rem;
}
mobile is fucked
2021-05-30 15:36:37 +00:00
@media screen and (orientation: landscape) {
.ps-background--logo {
width: calc(100vw / 16);
}
}
Initial comimt
2021-05-30 14:55:34 +00:00
.ps-background--1312 {
transform: rotate(34deg);
transform-origin: center center;
color: #eee;
position: fixed;
z-index: 1;
top: -50vh;
left: -50vw;
font-weight: 900;
font-size: 7rem;
line-height: 6rem;
width: 200vw;
height: 200vh;
}
.ps-logo {
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
Easier to read
2021-05-30 17:25:45 +00:00
width: 100px;
Initial comimt
2021-05-30 14:55:34 +00:00
}
.ps-logo--base {
Better
2021-05-31 19:27:04 +00:00
animation-name: rotate;
animation-duration: 0.3s;
Initial comimt
2021-05-30 14:55:34 +00:00
animation-timing-function: linear;
Better
2021-05-31 19:27:04 +00:00
animation-play-state: paused;
Initial comimt
2021-05-30 14:55:34 +00:00
animation-iteration-count: infinite;
}
Better
2021-05-31 19:27:04 +00:00
.ps-logo--base:hover {
animation-play-state: running;
}
.ps-logo:nth-child(2n) .ps-logo--base { animation-delay: -0.1s; }
.ps-logo:nth-child(3n) .ps-logo--base { animation-delay: -0.3s; }
.ps-logo:nth-child(5n) .ps-logo--base { animation-delay: -0.5s; }
.ps-logo:nth-child(7n) .ps-logo--base { animation-delay: -7s; }
.ps-logo:nth-child(11n) .ps-logo--base { animation-delay: -0.9s; }
.ps-logo:nth-child(13n) .ps-logo--base { animation-delay: -1s; }
Initial comimt
2021-05-30 14:55:34 +00:00
.ps-logo--base::before {
position: absolute;
display: block;
content: '';
width: 100%;
height: 100%;
border-radius: 50%;
}
Better
2021-05-31 19:27:04 +00:00
@keyframes rotate {
Initial comimt
2021-05-30 14:55:34 +00:00
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="ps-main">
<div id="background" class="ps-background ps-main--background">
<div id="x1312" class="ps-background--1312"></div>
<div id="logo" class="ps-logo ps-background--logo">
<svg data-name="Layer 3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 275.3 276.37" class="ps-logo--base"> <defs> <style> .cls-1, .cls-2{ fill:#ed1c24; } .cls-1{ stroke:#ed1c24; stroke-width:6.89px; } .cls-1, .cls-2, .cls-4{ stroke-miterlimit:10; } .cls-2{ stroke:#fff; stroke-width:4.72px; } .cls-3{ fill:#fff; } .cls-4{ stroke:#000; stroke-width:4.58px; } </style> </defs> <title>PubSolar logo</title> <path class="cls-1" d="M362.85,272.68v11.78l-4.39,1.84a18.38,18.38,0,0,0-11.24,15.8l-.59,9.43-7.92.61a18.38,18.38,0,0,0-15.53,11.22l-2.47,5.9H309.07a18.38,18.38,0,0,0-14.13,6.63l-6.8,8.17-10.58-3.17a18.38,18.38,0,0,0-14.89,1.95l-9.84,6-8.65-5.75a18.38,18.38,0,0,0-15.75-2.2l-10,3.17-5.88-7a18.38,18.38,0,0,0-15.43-6.51l-10.24.76-4.62-8.75a18.38,18.38,0,0,0-14.22-9.69l-9.7-1.08-1.89-10.65a18.38,18.38,0,0,0-11.06-13.77L134.7,283l.93-11.32a18.38,18.38,0,0,0-7-16l-6.52-5.06,3.55-8.77a18.38,18.38,0,0,0-1.77-17.13l-5.74-8.57,6.06-8a18.38,18.38,0,0,0,2.54-17.63l-3.93-10.34,5.12-2.87a18.38,18.38,0,0,0,9.31-17.78l-1.12-11.75,8.18-2.64a18.38,18.38,0,0,0,12.67-16l.75-9.5h6.44a18.38,18.38,0,0,0,17.59-13L184,99.13l12.19,1.25a18.38,18.38,0,0,0,17.27-8.25l4.11-6.3,8.21,3.79a18.38,18.38,0,0,0,20.12-3.14l5.85-5.36L261,88.21a18.38,18.38,0,0,0,18.23,2.32L287.76,87l6,7.67a18.38,18.38,0,0,0,15.32,7l11.25-.51,3.21,7.56a18.38,18.38,0,0,0,15.29,11.12l9.33.83.48,7.39A18.38,18.38,0,0,0,358.1,143l9.37,5.18-.71,11.41a18.38,18.38,0,0,0,7.43,15.93l7.14,5.26-3.79,10.66a18.38,18.38,0,0,0,2,16.27l5.57,8.45-6.46,10.31a18.38,18.38,0,0,0-2.11,14.77l2.66,9.38-9.63,7.93A18.38,18.38,0,0,0,362.85,272.68Z" transform="translate(-113.88 -76.62)"/> <circle class="cls-2" cx="137.72" cy="138.48" r="117.79"/> <path class="cls-3" d="M326.34,141.78A105.72,105.72,0,0,0,181.56,295.61,105.7,105.7,0,1,1,326.34,141.78Z" transform="translate(-113.88 -76.62)"/> <path class="cls-3" d="M180.73,231.12c.57,1.71,6.47,20.7,10,30s7.59,16.9,12.87,17.74,10.64-7.56,16.9-7.78c8.76-.31,13.68-1,18.13-8.12,3.56-5.67,9.9,1.76,25.87-7.49,8.71-5,26.56-4.08,43.4-11.91,20.26-9.42,6.82-12,6.83-24,0-3.84,3.66-4.88,9.42-7.17,3.82-1.52,9.75-4.8,8.63-8.92-1.24-4.55-.79-6.28-5.2-7.93-16.84-6.31-42.72,27-44.28-9.57-.55-13-13.2-15.39-21.5-15.55-4.33-.08-8,1.37-11-5.82-3.38-8.07-10.07-19.35-16.92-12s2,17.55,3.13,27c.19,1.55-.08,3-1.63,3.23a16.52,16.52,0,0,0-9.93,5.06c-4.27,4.41-8.18-2.59-15.09,3.8-6.32,5.85-13.27-.73-25.52-.41C164.19,191.84,180.73,231.12,180.73,231.12Z" transform="translate(-113.88 -76.62)"/> <path class="cls-4" d="M200.74,254.41a27,27,0,0,0,1.31,3c2.16,4.33,1.11,2.86,3.11,6.36,1.22,2.13,4.06,6.21,2.11,6.86-1.68.56-4.06-1-4.75-3.08-.34-1-.59-2.08-.93-3.1-2.72-8.19-6.6-15.8-9.33-24-3-9-5.76-18.25-7.12-27.94-.46-3.57-3.28-10.18-.86-11,1.49-.49,2.14.53,2.48,1.55.74,2.23.09,2.45.5,3.66a1.31,1.31,0,0,0,1.7.78c1.68-.56,1.9-3.63,3.95-4.31,7.36-2.45,15.23,5.38,17.4,11.9,1.48,6-1.4,10.39-6.34,15.14a7.39,7.39,0,0,1-2.86,1.67c-2,.68-4.81.46-6.12.89s-1.61,1.36-1.15,2.76,1.21,2.7,1.67,4.1c.68,2,1.15,4.07,1.83,6.11a13.67,13.67,0,0,0,.71,1.83C198.94,249.94,200,252.18,200.74,254.41Zm-6.45-48.32c-6.52,2.17-4.88,13.31-3,19.08,1.3,3.91,4.19,5.44,8.09,4.14,5.59-1.86,9.23-8.65,7.37-14.24C205.11,211,199.22,204.45,194.29,206.09Z" transform="translate(-113.88 -76.62)"/> <path class="cls-4" d="M216.34,197.41a.88.88,0,0,1,1.35.45c2.1,3.85,3.09,9.07,5.33,13.18,2.1,3.85,7.1,7,9.45,5.68,2.67-1.46,4.77-8.79,2.56-12.83-.64-1.17-1.64-2.24-2.5-3.8-1.32-2.41-2.15-6.11.13-7.35,1.37-.75,1.92-.2,2.31.52.07.13.08.29.15.43.25.46.59.78.84,1.23,1.1,2,1.14,4.88,1.54,6.86a21.85,21.85,0,0,0,2,6.08,14.16,14.16,0,0,0,4.19,4.74c.38.38,1,.73,1.24,1.18a1.24,1.24,0,0,1-.71,1.66c-.85.46-3.88-1.52-4.84-3.28-.21-.39-.3-.85-.55-1.31a.78.78,0,0,0-1.14-.23c-.65.36-.62,2.12-.83,2.82-.76,2-1.51,4.21-3.33,5.21-4,2.21-9.11-1.63-10.89-4.89-.43-.78-.79-1.6-1.25-2.45C219.43,207.58,215.43,197.91,216.34,197.41Z" transform="translate(-113.88 -76.62)"/> <path class="cls-4" d="M251.1,184.25c.22.55.06,1.41,1.17,1,.62-.24.83-1.12,1.06-1.77a7.57,7.57,0,0,1,4.54-4.5c6.36-2.5,13.65,1.82,15.88,7.49,2.12,5.39,1,13.9-5.72,16.54a10.23,10.23,0,0,1-5.58.43
</div>
</div>
<main class="ps-main--page ps-page">
mobile is fucked
2021-05-30 15:36:37 +00:00
<a href="https://en.wikipedia.org/wiki/Free_software" target="_blank" class="ps-page--link">Fucking Free</a>
<a href="https://get.pub.solar/" target="_blank" class="ps-page--link">PubSolarOS</a>
<a href="https://element.pub.solar/" target="_blank" class="ps-page--link">Matrix</a>
<a href="https://mastodon.pub.solar/" target="_blank" class="ps-page--link">Mastodon</a>
<a href="https://matrix.to/#/@teutat3s:pub.solar" target="_blank" class="ps-page--link">@teutat3s</a>
<a href="https://matrix.to/#/@b12f:pub.solar/" target="_blank" class="ps-page--link">@b12f</a>
Initial comimt
2021-05-30 14:55:34 +00:00
</main>
</div>
<script>
document.getElementById('x1312').innerHTML = (new Array(400)).fill("0x1312").join(" ");
Easier to read
2021-05-30 17:25:45 +00:00
const background = document.getElementById("background");
const logo = document.getElementById("logo").cloneNode(true);
logo.id = "";
(new Array(Math.ceil(window.innerWidth / 100) * Math.ceil(window.innerHeight / 100)))
.fill(null)
.map(_ => logo.cloneNode(true))
.forEach(l => {
background.appendChild(l);
});
Initial comimt
2021-05-30 14:55:34 +00:00
</script>
</body>
</html>
Copy permalink