diff --git a/web/_css/style.css b/web/_css/style.css index 4c345faf..4f04f605 100644 --- a/web/_css/style.css +++ b/web/_css/style.css @@ -28,7 +28,8 @@ @font-face { box-sizing: border-box; } -html, body { +html, +body { min-height: 100%; min-width: 100%; height: 100%; @@ -44,11 +45,11 @@ body { overflow: hidden; overflow-x: hidden; overflow-y: hidden; - + font-family: dejavu, sans, Sans-Serif; background-color: #111; color: #FFF; - + line-height: 1.15; } @@ -142,19 +143,19 @@ header { } @media (max-width: 600px) { - header{ + header { width: 100%; } } @media (max-width: 400px) { - header h1{ + header h1 { font-size: 28px; } } @media (max-width: 350px) { - header h1{ + header h1 { font-size: 20px; } } @@ -164,13 +165,13 @@ header.aboutHeader { border-right: 0; } -header > a { +header>a { display: flex; color: #FFF; /*align-items: center;*/ } -header > a:hover { +header>a:hover { text-decoration: none; color: #FFAA00; } @@ -200,8 +201,7 @@ select { -moz-appearance: none; -webkit-appearance: none; appearance: none; - background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.264' height='15.313'%3E%3Cpath d='M188.363 392.51h15.264l-7.637 15.313-7.627-15.312' fill='%23fff' fill-opacity='.633' transform='translate(-188.363 -392.51)'/%3E%3C/svg%3E") - ,linear-gradient(to bottom, #888, #666); + background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.264' height='15.313'%3E%3Cpath d='M188.363 392.51h15.264l-7.637 15.313-7.627-15.312' fill='%23fff' fill-opacity='.633' transform='translate(-188.363 -392.51)'/%3E%3C/svg%3E"), linear-gradient(to bottom, #888, #666); background-repeat: no-repeat, repeat; background-position: calc(100% - 10px) center, 0 0; background-size: 10px, cover; @@ -214,12 +214,11 @@ select { } select option[disabled] { - display: none; + display: none; } select:hover { - background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.264' height='15.313'%3E%3Cpath d='M188.363 392.51h15.264l-7.637 15.313-7.627-15.312' fill='%23fff' fill-opacity='.633' transform='translate(-188.363 -392.51)'/%3E%3C/svg%3E") - ,linear-gradient(to bottom, #999, #777); + background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.264' height='15.313'%3E%3Cpath d='M188.363 392.51h15.264l-7.637 15.313-7.627-15.312' fill='%23fff' fill-opacity='.633' transform='translate(-188.363 -392.51)'/%3E%3C/svg%3E"), linear-gradient(to bottom, #999, #777); } select:active { @@ -275,51 +274,54 @@ [data-init-done] #loading { animation: fadeInOut 4s linear 0s 1; } -#loading > div { +#loading>div { margin: 80px auto; color: #FFF; text-align: center; font-size: 40px; } -#loading > div > div:first-child { +#loading>div>div:first-child { width: 200px; height: 200px; border-radius: 200px; border: 7px #CCC solid; display: inline-block; border-top-color: #FFAA00; - + animation-duration: 3s; animation-name: spinner; animation-iteration-count: infinite; } -#loading > div > span { +#loading>div>span { font-family: dejavu, Helvetica, sans-serif; font-weight: 200; } @keyframes fadeInOut { - 0% { - opacity: 0; - } - 50% { - opacity: 0; - } - 52.5% { - opacity: 1; - } - 100% { - opacity: 1; - } + 0% { + opacity: 0; + } + + 50% { + opacity: 0; + } + + 52.5% { + opacity: 1; + } + + 100% { + opacity: 1; + } } @keyframes spinner { from { transform: rotateZ(0deg); } - + to { transform: rotateZ(360deg); } @@ -395,8 +397,7 @@ #closeObjectsListButton { position: absolute; top: 10px; right: 310px; - background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192.844' height='192.875'%3E%3Cg fill='none' stroke-width='24.749' stroke-linecap='square' stroke='%23fff'%3E%3Cpath d='m26.625 166.233 139.59-139.59M166.214 166.233 26.625 26.643' stroke-width='29.999747839999998'/%3E%3C/g%3E%3C/svg%3E") - ,linear-gradient(to bottom, #666, #444); + background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192.844' height='192.875'%3E%3Cg fill='none' stroke-width='24.749' stroke-linecap='square' stroke='%23fff'%3E%3Cpath d='m26.625 166.233 139.59-139.59M166.214 166.233 26.625 26.643' stroke-width='29.999747839999998'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(to bottom, #666, #444); background-size: 15px, cover; background-position: center, 0 0; background-repeat: no-repeat, no-repeat; @@ -407,15 +408,15 @@ #closeObjectsListButton.hidden { } #closeObjectsListButton:hover { - background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192.844' height='192.875'%3E%3Cg fill='none' stroke-width='24.749' stroke-linecap='square' stroke='%23fff'%3E%3Cpath d='m26.625 166.233 139.59-139.59M166.214 166.233 26.625 26.643' stroke-width='29.999747839999998'/%3E%3C/g%3E%3C/svg%3E") - ,linear-gradient(to bottom, #777, #555); + background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192.844' height='192.875'%3E%3Cg fill='none' stroke-width='24.749' stroke-linecap='square' stroke='%23fff'%3E%3Cpath d='m26.625 166.233 139.59-139.59M166.214 166.233 26.625 26.643' stroke-width='29.999747839999998'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(to bottom, #777, #555); } @media (max-width: 750px) { - div:not(.listHidden) > #objectsList { + div:not(.listHidden)>#objectsList { display: none; } - div:not(.listHidden) > #closeObjectsListButton { + + div:not(.listHidden)>#closeObjectsListButton { display: none; } } @@ -438,7 +439,7 @@ @media (max-width: 530px) { top: 80px; max-height: calc(100% - 130px); } - + #closeObjectsListButton { top: 55px; right: 10px; @@ -468,7 +469,7 @@ .object:hover h2 { background-color: #777; } -.object > * { +.object>* { display: block; } @@ -534,9 +535,11 @@ .object .objectEdit { p.edit { color: #FFFF00; } + p.add { color: #00FF00; } + p.delete { color: #FF0000; } @@ -571,7 +574,7 @@ #drawBackButton { width: 170px; } -#drawControls > div > * { +#drawControls>div>* { width: 100%; display: flex; justify-content: center; @@ -582,12 +585,12 @@ #drawControls .inline { display: flex } -#drawControls .inline > * { +#drawControls .inline>* { flex-grow: 1; margin-right: 5px; } -#drawControls .inline > *:last-child { +#drawControls .inline>*:last-child { margin-right: 0; } @@ -663,7 +666,7 @@ #exportWindow { width: 100%; height: calc(100% - 100px); max-width: 500px; - /*max-height: 300px*/; + /*max-height: 300px*/ border: 1px #000 solid; background-color: #555; @@ -678,9 +681,7 @@ #exportWindow * { margin-bottom: 10px; } -#exportWindow p { - -} +#exportWindow p {} #exportString { flex-grow: 1; @@ -688,13 +689,13 @@ #exportString { } .exportButtons { - display: flex; + display: flex; flex-direction: row; justify-content: center; gap: 1em } -#exportButtons > * { +#exportButtons>* { margin-bottom: 0; width: 100px; align-self: flex-end; @@ -707,16 +708,16 @@ #exportOverlay { #coordsWrapper { min-width: 100px; position: absolute; - display: flex; + display: flex; gap: 10px; z-index: 1100; top: 5px; left: 364px; } -#wrapper.listHidden #coordsWrapper { - top: 49px; - left: 149px; +#wrapper.listHidden #coordsWrapper { + top: 49px; + left: 149px; } @media (max-width: 750px) { @@ -724,14 +725,15 @@ @media (max-width: 750px) { display: none; } } + #coords { background-color: #555; border: 1px #000 solid; padding: 6.5px; font-size: 17px; display: flex; - align-items: center; - justify-content: center; + align-items: center; + justify-content: center; text-align: center; } @@ -742,23 +744,23 @@ #coords p { #bottomBar { position: absolute; - bottom: 10px; - left: 10px; - right: 10px; - display: flex; + bottom: 10px; + left: 10px; + right: 10px; + display: flex; gap: 10px; } -#bottomBar > * { +#bottomBar>* { z-index: 1 } -div:not(.listHidden) > #bottomBar { +div:not(.listHidden)>#bottomBar { left: 370px !important; } @media (max-width: 1280px) { - div:not(.listHidden) > #bottomBar { + div:not(.listHidden)>#bottomBar { flex-wrap: wrap; } @@ -793,11 +795,11 @@ #timeControls { } #timeControls input { - height: 100%; + height: 100%; background: #555; -webkit-appearance: none; appearance: none; - width: 100%; + width: 100%; } #timeControlsTooltip { @@ -832,15 +834,15 @@ .slider::-webkit-slider-thumb { height: 25px; background: #d3d3d3; cursor: pointer; - } - - .slider::-moz-range-thumb { +} + +.slider::-moz-range-thumb { appearance: none; width: 10px; height: 25px; background: #d3d3d3; cursor: pointer; - } +} #author { background-color: #555; @@ -851,8 +853,8 @@ #author { min-width: 320px; text-align: center; display: flex; - align-items: center; - justify-content: center; + align-items: center; + justify-content: center; } #author p { @@ -916,16 +918,16 @@ @media (max-width: 500px) { div#entriesListContainer { width: calc(100% - 20px); } - + div#entriesListBackground { width: 100%; } - div:not(.listHidden) > #bottomBar { + div:not(.listHidden)>#bottomBar { display: none !important; } - div:not(.listHidden) > button#hideListButton { + div:not(.listHidden)>button#hideListButton { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192.844' height='192.875'%3E%3Cg style='stroke:%23fff;stroke-opacity:1'%3E%3Cpath d='m195.278 552.798 115.158-115.157M310.436 552.798 195.278 437.641' style='fill:none;stroke:%23fff;stroke-width:24.74926186;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none' transform='matrix(1.21216 0 0 1.21216 -210.083 -503.846)'/%3E%3C/g%3E%3C/svg%3E"); background-size: 20px; position: absolute; @@ -943,7 +945,7 @@ @media (max-width: 500px) { } @media (max-width: 350px) { - #entriesListNav > a#drawLink { + #entriesListNav>a#drawLink { display: none; } } @@ -963,7 +965,7 @@ #entriesListNav { justify-content: center; } -#entriesListNav > * { +#entriesListNav>* { display: block; cursor: pointer; width: 120px; @@ -971,34 +973,34 @@ #entriesListNav > * { margin-right: 10px; } -#entriesListNav > .small { +#entriesListNav>.small { width: 30px; padding: 2px; flex-shrink: 0; } -#entriesListNav > .small > img, -#entriesListNav > .small > svg { +#entriesListNav>.small>img, +#entriesListNav>.small>svg { height: 22px; width: 22px; } -#entriesListNav > .small:last-child { +#entriesListNav>.small:last-child { margin-right: 0; } -#entriesListNav > a:hover { +#entriesListNav>a:hover { text-decoration: none; background-image: linear-gradient(to bottom, #999, #777); } -#entriesListNav > .small:hover { +#entriesListNav>.small:hover { background-image: none; background: transparent; border-color: transparent; } -#entriesListDonate:hover > svg { +#entriesListDonate:hover>svg { text-decoration: none; background-image: linear-gradient(to bottom, #FFAA00, #FFAA00); border-radius: 15px; @@ -1007,7 +1009,8 @@ #entriesListDonate:hover > svg { height: 28px; width: 28px; } -#entriesListDiscord:hover > svg { + +#entriesListDiscord:hover>svg { text-decoration: none; background-image: linear-gradient(to bottom, #7289DA, #7289DA); border-radius: 12px; @@ -1067,8 +1070,7 @@ [data-mode="draw"] #hideListButton { } .listHidden #hideListButton { - background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='272.844' height='177.594'%3E%3Cpath d='M368.07 380.006 252.857 495.164 137.644 380.006' style='fill:none;stroke:%23fff;stroke-width:30;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none' transform='translate(-116.438 -348.781)'/%3E%3C/svg%3E") - ,linear-gradient(to bottom, #555, #444); + background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='272.844' height='177.594'%3E%3Cpath d='M368.07 380.006 252.857 495.164 137.644 380.006' style='fill:none;stroke:%23fff;stroke-width:30;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none' transform='translate(-116.438 -348.781)'/%3E%3C/svg%3E"), linear-gradient(to bottom, #555, #444); background-size: 15px, cover; background-position: 10px center, 0 0; top: 49px; @@ -1110,9 +1112,7 @@ #searchList { width: 100%; } -#sortContainer { - -} +#sortContainer {} #sortContainer label { width: 70px; @@ -1193,7 +1193,7 @@ #contributors { #contributors a { margin: 3px; - line-height: 26px; + line-height: 26px; } #donateButton { @@ -1221,19 +1221,19 @@ #donateWindow { max-width: 800px; } -#donateWindow > p { +#donateWindow>p { margin: 2px 0; padding: 0 20px; text-align: left; width: 100%; } -#donateWindow > * { +#donateWindow>* { display: inline-block; margin: 5px 0; } -#donateWindow > h2 { +#donateWindow>h2 { font-weight: 200; background-color: #555; width: 100%; @@ -1288,7 +1288,7 @@ #viewModes .dropdown-content { cursor: pointer; width: 125% } - + #viewModes .dropdown-content a { color: #FFF; text-align: left; @@ -1297,11 +1297,11 @@ #viewModes .dropdown-content a { text-decoration: none; text-shadow: 1px 1px 0 #444; } - + #viewModes .dropdown-content a:hover { background-image: linear-gradient(to bottom, #999, #777); } - + #viewModes:hover .dropdown-content, #viewModes:active .dropdown-content { display: block; diff --git a/web/about.html b/web/about.html index 35ca116e..54ed5f4f 100644 --- a/web/about.html +++ b/web/about.html @@ -15,89 +15,92 @@ - - - The 2022 /r/place Atlas - - - - - - - - - - - - - - - - -
-
- - -

The 2022 /r/place Atlas

-
- -
- -
- Code by . Source on GitHub (2022 Version Github). -
- - -
-
- < Back to the Atlas - - Deploys by Netlify - Deploys by Netlify - -

The 2022 /r/place Atlas

-

This is an Atlas aiming to chart all the artworks created during the /r/place April Fools event on Reddit in 2022.

-

The original code was developed by (mail, reddit) and is available under the free AGPL license on GitHub.

-
-

The currently maintained version of the website is managed by and is obtainable under the same license within a GitHub fork. Images are provided by Alex Tsernoh.

-

Maintaining and updating the website takes work, but I enjoy doing it for free and giving this to people. But if you would like to support me, or the people who helped me with contributions to this project. You're free to support us though PayPal, Patreon, or Ko-Fi.

-

To maintain the same tradition, I will also be offering stickers to anyone donating more then 20$ (Due to the size increase). But, you're not forced to do anything! This only shows appreciation to us and the people who've worked on this project

-
-

Roland Rytz worked on the Atlas full-time (and more!) for over two weeks during the 2017 r/place event.

-

If you'd like to support Roland, you can do so by PayPal.

-

If you donate more than 10(€/$/CHF/mBTC), He'll (hopefully) send you a nice sticker of the 2017 Place canvas!

- -

How to contribute

-

The /r/Place Atlas project relies on user contributions.

-

To contribute a label for an artwork, please read this post on Reddit to learn how to submit a new entry.

-

Alternatively, contributions can be made directly on GitHub.

-

The /r/placeAtlas2 subreddit is also the place to submit all bug reports, feature requests or questions.

- + -

r/placeAtlas2 (Current) Contributors and Maintainers

- -

The 2022 Atlas would not have been possible without the help of our reddit contributors. This section will be updated with all of the contributor's usernames.

-

Thank you to everyone who submitted new entries, amended existing ones, reported bugs and just supported the project in general.

- -

Contact?

-

If you're press, a influencer or anything media connected, or you would like to use the atlas in one. Please contact us beforehand through:

-

- press@stefanocoding.me

-
-

If you need to contact me regarding anything else, you can reach me through:

-

- stefano@stefanocoding.me

-
+
+ Code by . Source on GitHub (2022 Version Github). +
+ + +
+
+ < Back to the Atlas + + Deploys by Netlify + Deploys by Netlify + +

The 2022 /r/place Atlas

+

This is an Atlas aiming to chart all the artworks created during the /r/place April Fools event on Reddit in 2022.

+

The original code was developed by (mail, reddit) and is available under the free AGPL license on GitHub.

+
+

The currently maintained version of the website is managed by and is obtainable under the same license within a GitHub fork. Images are provided by Alex Tsernoh.

+

Maintaining and updating the website takes work, but I enjoy doing it for free and giving this to people. But if you would like to support me, or the people who helped me with contributions to this project. You're free to support us though PayPal, Patreon, or Ko-Fi.

+

To maintain the same tradition, I will also be offering stickers to anyone donating more then 20$ (Due to the size increase). But, you're not forced to do anything! This only shows appreciation to us and the people who've worked on this project

+
+

Roland Rytz worked on the Atlas full-time (and more!) for over two weeks during the 2017 r/place event.

+

If you'd like to support Roland, you can do so by PayPal.

+

If you donate more than 10(€/$/CHF/mBTC), He'll (hopefully) send you a nice sticker of the 2017 Place canvas!

+ +

How to contribute

+

The /r/Place Atlas project relies on user contributions.

+

To contribute a label for an artwork, please read this post on Reddit to learn how to submit a new entry.

+

Alternatively, contributions can be made directly on GitHub.

+

The /r/placeAtlas2 subreddit is also the place to submit all bug reports, feature requests or questions.

+ + +

r/placeAtlas2 (Current) Contributors and Maintainers

+ +

The 2022 Atlas would not have been possible without the help of our reddit contributors. This section will be updated with all of the contributor's usernames.

+

Thank you to everyone who submitted new entries, amended existing ones, reported bugs and just supported the project in general.

+ +

Contact?

+

If you're press, a influencer or anything media connected, or you would like to use the atlas in one. Please contact us beforehand through:

+

- press@stefanocoding.me

+
+

If you need to contact me regarding anything else, you can reach me through:

+

- stefano@stefanocoding.me

- - +
+
+ + + \ No newline at end of file diff --git a/web/index.html b/web/index.html index c659aa2b..398ed8b0 100644 --- a/web/index.html +++ b/web/index.html @@ -15,39 +15,40 @@ - - - The 2022 /r/place Atlas - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - -
-
- - - -

The 2022 /r/place Atlas

+

The 2022 /r/place Atlas

+
+ +
+ +
+
+
+

+   Hang on... + +
+
+ +
+ + + Canvas of /r/place in the state of when the experiment was concluded. +
+
+ +
+