2024-03-19 11:43:29 +01:00
|
|
|
@charset "UTF-8";
|
|
|
|
|
2024-03-19 13:26:39 +01:00
|
|
|
/* Webbfonter */
|
|
|
|
@font-face {
|
|
|
|
font-family: 'Journal';
|
2024-04-06 23:38:29 +02:00
|
|
|
src: url('../fonts/journal-webfont.woff') format('woff');
|
2024-03-19 13:26:39 +01:00
|
|
|
font-weight: normal;
|
|
|
|
font-style: normal;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Ändra basegenskaperna av sidan. */
|
2024-03-19 11:54:15 +01:00
|
|
|
body {
|
2024-03-19 13:26:39 +01:00
|
|
|
font-family: 'Source Sans Pro', Sans-Serif;
|
2024-03-19 11:54:15 +01:00
|
|
|
background-color: #dadada;
|
2024-03-19 13:26:39 +01:00
|
|
|
color: #101010;
|
|
|
|
}
|
|
|
|
h1 {
|
|
|
|
font-family: 'Montserrat', Sans-Serif;
|
|
|
|
color: #ffffff;
|
|
|
|
text-shadow: 2px 2px 4px #000000;
|
|
|
|
}
|
|
|
|
h2 {
|
|
|
|
font-family: 'Montserrat', Sans-Serif;
|
|
|
|
color: #ffffff;
|
|
|
|
text-shadow: 2px 2px 4px #000000;
|
|
|
|
}
|
2024-04-06 23:38:29 +02:00
|
|
|
h3 {
|
|
|
|
font-family: 'Montserrat', Sans-Serif;
|
|
|
|
color: #ffffff;
|
|
|
|
text-shadow: 2px 2px 4px #000000;
|
|
|
|
}
|
|
|
|
p, li {
|
|
|
|
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5);
|
|
|
|
}
|
2024-03-19 15:17:19 +01:00
|
|
|
/* Spacing i listan, mycket jobb för att lösa denna snyggt. */
|
2024-03-19 14:46:05 +01:00
|
|
|
li:not(:last-child) {
|
|
|
|
margin-bottom: 3px;
|
|
|
|
}
|
|
|
|
|
2024-03-19 13:26:39 +01:00
|
|
|
/* Min stil på länkar. */
|
|
|
|
a {
|
|
|
|
color: #000044;
|
|
|
|
text-decoration: none;
|
|
|
|
font-weight: bold;
|
|
|
|
}
|
2024-04-06 23:38:29 +02:00
|
|
|
a:visited {
|
|
|
|
color: #000044;
|
2024-03-19 13:26:39 +01:00
|
|
|
}
|
2024-04-06 23:38:29 +02:00
|
|
|
a:active {
|
|
|
|
color: #0000cc;
|
2024-03-19 14:46:05 +01:00
|
|
|
}
|
2024-04-06 23:38:29 +02:00
|
|
|
a:hover {
|
|
|
|
color: #0000cc;
|
2024-03-19 13:26:39 +01:00
|
|
|
}
|
|
|
|
|
2024-04-06 23:38:29 +02:00
|
|
|
/* Min stil för navigeringsknappar/länkar för små skärmar. */
|
|
|
|
.nav-button {
|
2024-03-19 14:46:05 +01:00
|
|
|
font-family: "Source Sans Pro", sans-serif;
|
2024-04-06 23:38:29 +02:00
|
|
|
text-align: center;
|
2024-03-19 14:46:05 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
/* Footer stilen */
|
|
|
|
.footer-text {
|
|
|
|
font-style: italic;
|
|
|
|
text-align: right;
|
2024-03-19 11:54:15 +01:00
|
|
|
}
|
|
|
|
|
2024-04-06 23:38:29 +02:00
|
|
|
/* Bildstilar */
|
|
|
|
.image-left, .image-right, .image-center {
|
|
|
|
box-shadow: none;
|
|
|
|
border-radius: 3px;
|
|
|
|
transform: none;
|
|
|
|
|
|
|
|
margin-left: auto;
|
|
|
|
margin-right: auto;
|
|
|
|
}
|
|
|
|
|
2024-03-19 11:43:29 +01:00
|
|
|
/* Definition av mitt rutnät för sidans layout. */
|
|
|
|
/* Behållaren för cellerna, tabellen. */
|
|
|
|
.grid-container {
|
2024-03-19 11:54:15 +01:00
|
|
|
display: grid;
|
2024-03-19 13:26:39 +01:00
|
|
|
column-gap: 25px;
|
2024-03-19 11:54:15 +01:00
|
|
|
row-gap: 0px;
|
2024-03-19 13:26:39 +01:00
|
|
|
|
|
|
|
max-width: 900px; /* max-width of the layout */
|
|
|
|
margin: 0 auto; /* center in the viewport */
|
2024-04-06 23:38:29 +02:00
|
|
|
padding: 15px;
|
2024-03-19 14:46:05 +01:00
|
|
|
|
|
|
|
background-color: #dadada;
|
2024-03-19 11:43:29 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
/* Gemensant för cellerna i tabellen. */
|
|
|
|
.grid-item {
|
2024-03-19 11:54:15 +01:00
|
|
|
display: grid;
|
2024-03-19 13:26:39 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
/* Layout, tilldelning av områdesnamn. */
|
|
|
|
.header {
|
|
|
|
grid-area: header;
|
|
|
|
}
|
2024-04-06 23:38:29 +02:00
|
|
|
.navigation {
|
|
|
|
grid-area: navigation;
|
|
|
|
}
|
2024-03-19 13:26:39 +01:00
|
|
|
.content {
|
|
|
|
grid-area: content;
|
|
|
|
}
|
2024-04-06 23:38:29 +02:00
|
|
|
|
2024-03-19 13:26:39 +01:00
|
|
|
.footer {
|
|
|
|
grid-area: footer;
|
|
|
|
}
|
|
|
|
|
2024-04-06 23:38:29 +02:00
|
|
|
/* Navigationsboxen, tilldelning av områdesnamn. */
|
|
|
|
.nav-element {
|
|
|
|
grid-area: nav-element;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Navigationsboxens layout, för små skärmar */
|
|
|
|
.grid-container-navigation {
|
2024-03-19 13:26:39 +01:00
|
|
|
grid-template-areas:
|
2024-04-06 23:38:29 +02:00
|
|
|
"nav-element nav-element nav-element nav-element";
|
|
|
|
padding: 10px;
|
2024-03-19 14:46:05 +01:00
|
|
|
box-shadow: none;
|
2024-03-19 13:26:39 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
/* Layout som väljs automatisk när det finns plats. */
|
2024-03-19 14:46:05 +01:00
|
|
|
@media only screen and (min-width: 850px) {
|
|
|
|
body {
|
|
|
|
/* Gratis bild från pexels, https://www.pexels.com/photo/brown-wooden-panel-347139/ */
|
2024-04-06 23:38:29 +02:00
|
|
|
background-image: url("../images/bg.jpg");
|
2024-03-19 14:46:05 +01:00
|
|
|
background-attachment: fixed;
|
|
|
|
background-position-y: bottom;
|
|
|
|
background-repeat: repeat-x;
|
|
|
|
}
|
|
|
|
|
2024-04-06 23:38:29 +02:00
|
|
|
/* Min stil för navigeringsknappar/länkar för större skärmar. */
|
|
|
|
.nav-button {
|
|
|
|
font-family: "Journal", sans-serif;
|
|
|
|
font-size: 32px;
|
|
|
|
font-weight: lighter;
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
/*background-color: #f3ee9e;*/
|
|
|
|
background-image: linear-gradient(to bottom right, #f3ee9e, #f4f1b9);
|
|
|
|
border-radius: 3px;
|
2024-03-19 14:46:05 +01:00
|
|
|
box-shadow: 10px 10px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
2024-04-06 23:38:29 +02:00
|
|
|
|
|
|
|
margin: 0px 5px; /* y, x*/
|
|
|
|
transform: rotate(-1deg);
|
|
|
|
padding: 5px;
|
2024-03-19 14:46:05 +01:00
|
|
|
}
|
2024-04-06 23:38:29 +02:00
|
|
|
.nav-button:hover {
|
|
|
|
box-shadow: 12px 12px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.12);
|
|
|
|
margin: -2px 5px; /* y, x*/
|
2024-03-19 14:46:05 +01:00
|
|
|
}
|
|
|
|
|
2024-04-06 23:38:29 +02:00
|
|
|
/* Bildstilar */
|
|
|
|
.image-left, .image-right, .image-center {
|
2024-03-19 14:46:05 +01:00
|
|
|
box-shadow: 10px 10px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
|
|
|
border-radius: 3px;
|
2024-04-06 23:38:29 +02:00
|
|
|
|
|
|
|
margin: 0px;
|
2024-03-19 14:46:05 +01:00
|
|
|
}
|
|
|
|
|
2024-04-06 23:38:29 +02:00
|
|
|
.image-left {
|
|
|
|
width: 375px;
|
|
|
|
transform: rotate(-2deg);
|
|
|
|
margin-left: -25px;
|
2024-03-19 15:17:19 +01:00
|
|
|
|
2024-04-06 23:38:29 +02:00
|
|
|
float: left;
|
|
|
|
display: block;
|
|
|
|
margin-right: 25px; /*auto - if not floating */
|
2024-03-19 14:46:05 +01:00
|
|
|
}
|
2024-04-06 23:38:29 +02:00
|
|
|
.image-right {
|
|
|
|
transform: rotate(2deg);
|
|
|
|
margin-right: -75px;
|
|
|
|
|
|
|
|
float: right;
|
|
|
|
display: block;
|
|
|
|
margin-left: 25px; /*auto - if not floating */
|
|
|
|
}
|
|
|
|
.image-center {
|
|
|
|
transform: rotate(-0.5deg);
|
|
|
|
|
|
|
|
display: block;
|
|
|
|
margin-left: auto;
|
|
|
|
margin-right: auto;
|
2024-03-19 14:46:05 +01:00
|
|
|
}
|
2024-03-19 15:17:19 +01:00
|
|
|
|
2024-04-06 23:38:29 +02:00
|
|
|
.paper {
|
|
|
|
box-shadow: 10px 10px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
|
|
|
padding: 15px;
|
|
|
|
background-image: url("../images/bg-paper-yellowed.jpg");
|
|
|
|
background-repeat: repeat;
|
|
|
|
background-size: 100%;
|
2024-03-19 15:17:19 +01:00
|
|
|
}
|
2024-03-19 13:26:39 +01:00
|
|
|
}
|
|
|
|
|