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.
454 lines (385 sloc)
8.22 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: block; | |
} | |
.centered { | |
width: 80vw; | |
margin: 0 auto; | |
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 { | |
font-family: 'Open Sans', sans-serif; | |
} | |
form { | |
margin: 30px auto; | |
display: flex; | |
flex-direction: column; | |
justify-content: space-between; | |
align-items: center; | |
background-color: white; | |
border-radius: 3px; | |
} | |
form h3 { | |
background-color: #f5f5f5; | |
margin-top: 0; | |
margin-bottom: 25px; | |
padding: 10px 50px; | |
font-weight: 700; | |
color: black; | |
border-radius: 3px 3px 0 0; | |
font-size: 14px; | |
} | |
#free { | |
color: #ff9b51; | |
} | |
form input { | |
width: 75%; | |
background-color: transparent; | |
border-top: none; | |
border-left: none; | |
border-right: none; | |
border-bottom: 1px solid #bdbdbd; | |
border-radius: 0; | |
margin-bottom: 25px; | |
color: #bdbdbd; | |
font-size: 12px; | |
font-weight: 400; | |
padding: 8px 10px; | |
} | |
form button { | |
width: 100%; | |
background-color: #ff9b51; | |
color: white; | |
font-weight: 600; | |
border: none; | |
border-radius: 0 0 3px 3px; | |
padding: 15px 0; | |
font-size: 12px; | |
margin-top: 15px; | |
} | |
#social-banner { | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
padding: 15px 0; | |
} | |
#social-text { | |
text-align: center; | |
font-family: 'Open Sans', sans-serif; | |
} | |
#social-text h3 { | |
font-weight: 700; | |
margin: 5px; | |
font-size: 24px; | |
} | |
#social-text p { | |
font-weight: 400; | |
color: #86878b; | |
margin: 5px; | |
} | |
#social-icons { | |
display: block; | |
color: #cccccc; | |
text-align: center; | |
font-size: 36px; | |
} | |
#social-icons i { | |
margin: 0 5px; | |
} | |
footer { | |
background-color: black; | |
color: white; | |
padding-top: 50px; | |
padding-bottom: 5px; | |
font-family: 'Open Sans', sans-serif; | |
font-weight: 400; | |
text-align: center; | |
} | |
#footer-icons i { | |
margin: 0 10px; | |
font-size: 24px; | |
} | |
#copyright { | |
font-size: 12px; | |
} | |
@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 { | |
display: flex; | |
justify-content: flex-end; | |
} | |
form { | |
margin: 0; | |
} | |
} | |
@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: 60px; | |
margin: 0; | |
} | |
} | |
/* ========================================================================== | |
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; | |
} |