added basic site, not much content yet.

This commit is contained in:
Dalm 2022-01-29 03:41:08 +00:00
commit 63148cd9d3
20 changed files with 1269 additions and 0 deletions

BIN
Aboutscaledsmol.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 209 KiB

View File

@ -0,0 +1,180 @@
body{
background-image: url(./images/blackpaperbg.jpg);
background-repeat: repeat;
background-color: black;
color: white;
font-size: 100%;
font-family: 'Raleway', sans-serif, Georgia, 'Times New Roman', Times, serif;
margin: 0;
padding: 0;
}
a{
color: rgb(204, 52, 209);
text-decoration:underline;
}
h1{
font-size: 3em;
color: rgb(204, 52, 209);
font-family: 'Staatliches', cursive;
}
h2{ font-size: 2em;
color: rgb(204, 52, 209);
font-family: 'Staatliches', cursive;
}
article{
font-size: 1em;
line-height: 150%;
}
#headerimg{
width: 100%;
margin-left: auto;
margin-right: auto;
display: block;
}
#header-navigation{
background-color: black;
text-align: center;
border-style: solid;
border-width: 1px;
padding-left: 2%;
padding-right: 2%;
padding-top: 10px;
padding-bottom: 10px;
line-height: 0.9;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
max-width: 500px;
font-size: 0.875em;
}
.flex-container{
display: flex;
margin: 0 auto;
margin-bottom: 1px;
}
#Content-box{
flex-wrap: wrap;
min-height: 400px;
font-size: 0.875em;
margin: 0 auto;
justify-content: center;
}
#leftbox{
padding-right: 0.5%;
padding-left: 0.5%;
margin-top: 10px;
margin-bottom: 1px;
border: solid 2px;
width: 11%;
border-color: white;
margin-left: 0.2%;
background-color: black;
}
#abouttext{
margin-left: 0.01%;
margin-right: 0.01%;
padding: 5px;
background-color: #222023;
text-align: center;
border: 1px dotted white;
}
#maincontent{
padding-left: 2%;
padding-right: 2%;
margin-top: 10px;
margin-left: 9px;
margin-right: 9px;
margin-bottom: 1px;
border: solid 2px;
border-color: white;
width: 50%;
background-color: black;
padding-bottom: 80px;
}
#rightbox{
padding-right: 0.5%;
padding-left: 0.5%;
margin-top: 10px;
margin-bottom: 1px;
border: solid 2px;
border-color: white;
width: 12%;
margin-right: 0.2%;
background-color: black;
}
#footerbox{
text-align: center;
border-style: solid;
border-width: 1px;
padding-left: 2%;
padding-right: 2%;
padding-top: 10px;
padding-bottom: 10px;
margin-left: auto;
margin-right: auto;
line-height: 0.9;
margin-bottom: 0px;
max-width: 900px;
background-color: black;
}
/*Undersize.*/
@media only screen and (max-width: 800px) {
#header-navigation{
width: 100%;
display: block;
max-width: 100%;
}
#rightbox{
order: 3;
width: 100%;
display: block;
}
#maincontent{
width: 100%;
order: 1;
display: block;
margin-left: 0;
margin-right: auto;
}
#leftbox{
width: 100%;
order: 2;
display: block;
}
#footerbox{
width: 100%;
max-width: 100%;
}
}
/* CONTENT */
#hexlogosvg{
width: 100%;
max-width: 200px;
display: block;
margin-left: auto;
margin-right: auto;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

80
Blog/Post1.html Normal file
View File

