mirror of
https://github.com/vladocar/Basic.css.git
synced 2024-11-10 21:36:48 +01:00
104 lines
2.4 KiB
CSS
104 lines
2.4 KiB
CSS
/* Basic.css */
|
|
|
|
* {box-sizing: border-box}
|
|
:root{
|
|
--serif:1em/1.6 system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Fira Sans, sans-serif;
|
|
--mono:'Courier New', Courier, 'Ubuntu Mono', 'Liberation Mono', monospace;
|
|
--c1:#0074d9;
|
|
--c2:#eee;
|
|
--c3:#fff;
|
|
--c4:#000;
|
|
--c5:#fff;
|
|
--m1: 8px;
|
|
--rc: 8px;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--c2:#333;
|
|
--c3:#1e1f20;
|
|
--c4:#fff;
|
|
}
|
|
}
|
|
|
|
html {
|
|
-ms-text-size-adjust: 100%;
|
|
-webkit-text-size-adjust: 100%;
|
|
|
|
}
|
|
|
|
/* General settings */
|
|
|
|
body {
|
|
margin: 0;
|
|
font: var(--serif);
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
background-color: var(--c3);
|
|
color: var(--c4);
|
|
}
|
|
img, iframe {border: none; max-width: 100%}
|
|
|
|
a {color: var(--c1); text-decoration:none}
|
|
|
|
a:hover {color: var(--c1); text-decoration: underline}
|
|
|
|
pre {font: 1em/1.6 var(--mono); background: var(--c2); padding: 1em;}
|
|
|
|
code {font: 1em/1.6 var(--mono);}
|
|
|
|
blockquote {border-left: 5px solid var(--c2); padding: 1em 1.5em; margin: 0}
|
|
|
|
hr {border:0; border-bottom: 1px solid var(--c4)}
|
|
|
|
/* Headlines */
|
|
|
|
h1,h2,h3,h4,h5,h6 {margin: 0.6em 0; font-weight: normal}
|
|
|
|
h1 {font-size: 2.625em; line-height: 1.2}
|
|
|
|
h2 {font-size: 1.625em; line-height: 1.2}
|
|
|
|
h3 {font-size: 1.3125em; line-height: 1.24}
|
|
|
|
h4 {font-size: 1.1875em; line-height: 1.23}
|
|
|
|
h5,h6 {font-size: 1em; font-weight:bold}
|
|
|
|
/* Table */
|
|
|
|
table {border-collapse: collapse; border-spacing: 0; margin:1em 0}
|
|
|
|
th, td {text-align: left; vertical-align: top;border: 1px solid; padding: 0.4em}
|
|
|
|
thead,tfoot{background: var(--c2)}
|
|
|
|
/* Rounded Corners*/
|
|
|
|
pre,code,input,select,textarea,button,img {border-radius: var(--rc)}
|
|
|
|
|
|
/* Forms */
|
|
|
|
input,select,textarea{font-size: 1em; color:var(--c4); background: var(--c2); border: 0; padding: 0.6em}
|
|
|
|
button {font-size: 1em; display: inline-block; color: var(--c5); background: var(--c1); border: 0; margin: 0 4px; padding: 0.6em; cursor: pointer; text-align: center}
|
|
|
|
button:hover,button:focus,input:hover,textarea:hover,select:hover {opacity: 0.8}
|
|
|
|
/* Infinite Grid */
|
|
|
|
section{display: flex; flex-flow: row wrap}
|
|
|
|
aside,article {flex:1; margin:var(--m1)}
|
|
|
|
/* Cards */
|
|
|
|
article {background: var(--c2); border-radius: var(--rc); padding: 1em; box-shadow: 0px 1px 0px rgba(0,0,0,0.3)}
|
|
|
|
aside:first-child, article:first-child {margin-left:0}
|
|
|
|
aside:last-child, article:last-child {margin-left:0}
|