Permalink
Cannot retrieve contributors at this time
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
dmd5470-mr/css/axit.css
Go to fileThis commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
396 lines (332 sloc)
7.18 KB
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*! 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 | |
========================================================================== */ | |
* { | |
box-sizing: border-box; | |
} | |
.bg { | |
width: 100vw; | |
display: flex; | |
justify-content: center; | |
} | |
.centered { | |
width: 80vw; | |
display: flex; | |
justify-content: space-between; | |
} | |
header { | |
background-color: black; | |
font-family: 'Open Sans', sans-serif; | |
font-weight: semibold; | |
color: white; | |
font-size: 13px; | |
} | |
.desktop { | |
display: none; | |
} | |
header .centered img { | |
height: 25px; | |
align-self: center; | |
} | |
.mobile i { | |
align-self: center; | |
margin-left: 10px; | |
} | |
header ul { | |
display: flex; | |
align-items: center; | |
list-style-type: none; | |
padding: 10px 0; | |
margin: 0; | |
} | |
main { | |
background-image: url(../img/axit_bg.jpg); | |
background-size: cover; | |
background-repeat: no-repeat; | |
background-position: center; | |
padding: 10vh 0; | |
text-align: center; | |
} | |
main .centered { | |
flex-direction: column; | |
align-items: center; | |
} | |
#main-text { | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
} | |
.raleway { | |
color: white; | |
font-family: "Raleway", sans-serif; | |
} | |
.raleway h1{ | |
font-weight: 400; | |
} | |
.raleway p { | |
font-weight: 300; | |
} | |
#download { | |
font-family: 'Open Sans', sans-serif; | |
color: white; | |
font-weight: semibold; | |
border: 3px solid white; | |
width: 160px; | |
text-align: center; | |
padding: 10px 30px; | |
margin-top: 30px; | |
} | |
hr{ | |
border-top: 2px solid white; | |
width: 60px; | |
align: center; | |
margin-bottom: 30px; | |
} | |
#form-container { | |
display: flex; | |
justify-content: center; | |
} | |
form { | |
width: 250px; | |
display: flex; | |
flex-direction: column; | |
justify-content: space-between; | |
align-items: center; | |
background-color: white; | |
} | |
form h3 { | |
background-color: gray; | |
margin: 0; | |
} | |
form input { | |
background-color: transparent; | |
border-top: none; | |
border-left: none; | |
border-right: none; | |
border-bottom: 1px solid #f5f5f5; | |
margin-bottom: 25px; | |
} | |
#social-banner { | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
} | |
#social-text { | |
text-align: center; | |
} | |
#social-banner i { | |
margin: 10px; | |
} | |
#social-icons { | |
display: block; | |
font-size: 2em; | |
} | |
footer { | |
background-color: black; | |
color: white; | |
flex-direction: column; | |
text-align: center; | |
padding-top: 20px; | |
padding-bottom: 5px; | |
} | |
@media (min-width: 700px) { | |
.mobile { | |
display: none; | |
} | |
.desktop { | |
display: flex; | |
padding: 25px 0; | |
} | |
.desktop li { | |
margin-left: 50px; | |
} | |
} | |
@media (min-width: 768px) { | |
main { | |
text-align: left; | |
} | |
main .centered { | |
flex-direction: row; | |
} | |
main .centered > div { | |
width: 50%; | |
} | |
#main-text { | |
display: block; | |
} | |
#download { | |
margin-top: 50px; | |
} | |
#form-container { | |
justify-content: flex-end; | |
} | |
} | |
@media (min-width: 835px) { | |
#social-banner { | |
flex-direction: row; | |
justify-content: space-between; | |
} | |
#social-text { | |
width: 33.3333%; | |
text-align: left; | |
} | |
#social-icons { | |
width: 66.6667%; | |
text-align: center; | |
display: flex; | |
justify-content: space-around; | |
} | |
#social-icons i{ | |
font-size: 40px; | |
} | |
} | |
/* ========================================================================== | |
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; | |
} |