@ -0,0 +1,80 @@
<html lang="en">
<head>
<Title>Hex Bomb</Title>
<link rel="stylesheet" href="Blogstyles Template.css">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;600&family=Raleway:wght@200&family=Staatliches&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
</head>
<body>
<div id=header-navigation>
<img id=headerimg src="./images/Headerimg.png" alt="hex-bomb">
<nav>
<a href=main.html>Main</a> |
Blog |
Gallery |
Zines & Comics
</nav>
</div>
<div id=Content-box class="flex-container">
<div id=leftbox>
<img src="./images/BOMBLOGO.svg" alt="Hex Bomb Logo" id="hexlogosvg">
<div id="Abouttext">
HEX BOMB is a punk rock dyke living in Edinburgh, Scotland. She makes sick porn art, zines, music, & more!
</div>
<hr>
<p style="text-align: center;"><img src="./images/3d iww logo.gif" id="iwwgif" style="max-width:100px; width: 100%; display: inline;image-rendering:crisp-edges; image-rendering:pixelated;">
<br>
<a href="https://www.iww.org/">Join the industrial workers of the world!</a></p>
</div>
<div id=maincontent>
<article>
<h1 style="line-height: 1em;">HELLO WORLD & WHY DID I MAKE THIS SITE</h1>
<i>15/01/2022</i>
<hr>
<img src="./Content/fuckedupbomb.png" style="width: 100%; max-width: 1200px; -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*/">
<p>Hey all.</p>
<p>This is the first post on my new site. I put a lot of work into this whole thing, and it&#39s still a little janky, but I&#39ve had a lot of fun making it. Right now its barebones, with just a few pages. Im likely to reupload some old art onto the gallery page over the next few weeks or so.</p>
<p>Over the next few months, this is likely to be where the majority of what I&#39m up to is going to be. I&#39ve been thinking about this for a while, but the fact of the matter is… <b>Social Media just isnt good for me.</b> That is to say, the current, corporate-owned centralised version of social media that we currently live with isnt. I havent really tried Mastodon (I dont really understand how it works) And perhaps once I do Ill like it.</p>
<br>
<p>I&#39ve been thinking a lot how I have very little control over how my art is presented on social media (Twitter is my main one.) It&#39s compressed, it&#39s pushed into a stream with a bunch of other stuff, its placed in contexts that I couldnt possibly predict when making it… And thats good for some art.</p>
<br>
<p>...If that&#39s what the art&#39s about.</p>
<br>
<p>But I think I&#39d rather control the context of my art, & not have it add to the value of some rich jackasses who own whatever social media I&#39m on.</p>
<p>I&#39m not going to disappear from whatever site you know me from, though. My intention is to continue posting my art & blog posts via <a href=”https://www.postybirb.com/”>Postybirb</a>, which is a cool little application that helps with posting artworks to different social media accounts etc.</p>
<p>I also plan to curate an RSS feed that will hopefully help you keep up to date with what I&#39m up to. Subscribe on RSS for the most up to date list of the shit im up to!!</p>
</article>
</div>
<div id=rightbox>
<p>Original Characters</p>
<p>Politics</p>
<p>Contact Me</p>
</div>
</div>
<footer>
<div id="Footerbox">
<p>
This website was generously hosted by my pals at <a href="https://autonomic.zone/">Autonomic.Zone co-operative.</a> Unless otherwise specified, all content on this site is © 2022 HEX BOMB.
</p>
</div>
</footer>
</body>
</html>

BIN
Blog/images/3d iww logo.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 64 KiB

102
Blog/images/BOMBLOGO.svg Normal file
View File

