158 lines
3.6 KiB
CSS
158 lines
3.6 KiB
CSS
/*
|
||
* vncnt.css
|
||
* Copyright 2017-2019, Vincent von Schelm
|
||
* 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 barebones.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('barebones.css');
|
||
|
||
@media screen and (prefers-color-scheme: dark) {
|
||
:root {
|
||
/* dark theme: light background, dark text, blue accent */
|
||
--theme-hue: 0; /* black */
|
||
--accent-hue: 194; /* blue */
|
||
|
||
--text-color-richer: hsl(var(--theme-hue), 0%, 95%); /* */
|
||
--text-color-normal: hsl(var(--theme-hue), 0%, 80%); /* text color; button:hover:focus color */
|
||
--text-color-softer: hsl(var(--theme-hue), 0%, 67%); /* button color; button:hover border */
|
||
|
||
--accent-color: hsl(var(--accent-hue), 76%, 49%); /* link; button-primary bg+border; textarea,select:focus border */
|
||
--accent-color-hover: hsl(var(--accent-hue), 86%, 57%); /* link hover; button-primary:hover:focus bg+border */
|
||
|
||
--border-color: hsl(var(--theme-hue), 0%, 27%); /* button border */
|
||
--border-color-softer: hsl(var(--theme-hue), 0%, 20%); /* textarea,select,code,td,hr border */
|
||
|
||
--background-color: hsl(var(--theme-hue), 0%, 12%); /* body background; textarea,select background */
|
||
--background-color-softer: hsl(var(--theme-hue), 0%, 18%);
|
||
--code-background: hsl(var(--theme-hue), 0%, 5%); /* code background*/
|
||
|
||
--button-primary-color: white;
|
||
}
|
||
|
||
img.value-img {
|
||
filter: invert(0.8);
|
||
}
|
||
img {
|
||
opacity: .80;
|
||
transition: opacity .5s ease-in-out;
|
||
}
|
||
img:hover {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
h1.h3-like, h2.h3-like {
|
||
font-size: 3.0rem;
|
||
line-height: 1.3;
|
||
letter-spacing: -.1rem;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
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 {
|
||
bottom: 0;
|
||
}
|
||
|
||
.icons h2, h3 {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.icon {
|
||
text-rendering: geometricPrecision !important;
|
||
text-decoration: none;
|
||
border-bottom: none;
|
||
position: relative;
|
||
color: #555555;
|
||
}
|
||
|
||
/* Larger than mobile (default point when grid becomes active) */
|
||
@media (min-width: 600px) {
|
||
h1.h3-like, h2.h3-like {
|
||
font-size: 3.6rem;
|
||
}
|
||
|
||
.grid-container.fivetoseven {
|
||
grid-template-columns: 5fr 7fr;
|
||
}
|
||
|
||
.item {
|
||
align-self: center;
|
||
}
|
||
|
||
.landingpage, .error404 {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
margin-right: -50%;
|
||
transform: translate(-50%, -50%);
|
||
max-width: 75%;
|
||
}
|
||
|
||
.avatar {
|
||
max-width: 200%;
|
||
box-sizing: border-box;
|
||
float: right;
|
||
}
|
||
|
||
.autocenter {
|
||
text-align: left;
|
||
padding: 0 0;
|
||
}
|
||
}
|
||
|
||
/* Larger than phablet */
|
||
@media (min-width: 900px) {
|
||
html {
|
||
--base-font-size: 80%;
|
||
}
|
||
|
||
p.reset-margin {
|
||
margin-bottom: 2rem; /*skeleton.css: 2.5rem*/
|
||
}
|
||
}
|
||
|
||
/* Larger than tablet */
|
||
@media (min-width: 1200px) {}
|