Skip to content

Commit

Permalink
🍱 Sources of itch pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@CosmoMyzrailGorynych
CosmoMyzrailGorynych committed Aug 15, 2019
1 parent 33c5384 commit 46f325c
Show file tree
Hide file tree
Showing 2 changed files with 348 additions and 0 deletions.
242 changes: 242 additions & 0 deletions itchPage.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,242 @@
/**********************************/
/********** BASIC LAYOUT **********/
/**********************************/

.responsive .inner_column {
max-width: initial;
}
.responsive .wrapper {
padding: 0;
}
.columns {
margin: 1.5rem 0 0 0;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
max-width: 100vw;
}
.columns .left_col {
-webkit-order: 2;
order: 2;
}
.columns .right_col {
-webkit-order: 1;
order: 1;
}
.columns .right_col, .columns .left_col {
display: block;
margin: 0;
width: auto;
}
.view_game_page.buy_on_top .header_buy_row, #download, .buy_row, .uploads > p, .view_game_page .more_information_toggle .toggle_row {
text-align: center;
}
#view_game_footer {
padding: 2rem 1.5rem;
margin: 0 auto;
}
.header {
background: #446adb;
}
.right_col.column,
.formatted_description.user_formatted,
#devlog,
.view_game_page .uploads .upload_list_widget,
.game_community_preview_widget .community_topics,
.game_community_preview_widget .post_links,
.inner_column .footer,
.view_game_page .info_panel_wrapper {
width: 960px;
max-width: 100%;
max-width: 100vw;
margin: 0 auto;
padding: 0 1.5rem;
box-sizing: border-box;
}
.uploads, .view_game_page #download + .buy_row, #download, .community_summary {
background: #446adb;
padding: 1rem 0;
color: #fff;
margin: 0;
}
.view_game_page #download + .buy_row .button.buy_btn, .game_community_preview_widget .post_links a.button {
background: #fff;
color: #446adb;
box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.21);
text-shadow: none;
}

/**********************************/
/********* TEXT & HEADERS *********/
/**********************************/

.formatted_description.user_formatted p:first-child {
margin-top: 1rem;
font-size: 125%;
}
.inner_column p, .inner_column ol, .inner_column ul {
line-height: 1.75em;
}
.inner_column h1, .inner_column h2, .inner_column h3, .inner_column h4 {
font-weight: 200;
padding-bottom: 0;
margin-bottom: 1rem;
margin-top: 1.5em;
}
.inner_column h2 {
font-size: 3rem;
text-align: center;
margin-top: 2rem;
}
.inner_column h4 {
font-weight: 600;
}
.formatted_description.user_formatted table, .formatted_description.user_formatted td {
border: 0;
text-align: center;
}
.formatted_description.user_formatted table strong {
font-weight: 300;
color: #5144db;
font-size: 1.5rem;
line-height: 3rem;
}
#download {
padding: 2rem 0 0;
}

/**********************************/
/****** SCREENSHOTS & DEMOS *******/
/**********************************/

.view_game_page .screenshot_list, .custom-Demos, .custom-MadeWithCtJs {
white-space: initial;
text-overflow: ellipsis;
overflow: auto;
font-size: 0;
text-align: center;
margin: 0;
}
.formatted_description.user_formatted img, .view_game_page .screenshot_list img, .custom-Demos img, .custom-MadeWithCtJs img {
border: 0 none;
border-radius: 0.35rem;
}
.view_game_page .screenshot_list img, .custom-Demos img, .custom-MadeWithCtJs img {
opacity: 0.95;
transform: scale(0.9);
transition: ease 0.35s all;
display: inline-block;
margin: 0;
height: 160px;
max-width: initial;
}
.custom-Demos img, .custom-MadeWithCtJs img {
height: initial;
}
.screenshot_list a:hover img, .custom-Demos a:hover img, .custom-MadeWithCtJs a:hover img {
opacity: 1;
transform: scale(1);
}

/**********************************/
/********* DOWNLOAD & BUY *********/
/**********************************/

