Startpunkten
This commit is contained in:
665
style.css
Normal file
665
style.css
Normal file
@@ -0,0 +1,665 @@
|
||||
/*
|
||||
Theme name: Crille 2023
|
||||
Theme URI: http://crille.org
|
||||
Description: Enkelt tema i grått. Språkstödet är dumpat, så du kan förhoppningsvis lite Svenska. Responsivt och testkört på många upplösningar. Handkodat från start till mål.
|
||||
Copyright: GPL v3.0
|
||||
Version: 1.0
|
||||
Author: Christian Ohlsson
|
||||
Author URI: https://crille.org
|
||||
Tags: responsive, simple, clean, dark
|
||||
*/
|
||||
:root {
|
||||
--blue: #007bff;
|
||||
--darkblue: #171717;
|
||||
--indigo: #6610f2;
|
||||
--purple: #6f42c1;
|
||||
--pink: #e83e8c;
|
||||
--red: #dc3545;
|
||||
--orange: #fd7e14;
|
||||
--yellow: #ffc107;
|
||||
--green: #28a745;
|
||||
--teal: #20c997;
|
||||
--cyan: #17a2b8;
|
||||
--white: #fff;
|
||||
--gray: #6c757d;
|
||||
--gray-dark: #343a40;
|
||||
--primary: #007bff;
|
||||
--secondary: #6c757d;
|
||||
--success: #28a745;
|
||||
--info: #17a2b8;
|
||||
--warning: #ffc107;
|
||||
--danger: #dc3545;
|
||||
--light: #f8f9fa;
|
||||
--lighttext: #e6e6e6;
|
||||
--linkcolor: #75b6e7;
|
||||
--dark: #121212;
|
||||
}
|
||||
*,
|
||||
::after,
|
||||
::before {
|
||||
box-sizing: border-box;
|
||||
border-style: solid;
|
||||
border-width: 0;
|
||||
}
|
||||
@font-face {
|
||||
font-family: Selawik;
|
||||
src: url("/fonts/selawik.woff") format("woff"), url("/fonts/selawik.woff2") format("woff2");
|
||||
}
|
||||
@font-face {
|
||||
font-family: SelawikSemiBold;
|
||||
src: url("/fonts/selawik-semibold.woff") format("woff"),
|
||||
url("/fonts/selawik-semibold.woff2") format("woff2");
|
||||
}
|
||||
html {
|
||||
line-height: 1.15;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Selawik, sans-serif;
|
||||
font-size: 19px;
|
||||
font-weight: 400;
|
||||
line-height: 1.6;
|
||||
color: var(--dark);
|
||||
background-color: var(--white);
|
||||
}
|
||||
main {
|
||||
display: block;
|
||||
}
|
||||
address,
|
||||
blockquote,
|
||||
dl,
|
||||
figure,
|
||||
form,
|
||||
iframe,
|
||||
p,
|
||||
pre,
|
||||
table {
|
||||
margin: 0;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: SelawikSemiBold, sans-serif;
|
||||
font-size: inherit;
|
||||
line-height: 1.3;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
padding-top: 1rem;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2.4rem;
|
||||
}
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
h4 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
h5 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
h6 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
ol,
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
ol li,
|
||||
ul li {
|
||||
line-height: 1.5;
|
||||
}
|
||||
ol,
|
||||
ul {
|
||||
margin-left: 3em;
|
||||
}
|
||||
ul {
|
||||
list-style: square;
|
||||
}
|
||||
ul ul {
|
||||
list-style: circle;
|
||||
}
|
||||
ol {
|
||||
list-style: decimal;
|
||||
}
|
||||
ol ol {
|
||||
list-style: lower-alpha;
|
||||
}
|
||||
p {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
.text-justify {
|
||||
text-align: justify;
|
||||
}
|
||||
.text-lowercase {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
.text-uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.text-capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
nav ul {
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
nav ul li {
|
||||
display: inline;
|
||||
line-height: 1rem;
|
||||
}
|
||||
nav ul li {
|
||||
text-decoration: none;
|
||||
padding: 1rem;
|
||||
display: inline-block;
|
||||
}
|
||||
nav ul li:hover {
|
||||
background-color: var(--light);
|
||||
color: var(--light);
|
||||
transition: all 0.2s ease-in-out;
|
||||
cursor: pointer;
|
||||
}
|
||||
dt {
|
||||
font-weight: 700;
|
||||
}
|
||||
dd {
|
||||
margin-left: 0;
|
||||
}
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
border-top-width: 1px;
|
||||
margin: 0;
|
||||
clear: both;
|
||||
color: var(--dark);
|
||||
}
|
||||
pre {
|
||||
font-family: monospace, monospace;
|
||||
font-size: inherit;
|
||||
}
|
||||
address {
|
||||
font-style: inherit;
|
||||
}
|
||||
a {
|
||||
background-color: transparent;
|
||||
text-decoration: underline;
|
||||
color: var(--primary);
|
||||
}
|
||||
abbr[title] {
|
||||
text-decoration: underline;
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: inherit;
|
||||
}
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
embed,
|
||||
iframe,
|
||||
img,
|
||||
object {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
vertical-align: middle;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
background: 0 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
outline: 0;
|
||||
border-radius: 0;
|
||||
text-align: inherit;
|
||||
}
|
||||
[type="checkbox"] {
|
||||
-webkit-appearance: checkbox;
|
||||
appearance: checkbox;
|
||||
}
|
||||
[type="radio"] {
|
||||
-webkit-appearance: radio;
|
||||
appearance: radio;
|
||||
}
|
||||
button,
|
||||
input {
|
||||
overflow: visible;
|
||||
}
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"],
|
||||
button {
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
font-weight: 600;
|
||||
background: var(--primary);
|
||||
border: thin solid #337ab7;
|
||||
padding: 0.5rem 1.3rem;
|
||||
color: var(--light);
|
||||
font-size: 1.1rem;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
button:hover {
|
||||
background: #3232ec;
|
||||
}
|
||||
[type="button"][disabled],
|
||||
[type="reset"][disabled],
|
||||
[type="submit"][disabled],
|
||||
button[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner,
|
||||
button::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring,
|
||||
button:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
[type="text"],
|
||||
select {
|
||||
border: thin solid var(--gray-dark);
|
||||
padding: 2px 10px;
|
||||
}
|
||||
select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
option {
|
||||
padding: 0;
|
||||
}
|
||||
fieldset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
legend {
|
||||
color: inherit;
|
||||
display: table;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
white-space: normal;
|
||||
}
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
textarea {
|
||||
overflow: auto;
|
||||
border: thin solid var(--gray-dark);
|
||||
}
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
[type="search"] {
|
||||
outline-offset: -2px;
|
||||
}
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
font: inherit;
|
||||
}
|
||||
label[for] {
|
||||
cursor: pointer;
|
||||
}
|
||||
[type="file"] {
|
||||
border: thin solid var(--gray-dark);
|
||||
}
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
[contenteditable] {
|
||||
outline: 0;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
caption {
|
||||
text-align: left;
|
||||
}
|
||||
td,
|
||||
th {
|
||||
vertical-align: top;
|
||||
padding: 0;
|
||||
}
|
||||
th {
|
||||
text-align: left;
|
||||
font-weight: 700;
|
||||
}
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
/* ************************************************************* */
|
||||
/* MAIN LAYOUT */
|
||||
/* ************************************************************* */
|
||||
body {
|
||||
background-color: var(--darkblue);
|
||||
color: var(--lighttext);
|
||||
}
|
||||
.container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 15px;
|
||||
}
|
||||
header.main {
|
||||
margin-bottom: 40px;
|
||||
padding-top: 10px;
|
||||
border-bottom: 2px solid var(--orange);
|
||||
}
|
||||
article header {
|
||||
margin-bottom: 40px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
header .container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
main {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 5fr 2fr;
|
||||
grid-template-areas: "side1 sect side2";
|
||||
column-gap: 50px;
|
||||
}
|
||||
main article {
|
||||
margin-bottom: 30px;
|
||||
border-bottom: 2px solid var(--orange);
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
article img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
section {
|
||||
grid-area: sect;
|
||||
}
|
||||
.side1 {
|
||||
grid-area: side1;
|
||||
}
|
||||
.side2 {
|
||||
grid-area: side2;
|
||||
}
|
||||
aside ul {
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--success);
|
||||
}
|
||||
/* ************************************************************* */
|
||||
/* SINGLE POST */
|
||||
/* ************************************************************* */
|
||||
.single main {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas: "sect";
|
||||
}
|
||||
.single article {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
pre {
|
||||
background-color: var(--gray-dark);
|
||||
padding: 20px;
|
||||
margin: 20px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
/* ************************************************************* */
|
||||
/* FOOTER */
|
||||
/* ************************************************************* */
|
||||
footer {
|
||||
border-top: 2px solid var(--orange);
|
||||
background-color: #212426;
|
||||
padding: 100px 0;
|
||||
margin-top: 100px;
|
||||
}
|
||||
footer .container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 2fr 3fr;
|
||||
grid-template-areas: "bild text info";
|
||||
}
|
||||
footer .bild {
|
||||
grid-area: bild;
|
||||
width: 100%;
|
||||
}
|
||||
footer .text {
|
||||
grid-area: text;
|
||||
text-align: center;
|
||||
}
|
||||
footer .info {
|
||||
grid-area: info;
|
||||
}
|
||||
|
||||
/* ************************************************************* */
|
||||
/* SPOTIFY WIDGET */
|
||||
/* ************************************************************* */
|
||||
#spotify img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* ************************************************************* */
|
||||
/* SÖKRUTAN */
|
||||
/* ************************************************************* */
|
||||
#search-area {
|
||||
margin-top: 25px;
|
||||
}
|
||||
#searchform input[type="text"] {
|
||||
padding: 10px;
|
||||
border: 1px solid grey;
|
||||
float: left;
|
||||
width: 80%;
|
||||
}
|
||||
#searchform ::placeholder {
|
||||
color: var(--lighttext);
|
||||
}
|
||||
#searchform button {
|
||||
float: left;
|
||||
width: 40px;
|
||||
padding: 10px;
|
||||
background: #2196f3;
|
||||
color: white;
|
||||
font-size: 17px;
|
||||
border: 1px solid grey;
|
||||
border-left: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#searchform button:hover {
|
||||
background: #0b7dda;
|
||||
}
|
||||
|
||||
#searchform::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
||||
/* ************************************************************* */
|
||||
/* PAGESCAN */
|
||||
/* ************************************************************* */
|
||||
.pageScan {
|
||||
background-color: #212426;
|
||||
text-align: center;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
|
||||
/* ************************************************************* */
|
||||
/* NAVIGATION */
|
||||
/* ************************************************************* */
|
||||
nav a {
|
||||
text-transform: uppercase;
|
||||
color: var(--lighttext);
|
||||
text-decoration: none;
|
||||
}
|
||||
nav a:hover {
|
||||
color: var(--darkblue);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ************************************************************* */
|
||||
/* WIDGETS */
|
||||
/* ************************************************************* */
|
||||
.widget {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.widget h3 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#archives-dropdown-2 {
|
||||
color: var(--lighttext);
|
||||
background-color: var(--darkblue);
|
||||
}
|
||||
|
||||
/* ************************************************************* */
|
||||
/* MEDIA QUERIES */
|
||||
/* ************************************************************* */
|
||||
@media (max-width: 1400px) {
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
main {
|
||||
grid-template-columns: 3fr 1fr;
|
||||
grid-template-areas:
|
||||
"sect side2"
|
||||
"sect side1";
|
||||
}
|
||||
}
|
||||
@media (max-width: 950px) {
|
||||
footer .container {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-areas:
|
||||
"info info"
|
||||
"bild text";
|
||||
}
|
||||
}
|
||||
@media (max-width: 800px) {
|
||||
header .container {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@media (max-width: 750px) {
|
||||
main {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas:
|
||||
"sect"
|
||||
"side1"
|
||||
"side2";
|
||||
}
|
||||
footer .container {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-areas:
|
||||
"bild text"
|
||||
"info info";
|
||||
row-gap: 50px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
footer .container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
footer .bild {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
footer .visningsbild {
|
||||
width: 90%;
|
||||
}
|
||||
footer .text {
|
||||
margin: 40px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
article h2 {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
#spotify img {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ************************************************************* */
|
||||
/* LIGHT / DARK MODE */
|
||||
/* ************************************************************* */
|
||||
@media (prefers-color-scheme: light) {
|
||||
body,
|
||||
nav a,
|
||||
.pageScan,
|
||||
.widget h3,
|
||||
#archives-dropdown-2,
|
||||
#searchform ::placeholder,
|
||||
footer {
|
||||
background: var(--lighttext);
|
||||
color: var(--darkblue);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user