Startpunkten

editor-style.css

@@ -0,0 +1,4 @@
+/* Anpassa Gutenberg så att det ser ut som ditt front-end-tema */
+body .wp-block {
+    max-width: 800px;
+}

footer.php

@@ -0,0 +1,27 @@
+   <footer>
+			<div class="container">
+				<div class="bild">
+               <img src="<?php bloginfo('template_url') ?>/images/visningsbild.jpg" alt="Logo" class="visningsbild">
+            </div>
+				<div class="text">
+               <img src="<?php bloginfo('template_url') ?>/images/crille_logo.png" alt="visningsbild" class="visningsbild">
+               <h1>Christian Ohlsson</h1>
+               <p>crille (at) crille (dot) org</p>
+               <p><a href="https://crille.org">https://crille.org</a></p>
+                  <div id="socialmedia">
+                     <a href="https://crille.org/?feed=rss2"><img src="<?php bloginfo('template_url') ?>/images/icons/rss.png" alt="Logo"></a>
+                     <a href="https://twitter.com/#!/di7chro"><img src="<?php bloginfo('template_url') ?>/images/icons/twitter.png" alt="Logo"></a>
+                     <a href="https://www.facebook.com/di7chro"><img src="<?php bloginfo('template_url') ?>/images/icons/facebook.png" alt="Logo"></a>
+                     <a href="https://se.linkedin.com/pub/christian-ohlsson/1/634/962"><img src="<?php bloginfo('template_url') ?>/images/icons/linkedin.png" alt="Logo"></a>
+                     <a href="https://www.flickr.com/photos/di7chro/"><img src="<?php bloginfo('template_url') ?>/images/icons/flickr.png" alt="Logo"></a>
+                     <a href="https://www.youtube.com/user/di7chro"><img src="<?php bloginfo('template_url') ?>/images/icons/youtube.png" alt="Logo"></a>
+                  </div><!-- END SOCIALMEDIA -->
+            </div>
+				<div class="info">
+               <p>Crilles blog är en hemsida som drivs av mig, Christian Ohlsson. Jag bor i ett gulligt hus i Trollhättan tillsammans med fru och dotter. Dagarna spenderar jag som universitetsadjunkt på Högskolan Väst's avdelning för Medier &amp; Design. Där håller jag kurser inom webbdesign, spelutveckling och programmering. Kvällarna tillbringar jag på de_inferno, de_train, fy_pool_day eller någon av de andra banorna i Counter Strike.</p> <p>Temat på denna sida är gjort av mig med hjälp av det alldeles underbara CMS-systemet <a href="https://wordpress.org/">Wordpress</a>. Naturligtvis är allt skapat på en PC med <a href="https://code.visualstudio.com/">VS Code</a>. Up the Irons!</p>
+            </div>
+			</div>
+		</footer>
+      <?php wp_footer(); ?>
+	</body>
+</html>

functions.php

@@ -0,0 +1,72 @@
+<?php
+    register_sidebar(array('name'=>'Sidebar 1',
+    'before_widget' => '<div class="widget">',
+    'after_widget' => '</div><!-- END WIDGET -->',
+    'before_title' => '<h3>',
+    'after_title' => '</h3>'));
+
+    register_sidebar(array('name'=>'Sidebar 2',
+    'before_widget' => '<div class="widget">',
+    'after_widget' => '</div><!-- END WIDGET -->',
+    'before_title' => '<h3>',
+    'after_title' => '</h3>'));
+
+    //Content Width
+    // $content_width = 480;
+function gnorpen_human_time_diff( $from, $to = '' ) {
+    if ( empty($to) )
+        $to = time();
+    $diff = (int) abs($to - $from);
+    if ($diff <= 3600) {
+        $mins = round($diff / 60);
+        if ($mins <= 1) {
+            $mins = 1;
+        }
+        /* translators: min=minute */
+        $since = sprintf(_n('%s minut', '%s minuter', $mins), $mins);
+    } else if (($diff <= 86400) && ($diff > 3600)) {
+        $hours = round($diff / 3600);
+        if ($hours <= 1) {
+            $hours = 1;
+        }
+        $since = sprintf(_n('%s timme', '%s timmar', $hours), $hours);
+    } elseif ($diff >= 86400) {
+        $days = round($diff / 86400);
+        if ($days <= 1) {
+            $days = 1;
+        }
+        $since = sprintf(_n('%s dag', '%s dagar', $days), $days);
+    }
+    return $since;
+}
+function new_excerpt_more( $more ) {
+	return ' <p><a class="read-more" href="'. get_permalink( get_the_ID() ) . '">' . 'Läs vidare →' . '</a></p>';
+}
+add_filter( 'excerpt_more', 'new_excerpt_more' );
+function excerpt_length( $length ) {
+   return 100;
+}
+add_filter( 'excerpt_length', 'excerpt_length', 999 );
+
+function GutenbergSupport() {
+
+    // Grundläggande block-editor-stöd
+    add_theme_support('editor-styles');
+    add_theme_support('wp-block-styles'); 
+    add_theme_support('responsive-embeds');
+	add_theme_support( 'widgets-block-editor' );
+	add_theme_support( 'widgets' );
+	add_theme_support( 'block-templates' );
+
+    // Tillåt breda och fullbreddsblock
+    add_theme_support('align-wide');
+
+    // Stöd för featured images om det inte finns
+    add_theme_support('post-thumbnails');
+
+    // Lägg till editor-styles (kommer i steg 2)
+    add_editor_style('editor-style.css');
+}
+add_action('after_setup_theme', 'GutenbergSupport');
+
+?>

