Skip to content
GitLab
Commit 1e7a9d80 authored by lunasorcery's avatar lunasorcery
Browse files

borderless images

parent ce2ac8e2
Hide whitespace changes
Inline Side-by-side
about.mustache
View file @ 1e7a9d80
{{> header}}
<div class="content">
<div class="content-thing slim">
<span class="question">What is Executable Graphics?</span>
<div class="answer">
<p>
In the purest sense, Executable Graphics is visual artwork through the medium of software.
Each artwork is created not as an image file, but as an executable program which, when run, renders the artwork in-the-moment.
</p>
<p>
While the popular demoscene demo/intro formats produce realtime animated visuals and music, Executable Graphics produces only a single still image, with more time for rendering.
This allows for more computationally intensive rendering techniques that cannot be run in realtime.
</p>
<p>
Over the last decade or so, demoparties have popularized the 4K Executable Graphics format.
Make no mistake, '4K' here refers to the filesize, not the resolution - each entry to these competitions cannot exceed 4 kilobytes (4096 bytes) in size.
</p>
</div>
<br/>
<span class="question">What is executable.graphics?</span>
<div class="answer">
<p>
This website presents a gallery of artworks from various artists in the Executable Graphics scene.
Each piece in the collection was rendered by an executable no larger than 4096 bytes.
</p>
<p>
You are invited to browse the collection as you would an art gallery - to spend time with each piece, and to consider the craft (both artistic and technical) behind each.
</p>
<p>
This collection is curated by yx.
</p>
<div class="text">
<span class="question">What is Executable Graphics?</span>
<div class="answer">
<p>
In the purest sense, Executable Graphics is visual artwork through the medium of software.
Each artwork is created not as an image file, but as an executable program which, when run, renders the artwork in-the-moment.
</p>
<p>
While the popular demoscene demo/intro formats produce realtime animated visuals and music, Executable Graphics produces only a single still image, with more time for rendering.
This allows for more computationally intensive rendering techniques that cannot be run in realtime.
</p>
<p>
Over the last decade or so, demoparties have popularized the 4K Executable Graphics format.
Make no mistake, '4K' here refers to the filesize, not the resolution - each entry to these competitions cannot exceed 4 kilobytes (4096 bytes) in size.
</p>
</div>
<br/>
<span class="question">What is executable.graphics?</span>
<div class="answer">
<p>
This website presents a gallery of artworks from various artists in the Executable Graphics scene.
Each piece in the collection was rendered by an executable no larger than 4096 bytes.
</p>
<p>
You are invited to browse the collection as you would an art gallery - to spend time with each piece, and to consider the craft (both artistic and technical) behind each.
</p>
<p>
This collection is curated by yx.
</p>
</div>
</div>
</div>
</div>
......
artwork.mustache
View file @ 1e7a9d80
......@@ -9,12 +9,15 @@
<div class="meteorik meteorik-winner">Meteoriks {{meteorik-year}} Winner</div>
{{/meteorik-winner}}
{{/meteoriks-visible}}
<span class="author">{{author}}</span>
<br/>
<span class="title">{{title}}</span>, <span class="party">{{party}}</span>
<br/>
<span class="subtitle">{{platform}} executable</span>
<br/>
<img class="thumb" src="{{image_url}}" loading="lazy"/>
<div class="text">
<span class="author">{{author}}</span>
<br/>
<span class="title">{{title}}</span>, <span class="party">{{party}}</span>
<br/>
<span class="subtitle">{{platform}} executable</span>
</div>
<div class="image">
<img src="{{image_url}}" loading="lazy"/>
</div>
</a>
</div>
meteoriks.mustache
View file @ 1e7a9d80
{{> header}}
<div class="content">
<div class="content-thing slim">
<span class="question">What are the Meteoriks?</span>
<div class="answer">
<p>
<a href="https://meteoriks.org/">The Meteoriks</a> are an award to honor the best productions that the demoscene has to offer, and are presented annually at the Revision demoparty over the Easter weekend.
</p>
<p>
Following a surge of activity in the Executable Graphics field in recent years, the Meteoriks have introduced a Best Executable Graphics category for 2021. You can see the nominees below.
</p>
<p><strong>ALL NOMINATIONS CURRENTLY LISTED BELOW ARE PLACEHOLDERS TO TEST THE SITE UI</strong></p>
<div class="text">
<span class="question">What are the Meteoriks?</span>
<div class="answer">
<p>
<a href="https://meteoriks.org/">The Meteoriks</a> are an award to honor the best productions that the demoscene has to offer, and are presented annually at the Revision demoparty over the Easter weekend.
</p>
<p>
Following a surge of activity in the Executable Graphics field in recent years, the Meteoriks have introduced a Best Executable Graphics category for 2021. You can see the nominees below.
</p>
<p><strong>ALL NOMINATIONS CURRENTLY LISTED BELOW ARE PLACEHOLDERS TO TEST THE SITE UI</strong></p>
</div>
</div>
</div>
</div>
......
style.css
View file @ 1e7a9d80
......@@ -25,6 +25,8 @@
--meteorik-winner-bg-color: var(--lightmode-meteorik-winner-bg-color);
--meteorik-nominee-border-color: var(--lightmode-meteorik-nominee-border-color);
--meteorik-winner-border-color: var(--lightmode-meteorik-winner-border-color);
--image-margin: 0px;
}
[data-theme="dark"] {
......@@ -120,21 +122,9 @@ a {
}
.preamble {
margin: 32px auto;
}
.preamble a {
text-decoration: underline;
text-decoration-style: dotted;
}
.preamble a:hover {
text-decoration-style: solid;
}
.content-thing {
text-align: left;
font-size: 12pt;
padding: 12px;
margin: 0 auto 32px;
background: var(--panel-bg-color);
box-shadow:
......@@ -151,8 +141,6 @@ a {
}
.content-thing .meteorik {
margin: -12px;
margin-bottom: 12px;
padding: 8px;
text-align: center;
font-weight: 600;
......@@ -170,45 +158,56 @@ a {
border-color: var(--meteorik-winner-border-color);
}
.content-thing .author {
.content-thing .text {
padding: 12px;
}
.content-thing .text .author {
font-weight: 400;
}
.content-thing .title {
.content-thing .text .title {
font-size: 14pt;
font-weight: 800;
font-style: italic;
}
.content-thing .author,
.content-thing .title,
.content-thing .party,
.content-thing .subtitle {
.content-thing .text .author,
.content-thing .text .title,
.content-thing .text .party,
.content-thing .text .subtitle {
margin-bottom: 0.3em;
display: inline-block;
}
.content-thing .thumb {
margin-top: 0.3em;
.content-thing .text > *:last-child {
margin-bottom: 0;
}
.content-thing:hover .text .title {
text-decoration: underline;
}
.content-thing .image {
padding: var(--image-margin);
padding-top: 0;
}
.content-thing .image img {
display: block;
max-width: 100%;
max-height: 80vh;
}
.content-thing:hover .title {
text-decoration: underline;
}
.content-thing .question {
.content-thing .text .question {
font-size: 14pt;
font-weight: 800;
}
.content-thing .answer p {
.content-thing .text .answer p {
margin-block-end: 0;
}
.content-thing p a[href] {
.content-thing .text p a[href] {
text-decoration: underline;
text-decoration-style: dotted;
text-decoration-thickness: from-font;
}
.content-thing p a[href]:hover {
.content-thing .text p a[href]:hover {
text-decoration-style: solid;
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment