dalmationer
/
Dalmationer.art
1
1
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity

changed many files... mostly just adding some new stuff.

This commit is contained in:
Dalm 2022-04-03 20:43:58 +01:00
parent 297969a2ca
commit eb78be63e6
12 changed files with 339 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
css/gallerystyles.css Normal file
View File

@ -0,0 +1,28 @@
#galleryimg{
-ms-interpolation-mode:nearest-neighbor;
/*IE 7-11*/ image-rendering: -o-crisp-edges;
/*Opera 12*/ image-rendering: -webkit-crisp-edges;
/*Safari 6-9*/ image-rendering:-moz-crisp-edges;
/*Firefox 3.6-64*/
max-width: 718px;
width: 100%;
display: block;
margin-left: auto;
margin-right:auto;
margin-top: -40px;
margin-bottom: 1%;
}
#main-content{
background-color: #1E3B27;
}
#gallerycontainer{
background-color: #458D4C;
width: 98%;
display: flex;
flex-direction: row;
margin-left: auto;
margin-right: auto;
}

83
css/rssstyles.css Normal file
View File

@ -0,0 +1,83 @@
body{
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 1em;
background-color: antiquewhite;
}
@font-face {
font-family: "lexie";
src: url(../fonts/LexieReadable-Regular.ttf);
}
@font-face {
font-family: "lexie-bold";
src: url(../fonts/LexieReadable-Bold.ttf);
}
#flex-container{
display:flex;
flex-direction: row;
}
#main-content{
border-width: 3px 4px 4px 3px;
border-style: double solid solid double;
border-radius: 2px;
border-color: black;
width: 80%;
margin-right: 2px;
padding-left: 3px;
padding-right: 3px;
background-color: white;
}
#sidebar{
border-width: 3px 4px 4px 3px;
border-style: double solid solid double;
border-radius: 2px;
border-color: black;
width: 20%;
background-color: #F89330;
}
#sidebarscroll{
position: sticky;
top: 10px;
}
a{
color: gold;
}
img{
-ms-interpolation-mode:nearest-neighbor;
/*IE 7-11*/ image-rendering: -o-crisp-edges;
/*Opera 12*/ image-rendering: -webkit-crisp-edges;
/*Safari 6-9*/ image-rendering: -moz-crisp-edges;
/*Firefox 3.6-64*/
}
footer{
background-color: #F89330;
padding: 5px;
border-width: 1px 3px 3px 2px;
border-style: solid double double solid;
border-radius: 8px;
border-color: black;
text-align: center;
}
.orange{
text-align: center;
display: block;
background-color: #F89330;
padding: 5px;
border-width: 1px 3px 3px 2px;
border-style: solid double double solid;
border-radius: 8px;
border-color: black;"
}
.padded{
padding-left: 10%;
padding-right: 10%;
}

89
css/tutorialstyles.css Normal file
View File

@ -0,0 +1,89 @@
body{
color: rgb(53, 32, 32);
background-color: antiquewhite;
background-image: url("../images/pap12.gif");
font-size: 1em;
line-height: 1.5;
font-family: monospace, "FixedSys-Excelsior";
}
@font-face {
font-family: "FixedSys-Excelsior";
src: url(../fonts/FSEX300.ttf);
}
#content{
background-color: white;
border: 1px solid black;
margin-left: 20%;
margin-right: 20%;
margin-top: 5px;
margin-bottom: 5px;
padding: 3px;
}
h1{
text-align: center;
}
h1, h2, h3, h4{
font-family:"FixedSys-Excelsior";
font-weight: 100;
-webkit-font-smoothing: "none";
-moz-osx-font-smoothing: "greyscale";
font-smooth: "never";
}
table{
border: 1px solid black;
width: 80%;
margin-left: auto;
margin-right: auto;
text-align: left;
table-layout: fixed;
}
tr,thead,tbody,th,td{
border: 1px solid black;
vertical-align:top;
}
th{
padding: 5px;
}
.indent{
margin-left: 10%;
}
#backbutton{
float: left;
background-color: white;
border-width: 3px 2px 2px 3px;
border-style: double solid solid double;
border-color: black;
border-radius: 5px;
position: sticky;
top: 10px;
padding: 2px;
padding-left: 5px;
padding-right: 5px;
}
@media only screen and (max-width: 800px) {
#content{
width: 100%;
margin-left: 0px;
margin-right:0px;
}
#backbutton{
position: static;
}
table{
width: 100%;
}
}

BIN
fonts/FSEX300.ttf Normal file
View File

Binary file not shown.

11
gallery.html
View File

@ -9,7 +9,7 @@
<meta name="author" content="Dalmationer">
<meta name="keywords" content="Personal, Politics, Art, Comics">
<link rel="stylesheet" href= "mainstyles.css">
<link rel="stylesheet" href= "homepagestyles.css">
<link rel="stylesheet" href= "./css/gallerystyles.css">
<script data-goatcounter="https://dalmationer.goatcounter.com/count"
async src="//gc.zgo.at/count.js"></script>
@ -37,7 +37,14 @@
</nav>
</p></div>
<div id=main-content><h2>REMAIN CONTENT.</h1></div>
<div id=main-content>
<img src="./images/galleryheader.png" alt="GALLERY" id="galleryimg">
<div id="Gallerycontainer">
bingus
</div>
</div>
</div>

BIN
images/articleimages/rsspic3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 102 KiB

BIN
images/galleryheader.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
images/mousegif.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
images/pap12.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

95
learn/animating-in-gimp.html Normal file
View File

@ -0,0 +1,95 @@
<!DOCTYPE html>
<head>
<title>Guide to Animating in GIMP</title>
<meta name="description" content="A quick guide to animating in GIMP">
<meta charset="utf-8">
<meta name="title" content="Animating In GIMP">
<link rel="stylesheet" href= "../css/tutorialstyles.css">
</head>
<body>
<div id="backbutton"><a href="../main.html">Return to Dalmationer.art</a></div>
<div id=content>
<h1>A Rough Guide to Animating With GIMP</h1>
<img src="../images/mousegif.gif" alt="a gif of a mouse blinking with the text 'ANIMATING WITH GIMP'" style="max-width: 640px; width: 100%;">
<h2>What is GIMP?<br>
<h3><i>And how should you use it?</i></h3></h2>
<p>GIMP, the Gnu Image Manipulation Program, is a super useful but terribly named opensource image editing program that will run on most things.
It's particularly good for making raster web graphics, buttons and images. (A <b>Raster</b> or bitmap image is an image made of pixels, rather than being
made of the instructions to make the image like a <b>vector</b> image is.) GIMP is clunky, has a difficult-to-use interface and often crashes when working
with large files (So save regularly!), however it's extremely feature complete. Between its many incredible filters, its opensource framework being fairly easy to modify,
and its ability to run on almost any computer, it's a super useful program... I've been using it for over a decade, and still discover new things (it helps that it's fairly frequently updated!) One of its most useful built-in features is the ability to make basic animations!<br>
In this tutorial, I'd like to show some ways you can do this sort of thing.<br>
Note that due to GIMP's shortfalls, it's not particularly good for LONGER animations... See the table below (Figure 1!)<br>
Note that this guide was written for GIMP 2.10! You can download <a href="https://www.gimp.org/downloads/">GIMP here!</a>
</p>
<table>
<caption>Figure 1.</caption>
<thead>
<tr>
<th>Things GIMP is good at.</th>
<th>Things GIMP is bad at.</th>
</tr>
</thead>
<tbody>
<tr>
<th>
<h3>Basic animations & editing GIF images.</h3>
<p class="indent">GIMP is very good at making basic animations of a few frames and editing gif images, however it's worth noting
that the longer a GIF is, the longer it will take for you to edit it. For longer animations, it may be wise to use the <a href="https://gmic.eu/download.html">GMIC extension,</a>
which is able to apply various filters to many layers at once... It will save you a LOT of button pressing!
</p>
<h3>Indexing & Optimizing</h3>
<p class="indent">GIMP's built-in Floyd-Steinberg and Positioned dithering settings are extremely #aesthetic, and also reduce file sizes on
GIF images loads. Combined with the "Optimize" filter, which basically cuts frames to ONLY the parts that are different from the last frame then lays them on top of one another, you can make GIF images a fraction of the size of those exported
by other programs such as Clip Studio, Flash and even Photoshop!
</p>
<h3>A lot of control over frame delays</h3>
<p class="indent">
Many more professional animation programs have a setting to set a frame rate-- how fast frames will play. If nothing changes between two frames, the program will still
output the same frame again.<br>
When animating in GIMP, you can manually set the duration of each frame, meaning that if something is static for a certain amount of time, you can simply use one frame with a long frame delay.
This helps substantially with cutting down file size.
</p>
</th>
<th>
<h3>GIMP's tablet support is broken on many commonly-used tablets.</h3>
<p class="indent">Pressure sensitivity has been broken on GIMP for many WACOM tablet drivers for years now, and though they've been trying
to fix it lately, it's unlikely that they will. I've heard some newer tablets work on it, but it's not worked for mine since at least 2016.
This makes hand-animation much harder: If you want to very line weight, you have to do it by hand, which is time consuming.
</p>
<h3>GIMP is not suited for long animations.</h3>
<p class="indent">Unless you're chopping things up into tiny parts and making an animation out of many GIF images (which is cool as hell, if so) GIMP is not stable enough to make long animations.
GAP (GIMP Animation Program) which we'll talk about later, helps with this somewhat by allowing you to use automated processes such as Inbetweening and fades, however it is still much slower to use
than animating software (or even Photoshop!) GIMP also does not play well with large image dimensions in print resolution or video resolutions, and tends to crash frequently and slow down noticeably when working with these files.
Also, as you're adding more frames to a file, you add each as a layer with transparency data and RGB channels stored, so it tends to be pretty huge.
</p>
</th>
</tr>
<tr>
<th>
</th>
<th>
</th>
</tr>
</tbody>
</table>
<p>Don't worry if that doesn't all make sense yet! We'll get to more in the tutorial... The takeaway here is: <b>GIMP is good at creating short animations with relatively small file sizes!</b> I.E. It's very good for making animated images that load quickly and do not lag up your browser-- Perfect for making web-buttons!
<br> The other takeaway is that the first step to doing anything in GIMP is asking yourself: <b>"Is this something I should do in GIMP?"</b> Because a lot of the time, the answer will be "no."</p>
<hr>
<div style="text-align: center;"><img src="../images/Badges/ANARCHAFEMgif.gif"><img src="../images/Badges/transliberation.gif"><img src="../images/Badges/gaydefiance.gif"></div>
<hr>
</div>
</body>
</html>

1
music/punklist.html
View File

@ -10,6 +10,7 @@
<meta name="author" content="Dalmationer">
<meta name="keywords" content="Edinburgh, punk, bands">
<link rel="stylesheet" href= "../css/bandsstyles.css">
<meta name="msvalidate.01" content="0573EA0AD05BF54C7AA3E2FE42FA0F5B" />
<script data-goatcounter="https://dalmationer.goatcounter.com/count"
async src="//gc.zgo.at/count.js"></script>

36
rss-about.html
View File

@ -6,16 +6,48 @@
and how to use it on your website.">
<meta charset="utf-8">
<meta name="title" content="What Is RSS?">
<link rel="stylesheet" href="./css/rssstyles.css">
</head>
<body>
<h1>What Is RSS?</h1>
<div id="flex-container">
<div id="main-content">
<h1 class=orange>What Is RSS?</h1>
<img src="./images/articleimages/rsspic3.png" alt="What is Really Smart Syndication and how can we use it to make a healthier internet?" style="width: 100%; max-width: 640px;display: block; margin-left: auto; margin-right: auto; border-width: 1px 3px 3px 2px;
border-style: solid double double solid;
border-radius: 8px;
border-color: black;">
<div class="padded">
<p>
<b>RSS</b> AKA Really Smart Syndication or RDF Site Summary is a kind of standardised format for publishing site updates using only a single
XML-formatted text file! An RSS Feed can be published <b>anywhere on the web that allows you to upload text files and view them on the public web!</b>
From Neocities, to self-hosted solutions, to Github, to Google Drive! (but also, don't use google.)<br><br>
RSS relies on two things to work:
<ul>
<li>A specially formatted plain text file that's uploaded somewhere on the web. When the publisher of the feed wants to add something new, they simply change this file. Each time the publisher updates this file, it is then checked by...</li>
<li>A "News Aggregator" or RSS Reader application, which is installed by the person following the feed. This checks for updates to the text file above
every so often. When it discovers a difference, it adds the new entry to the feed!
</li>
</ul>
</div>
</p>
</div>
<div id="sidebar">
<div id="sidebarscroll">
<h1 style="text-align: center; display: block; background-color: antiquewhite; padding: 5px; border-width: 1px 3px 3px 2px;
border-style: solid double double solid;
border-radius: 8px;
border-color: black;">Navigation</h1>
</div>
</div>
</div>
<footer>This page and its contents are Public Domain and can be downloaded and used for any purpose for free.</footer>
</body>
</html>