@ -0,0 +1,102 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="148.57678mm"
height="157.912mm"
viewBox="0 0 148.57678 157.912"
version="1.1"
id="svg5"
inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
sodipodi:docname="BOMBLOGO.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#505050"
bordercolor="#ffffff"
borderopacity="1"
inkscape:pageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="1"
inkscape:document-units="mm"
showgrid="false"
showguides="true"
inkscape:guide-bbox="true"
inkscape:zoom="0.37059484"
inkscape:cx="33.729558"
inkscape:cy="36.427922"
inkscape:window-width="1920"
inkscape:window-height="1017"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="layer3"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0">
<sodipodi:guide
position="-141.21635,97.597348"
orientation="1,0"
id="guide2295" />
</sodipodi:namedview>
<defs
id="defs2" />
<g
inkscape:groupmode="layer"
id="layer3"
inkscape:label="Layer 2"
transform="translate(-32.340149,-81.045928)">
<g
id="g3951"
style="opacity:0.25;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none">
<path
style="opacity:1;fill:none;stroke:#ff0000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 103.87861,227.11118 C 43.422477,166.65504 43.422477,166.65504 43.422477,166.65504 l 60.456133,-60.45613 60.14964,60.14964 -60.14964,60.14964"
id="path3379" />
<path
style="fill:none;stroke:#ff0000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 43.422477,166.65504 H 165.45613"
id="path3647" />
<path
style="fill:none;stroke:#ff0000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 103.87861,106.19891 V 227.11118"
id="path3649" />
</g>
</g>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-32.340149,-81.045928)">
<circle
style="fill:none;stroke:#9100ff;stroke-width:6;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path205"
cx="104.05709"
cy="167.24098"
r="68.716942" />
<rect
style="fill:none;stroke:#9100ff;stroke-width:6.03569;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect1683"
width="28.009321"
height="26.932035"
x="172.94582"
y="-40.521725"
ry="0"
transform="rotate(41.888767)" />
<circle
style="fill:none;stroke:#9100ff;stroke-width:1.631;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path1888"
cx="103.8786"
cy="167.0625"
r="60.419697" />
<path
style="fill:none;stroke:#9100ff;stroke-width:1.762;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 103.87861,227.11118 44.01024,-102.14234 -97.73021,68.56447 h 107.1185 L 59.701461,125.36455 103.87861,227.89429"
id="path2911"
sodipodi:nodetypes="cccccc" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
Blog/images/Headerimg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 140 KiB

BIN
Blog/images/bgwire.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

View File

@ -0,0 +1,180 @@
body{
background-image: url(./images/blackpaperbg.jpg);
background-repeat: repeat;
background-color: black;
color: white;
font-size: 100%;
font-family: 'Raleway', sans-serif, Georgia, 'Times New Roman', Times, serif;
margin: 0;
padding: 0;
}
a{
color: rgb(204, 52, 209);
text-decoration:underline;
}
h1{
font-size: 3em;
color: rgb(204, 52, 209);
font-family: 'Staatliches', cursive;
}
h2{ font-size: 2em;
color: rgb(204, 52, 209);
font-family: 'Staatliches', cursive;
}
article{
font-size: 1em;
line-height: 150%;
}
#headerimg{
width: 100%;
margin-left: auto;
margin-right: auto;
display: block;
}
#header-navigation{
background-color: black;
text-align: center;
border-style: solid;
border-width: 1px;
padding-left: 2%;
padding-right: 2%;
padding-top: 10px;
padding-bottom: 10px;
line-height: 0.9;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
max-width: 500px;
font-size: 0.875em;
}
.flex-container{
display: flex;
margin: 0 auto;
margin-bottom: 1px;
}
#Content-box{
flex-wrap: wrap;
min-height: 400px;
font-size: 0.875em;
margin: 0 auto;
justify-content: center;
}
#leftbox{
padding-right: 0.5%;
padding-left: 0.5%;
margin-top: 10px;
margin-bottom: 1px;
border: solid 2px;
width: 11%;
border-color: white;
margin-left: 0.2%;
background-color: black;
}
#abouttext{
margin-left: 0.01%;
margin-right: 0.01%;
padding: 5px;
background-color: #222023;
text-align: center;
border: 1px dotted white;
}
#maincontent{
padding-left: 2%;
padding-right: 2%;
margin-top: 10px;
margin-left: 9px;
margin-right: 9px;
margin-bottom: 1px;
border: solid 2px;
border-color: white;
width: 50%;
background-color: black;
padding-bottom: 80px;
}
#rightbox{
padding-right: 0.5%;
padding-left: 0.5%;
margin-top: 10px;
margin-bottom: 1px;
border: solid 2px;
border-color: white;
width: 12%;
margin-right: 0.2%;
background-color: black;
}
#footerbox{
text-align: center;
border-style: solid;
border-width: 1px;
padding-left: 2%;
padding-right: 2%;
padding-top: 10px;
padding-bottom: 10px;
margin-left: auto;
margin-right: auto;
line-height: 0.9;
margin-bottom: 0px;
max-width: 900px;
background-color: black;
}
/*Undersize.*/
@media only screen and (max-width: 800px) {
#header-navigation{
width: 100%;
display: block;
max-width: 100%;
}
#rightbox{
order: 3;
width: 100%;
display: block;
}
#maincontent{
width: 100%;
order: 1;
display: block;
margin-left: 0;
margin-right: auto;
}
#leftbox{
width: 100%;
order: 2;
display: block;
}
#footerbox{
width: 100%;
max-width: 100%;
}
}
/* CONTENT */
#hexlogosvg{
width: 100%;
max-width: 200px;
display: block;
margin-left: auto;
margin-right: auto;
}