.buy_row .buy_message .sub::before {
content: "$0+";
margin-right: 0.35rem;
font-size: 1.35rem;
vertical-align: -1px;
}
.view_game_page .buy_row .button_message {
flex-flow: column nowrap;
}
.view_game_page .buy_row .sub {
margin-top: 1rem;
}
.view_game_page .buy_row .button {
margin-right: 0;
font-size: 1.5rem;
line-height: 3rem;
height: auto;
font-weight: 300;
padding: 0 1rem;
border-radius: 0.35rem;
}

/**********************************/
/************ UPLOADS *************/
/**********************************/

.view_game_page #download + .buy_row {
padding-bottom: 0;
}
.view_game_page .uploads .upload_list_widget {
columns: 2;
width: 45rem;
max-width: 100%;
}
@media (max-width: 650px) {
.view_game_page .uploads .upload_list_widget {
columns: 1;
}
}
.upload_list_widget .upload .upload_name .name {
display: block;
line-height: 2;
}
.upload_list_widget .upload .upload_name, .upload_list_widget .upload .build_row {
display: inline;
}
.upload_list_widget .upload .upload_name > * {
margin-left: 0;
margin-right: 0.5rem;
}
.upload_list_widget .upload .info_column {
background: rgba(255, 255, 255, 0.1);
padding: 0.5rem 1rem;
border-radius: 0.35rem;
text-align: initial;
}
.view_game_page .uploads .upload_list_widget {
padding-bottom: 1.5rem
}


/**********************************/
/************ DEVLOG **************/
/**********************************/

.view_game_page .game_devlog ul li {
margin-bottom: 1rem;
justify-content: space-between;
align-items: first baseline;
}

/**********************************/
/************* FORUM **************/
/**********************************/

.game_community_preview_widget .community_topics, .game_community_preview_widget .community_topics a {
color: #fff;
text-decoration: none;
}
.game_community_preview_widget .community_topic_row .topic_tag {
background: #4F44DB;
font-weight: 400;
font-size: 75%;
padding: 0.35rem 0.5rem;
border-radius: 0.35rem;
}
.game_community_preview_widget .post_links {
margin: 1rem auto;
}
.game_community_preview_widget h2 {
color: #fff;
}
.game_community_preview_widget .community_topic_row {
padding: 0.25rem 1rem;
border-radius: 0.35rem;
margin: 0 -1rem 0.75rem;
}
106 changes: 106 additions & 0 deletions itchPage.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
<p class="text-center">
<em>
ct.js is a new game editor (desktop app) based on web technologies, currently in active development.
Our aim is to make it a simple game-making tool, accessible for both newbies and experienced game developers.
It runs on WebGL and provide good performance both on PCs and mobile devices.
</em>
</p>

<div class="text-center custom-Demos">
<h2>Demos</h2>
<p>
<a href="https://comigo.itch.io/catsteroids" target="_blank">
<img src="https://img.itch.zone/aW1nLzIwNjg1MjAucG5n/original/yTnrNF.png" alt="Catsteroids: an arcade space shooter with asteroids, starships and bonuses." title="Catsteroids: an arcade space shooter with asteroids, starships and bonuses..">
</a>
<a href="https://comigo.itch.io/catformer" target="_blank">
<img src="https://img.itch.zone/aW1nLzIwNjg1MjEucG5n/original/SRz1P1.png" alt="Greed: a silly platformer about being too greedy to collect all the coins in a puzzled level." title="Greed: a silly platformer about being too greedy to collect all the coins in a puzzled level.">
</a>
<a href="https://comigo.itch.io/memocats" target="_blank">
<img src="https://img.itch.zone/aW1nLzIwNjg1MjIucG5n/original/XNlrSG.png" alt="Memocats: a traditional memory game with matching cards." title="Memocats: a traditional memory game with matching cards.">
</a>
</p>
</div>
<h2 class="text-center">Features</h2>
<table>
<tbody>
<tr>
<td class="text-center">
<img src="https://img.itch.zone/aW1nLzIwNjg5NTEucG5n/original/twdyRr.png">
<br>
<strong>Easy to learn and use</strong>
<br>
ct.js is designed to be used for learning and teaching programming.
It is accessible and ready-to-use for both newbies and pros.
</td>
<td class="text-center">
<img src="https://img.itch.zone/aW1nLzIwNjg5NTIucG5n/original/qpTJUE.png">
<br>
<strong>Highly extensible library</strong>
<br>
ct.js's core is small but powerful, and its modules can add you more
abilities and higher-level functions.
</td>
</tr>
<tr>
<td class="text-center">
<img src="https://img.itch.zone/aW1nLzIwNjg5NDkucG5n/original/i6yHiw.png">
<br>
<strong>Runs on PC, Mac, Linux</strong>
<br>
That's it. We support them all. One tool for everyone in your team,
in any office or garage.
</td>
<td class="text-center">
<img src="https://img.itch.zone/aW1nLzIwNjg5NTAucG5n/original/oDXCXa.png">
<br>
<strong>Games that run everywhere</strong>
<br>
Games created with ct.js run in any modern browser, including mobile
ones, and can also be packed to executables for all the major desktop
platforms!
</td>
</tr>
</tbody>
</table>

