diff --git a/public/css/building.css b/public/css/building.css index fc40ef5..87addc6 100644 --- a/public/css/building.css +++ b/public/css/building.css @@ -5,7 +5,9 @@ body { color: #2b1b0f; } -/* Progress Bar */ +/* ========================= + Progress Bar +========================= */ .progress-bar { width: 100%; @@ -21,7 +23,9 @@ body { box-shadow: 0 0 6px #3cff3c; } -/* Popup */ +/* ========================= + Popup Fenster +========================= */ .building-popup { position: fixed; @@ -33,7 +37,7 @@ body { width: 460px; - background: url("/images/parchment.png") center/cover no-repeat; + background: url("/images/parchment.png") center / cover no-repeat; border: 4px solid #6b4b2a; @@ -46,16 +50,20 @@ body { display: none; z-index: 1000; + + animation: popupFade 0.25s ease; } -/* Header */ +/* ========================= + Popup Header +========================= */ .popup-header { padding: 14px; font-family: "Tangerine", serif; - font-size: 34px; + font-size: 36px; background: linear-gradient(#6b4b2a, #3c2414); @@ -74,7 +82,9 @@ body { cursor: pointer; } -/* Tabs */ +/* ========================= + Tabs +========================= */ .popup-tabs { display: flex; @@ -112,7 +122,9 @@ body { color: #2b1b0f; } -/* Content */ +/* ========================= + Popup Inhalt +========================= */ .popup-content { padding: 20px; @@ -123,14 +135,36 @@ body { line-height: 1.6; + letter-spacing: 0.5px; + background: rgba(255, 255, 255, 0.08); border-radius: 6px; - color: #2b1b0f; /* NEU */ + color: #2b1b0f; } -/* Tabs Content */ +/* Titel im Inhalt */ + +.popup-content h3 { + font-family: "Tangerine", serif; + + font-size: 32px; + + color: #3b2412; + + margin-top: 0; +} + +/* Text */ + +.popup-content p { + color: #3a2413; +} + +/* ========================= + Tab Inhalte +========================= */ .tab-content { display: none; @@ -140,7 +174,9 @@ body { display: block; } -/* Buttons */ +/* ========================= + Buttons +========================= */ .popup-content button { margin-top: 10px; @@ -170,7 +206,9 @@ body { 0 0 25px #caa24b; } -/* Animation */ +/* ========================= + Animation +========================= */ @keyframes popupFade { from { @@ -184,22 +222,10 @@ body { } } -.building-popup { - animation: popupFade 0.25s ease; -} - -/* Title */ +/* ========================= + Popup Titel +========================= */ #popup-title { font-weight: bold; } - -.popup-content h3 { - font-family: "Tangerine", serif; - font-size: 30px; - color: #3b2412; -} - -.popup-content p { - color: #3a2413; -}