From e72ce1bc64844775d9b74044e2e5ab44acbc6259 Mon Sep 17 00:00:00 2001 From: 20xd6 <20xd6@airmail.cc> Date: Fri, 16 Aug 2024 15:55:00 -0400 Subject: [PATCH] Update CSS to include the Open Dyslexic font. --- styles.css | 499 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 499 insertions(+) create mode 100644 styles.css diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..7f295b3 --- /dev/null +++ b/styles.css @@ -0,0 +1,499 @@ +@font-face { + font-family: 'Open Dyslexic'; + src: url('common/fonts/od/OpenDyslexic-Regular.woff2') format('woff'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Open Dyslexic'; + src: url('common/fonts/od/OpenDyslexic-Italic.woff2') format('woff'); + font-weight: normal; + font-style: italic; +} + +@font-face { + font-family: 'Open Dyslexic'; + src: url('common/fonts/od/OpenDyslexic-Bold.woff2') format('woff'); + font-weight: bold; + font-style: normal; +} + +body { + margin-left: 5%; + margin-right: 5%; + background-color: #000000; + color:#00cc00; + font-family: "Courier New", sans-serif; + /*dir:"ltr"; + */ + } +.text-block{ + width: 100%; + float:left; +} +img{ + height: auto; + max-width: 100%; +} +img.center_align{ + vertical-align:middle; +} +.od { + font-family: 'Open Dyslexic', serif; + font-weight: normal; +} + +.od em { + font-family: 'Open Dyslexic', serif; + font-weight: normal; + font-style: italic; +} + +.od strong { + font-weight: bold; +} +.font_btns{ + visibility: hidden; +} +.top{ +max-width: 100vw; +float: left; +margin-left: 25%; +margin-right: 3%; +} + +.center { + text-align:center; + margin-left: auto; + margin-right: auto; +} + +.centered_img { + max-width:100%; + height:auto; + text-align:center; +} + +.centered_img img{ + height: auto; + max-width: 100%; +} + +.footer{ + background-color: #000; + clear: both; + padding: 0; + text-align: center; + line-height: normal; + margin: 0; + bottom: 0px; + max-width: 100%; +} + +.header-cont { + width: auto; + text-align:center; + position:fixed; + top:0px; + margin-left: 40%; +} +.header { + height:50px; + background:black; + border:1px solid ##00cc00; + width:100%; + margin-left: 3%; +} + +h1.homepage { + font-size:medium; +} + +h1 a:link{ + color: green; + text-decoration: none; +} + +h2{ + border-bottom-color: 00cc00; + border-bottom-style: dotted; +} + +li { + display: inline; + color: #00cc00; +} +a:link { background-color: #000000; + color: blue; +} +a:hover { background-color: #000000; + color: #00cc00; +} +a:visited{ background-color: #000000; + color: green; +} +a:visited:hover{ background-color: #000000; + color: #00cc00; +} + +p { + margin-bottom: 0.1in; + line-height: 100% +} +blockquote { + font-style: italic; + font-size: 90%; + color: #ffba00; + border-left: yellow; + border-left-style: outset; +} +blockquote p { + margin-left: 5px; +} + +/*CSS for image gallery*/ +div.gallery { + margin: 5px; + border: 1px solid #0c0; + float: left; + width: auto; + max-width:100%; +} + +div.gallery:hover { + border: 1px solid #777; +} + +div.gallery img { + padding: 5px; + height:auto; + max-width:99%; + max-height:477px; +} + +div.desc { + padding: 10px; + text-align: center; + border: 1px solid #0c0; +} + +div.silent { + padding: 10px; + text-align:center; + border:1px clear; + color: #000; +} + +div.gallery_center { + margin: 5px; + border: 1px solid #0c0; + position: relitive; +} + +div.gallery_cetner img { + padding: 5px; + + max-height:600px; + position: relitive; + text-align: center; +} + +div.gallery_center:hover { + border: 1px solid #777; + text-align:cetner; + padding:10px; +} +/*End Gallery CSS*/ + +.block { + width: 100%; + border: 1px; +} + +/*============================================================================== + + GRC multi-level script-free pure-CSS menuing system stylesheet. + This code is hereby placed into the public domain by its author + Steve Gibson. It may be freely used for any purpose whatsoever. + + Computed Geometries: with a default 12px font, 1.0em == 12px and + 1px == 0.08333em. + Thus, our 98px wide Freeware & Research buttons are 8.166666em wide. + + PUBLIC DOMAIN CONTRIBUTION NOTICE + This work has been explicitly placed into the Public Domain for the + benefit of anyone who may find it useful for any purpose whatsoever. + +==============================================================================*/ + + /*================= STYLES FOR THE GRC MASTHEAD & CONTROLS ==================*/ + +.menuminwidth0 { /* for all browsers (non-IE) that obey min-width */ + position:relative; + border:0; + margin:0; + padding:0; + width:100%; + height:55px;/* 36px masthead height + 18px button height + 1px lower border*/ + min-width:560px; +} + +/* suppress our whole menu when not an interactive mode (when printing, etc.) */ +@media print, projection { .menuminwidth0 { d\isplay:none; } } + +* html .menuminwidth1 { /* this allows IE5/6 to simulate min-width capability */ + position:relative; /* we can simulate a minimum width by creating a large */ + float:left; /* border in this first div, then placing our content */ + height: 1px; /* into a second nested div (see 2nd nested div next */ + border-left:560px solid #fff; /* CSS box-model borders are a fixed size */ +} + +* html .menuminwidth2 { /* used to simulate min-width capability for IE5/6 */ + position:relative; + margin-left:-560px; + height: 1px; +} + + + + /*========================= TOP OF THE MENU CASCADE =========================*/ + +.menu { + position:relative; /* establish a menu-relative positioning context */ + float:left; /* play nicely with others */ + margin:0; + padding:0; + height:25px; /* the menu's overall height */ +} + +.menu img { + vertical-align: top; /* prevent images from being pushed down by text */ +} + +.menu ul { + margin:10px; + list-style-type:none; /* we don't want to view the list as a list */ + line-height:1.5em; /* globally set the menu's item spacing. note */ +} /* this must be 1.0 or 1.5 or 2.0 for Mozilla */ + +.menu li { + float:left; /* this creates the side-by-side array of top-level buttons */ + position:relative; /* create local positioning contexts for each button */ + margin:0; + border:1; + border-style:double; +} + +.menu ul li table { + margin:-1px 0; /* IE5 needs -1px top and bottom table margins */ + m\argin:0; /* re-zero the table margins for everyone but IE5 */ + border-collapse:collapse; /* IE5 needs this for the sub-menus to work */ + font-size:12px; /* this sets the base font size for our entire menu */ + border:1; + border-style:double; +} + +.menu ul li p.dropbox { + display:none; +} + +.drop { + display:block; + padding:0px 0.33em; /* this sets the l/r margins for our menu item */ + margin:0; + text-align:right; /* this right alignment goes with the float:left below */ + cursor:pointer; /* IE tries to switch back to an I-beam, don't let it */ + cursor:hand; /* IE5 only knows about "hand", so set it both ways */ +} + +.drop span { /* this simultaneously left and right aligns the text and */ + float:left; /* the >> in the drop-down menus which link to sub-menus */ +} + +.rightmenu { + position:relative; /* establish a local positioning context for YAH label */ + float:right; /* and right-align it at the top of our page */ +} + +/*======================== TOP LEVEL MENU DEFINITIONS ========================*/ + +.menu ul li ul { + display:none; /* initially hide the entire list hierarchy */ + padding:1px; /* this is our box border width */ + border:1; + border-style:double; +} + +.menu ul li a, +.menu ul li a:visited { /* unselected top-level menu items */ + display:block; + float:left; + text-decoration:none; + height:18px; +} + +.menu ul li:hover a, +.menu ul li a:hover { /* selected top-level menu items */ + border-top:1px solid #000; /* these 2 lines create the push-in illusion */ + height:16px; +} + +/*======================== 2ND LEVEL MENU DEFINITIONS ========================*/ + +.menu ul li:hover ul, +.menu ul li a:hover ul { /* 2nd level drop-down box */ + display:block; + position:absolute; + margin:0; + top:18px; /* place us just up underneath the top-level images */ + left:-1px; /* left-align our drop-down to the previous button border */ + height:auto; /* the drop-down height will be determiend by line count */ + width:13.5em; +/* color:black; /* this sets the unselected-text color */ +/* background:black; /* this sets our menu's effective "border" color */ +} + +.menu ul li:hover ul.leftbutton, +.menu ul li a:hover ul.leftbutton {/* our first dropdown should not be skewed */ + left:0px; +} + +.menu ul li:hover ul.skinny, +.menu ul li a:hover ul.skinny { /* 2nd level skinny drop-down box */ + width:8.08333em; /* with a 12px default font, this is 97px width (97/12) */ +} + +.menu ul.rightmenu li:hover ul, +.menu ul.rightmenu li a:hover ul { /* 2nd level neighborhood drop-down box */ + left:auto; + right:0; /* nudge the right menu right to line up under the border */ + width:400px; /* with a 12px default font, this is 228px width (228/12) */ +} + +* html .menu ul.rightmenu li a:hover ul { /* IE5/6 needs a tweak here */ + right:-1px; +} + +.menu ul li:hover ul li a, +.menu ul li a:hover ul li a { /* 2nd level unselected items */ + border:0; + margin:0; + padding:0; + height:auto; +/* color:#000; /* this sets the unselected drop-down text color */ +/* background:#d8d8d8; /* this sets the drop-down menu background color */ + width:13.5em; +} + +.menu ul li:hover ul li:hover a, +.menu ul li a:hover ul li a:hover { /* 2nd level selected item */ +/* color:black; + background:white;*/ +} + +.menu ul li:hover ul.skinny li a, +.menu ul li a:hover ul.skinny li a, +.menu ul li:hover ul.skinny li a:hover, +.menu ul li a:hover ul.skinny li a:hover { /* 2nd level un+selected items */ + width:8.08333em; +} + +/*======================== 3RD LEVEL MENU DEFINITIONS ========================*/ + +.menu ul li:hover ul li ul, +.menu ul li a:hover ul li a ul { /* hide inactive 3rd-level menus */ + visibility:hidden; +} + +.menu ul li:hover ul li:hover ul, +.menu ul li a:hover ul li a:hover ul { /* 3rd level drop-down box */ + visibility:visible; + position:absolute; + margin-top:-1px; /* bring the top edge of the 3rd level menu up one */ + top:0; + left:8.08333em; + width:14em; +} + +.menu ul li:hover ul li:hover ul li a, +.menu ul li a:hover ul li a:hover ul li a { /* 3rd level unselected items */ + width:14em; +} + +.menu ul li:hover ul li:hover ul li a:hover, +.menu ul li a:hover ul li a:hover ul li a:hover { /* level3 selected items */ + width:14em; +} + +#text { /* the Mac's standard Safari browser will not see this code */ + height:1.215em;# /* ... but every other browser will and should */ +} /* Safari barfs on the illegal pound sign (#) after the rule's property val */ + + +/*Media queries to redo nav and whatnot for mobile*/ + +@media screen and (max-width: 800px){ + body { + margin-left: unset; + margin-right: 3%; + } + .body{ + margin-left: 5%; + margin-right: 5%; + } + h1{ + padding-left: 5%; + } + .top{ + width: 90vw; + float: left; + margin-left: unset; + } + .menu { + position:relative; /* establish a menu-relative positioning context */ + float:left; /* play nicely with others */ + margin:0; + padding:0; + padding-bottom: 5px; + height:auto; + } + + .menu ul{ + width: 100%; + margin: 0; + padding: 0; + } + + .menu li { + width: 100%; + text-align: center; + height:35px; + padding-top: 5px; + padding-bottom: 5px; + } + .menu ul li a { + float:unset; + } + .menu ul li p.dropbox { + display: block; + border: double; + width:10%; + } + + div.gallery img { + max-width:97%; + } + img { + max-width:100vw; + } + video{ + max-width: 100vw; + } + .button { + padding: 5%; + } + .header-cont { + display: none; + } +}