firststuffs

1 files changed, 195 insertions, 0 deletions

diff --git a/style.css b/style.css
new file mode 100644
index 0000000..27706a0
--- /dev/null
+++ b/style.css
@@ -0,0 +1,195 @@
+/* Since this site is about teaching web concepts, even this file is a learning
+ * opportunity. */
+
+@-webkit-keyframes next {
+    0% {color: yellow ;}
+    100% {color: lightblue}
+}
+
+.next a {
+	color: inherit ;
+}
+
+.next {
+	color: red ;
+	  -webkit-animation:next 1s infinite alternate ;
+	font-size: xx-large ;
+	text-align: center ;
+	margin: auto ;
+	display: block ;
+	font-weight: bold ;
+	padding: 1em ;
+}
+
+.next:before {
+	content: "👉" ;
+}
+
+body {
+	color: beige ;
+	background: #222 ;
+}
+
+h1 {
+	text-align: center ;
+	color: lightgreen ;
+}
+
+header h1 {
+	font-size: 40px ;
+}
+
+h2 {
+	text-align: center ;
+	color: deeppink ;
+	font-variant: small-caps;
+	font-size: 24pt ;
+    border-bottom: dashed #ddd 1px ;
+    max-width: 500px ;
+    margin: 1em auto ;
+}
+
+h3 {
+    color: gold ;
+}
+
+/* "a" is for links. */
+a {
+    color: lightblue ;
+}
+
+/* The "hover" option, which can be used with pretty much anything, allows you
+ * to set different settings if someone hovers over something with their mouse.
+ * */
+a:hover {
+    color: white ;
+}
+
+dt {
+    font-weight: bold ;
+}
+
+/* code and pre are for formatting monospace text commands. Use code generally,
+ * but pre is for separate code blocks. pre is also sensitive to whitespace,
+ * unlike most of HTML. */
+code {
+    color: lime ;
+	border-radius: 5px ;
+}
+pre {
+	background: #111222 ;
+	border: 1px solid lime ;
+	border-radius: 20px ;
+	padding: 1em ;
+	white-space: pre-wrap;
+	overflow-wrap: break-word ;
+	max-width: 600px ;
+	margin: auto ;
+}
+
+p img, li img, h1 img, h2 img, h3 img, h4 img {
+	vertical-align: middle ;
+	max-width: 1em;
+	border: none ;
+	display: inline ;
+}
+
+img {
+	max-width: 90% ;
+	margin: auto ;
+	display: block ;
+	border: solid 5px beige ;
+}
+strong {
+	color: orange ;
+}
+
+footer {
+	text-align: center ;
+	font-variant: small-caps ;
+	clear: both ;
+	padding: 2em 0 ;
+}
+footer li {
+	display: inline-block ;
+	padding: 0 .5em ;
+	font-size: x-large ;
+}
+footer li:hover {
+	background: lightblue ;
+}
+
+nav { font-size: small ;}
+
+footer { font-size: large ; }
+
+nav ul, footer ul, #taglist {
+	padding: 0;
+}
+
+main {
+	margin: auto ;
+}
+
+/* asides are used for minor tangential notes. I have them shrunk down in
+ * softer colors in a box with soft corners (border-radius). */
+
+aside {
+    border: solid 1px black ;
+    border-radius: 20px ;
+    padding: 0 1em 0 1em ;
+    font-size: small ;
+}
+
+aside p {
+    color: gray ;
+}
+
+aside code {
+    color: green ;
+}
+
+/* This "@media" block defines rules that will only be applied when the minimum
+ * width of the screen is 55em or greater. In essence, they are settings that
+ * only apply on normal weide screens, but *not* phones and low res monitors.
+ * Since we have more room on widescreens, we change a couple things. */
+
+@media (min-width: 55em) {
+
+    aside {
+    margin: 0 30px 0 30px;
+    }
+
+	.resright, .disappear {
+		display: block ;
+		float: right;
+		padding: 20px ;
+		clear: both ;
+		max-height: 400px ;
+		max-width: 300px ;
+	}
+
+    header { max-width: 900px ; margin: auto;}
+	main { max-width: 850px ; }
+}
+
+.ll { font-size: large ; line-height: 1.3em ; max-width: 600px; margin: auto ; }
+
+/* These settings are for the cryptocurrency donation QR codes and info on the
+ * main page. */
+.qr { max-width: 150px ; padding: 10px; border: none; }
+.cryptocontainer {
+    display: flex ;
+    flex-wrap: wrap ;
+    justify-content: center ;
+}
+.cryptoinfo {
+    max-width: 350px ;
+    text-align: center ;
+    padding-left: 10px ;
+    padding-right: 10px ;
+}
+.cryptoinfo code {
+	font-size: small ;
+	overflow-wrap: break-word ;
+}