|
- /*
- * vncnt,css
- * Copyright 2017, Vincent Messow
- * vncnt.eu
- * Free to use under the MIT license.
- * http://www.opensource.org/licenses/mit-license.php
- *
- * This file expects to inherit a ton of stuff from skeleton.css
- */
-
- /* Media Queries
- –––––––––––––––––––––––––––––––––––––––––––––––––– */
- /*
- Note: The best way to structure the use of media queries is to create the queries
- near the relevant code. For example, if you wanted to change the styles for buttons
- on small devices, paste the mobile query code up in the buttons section and style it
- there.
- */
- @import url('skeleton.css');
-
- .landingpage, .error404 {
- position: absolute;
- top: 50%;
- left: 50%;
- margin-right: -50%;
- transform: translate(-50%, -50%);
- max-width: 90%;
- }
-
- .error404 {
- text-transform: uppercase;
- text-align: center;
- }
-
- body {
- background: #151515;
- color: #ddd;
- }
-
- p.reset-margin {
- margin-bottom: 1rem; /*skeleton.css: 2.5rem*/
- }
-
- .avatar {
- width: 20rem;
- border-radius: 50%;
- -webkit-border-radius: 50%;
- -moz-border-radius: 50%;
- max-width: 60%;
- box-sizing: border-box;
-
- display: block;
- margin: auto;
- }
-
- .autocenter {
- text-align: center;
- }
-
- .icons {
-
- }
-
- .icon {
- text-rendering: geometricPrecision !important;
- text-decoration: none;
- border-bottom: none;
- position: relative;
- color: #888;
- }
-
- .icon:hover {
- color: #ADDED9
-
- }
-
- /* Larger than mobile */
- @media (min-width: 400px) {}
-
- /* Larger than phablet (also point when grid becomes active) */
- @media (min-width: 550px) {
- .landingpage, .error404 {
- position: absolute;
- top: 50%;
- left: 50%;
- margin-right: -50%;
- transform: translate(-50%, -50%);
- max-width: 75%;
- }
-
- .avatar {
- max-width: 100%;
- box-sizing: border-box;
- float: right;
- }
-
- .autocenter {
- text-align: left;
- }}
-
- /* Larger than tablet */
- @media (min-width: 750px) {}
-
- /* Larger than desktop */
- @media (min-width: 1000px) {}
-
- /* Larger than Desktop HD */
- @media (min-width: 1200px) {}
|