View File

@ -0,0 +1,64 @@
<html lang="en">
<head>
<Title>Hex Bomb</Title>
<link rel="stylesheet" href="Blogstyles Template.css">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;600&family=Raleway:wght@200&family=Staatliches&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
</head>
<body>
<div id=header-navigation>
<img id=headerimg src="./images/Headerimg.png" alt="hex-bomb">
<nav>
<a href=main.html>Main</a> |
Blog |
Gallery |
Zines & Comics
</nav>
</div>
<div id=Content-box class="flex-container">
<div id=leftbox>
<img src="./images/BOMBLOGO.svg" alt="Hex Bomb Logo" id="hexlogosvg">
<div id="Abouttext">
HEX BOMB is a punk rock dyke living in Edinburgh, Scotland. She makes sick porn art, zines, music, & more!
</div>
<hr>
<p style="text-align: center;"><img src="./images/3d iww logo.gif" id="iwwgif" style="max-width:100px; width: 100%; display: inline;image-rendering:crisp-edges; image-rendering:pixelated;">
<br>
<a href="https://www.iww.org/">Join the industrial workers of the world!</a></p>
</div>
<div id=maincontent>
<article>
<h1>test</h1>
<p>bingus</p>
</article>
</div>
<div id=rightbox>
<p>Original Characters</p>
<p>Politics</p>
<p>Contact Me</p>
</div>
</div>
<footer>
<div id="Footerbox">
<p>
This website was generously hosted by my pals at <a href="https://autonomic.zone/">Autonomic.Zone co-operative.</a> Unless otherwise specified, all content on this site is © 2022 HEX BOMB.
</p>
</div>
</footer>
</body>
</html>

BIN
images/3d iww logo.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 64 KiB

102
images/BOMBLOGO.svg Normal file
View File

