Permalink
This commit does not belong to any branch on this respository, and may belong to a fork outside of the repository.
Showing
with
490 additions
and 0 deletions.
- +361 −0 css/midterm.css
- +129 −0 midterm.html
@@ -0,0 +1,361 @@ | ||
/*! HTML5 Boilerplate v7.3.0 | MIT License | https://html5boilerplate.com/ */ | ||
|
||
/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */ | ||
/* | ||
* What follows is the result of much research on cross-browser styling. | ||
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, | ||
* Kroc Camen, and the H5BP dev community and team. | ||
*/ | ||
|
||
/* ========================================================================== | ||
Base styles: opinionated defaults | ||
========================================================================== */ | ||
|
||
html { | ||
color: #222; | ||
font-size: 1em; | ||
line-height: 1.4; | ||
} | ||
|
||
/* | ||
* Remove text-shadow in selection highlight: | ||
* https://twitter.com/miketaylr/status/12228805301 | ||
* | ||
* Vendor-prefixed and regular ::selection selectors cannot be combined: | ||
* https://stackoverflow.com/a/16982510/7133471 | ||
* | ||
* Customize the background color to match your design. | ||
*/ | ||
|
||
::-moz-selection { | ||
background: #b3d4fc; | ||
text-shadow: none; | ||
} | ||
|
||
::selection { | ||
background: #b3d4fc; | ||
text-shadow: none; | ||
} | ||
|
||
/* | ||
* A better looking default horizontal rule | ||
*/ | ||
|
||
hr { | ||
display: block; | ||
height: 1px; | ||
border: 0; | ||
border-top: 1px solid #ccc; | ||
margin: 1em 0; | ||
padding: 0; | ||
} | ||
|
||
/* | ||
* Remove the gap between audio, canvas, iframes, | ||
* images, videos and the bottom of their containers: | ||
* https://github.com/h5bp/html5-boilerplate/issues/440 | ||
*/ | ||
|
||
audio, | ||
canvas, | ||
iframe, | ||
img, | ||
svg, | ||
video { | ||
vertical-align: middle; | ||
} | ||
|
||
/* | ||
* Remove default fieldset styles. | ||
*/ | ||
|
||
fieldset { | ||
border: 0; | ||
margin: 0; | ||
padding: 0; | ||
} | ||
|
||
/* | ||
* Allow only vertical resizing of textareas. | ||
*/ | ||
|
||
textarea { | ||
resize: vertical; | ||
} | ||
|
||
/* ========================================================================== | ||
Browser Upgrade Prompt | ||
========================================================================== */ | ||
|
||
.browserupgrade { | ||
margin: 0.2em 0; | ||
background: #ccc; | ||
color: #000; | ||
padding: 0.2em 0; | ||
} | ||
|
||
/* ========================================================================== | ||
Author's custom styles | ||
========================================================================== */ | ||
|
||
body { | ||
background-color: black; | ||
} | ||
|
||
#body-wrapper { | ||
font-family: sans-serif; /* choose a better font */ | ||
margin: 0 auto; | ||
max-width: 750px; | ||
text-align: center; | ||
} | ||
|
||
header { | ||
background-color: white; | ||
} | ||
|
||
ul, ol { | ||
text-align: left; | ||
margin-left: 100px; | ||
} | ||
|
||
.particle-wrapper { | ||
position: relative; | ||
height: 400px; | ||
} | ||
|
||
.particle-container { | ||
overflow: hidden; | ||
height: 100%; | ||
position: absolute; | ||
} | ||
|
||
.particle-temp { | ||
border-radius: 50%; | ||
background: white; | ||
margin: 15px; | ||
animation: | ||
blur_fade 20s ease 0s infinite, | ||
circle 5s linear 0s infinite; | ||
} | ||
|
||
@keyframes blur_fade { | ||
from { | ||
height: 2px; | ||
width: 2px; | ||
opacity: 0; | ||
} | ||
20% { | ||
filter: blur(0.2); | ||
opacity: 0.8; | ||
} | ||
to { | ||
height: 40px; | ||
width: 40px; | ||
filter: blur(3px); | ||
opacity: 0; | ||
} | ||
} | ||
|
||
@keyframes circle { | ||
from { | ||
transform-origin: -10px -10px; | ||
transform: rotate(0deg); | ||
} | ||
to { | ||
transform-origin: -10px -10px; | ||
transform: rotate(360deg); | ||
} | ||
} | ||
|
||
#subtle { | ||
background-color: pink; | ||
} | ||
|
||
#fireworks { | ||
background-color: seashell; | ||
} | ||
|
||
#info1 { | ||
background-color: lemonchiffon; | ||
} | ||
|
||
#info2 { | ||
background-color: aliceblue; | ||
} | ||
|
||
#info3 { | ||
background-color: pink; | ||
} | ||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
/* ========================================================================== | ||
Helper classes | ||
========================================================================== */ | ||
|
||
/* | ||
* Hide visually and from screen readers | ||
*/ | ||
|
||
.hidden { | ||
display: none !important; | ||
} | ||
|
||
/* | ||
* Hide only visually, but have it available for screen readers: | ||
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility | ||
* | ||
* 1. For long content, line feeds are not interpreted as spaces and small width | ||
* causes content to wrap 1 word per line: | ||
* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe | ||
*/ | ||
|
||
.sr-only { | ||
border: 0; | ||
clip: rect(0, 0, 0, 0); | ||
height: 1px; | ||
margin: -1px; | ||
overflow: hidden; | ||
padding: 0; | ||
position: absolute; | ||
white-space: nowrap; | ||
width: 1px; | ||
/* 1 */ | ||
} | ||
|
||
/* | ||
* Extends the .sr-only class to allow the element | ||
* to be focusable when navigated to via the keyboard: | ||
* https://www.drupal.org/node/897638 | ||
*/ | ||
|
||
.sr-only.focusable:active, | ||
.sr-only.focusable:focus { | ||
clip: auto; | ||
height: auto; | ||
margin: 0; | ||
overflow: visible; | ||
position: static; | ||
white-space: inherit; | ||
width: auto; | ||
} | ||
|
||
/* | ||
* Hide visually and from screen readers, but maintain layout | ||
*/ | ||
|
||
.invisible { | ||
visibility: hidden; | ||
} | ||
|
||
/* | ||
* Clearfix: contain floats | ||
* | ||
* For modern browsers | ||
* 1. The space content is one way to avoid an Opera bug when the | ||
* `contenteditable` attribute is included anywhere else in the document. | ||
* Otherwise it causes space to appear at the top and bottom of elements | ||
* that receive the `clearfix` class. | ||
* 2. The use of `table` rather than `block` is only necessary if using | ||
* `:before` to contain the top-margins of child elements. | ||
*/ | ||
|
||
.clearfix:before, | ||
.clearfix:after { | ||
content: " "; | ||
/* 1 */ | ||
display: table; | ||
/* 2 */ | ||
} | ||
|
||
.clearfix:after { | ||
clear: both; | ||
} | ||
|
||
/* ========================================================================== | ||
EXAMPLE Media Queries for Responsive Design. | ||
These examples override the primary ('mobile first') styles. | ||
Modify as content requires. | ||
========================================================================== */ | ||
|
||
@media only screen and (min-width: 35em) { | ||
/* Style adjustments for viewports that meet the condition */ | ||
} | ||
|
||
@media print, | ||
(-webkit-min-device-pixel-ratio: 1.25), | ||
(min-resolution: 1.25dppx), | ||
(min-resolution: 120dpi) { | ||
/* Style adjustments for high resolution devices */ | ||
} | ||
|
||
/* ========================================================================== | ||
Print styles. | ||
Inlined to avoid the additional HTTP request: | ||
https://www.phpied.com/delay-loading-your-print-css/ | ||
========================================================================== */ | ||
|
||
@media print { | ||
*, | ||
*:before, | ||
*:after { | ||
background: transparent !important; | ||
color: #000 !important; | ||
/* Black prints faster */ | ||
box-shadow: none !important; | ||
text-shadow: none !important; | ||
} | ||
a, | ||
a:visited { | ||
text-decoration: underline; | ||
} | ||
a[href]:after { | ||
content: " (" attr(href) ")"; | ||
} | ||
abbr[title]:after { | ||
content: " (" attr(title) ")"; | ||
} | ||
/* | ||
* Don't show links that are fragment identifiers, | ||
* or use the `javascript:` pseudo protocol | ||
*/ | ||
a[href^="#"]:after, | ||
a[href^="javascript:"]:after { | ||
content: ""; | ||
} | ||
pre { | ||
white-space: pre-wrap !important; | ||
} | ||
pre, | ||
blockquote { | ||
border: 1px solid #999; | ||
page-break-inside: avoid; | ||
} | ||
/* | ||
* Printing Tables: | ||
* https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables | ||
*/ | ||
thead { | ||
display: table-header-group; | ||
} | ||
tr, | ||
img { | ||
page-break-inside: avoid; | ||
} | ||
p, | ||
h2, | ||
h3 { | ||
orphans: 3; | ||
widows: 3; | ||
} | ||
h2, | ||
h3 { | ||
page-break-after: avoid; | ||
} | ||
} | ||
|
Oops, something went wrong.