<h2 class="text-center">Made with ct.js</h2>
<p class="text-center custom-MadeWithCtJs">
<a href="https://comigo.itch.io/welcome-to-the-void" target="_blank">
<img src="https://img.itch.zone/aW1nLzIwNjkwNDEucG5n/original/7gyMz1.png" alt="Welcome to the VOID: You were awakened by your Anabot only to know that the universe is dead." title="Welcome to the VOID: You were awakened by your Anabot only to know that the universe is dead.">
</a>
<a href="https://comigo.itch.io/stormcross" target="_blank">
<img src="https://img.itch.zone/aW1nLzIwNjkwMzkucG5n/original/YVk8ky.png" alt="StormCross: Save your colony from a deadly disease!" title="StormCross: Save your colony from a deadly disease!">
</a>
<a href="https://themysticsword.itch.io/i-like-dreams" target="_blank">
<img src="https://img.itch.zone/aW1nLzIwNjkwNDAucG5n/original/JMc7vD.png" alt="I Like Dreams: A tiny text adventure about dreams" title="I Like Dreams: A tiny text adventure about dreams">
</a>
<a href="https://comigo.itch.io/among-the-wolves" target="_blank">
<img src="https://img.itch.zone/aW1nLzIwNjkwNjYucG5n/original/5tMeY9.png" alt="🌜🌲 (aka Among the Wolves): 🚁💥 🌜🌲🌲🙋🔥🙆‍🌳🌳🐺" title="🌜🌲 (aka Among the Wolves): 🚁💥 🌜🌲🌲🙋🔥🙆‍🌳🌳🐺">
</a>
<a href="https://comigo.itch.io/disposable-magic" target="_blank">
<img src="https://img.itch.zone/aW1nLzIwNjkwNDMucG5n/original/n%2FDvoY.png" alt="Disposable Magic: After a long adventure you finally face the Evil Sorcerer&hellip;" title="Disposable Magic: After a long adventure you finally face the Evil Sorcerer&hellip;">
</a>
<a href="https://comigo.itch.io/shifted" target="_blank">
<img src="https://img.itch.zone/aW1nLzIwNjkwNDQucG5n/original/T%2BFAQy.png" alt="Shifted: A relaxing jigsaw puzzle. Take a blanket and a cup of tea." title="Shifted: A relaxing jigsaw puzzle. Take a blanket and a cup of tea.">
</a>
</p>

<p class="text-center">
<a href="https://ctjs.rocks/madewithctjs/q" target="_blank">There is more!</a>
</p>

<div class="text-center">
<a href="https://www.patreon.com/comigo" target="_blank"><img src="https://img.itch.zone/aW1nLzE1Mjc4NjUucG5n/original/ewUFYW.png"></a>
<a href="https://discord.gg/CggbPkb" target="_blank"><img src="https://img.itch.zone/aW1nLzE1Mjc4ODcucG5n/original/gFcUsg.png"></a>
</div>

<h2 class="text-center">Partner &mdash; Mini Jam</h2>
<p class="text-center">
<img src="https://img.itch.zone/aW1nLzE2MjQwMDYucG5n/original/ScGlTK.png">
</p>
<p class="text-center">
Mini Jam is an open recurring game jam that is held every two weeks on itch.io.
<br>
<a href="https://discord.gg/kgzG645" target="_blank">Join their Discord server</a> or
<a href="http://minijamofficial.com/" target="_blank">visit their official site</a>!
</p>

0 comments on commit 46f325c

Please sign in to comment.