/* (C) Copyright 2024: Maria D'Andrea, 58271@student.eadania.dk, første semester eksamen - Multimedia Design uddannelse, december 2024. */ /* BASE STYLE */ /* 1. Color variables */ :root{ --primary: #fce3ff; --secondary: #dce9e5; --accent: black; --light-accent: whitesmoke; --bar-width: 50px; --bar-height: 5px; --hamburger-gap: 5px; --foreground: #000; --background: whitesmoke; --hamburger-margin: 1px; --animation-timing: 200ms ease-in-out; --hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 3); } /* :root er en pseudo-klasse, der svarer til rodelementet i dokumentet, som normalt er -elementet. Definition af variabler her gør dem tilgængelige i hele dokumentet. */ /* 2. Reset */ body, p, a, ul, li { margin: 0; padding: 0; text-decoration: none; } li { list-style-type: none; } body { /*font-family: 'OpenDyslexic', sans-serif;*/ /* -- for at bruge OpenDyslexic font i fremtiden skal jeg bare aktivere denne kode og kommentere Nunito font-family --*/ background: var(--light-accent); overflow-x: hidden; font-family: 'Nunito', sans-serif; } /* 3. Buttons */ .button, .button-hvid, .button-side { box-shadow: 1px 2px 3px rgba(0,0,0,0.6); border-radius: 20px; cursor: pointer; text-align: center; font-size: 1em; text-transform: uppercase; padding: 10px 20px; } .button { background-color: #4a4a4a; color: var(--light-accent); display: inline-block; font-size: 1em; border: none; } .button-hvid { background-color: #4a4a4a; border: 2px solid var(--light-accent); color: var(--light-accent); display: flex; justify-content: center; align-items: center; } .button-side { background-color: var(--primary); border: 2px solid var(--light-accent); color: black; display: inline-block; font-size: 0.8em; padding: 5px 10px; max-width: 80%; margin-top: 20px; } .button:hover, .button-hvid:hover, .button-side:hover { color: var(--primary); background: var(--accent); } /* --- TIPOGRAFY ---*/ /* 1. Personal fonts */ @font-face { font-family: 'OpenDyslexic'; src: url('fonts/OpenDyslexic-Regular.ttf') format('truetype'); } /* denne skrifttype bruges ikke i øjeblikket til at gøre tekster læsbare selv for ikke-ordblinde */ .marcellus-regular { font-family: "Marcellus", serif; font-weight: 400; font-style: normal; } /* : Use a unique and descriptive class name // : Use a value from 200 to 1000 */ .nunito-regular { font-family: "Nunito", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } /* 2. Font style */ h1, h2, h3, h4, h5 { color: #737373; font-weight: normal; line-height: 1.2em; font-family: 'Marcellus', sans-serif; } h1 {font-size: 1.6em;} h2 {font-size: 1.4em;} h3 {font-size: 1.2em;} h4 {font-size: 1.1em;} h5 { color: grey; font-weight: 300; font-family: 'Nunito', sans-serif; font-size: 1em; } h5:hover { color: #333; transition: color 0.3s ease; } p, a, li { color: var(--accent); line-height: 1.4em; font-size: 1em; font-family: 'Nunito', sans-serif; } .kilde { font-family: 'Nunito', sans-serif; font-size: small; color: #333; padding-bottom: 15px; } .tools { font-family: 'Nunito', sans-serif; font-size: medium; color: #333; padding-bottom: 15px; } .leading{ font-size: 1.1em; color: grey; } /* --- GRID SYSTEM --- */ /* Mobile styles */ .grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; box-sizing: border-box; } .grid-item { grid-column: span 8; /* Full-with on mobile */ } .background-block { background-image: url(img/block_background_02.png); background-size: cover; background-repeat: no-repeat; background-position: bottom; } /* TOPBAR NAVIGATION navigation */ /* 1. Logo */ .logo { text-align: left; } /* 2. Menu */ .dropdown { display: none; } .site-nav { margin: 0 20px 0 20px; grid-template-rows: 180px; } /* 2.1. Hamburger Menu */ .hamburger-menu { --x-width: calc(var(--hamburger-height) * 1.41421356237); /* Beregn bredden ud fra burgerens højde */ display: flex; flex-direction: column; gap: var(--hamburger-gap); width: max-content; position: absolute; top: var(--hamburger-margin); right: var(--hamburger-margin); z-index: 2; /* Overlejringsniveau */ cursor: pointer; padding: 10%; columns: 3/9; } .hamburger-menu:has(input:checked) { --foreground: var(--light-accent); --background: #333; } .hamburger-menu:has(input:focus-visible)::before, .hamburger-menu:has(input:focus-visible)::after, .hamburger-menu input:focus-visible { border: 1px solid var(--background); box-shadow: 0 0 0 1px var(--foreground); } .hamburger-menu::before, .hamburger-menu::after, .hamburger-menu input { content: ""; width: var(--bar-width); height: var(--bar-height); background-color: var(--foreground); border-radius: 9999px; transform-origin: left center; transition: opacity var(--animation-timing), width var(--animation-timing), rotate var(--animation-timing), translate var(--animation-timing), background-color var(--animation-timing); } /* Denne kode definerer stilarter for ::before og ::after pseudo-elementerne i "hamburger"-menuen, såvel som for input-elementet. Brug CSS-variabler til at administrere størrelser, farver og animationstiming. Overgange er indstillet til forskellige effekter såsom opacitet, bredde, rotation, translation og baggrundsfarve.*/ .hamburger-menu input { appearance: none; margin: 0; outline: none; pointer-events: none; } .hamburger-menu:has(input:checked)::before { rotate: 45deg; width: var(--x-width); translate: 0 calc(var(--bar-height) / -2); } .hamburger-menu:has(input:checked)::after { rotate: -45deg; width: var(--x-width); translate: 0 calc(var(--bar-height) / 2); } .hamburger-menu input:checked { opacity: 0; width: var(--bar-width); } /*Indgangen er et afkrydsningsfelt, der er visuelt skjult, men forbliver funktionelt. Når afkrydsningsfeltet er markeret (afkrydset), anvendes forskellige stilarter for at vise menuen. Brugeren klikker på hamburgermenuikonet, som faktisk er knyttet til afkrydsningsfeltet. Dette ændrer afkrydsningsfeltets tilstand og dermed menuens udseende.*/ /* 2.2. Hamburger Menu: Sidebar */ .sidebar { position: absolute; top: 0; right: 0; transition: translate var(--animation-timing); translate: -200%; /* dette bringer venstre sidebjælke væk fra skærmen */ padding: 20px 80px 20px 20px; /* op højre ned til venstre*/ padding-top: calc(var(--hamburger-height) + var(--hamburger-margin)); background-color:var(--secondary); color: var(--background); max-width: 100%; font-family: "Montserrat", serif; font-weight: 500; font-size: 100%; text-transform: uppercase; min-height: 75vh; } .sidebar ul { padding: 0; display: flex; flex-direction: column; justify-content: left; height: 60%; margin-left: 20%; } .sidebar ul li{ padding: 1rem 0; } .sidebar a { text-decoration: none; color:#000; } .sidebar nav { min-width: 190px; } .hamburger-menu:has(input:checked) + .sidebar { translate: 0; padding-top: 15%; padding-left: 1%; } /* BREADCRUMB */ #side-breadcrumb { padding: 30px 20px; background: var(--secondary); text-align: center; border-bottom:30px solid var(--light-accent); } #side-breadcrumb h3, #footer-widget p{ margin-bottom: 0; text-align: center; } #side-breadcrumb form{ width: 80%; max-width: 400px; margin: 20px auto; text-align: center; } #side-breadcrumb input,#footer-widget textarea{ width: 100%; margin: 10px 0; } #side-breadcrumb textarea{ max-width: 100%; height: 200px; } #side-breadcrumb .button{ margin-top: 10px; } /* HOME PAGE */ /* 1. WELCOME SECTION */ #welcome { padding: 10px 20px 20px 40px; } .welcome-text { grid-column: 1/6; } .welcome-text a { margin: 20px 0; } .welcome-img { grid-column: 6/9; display: none; } .welcome-img img { width: 200%; } /* 2. PROJECTS SECTION */ #portfolio { background: url(img/block_background_03.png); background-size: cover; background-repeat: no-repeat; background-position: bottom; padding: 30px 20px; } #portfolio h3 { margin-bottom: 0; text-align: center; } .projects { margin: 20px 0; } .projects a { grid-column: 1/9; display: flex; margin: 20px 0 } .projects a *{ margin: 0 20px; max-width: 40%; align-self: center; } .projects h4 { color: var(--light-accent); } .projects h5:hover { color: #333; transition: color 0.3 ease; } /* 3. WORKS SECTION */ #works { padding: 30px 20px; background: var(--light-accent); } #works h3{ text-align: center; } #works ul { margin: 40px 0; } #works li { padding: 10px; background: rgba(220, 233, 229,1); grid-column: span 4; text-align: center; } #works img { height: 150px; margin: 10px auto; border-radius: 20%; } #works p{ text-align: center; margin: 0 20px; } /* SINGLE TOPIC PAGE */ #nota { padding: 20px 20px 20px 20px; display: flex; flex-direction: column; background-color: var(--light-accent); } .nota-text a { margin: 20px 0; } .nota-img { grid-column: 6/9; display: inline-block; } .nota-img img { width: 100%; } .nota-text{ grid-column: 1/6; } .nota-title { font-size: 200%; font-family: 'Marcellus', sans-serif; margin: 10px; background-color: rgba(252, 227, 255, 0.5); border-radius: 50%; text-align: center; align-items: center; width: 100%; } .nota-leading { color:#333; font-size: 1.1em; } .pers-ref { background: rgba(252, 227, 255, 0.5); padding: 20px } .pers-ref p { border-color: 2px solid var(--light-accent); font-family: 'Nunito', sans-serif; font-size: 1em; } .prak-anv { background: var(--secondary); padding: 20px; } .prak-anv img { width: 100%; height: auto; border: 13px solid var(--light-accent); } .prak-anv h2 { grid-column: 3; text-align: center; } .prak-anv p { grid-column: 3; text-align: left; font-family: 'Nunito', sans-serif; font-size: 1em; color: #343333; padding-bottom: 20px } .nota-dybanalyse { font-family: 'Nunito', sans-serif; background-color: var(--light-accent); padding: 2cqh 30px; } video { width: 100%; aspect-ratio: auto 640 / 360; height: auto; } /* FAQ SECTION */ .faq { max-width: 800px; margin: 0 auto; padding: 20px; background: var(--light-accent); } .faq h2 { text-align: center; margin-bottom: 20px; } details { margin-bottom: 10px; border: 1px solid var(--secondary); border-radius: 5px; padding: 10px; } summary { font-weight: bold; cursor: pointer; } summary::marker { color: var(--secondary); } details[open] summary { color: #4a4a4a; } details p { margin: 10px 0 0; } /* --- FOOTER ---*/ /* FOOTER WIDGET */ #footer-widget { padding: 30px 20px; background: var(--secondary); align-items: center; } #footer-widget h3 { margin-bottom: 20px; text-align: left; color: #333; } #footer-widget p, q { color: grey; } /* FOOTER: MENU */ .footer-menu { font-family: 'Marcellus', serif; display: flex; justify-content: space-between; align-items: center; list-style: none; padding: 10px 20px; margin: 0 auto; max-width: 100%; overflow-x: auto; white-space: nowrap; gap: 10px; } .footer-menu li { flex: 1; margin: 0; } .footer-menu li a { background-color: black; color: var(--light-accent); padding: 10px 15px; text-decoration: none; border-radius: 30px; transition: background-color 0.3s; text-align: center; display: inline-block; font-size: 1.em; } .footer-menu li a:hover { background-color: grey; } .footer-menu li img { vertical-align: middle; margin: 0 5px; } /* FOOTER COPYRIGHT OG SOCIAL LINK*/ footer { padding: 30px 20px; background-color: var(--light-accent); background-image: url(img/footer_image.png); background-size: 40%; background-repeat: no-repeat; background-position: top center; } footer .copyright { grid-column: 1/3; font-size: 0.6em; } footer .social { grid-column: 7/9; display: flex; justify-content: flex-end; } footer li { margin: 0 6px; } footer img { width: 20px; } /* POPUP */ .popup { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.8); display: flex; justify-content: center; align-items: center; } .popup:target { display: flex; } .popup-content { position: relative; max-width: 90%; max-height: 90%; } .popup img { width: 100%; height: auto; max-height: 100%; object-fit: contain; /*tilpasse proportionerne uden snit*/ } .close { position: absolute; top: 10px; right: 10px; text-decoration: none; color: var(--light-accent); font-size: 30px; font-weight: bold; background: rgba(0, 0, 0, 0.5); padding: 5px 10px; border-radius: 50%; z-index: 2; cursor: pointer; } .close:hover { background: rgba(255,255,255,0.08); color: var(--accent); } .thumbnail { cursor: pointer; max-width: 100%; border: 2px solid #ccc; transition: transform 0.3s ease; } .thumbnail:hover { transform: scale(1.05); } /* ----- SLIDESHOW UDEN JAVASCRIPT -----*/ /* SHOW SELECTED SLIDE ONLY */ .slides input[type="radio"] { display: none; } .slides figure { visibility: hidden; opacity: 0; transition: all 0.5s; } .slides input[type="radio"]:checked + figure { visibility: visible; opacity: 1; } /* SLIDES WRAPPER & SHARED*/ .slides { position: relative; max-width: 600px; height: 200px; padding:0; } .slides img, .slides figcaption, .slides label { position: absolute; } .slides label, .slides figcaption { color: var(--light-accent); background: rgba(0, 0, 0, 0.7); } /* SLIDE IMAGES */ .slides img { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } /* SLIDE CAPTION */ .slides figcaption { bottom: 0; left: 0; width: 100%; padding: 10px; text-align: center; } /* LAST & NEXT BUTTONS */ .slides label { top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-size: 1.5em; cursor: pointer; } .slides label.last { left: 5px; } .slides label.next { right: 5px; } /* Medium devices (landscape tablets, 768px and up) */ @media screen and (min-width: 768px) and (max-width: 991px) { body { font-size: 16px; } .grid { max-width: 720px; margin: 0 auto; padding: 0 15px; } .welcome-text { grid-column: 1 / 5; align-self: center; } .welcome-img { grid-column: 5 / 9; display: flex; justify-content: center; align-items: center; } .welcome-img img { width: 80%; } .projects { margin-top: 30px; } .projects a { grid-column: span 6; display: block; margin: 10px 0; } .projects a:last-child { grid-column: 3 / 7; } .projects a * { margin: 10px; max-width: 80%; margin-left: auto; margin-right: auto; } .projects h4 { text-align: center; font-size: 1.1em; } #works { padding: 20px 50px; } footer { background-size: 25%; padding: 30px 15px; } .footer-menu li { flex: 1 1 auto; text-align: center; } .button-hvid { padding: 8px; font-size: 0.9em; border-radius: 10px; } .button-hvid:hover { background-color: var(--light-accent); color: var(--primary); } } /* Extra large devices (large laptops and desktops, 1200px and up) */ @media screen and (min-width: 1200px){ body { font-size: 20px; } figcaption { font-size: 15px; } /* GRID SYSTEM */ .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; box-sizing: border-box; } /* TOPBAR NAVIGATION */ .site-nav{ padding: 0; } /* Logo */ .logo { grid-column: span 3; } /* MENU */ /* current page */ .current-page { background-image: url('img/circle.png'); background-position: center; background-size: contain; background-repeat: no-repeat; padding: 10px; position: relative; z-index: 1; } .current-page-green { background-image: url('img/circle_green.png'); } .hamburger-menu, .sidebar { display: none;} /* Dropdown menu navigation */ .dropdown { position: relative; display: inline-block; margin: 0 20px 0 20px; grid-template-rows: 180px; grid-column: span 2; } .dropbtn { background-color: rgba(0, 0, 0, 0); color: var(--accent); padding-top: 40%; font-size: 1em; border: none; cursor: pointer; font-family: 'Nunito', sans-serif; line-height: 1.4em; margin-left: 20px; padding-left: 40%; min-width: 140px; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 200px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown:hover .dropdown-content { display: block; } .dropdown-content a { color:var(--accent); padding: 12px 16px; text-decoration: none; display: block; } .dropdown-content a:hover { background-color: #f1f1f1; } /* --- end dropdawn menu ---*/ /* HOME PAGE */ #welcome, #portfolio, #works, #footer-widget{ padding: 90px 100px; } .welcome-img{ grid-column: 7/12; display: grid; max-width: 100%; } .leading{ margin: 20px 0; } /* PORTFOLIO */ .projects a:nth-child(1){ grid-column: 1/4; } .projects a:nth-child(2){ grid-column: 5/8; padding-top: 140px; } .projects a:nth-child(3){ grid-column: 9/12; } .projects a *{ max-width: 100%; margin: 30px 0%; } .button-hvid { background-color: transparent; border: 2px solid var(--light-accent); color: var(--light-accent); display: block; padding: 10px; font-size: 1em; text-decoration: none; border-radius: 15px; transition: all 0.3s ease; margin-top: 40px; } .button-hvid:hover { background-color: var(--secondary); color: grey; } /* WORKS */ /* 3. WORKS SECTION */ #works { display: grid; grid-template-columns: repeat(4, 1fr); justify-content: center; gap: 20px; padding: 40px; margin: 0 auto; max-width: 1200px; } #works h3{ grid-column: 1/-1; font-size: 2rem; text-align: center; } #works ul { margin: 40px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); justify-content: center; gap: 20px; grid-column: 1/-1; padding: 0; list-style: none; } #works li { padding: 20px; background: rgba(220, 233, 229,1); text-align: center; border-radius: 10px; transition: transform 0.3s ease, box-shadow 0.3x ease; display: flex; flex-direction: column; justify-content: center; align-items: center; grid-column: span 2; } #works li:hover { transform: scale(1.05); box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2); } #works img { height: 250px; margin: 10px auto; border-radius: 20%; } #works p{ text-align: center; margin: 0 20px; } /* SINGLE TOPIC PAGE */ #nota { display: grid; padding: 20px; background-color: var(--light-accent); grid-template-columns: repeat(6, 1fr); grid-column: auto; grid-template-areas: "tlt tlt tlt tlt tlt tlt" /* note titel */ "txt txt txt mgg mgg mgg" /* note tekst + billede */ "fqq fqq fqq vis vis vis" /* faq */ "ttt ttt ttt ttt ttt ttt" /* applicazione pratica: titolo */ "ppg ppg ppg vvs vvs vvs" /* praktisk anvendelse: titel */ "tll tll tll tll tll tll" /* undertekster */ "txx txx nls nls prf prf" /* tekst + dybdegående analyse + personlige refleksioner */ ". ftt ftt ftt ftt ."; gap: 0; } .nota-tlt { grid-area: tlt; padding: 10px; text-align: center; font-family: 'Marcellus', sans-serif; font-size: 2em; margin: 10px; background-color: rgba(252, 227, 255, 0.5); border-radius: 50%; text-align: center; } .nota-txt { grid-area: txt; padding: 10px; text-align: left; font-family: 'Nunito', sans-serif; font-size: 0.9em; color: #343333; grid-column: 1/4; padding:20px; } .nota-mgg, .nota-img{ grid-area: mgg; padding: 10px; width:100%; border-radius: 15%; margin-top: 20px; } .nota-fqq { grid-area: fqq; padding: 10px; max-width: 800px; background: var(--light-accent); } .faq h2 { text-align: left; margin-bottom: 20px; } details { margin-bottom: 10px; border: 1px solid var(--secondary); border-radius: 5px; padding: 10px; } summary { font-weight: bold; cursor: pointer; } summary::marker { color: var(--secondary); } details[open] summary { color: #4a4a4a; } details p { margin: 10px 0 0; } /* end faq section */ .nota-vis { grid-area: vis; padding: 10px; width:100%; border-radius: 15%; margin-top: 20px; } .nota-ttt { grid-area: ttt; background-color: var(--secondary); padding: 10px; text-align: center; font-family: 'Marcellus', sans-serif; font-size: 1em; } .nota-ppg { grid-area: ppg; padding: 80px; background-color: var(--secondary); text-align: left; font-family: 'Nunito', sans-serif; font-size: 1em; color: #343333; } .nota-vvs { grid-area: vvs; padding: 20px; width:100%; border-radius: 0; background: var(--secondary); margin: 0; } .nota-tll { grid-area: tll; text-align: center; font-family: 'Marcellus', sans-serif; font-size: 1em; background: var(--secondary); } .nota-txx { grid-area: txx; background: var(--secondary); padding: 30px; } .nota-nls { grid-area: nls; background: white; padding: 30px; } .nota-prf { grid-area: prf; background: rgba(252, 227, 255, 0.5); padding: 40px; } .nota-prf p { border-color: 2px solid var(--light-accent); font-family: 'Nunito', sans-serif; font-size: 1em; } .nota-ftt { grid-area: ftt; padding: 10px; align-items: center; } .nota h2 { text-align: center; margin: 0 auto; } video { width: 640px; aspect-ratio: auto 640 / 360; height: 360px; } /* FOOTER WIDGET */ #footer-widget { padding: 30px 20px; background: var(--secondary); justify-content: center; display: block; gap: 10px; box-sizing: border-box; } .footer-widget-text { margin-left: 20px; } .footer-widget-text a { margin: 20px 0; } #footer-widget h3 { margin-bottom: 20px; text-align: left; color: #333; } #footer-widget p { text-align: left; color: grey; } .footer-widget-img { margin:10px; max-width: 100%; display: inline-block; } .footer-widget-img img { width:150%; align-items: center; } .footer-widget-leading { color:#333; font-size: 1.1em; } /* FOOTER */ footer{ padding: 80px 0; background-size: 30%; } footer .copyright{ grid-column: 1/4; } footer .social{ grid-column: 8/13; } footer img{ width: 30px; } .footer-menu { display: none; } /* ----- SLIDESHOW UDEN JAVASCRIPT -----*/ /* SHOW SELECTED SLIDE ONLY */ .slides input[type="radio"] { display: none; } .slides figure { visibility: hidden; opacity: 0; transition: all 0.5s; } .slides input[type="radio"]:checked + figure { visibility: visible; opacity: 1; } /* SLIDES WRAPPER & SHARED*/ .slides { grid-column: 4/12; position: relative; max-width: 550px; height: 300px; padding: 0; display: grid; justify-content: center; align-items: center; } .slides img, .slides figcaption, .slides label { position: absolute; } .slides label, .slides figcaption { color: var(--light-accent); background: rgba(0, 0, 0, 0.7); } /* SLIDE IMAGES */ .slides img { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } /* SLIDE CAPTION */ .slides figcaption { bottom: 0; left: 0; width: 100%; padding: 10px; text-align: center; } /* LAST & NEXT BUTTONS */ .slides label { top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; font-size: 1.5em; cursor: pointer; } .slides label.last { left: 10px; } .slides label.next { right: 10px;} }