Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
flex centered layout + first row of axit layout
- Loading branch information
Showing
7 changed files
with
664 additions
and
0 deletions.
There are no files selected for viewing
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,245 @@ | ||
/*! 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; | ||
} | ||
|
||
header { | ||
background-color: black; | ||
width: 100vw; | ||
display: flex; | ||
justify-content: center; | ||
} | ||
|
||
.desktop { | ||
display: none; | ||
} | ||
|
||
.centered { | ||
width: 80vw; | ||
display: flex; | ||
justify-content: space-between; | ||
background-color: blue; | ||
|
||
} | ||
|
||
.centered img { | ||
height: 1.3em; | ||
align-self: center; | ||
} | ||
|
||
.mobile { | ||
align-self: center; | ||
display: flex; | ||
background-color: cyan; | ||
} | ||
|
||
.mobile i { | ||
align-self: center; | ||
} | ||
|
||
header ul { | ||
display: flex; | ||
align-items: center; | ||
justify-content: flex-end; | ||
list-style-type: none; | ||
padding: 0; | ||
} | ||
|
||
.desktop li { | ||
margin: 0 20px; | ||
} | ||
|
||
@media (min-width: 700px) { | ||
.mobile { | ||
display: none; | ||
} | ||
.desktop { | ||
display: block; | ||
} | ||
|
||
|
||
} | ||
|
||
|
||
|
||
/* ========================================================================== | ||
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; | ||
} |
Oops, something went wrong.