@ -0,0 +1,102 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="148.57678mm"
height="157.912mm"
viewBox="0 0 148.57678 157.912"
version="1.1"
id="svg5"
inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
sodipodi:docname="BOMBLOGO.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#505050"
bordercolor="#ffffff"
borderopacity="1"
inkscape:pageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="1"
inkscape:document-units="mm"
showgrid="false"
showguides="true"
inkscape:guide-bbox="true"
inkscape:zoom="0.37059484"
inkscape:cx="33.729558"
inkscape:cy="36.427922"
inkscape:window-width="1920"
inkscape:window-height="1017"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="layer3"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0">
<sodipodi:guide
position="-141.21635,97.597348"
orientation="1,0"
id="guide2295" />
</sodipodi:namedview>
<defs
id="defs2" />
<g
inkscape:groupmode="layer"
id="layer3"
inkscape:label="Layer 2"
transform="translate(-32.340149,-81.045928)">
<g
id="g3951"
style="opacity:0.25;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none">
<path
style="opacity:1;fill:none;stroke:#ff0000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 103.87861,227.11118 C 43.422477,166.65504 43.422477,166.65504 43.422477,166.65504 l 60.456133,-60.45613 60.14964,60.14964 -60.14964,60.14964"
id="path3379" />
<path
style="fill:none;stroke:#ff0000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 43.422477,166.65504 H 165.45613"
id="path3647" />
<path
style="fill:none;stroke:#ff0000;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="M 103.87861,106.19891 V 227.11118"
id="path3649" />
</g>
</g>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-32.340149,-81.045928)">
<circle
style="fill:none;stroke:#9100ff;stroke-width:6;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path205"
cx="104.05709"
cy="167.24098"
r="68.716942" />
<rect
style="fill:none;stroke:#9100ff;stroke-width:6.03569;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect1683"
width="28.009321"
height="26.932035"
x="172.94582"
y="-40.521725"
ry="0"
transform="rotate(41.888767)" />
<circle
style="fill:none;stroke:#9100ff;stroke-width:1.631;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="path1888"
cx="103.8786"
cy="167.0625"
r="60.419697" />
<path
style="fill:none;stroke:#9100ff;stroke-width:1.762;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
d="m 103.87861,227.11118 44.01024,-102.14234 -97.73021,68.56447 h 107.1185 L 59.701461,125.36455 103.87861,227.89429"
id="path2911"
sodipodi:nodetypes="cccccc" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
images/Headerimg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 140 KiB

BIN
images/bgwire.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

BIN
images/blackpaperbg.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

78
index.html Normal file
View File

@ -0,0 +1,78 @@
<html lang="en">
<head>
<Title>Hex Bomb</Title>
<link rel="stylesheet" href="mainstyles.css">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;600&family=Raleway:wght@200&family=Staatliches&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
</head>
<body>
<div id=header-navigation>
<img id=headerimg src="./images/Headerimg.png" alt="hex-bomb">
<nav class=flexnav>
<div id=topbutton><a href="index.html">Main</a></div>
<div id=topbutton><a href="blog.html">Blog</a></div>
<div id=topbutton><a href="gallery.html">Gallery</a></div>
<div id=topbutton><a href="comics.html">Zines & Comics</a></div>
</nav>
</div>
<div id=Content-box class="flex-container">
<div id=leftbox>
<img src="./images/BOMBLOGO.svg" alt="Hex Bomb Logo" id="hexlogosvg">
<div id="Abouttext">
HEX BOMB is a punk rock dyke living in Edinburgh, Scotland. She makes sick porn art, zines, music, & more!
</div>
<hr>
<p style="text-align: center;"><img src="./images/3d iww logo.gif" id="iwwgif" style="max-width:100px; width: 100%; display: inline;image-rendering:crisp-edges; image-rendering:pixelated;">
<br>
<a href="https://www.iww.org/">Join the industrial workers of the world!</a></p>
</div>
<div id=maincontent>
<div id=main-text>
<h2>WELCOME TO HEXBOMB.GAY</h2>
<hr>
<p>This page is an <b>ONLINE ABATTOIR</b> of PORNOGRAPHIC CONTENT created by me, <b>HEX BOMB.</b> AKA Scotland's <b>MISS MASTERSTROKE</b> herself! Here you will be able to find find porn comics, commissioned art & illustrations from me, as well as political writing & zines.
<br><br>
I&#39m firmly of the belief that PORN IS POLITICAL just as all art is political, & I hope it comes across in my work.
<br><br>
I am planning to implement an <b>RSS FEED</b> onto this website, which I will update whenever I add something to the site. That way you&#39ll always know when to check in and see what&#39s up. I will also be adding a page where I link all pals.
<br><br>
So watch this space for more from the #1 dyke bitch online cursing yr screen!
<hr><br>
<img src="Aboutscaledsmol.png" alt="Check it out! Drake shops at the Co-Op!!" id=checkitoutimg>
</p>
</div>
</div>
<div id=rightbox>
<nav>
<div id=sidebarbutton><a href="ocs.html">Original Characters</a></div>
<div id=sidebarbutton><a href="politics.html">Politics</a></div>
<div id=sidebarbutton><a href="contact.html">Contact Me</a></div>
<div id=sidebarbutton><a href="links.html">Links & Friends</a></div>
</nav>
</div>
</div>
<footer>
<div id="Footerbox">
<p>
This website was generously hosted by my pals at <a href="https://autonomic.zone/">Autonomic.Zone co-operative.</a> Unless otherwise specified, all content on this site is © 2022 HEX BOMB.
</p>
</div>
</footer>
</body>
</html>

