Skip to content
Permalink
Browse files

flex centered layout + first row of axit layout

  • Loading branch information...
mdr19002 committed Feb 15, 2020
1 parent edc2f60 commit e4d6f523e868b1c75a749e631c4f2f918ededea2
Showing with 664 additions and 0 deletions.
  1. +245 −0 css/axit.css
  2. +306 −0 css/flexbox.css
  3. BIN img/axit_bg.jpg
  4. BIN img/axit_logo.png
  5. +1 −0 img/smile-regular.svg
  6. +60 −0 wk3_axit.html
  7. +52 −0 wk4_flexbox.html
@@ -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.

0 comments on commit e4d6f52

Please sign in to comment.
You can’t perform that action at this time.