header.php

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html <?php language_attributes(); ?>>
+<head>
+	<meta charset="<?php bloginfo( 'charset' ); ?>">
+	<title><?php bloginfo ('name');?></title>
+	<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>">
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+	<meta name="viewport" content="width=device-width,initial-scale=1">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="HandheldFriendly" content="true">
+    <?php wp_head(); ?>
+</head>
+<body <?php body_class(); ?>>
+   <header class="main">
+      <div class="container">
+         <div class="logo">
+            <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php bloginfo('template_url') ?>/images/crille_logo.png" alt="Logo"></a>
+         </div>
+         <nav>
+            <?php wp_nav_menu (); ?>
+         </nav>
+      </div>
+   </header>

index.php

@@ -0,0 +1,30 @@
+<?php get_header(); ?>
+<main class="container">
+   <aside class="side1">
+      <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar 1') ) : ?> <?php endif; ?>
+   </aside>
+   <section>
+      <?php while ( have_posts() ) : the_post(); ?>
+      <article>
+         <header>
+               <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
+               <div class="postdate">
+                  <?php echo the_date(); ?>
+            </div> <!-- END POSTDATE -->
+         </header> <!-- END INLAGG_RUBRIK -->
+         <div class="texten">
+               <?php the_excerpt(); ?>
+         </div> <!-- END INLAGG_TEXTEN -->
+         <div class="categories">
+            Postat under:
+               <?php echo the_category(', ')  ?>
+         </div>
+      </article> <!-- END INLAGG -->
+      <?php endwhile; ?>
+	<div class="pageScan"><p><?php posts_nav_link(' | ',' Nyare inlägg ',' Äldre inlägg '); ?></p></div>
+    </section> <!-- END CONTENT -->
+   <aside class="side2">
+      <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar 2') ) : ?> <?php endif; ?>
+   </aside>
+</main>
+<?php get_footer(); ?>

searchform.php

@@ -0,0 +1,6 @@
+<div id="search-area">
+	<form method="get" id="searchform" action="<?php bloginfo('url'); ?>">
+		<input type="text" placeholder="Sök på bloggen" name="s" id="s">
+		<button type="submit" name="Submit" title="Sök" value="Sök"><i class="fa fa-search"></i></button>
+	</form>
+</div><!-- END SEARCH-AREA -->

single-post.php

@@ -0,0 +1,24 @@
+<?php get_header(); ?>
+<main class="container">
+   <section>
+      <?php while ( have_posts() ) : the_post(); ?>
+      <article>
+         <header>
+               <h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
+               <div class="postdate">
+                  <?php echo the_date(); ?>
+            </div> <!-- END POSTDATE -->
+         </header> <!-- END INLAGG_RUBRIK -->
+         <div class="texten">
+               <?php the_content(); ?>
+         </div> <!-- END INLAGG_TEXTEN -->
+         <div class="categories">
+            Postat under:
+               <?php echo the_category(', ')  ?>
+         </div>
+      </article> <!-- END INLAGG -->
+      <?php endwhile; ?>
+	<div class="pageScan"><p><?php posts_nav_link(' | ',' Nyare inlägg ',' Äldre inlägg '); ?></p></div>
+    </section> <!-- END CONTENT -->
+</main>
+<?php get_footer(); ?>

style.css

@@ -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);
+	}
+}

theme.json

@@ -0,0 +1,16 @@
+{
+  "version": 2,
+  "settings": {
+    "layout": {
+      "contentSize": "800px",
+      "wideSize": "1200px"
+    },
+    "appearanceTools": true,
+    "color": {
+      "palette": [
+        { "slug": "primary", "color": "#0055ff", "name": "Primary" },
+        { "slug": "secondary", "color": "#ff0088", "name": "Secondary" }
+      ]
+    }
+  }
+}