224
mainstyles.css Normal file
View File

@ -0,0 +1,224 @@
body{
background-image: url(./images/blackpaperbg.jpg);
background-repeat: repeat;
background-color: black;
color: white;
font-size: 100%;
font-family: 'Raleway', sans-serif, Georgia, 'Times New Roman', Times, serif;
margin: 0;
padding: 0;
}
a{
color: rgb(204, 52, 209);
text-decoration:underline;
}
h1{
font-size: 3em;
color: rgb(204, 52, 209);
font-family: 'Staatliches', cursive;
}
h2{ font-size: 2em;
color: rgb(204, 52, 209);
font-family: 'Staatliches', cursive;
}
#main-text{
font-size: 1em;
line-height: 150%;
}
#headerimg{
width: 100%;
margin-left: auto;
margin-right: auto;
display: block;
}
#checkitoutimg{
justify-content: center;
width: 100%;
max-width: 640px;
margin-left: auto;
margin-right: auto;
display: block;
}
#header-navigation{
background-color: black;
text-align: center;
border-style: solid;
border-width: 1px;
padding-left: 2%;
padding-right: 2%;
padding-top: 10px;
padding-bottom: 10px;
line-height: 0.9;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
max-width: 500px;
font-size: 0.875em;
}
.flexnav{
display: flex;
flex-direction: row;
justify-content: center;
}
#topbutton{
border: 1px white solid;
padding-left: 2%;
padding-right: 2%;
padding-top: 1%;
padding-bottom: 1%;
text-align: center;
font-weight: bold;
font-size: 1.2em;
background-image: url(./images/bgwire.png);
}
#sidebarbutton{
border: 1px white solid;
border-radius: 10%;
text-align: center;
font-weight: bold;
font-size: 1.2em;
margin-left: 5%;
margin-right: auto;
margin-top: 6%;
padding-left: 2%;
padding-right: 2%;
padding-top: 1%;
padding-bottom: 1%;
background-image: url(./images/bgwire.png);
}
.flex-container{
display: flex;
margin: 0 auto;
margin-bottom: 1px;
}
#Content-box{
flex-wrap: wrap;
min-height: 400px;
font-size: 0.875em;
margin: 0 auto;
justify-content: center;
height: auto;
}
#leftbox{
padding-right: 0.5%;
padding-left: 0.5%;
margin-top: 10px;
margin-bottom: 1px;
border: solid 2px;
width: 11%;
border-color: white;
margin-left: 0.2%;
background-color: black;
}
#abouttext{
margin-left: 0.01%;
margin-right: 0.01%;
padding: 5px;
background-color: #222023;
text-align: center;
border: 1px dotted white;
}
#maincontent{
padding-left: 2%;
padding-right: 2%;
margin-top: 10px;
margin-left: 9px;
margin-right: 9px;
margin-bottom: 1px;
border: solid 2px;
border-color: white;
width: 50%;
background-color: black;
padding-bottom: 80px;
}
#rightbox{
padding-right: 0.5%;
padding-left: 0.5%;
margin-top: 10px;
margin-bottom: 1px;
border: solid 2px;
border-color: white;
width: 12%;
margin-right: 0.2%;
background-color: black;
}
#footerbox{
text-align: center;
border-style: solid;
border-width: 1px;
padding-left: 2%;
padding-right: 2%;
padding-top: 10px;
padding-bottom: 10px;
margin-left: auto;
margin-right: auto;
line-height: 0.9;
margin-bottom: 0px;
max-width: 900px;
background-color: black;
}
/*Undersize.*/
@media only screen and (max-width: 800px) {
#header-navigation{
width: 100%;
display: block;
max-width: 100%;
}
#rightbox{
order: 3;
width: 100%;
display: block;
}
#maincontent{
width: 100%;
order: 1;
display: block;
margin-left: 0;
margin-right: auto;
}
#leftbox{
width: 100%;
order: 2;
display: block;
}
#footerbox{
width: 100%;
max-width: 100%;
}
}
/* CONTENT */
#hexlogosvg{
width: 100%;
max-width: 200px;
display: block;
margin-left: auto;
margin-right: auto;
}

0
readme.md Normal file
View File

259
teststyle.html Normal file
View File

@ -0,0 +1,259 @@
<style>
:root {
/* These variables exist so you can make quick and simple style changes without much CSS knowledge */
/* applies to all areas */
--font-family: sans-serif;
--font-size: 14px;
--line-height: 1.3em;
--font-color: black;
--link-color: #22506A;
--link-text-decoration: none;
/* main content (between sidebars) */
--content-padding: 25px;
--content-bg-color: #65CAFE;
/* header */
--header-height: 150px;
--header-background: url('https://pbs.twimg.com/media/EkTRaaMUwAAfh7I?format=jpg&name=large');
--header-margin-bottom: 0px;
/* sidebar */
--sidebar-margin: 10px;
--sidebar-width: 150px;
--sidebar-padding: 15px;
--sidebar-bg-color: #65CAFE;
/* footer */
--footer-height: 30px;
--footer-bg-color: #65CAFE;
/* navbar */
--navitems-alignment: center;
--space-between-navitems: 20px;
--navbar-margin-bottom: 10px;
--nav-bg-color: #65CAFE;
/* container */
--container-width: 800px;
--container-bg-color: #3DA2B7;
/* controls the gap between the content and the footer */
--row-gap: 5px;
/* To add scrollbars to your sidebars, just make the height a px value and change overflow to 'auto' */
--sidebar-height: 100%;
--sidebar-overflow: hidden;
--background-color: #3DA2B7;
}
html,
body {
margin: 0;
padding: 0;
background-color: var(--background-color);
font-family: var(--font-family);
font-size: var(--font-size);
line-height: var(--line-height);
color: var(--font-color);
}
body a {
color: var(--link-color);
font-weight: bold;
text-decoration: var(--link-text-decoration);
}
#main-container {
max-width: var(--container-width);
margin: 0 auto;
background-color: var(--container-bg-color);
}
.flex {
display: flex;
margin-bottom: var(--row-gap);
}
.content-wrap {
margin-top: var(--content-margin-top);
}
#content-container {
width: 60%;
margin-bottom: var(--row-gap);
background-color: var(--content-bg-color);
}
#left-sidebar {
width: var(--sidebar-width);
margin-right: var(--sidebar-margin);
margin-bottom: var(--row-gap);
height: var(--sidebar-height);
overflow: var(--sidebar-overflow);
background-color: var(--sidebar-bg-color);
}
#right-sidebar {
width: var(--sidebar-width);
margin-left: var(--sidebar-margin);
margin-bottom: var(--row-gap);
height: var(--sidebar-height);
overflow: var(--sidebar-overflow);
background-color: var(--sidebar-bg-color);
}
#header-contained {
height: var(--header-height);
margin-bottom: var(--header-margin-bottom);
background-image: var(--header-background);
background-position: center center;
}
#footer {
height: var(--footer-height);
text-align: center;
color: var(--font-color);
background-color: var(--footer-bg-color);
}
#header-full {
display: none;
height: var(--header-height);
margin-bottom: var(--header-margin-bottom);
background-image: var(--header-background);
background-position: center center;
}
#navbar-contained {
margin-bottom: var(--row-gap)
}
#navbar-full {
display: none;
}
.nav {
margin-left: 0;
text-align: var(--navitems-alignment);
margin-top: 0;
margin-bottom: var(--navbar-margin-bottom);
padding-top: 1em;
padding-bottom: 1em;
background-color: var(--nav-bg-color);
}
.nav li {
display: inline-block;
padding-right: var(--space-between-navitems);
}
.nav li a {}
.wrapper {
padding: var(--content-padding);
padding-top: var(--sidebar-padding);
}
.sidebar-wrapper {
padding: var(--sidebar-padding);
height: var(--sidebar-height);
overflow: var(--sidebar-overflow);
}
.footer-wrapper {
padding: 5px;
}
/* To keep your site RESPONSIVE, make sure this variable matches the width for --container-width UNLESS --container-width is 100% - if it's 100%, you'll need to manually input a breakpoint. */
@media only screen and (max-width: 800px) {
.flex {
flex-wrap: wrap;
}
#left-sidebar {
width: 100%;
display: block;
order: 2;
margin-right: 0;
margin-bottom: 10px;
}
#right-sidebar {
width: 100%;
display: block;
order: 3;
margin-left: 0;
}
#content-container {
width: 100%;
display: block;
order: 1;
margin-bottom: 10px;
}
}
</style>
<div id="header-full"></div>
<div id="navbar-full">
<ul class="nav">
<li><a href="/">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<div id="main-container">
<div id="header-contained"></div>
<div id="navbar-contained">
<ul class="nav">
<li><a href="/">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
<div class="content-wrap flex alignment">
<div id="left-sidebar">
<div class="sidebar-wrapper">Left Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Venenatis tellus in metus vulputate eu scelerisque. Duis
at tellus at urna condimentum mattis pellentesque id. Mauris sit amet massa vitae tortor condimentum lacinia
quis vel. Sit amet est placerat in egestas erat imperdiet sed euismod. Erat nam at lectus urna duis
convallis convallis tellus id. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla. Urna et
pharetra pharetra massa massa ultricies mi.</div>
</div>
<div id="content-container">
<div class="wrapper">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Venenatis tellus in metus vulputate eu scelerisque. Duis at tellus at urna
condimentum mattis pellentesque id. Mauris sit amet massa vitae tortor condimentum lacinia quis vel. Sit
amet est placerat in egestas erat imperdiet sed euismod. Erat nam at lectus urna duis convallis convallis
tellus id. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla. Urna et pharetra pharetra
massa massa ultricies mi. Semper viverra nam libero justo laoreet sit amet cursus sit. Quam lacus
suspendisse faucibus interdum posuere lorem. Quam quisque id diam vel quam elementum pulvinar. Venenatis
cras sed felis eget velit aliquet sagittis. Fringilla urna porttitor rhoncus dolor purus non enim. Eleifend
donec pretium vulputate sapien nec sagittis aliquam. Fames ac turpis egestas sed tempus urna et. Nisl vel
pretium lectus quam id leo in. Ornare arcu odio ut sem nulla pharetra diam. Dictum sit amet justo donec enim
diam vulputate ut. Et malesuada fames ac turpis egestas maecenas.</div>
</div>
<div id="right-sidebar">
<div class="sidebar-wrapper">Right Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Venenatis tellus in metus vulputate eu scelerisque. Duis
at tellus at urna condimentum mattis pellentesque id. Mauris sit amet massa vitae tortor condimentum lacinia
quis vel. Sit amet est placerat in egestas erat imperdiet sed euismod. Erat nam at lectus urna duis
convallis convallis tellus id. Cursus eget nunc scelerisque viverra mauris in aliquam sem fringilla. Urna et
pharetra pharetra massa massa ultricies mi.
</div>
</div>
</div>
<div id="footer">
<div class="footer-wrapper">footer</div>
</div>
</div>